Introduction to ARIA for HTML

Why care about Accessibility?

Have you ever tried to use a website with your eyes closed, or with the screen turned off? You have no context of what is going on or what you’ve clicked. People with disabilities use screen readers - apps that read out the screen to you.

In the beginning it can be a nightmare of overlapping words and vague descriptions like “button”, leaving you with no idea what the button does. But a properly coded website labels its buttons and other components so you hear something like: “signout button” instead.

Isn’t that clearer?

Who are the Target Users?

• Search Engines
• Blind users
• Dexterity-impaired users
• Users with cognitive or learning impairments
• Low Vision users
• Motor Impaired users
• Colour Blind users
• Deaf Users
• Cell phone/mobile Users
• Temporary Disabled Users
• Unusual Circumstance Users
• Users on a website while multitasking
• Children and novice-internet users
• Seniors

How do I Start Coding?

ARIA - Accessible Rich Internet Applications provides a syntax for making HTML tags (and other markup languages) readable by screen readers.

The most basic aria syntax is using roles. Roles tell the screen reader what category the tag belongs to - eg. a button, menu or checkbox.

Using Roles

In HTML, use elements with specific usage. Don’t just use a div if you need a checkbox, that way it will have some accessibility features already built into it.
eg. <input type=”checkbox” role=”checkbox”>
not <div role=”checkbox”>

Tips:

• The role of the element more important than the HTML tag it’s on


• Do not change a role dynamically once you set it, this will just confuse your users

What’s Next? Establish Relationships

These are the aria attributes that establish relationships between different tags:

1. Aria-activedescendant
2. Aria-controls
3. Aria-describedby
4. Aria-flowto
5. Aria-labelledby
6. Aria-owns
7. Aria-posinset
8. aria-setsize

Aria-describedby & Aria-labelledby

• Explains the purpose of the element it’s on
• Most commonly used, and most useful
• Create a paragraph tag with the label/description info and place it somewhere off the page

CSS recommended:

The great thing is that you don't' have to add any css to hide the paragraphs pointed to by aria-labelled by and aria-described by.
All you have to do is add the property `hidden` to your html tag!
Reference: Hidden attribute

Code Example

Aria-activedescendant

• Shows which child is active
• Must be on a visible element
• Must be someone’s descendant
• Or must be owned by another element using aria-owns

eg. on a textbox inside combo-box

Code Example

Aria-controls

• If you click or change the value of one element, it will affect another

Eg. If you click a button Add, number will be increased by 10

Code Example

Aria-flowto

• Indicates which element to look at/read next
• Doesn’t affect tab order
• Only supported by FF and ie
• Reads flowto only when you press = key so it’s not very useful
• Can flow to > 1 element

Code Example

Aria-owns

• Indicates who the parent of a child is
• Do not use if parent/child relationship is in DOM
• A child can only have 1 parent

Code Example

Aria-posinset & Aria-setsize

aria-posinset

• Indicates the position of an item in a set
• Don’t use it if all the items of the set are already present (browser calculates)

aria-setsize

• Number of items in the whole set

Code Example

Change Aria Properties Dynamically (except Roles!)

• Eg. Aria-checked on the chosen checkbox
• Keeps the user up to date with page changes

Make Keyboard Navigation Intuitive

• Enable navigation using up and down arrow keys
• Enable select with space and enter

Review of Aria Process

1. Choose HTML tags that are more specific to your needs
2. Find the right roles
3. Look for groups and build relationships
4. Use states and properties in response to events
5. Make Keyboard Navigation Intuitive

Reference: https://www.w3.org/TR/wai-aria-primer