INFO PAGE
Accessibility
ARIA
ARIA stands for Accessible Rich Internet Applications. These are guidelines that help you develop accessible interactive and dynamic applications beyond static text and image HTML. ARIA consists of attributes and values you add to existing elements to make those elements and their content more accessible. ARIA attributes consist of roles, properties, and states.
ROLES
nav, header, footer are roles but if you have a roll, for instance, search - that is not provided use the role parameter. Do not repeat roles for instance <button role=button> // do not do this!
PROPERTIES
announce extra information for screen readers such as aria-required.
STATES
announce states of such as aria-invalid replacing colors or pop-ups
ACCESSIBILITY RULES
01 FAVOUR EXISTING If you can use an HTML element/attribute with the semantics/behaviour you need, do it. Use <nav> not <div role=nav>
02 DO NOT CHANGE SEMANTICS Do not change an element's semantics unless it's absolutely necessary.
03 KEYBOARD All interactive ARIA elements must be usable with a keyboard - tabs for buttons, space or enter for activate.
04 DO NOT HIDE ACTIONS Interactive elements that are focusable should never be hidden by adding role="presentation" or aria-hidden="true".
05 ACCESSIBLE NAMES All interactive elements must have an accessible name. Do not use <a>click here</a> use <a>Site Name</a>
FORMS
Forms are very important to people to communicate, get and set information for accounts, shopping, etc. They can also be complex so it is important to get Accessibility correct. Here are some tips:
ACCESSABILITY TIPS
01 <input tabindex=1> tabindex will help logically guide people and screen readers
02 <input autocomplete=postal-code> Autocomplete will help people with visual or cognitive disability. There are dozens of prompts as well for specific types of data.
03 <label for=postal>postal code <input id=postal></label> Use a labels which will be shown in tips and read by screen readers.
04 <button aria-label="Search" type="submit"> Use aria-label for items without a separate label.
05 <button aria-labelby="other_id" type="submit"> Use aria-labelby to have screen readers read an existing alternative label for the item.