Rules of ARIA use
https://www.w3.org/TR/using-aria/#what-does-adding-a-role-do-to-the-native-semantics
First rule: Avoid using it
If you can use a native HTML element [HTML5] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
Second rule: Use semantic elements, don't change the use of elements unless you absolutely have to (and you probably don't have to)
Do not change native semantics, unless you really have to.
Third rule: Add keyboard support where necessary
All interactive ARIA controls must be usable with the keyboard.
Hidden
It's ok to use aria-hidden="true" on something that you want to hide from AT. Only do this if it'd be redunant otherwise
Sectioning the content
Section, article, nav, and aside are announced by AT. Use them wisely
Each section should have a heading as the direct child element
Roles
- banner
- the preamble to the page, usually containing the main h1 heading and sometimes a role="navigation" landmark, too. Can only be used once per page.
- contentinfo
- information about the page and the website as a whole. The best place to put copyright and contact information. Can only be used once per page.
- main
- this is where the main content of your page goes. Visitors who’ve already read your banner on another page may want to skip straight to this. Can only be used once per page.
- navigation
- a landmark containing links to other pages of your site or important sections of the page itself. You can have multiple role="navigation" blocks. Can be nested in other landmarks such as banner and main. Can be used more than once per page but exercise restraint: it is not to be used on just any list of links.
- complementary
- easy to spell incorrectly as complimentary. This constitutes a landmark to contain subsidiary or tangential information. In HTML4 we might have labeled a prototype for this landmark sidebar. That doesn’t mean it has to appear on the side of your page, though: fat footers containing Twitter updates, lists of links to recommended sites, and other content probably qualify as complementary. This role maps to HTML5’s aside element. Probably best used only once per page.
- search
- a special role for any form in the page that lets you search or filter the site’s content. You may want to use the search role for site-wide searches, and searches within sections or single pages of a site. In which case, more than one of these may be applicable per page.
- form
- a generic role related to form used to identify any important areas for user input on the page. In single page applications, this role would identify any interactive parts of the application.
Headings are labels for content
Make sure you are not skipping heading levels. Don't put a H4 after an H2. Don't use Hx elements for styling. Get proper levels first, style with classes if you need to
Labeling a button
If you add text in the button, you've made a label
If you add an image in the button, use an alt tag
If you are using a character code, or icon font etc. use aria-label
You can use the id of another element to label the button, with aria-labelledby
For instance, this bold text will be the label of the button that follows it: Favorite
Multiple labelled by
you can set multiple ids on aria-labelledby
This is the start