Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/filipelinhares/wai-aria-cheatsheet

:eyeglasses: Aria roles and attr cheatsheet. Best pactrices, see ⇢
https://github.com/filipelinhares/wai-aria-cheatsheet

accessibility aria aria-roles wai-aria-cheatsheet

Last synced: 28 days ago
JSON representation

:eyeglasses: Aria roles and attr cheatsheet. Best pactrices, see ⇢

Awesome Lists containing this project

README

        

# WAI-ARIA cheatsheet
Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.
*- Source [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA)*

- [Roles](#roles)
- [Widget roles](#widget-roles)
- [alert](#alert)
- [alertdialog](#alertdialog)
- [button](#button)
- [checkbox](#checkbox)
- [dialog](#dialog)
- [gridcell](#gridcell)
- [link](#link)
- [log](#log)
- [marquee](#marquee)
- [menuitem](#menuitem)
- [menuitemcheckbox](#menuitemcheckbox)
- [menuitemradio](#menuitemradio)
- [option](#option)
- [progressbar](#progressbar)
- [radio](#radio)
- [scrollbar](#scrollbar)
- [slider](#slider)
- [spinbutton](#spinbutton)
- [status](#status)
- [tab](#tab)
- [tabpanel](#tabpanel)
- [textbox](#textbox)
- [timer](#timer)
- [tooltip](#tooltip)
- [treeitem](#treeitem)
- [combobox](#combobox)
- [grid](#grid)
- [listbox](#listbox)
- [menu](#menu)
- [menubar](#menubar)
- [radiogroup](#radiogroup)
- [tablist](#tablist)
- [tree](#tree)
- [treegrid](#treegrid)
- [Document structure roles](#document-structure-roles)
- [article](#article)
- [columnheader](#columnheader)
- [definition](#definition)
- [directory](#directory)
- [document](#document)
- [group](#group)
- [heading](#heading)
- [img](#img)
- [list](#list)
- [listitem](#listitem)
- [math](#math)
- [note](#note)
- [presentation](#presentation)
- [region](#region)
- [row](#row)
- [rowgroup](#rowgroup)
- [rowheader](#rowheader)
- [separator](#separator)
- [toolbar](#toolbar)
- [Landmark roles](#landmark-roles)
- [application](#application)
- [banner](#banner)
- [complementary](#complementary)
- [contentinfo](#contentinfo)
- [form](#form)
- [main](#main)
- [navigation](#navigation)
- [search](#search)
- [State and properties](#state-and-properties)
- [Potential Value Types](#potential-value-types)
- [Widget attributes](#widget-attributes)
- [aria-autocomplete](#aria-autocomplete)
- [aria-checked - *(state)*](#aria-checked---state)
- [aria-current - *(state)*](#aria-current---state)
- [aria-disabled - *(state)*](#aria-disabled---state)
- [aria-expanded - *(state)*](#aria-expanded---state)
- [aria-haspopup](#aria-haspopup)
- [aria-hidden - *(state)*](#aria-hidden---state)
- [aria-invalid - *(state)*](#aria-invalid---state)
- [aria-label](#aria-label)
- [aria-level](#aria-level)
- [aria-multiline](#aria-multiline)
- [aria-multiselectable](#aria-multiselectable)
- [aria-orientation](#aria-orientation)
- [aria-pressed - *(state)*](#aria-pressed---state)
- [aria-readonly](#aria-readonly)
- [aria-required](#aria-required)
- [aria-selected - *(state)*](#aria-selected---state)
- [aria-sort](#aria-sort)
- [aria-valuemax](#aria-valuemax)
- [aria-valuemin](#aria-valuemin)
- [aria-valuenow](#aria-valuenow)
- [aria-valuetext](#aria-valuetext)
- [Live region attributes](#live-region-attributes)
- [aria-atomic](#aria-atomic)
- [aria-busy - *(state)*](#aria-busy---state)
- [aria-live](#aria-live)
- [aria-relevant](#aria-relevant)
- [Drag-and-Drop Attributes](#drag-and-drop-attributes)
- [aria-dropeffect](#aria-dropeffect)
- [aria-grabbed](#aria-grabbed)
- [Relationship Attributes](#relationship-attributes)
- [aria-activedescendant](#aria-activedescendant)
- [aria-controls](#aria-controls)
- [aria-describedby](#aria-describedby)
- [aria-flowto](#aria-flowto)
- [aria-labelledby](#aria-labelledby)
- [aria-owns](#aria-owns)
- [aria-posinset](#aria-posinset)
- [aria-setsize](#aria-setsize)

## Roles
ARIA allows developers to declare a semantic **role** for an element that otherwise offers incorrect or no semantics. For example, when an unordered list is used to create a menu, the `