A11y & ARIA LABELS

what is A11Y

A ccessibilit y

A 11 y

What is web Accessibility

Its an idea that technology must be equally accessible to people with and without disabilities

What does web accessibility Includes

• Accessible Navigation
• Keyboard Accessibility (for screen reader when using the tab key to navigate)
• Color Contrast (Background and text color)
• Headings and Structure
• Accessible names for interactive elements
• Responsive Design
• Descriptive Links
• Alternative Text (Alt Text)

ARIA

ARIA — short for Accessible Rich Internet Applications — defines a way to make web content and web applications more accessible to people with disabilities.

ARIA can be used to enhance an HTML document by providing additional accessibility information about web pages

aria-colindex

Hidden header

ARIA provides several attributes to provide information about table, grid, and treegrid structures. The aria-colindex attribute defines the substructure, an element's column index or position with respect to the total number of columns, within such structures.

an example of aria-colindex

aria-label

The aria-label should be used to provide a text alternative to an element that has no visible text on the screen.

						
								send // accessible name: send
								send // accessible name: send
							  
					

How to use

You can make use of aria-label by adding it to certain HTML elements.

WHAT ELEMENTS CAN BE USED WITH ARIA-LABEL

• interactive elements: such as a (when href attribute is present), audio and video (when controls attribute is present), input, select, button, textarea.
• implicit landmark elements: such as header, footer, nav, main, aside, section, and form.

WHEN TO USE

You should use it when you have non-textual indication of an element's purpose, but still need to provide text alternates for users who use assistive technology, such as screen readers.

TIP:LABELLING BEST PRACTICE
You don't need to add "button" in the label as screen readers already announce an element's role.

									
										// BAD: "send button, button"
										...
										// GOOD: "send button"
										...
									
								

EXAMPLE 1

x

EXAMPLE 2

EXAMPLE 3

Take 3 mins and see why to use?

Aria-details provides a set of information and data in a hierarchical and organized manner.

Such information may include illustrations, external links, or any form of extended information.

extended information that describes

the illustration from the artworks presented

What is ARIA-SORT

ARIA-SORT is a part of the WAI-ARIA specification, enhancing web accessibility. It indicates if items in a table are sorted in ascending, descending, none, or other order. The `aria-sort` attribute informs assistive technologies about the current sorting state of a column or row header. It should be added to a single header at a time and doesn't impact the actual sort order.

Example:

					
					  <table>
							<thead>
								<tr>
									<th aria-sort="ascending">Last Name</th>
								</tr>
							</thead>
							<tbody>
								
							</tbody>
					  </table>
					
				  

If a user clicks on the Last Name header, the `aria-sort` value toggles between "ascending" and "descending" with JavaScript. It provides information about the sorted column to assistive technology users.

Values:

• Ascending (`aria-sort="ascending"`): Column sorted in ascending order.
• Descending (`aria-sort="descending"`): Column sorted in descending order.
• None (`aria-sort="none"`): Column not currently sorted.

Summary

ARIA-SORT is a crucial attribute enhancing accessibility for sortable tables. It communicates the sorting state to assistive technology users, improving interaction and understanding of data tables.

Thanks for your attention!

aria-valuetext

The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget. Numbers — even percentages — aren't always user-friendly. Assistive technologies present aria-valuenow as numeric values.
The aria-valuenow attribute defines the current value for a range widget.

Example:

					
					  <p id="birthyearLabel" >What year were you born?</p>
						<div
						role="spinbutton"
						tabindex="-1"
						aria-valuenow="1984"
						aria-valuemin="1900"
						aria-valuemax="2021"
						aria-labelledby="birthyearLabel">
						  <span class="value">1984</span>
						  <span role="button">
						  <span aria-hidden="true">+</span>
						  Increment year by 1
						  </span>
						  <span role="button">
						  <span aria-hidden="true">-</span>
						  Decrement year by 1
						  </span>
						  </div>
						
				

The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget. Numbers — even percentages — aren't always user-friendly. Assistive technologies present aria-valuenow as numeric values.

If a progress bar is at 8%, what does that mean? aria-valuetext provides a way of presenting the current value in a more user-friendly, human-understandable way. For example, a battery meter value might be conveyed as aria-valuetext="8% (34 minutes) remaining".

The aria-valuetext attribute is used with the aria-valuenow attribute, not instead of it, unless that value is not known. aria-valuetext is only needed when the numeric value of aria-valuenow is not meaningful. For example, a range's values are numeric but may be used for non-numeric values, such as college class level.

The values of aria-valuenow for a 4-year college could range from 1 through 4, which indicate the position of each value in the value space. In this case, the aria-valuetext could be one of the strings: "first year", "sophomore", "junior", and enior".

If the numeric value is meaningful, such as a spinner with aria-valuenow="3" for how many pizza slices you want to order, aria-valuetext is not needed.

When both the aria-valuetext and aria-valuenow are included, the aria-valuetext is announced. When there is no aria-valuetext attribute, assistive technologies will announce the aria-valuenow attribute for the current value.

And this is all you need to know about the aria-valuetext! Or not? Feel free to ask any questions!