Coverage and Quality Reports
Page last updated: July 23, 2024
About These Reports
The APG Task Force uses the reports on this page to help plan content improvements. The reports provide data about the scope and quality of content in the APG. The data delineates:
- Which ARIA attributes (roles, states, or properties) have usage demonstrated by an example.
- Which ARIA attributes have usage guidance provided by a pattern or practice.
- Which ARIA attributes are not covered by APG guidance or examples.
- Which APG examples implement specific coding practices specified in the APG code guide.
The data in the reports are generated by a script that is run by a GitHub action workflow when the main branch of the aria-practices repository is updated. The script will indicate that an ARIA attribute has guidance in a pattern or practice if any of the following conditions are met:
- The ARIA attribute is included in the text of a heading (e.g.
h2
-h6
) within the content of a pattern or practice. -
The ARIA attribute is included within either the
data-aria-roles
ordata-aria-props
attribute specified on a heading within a pattern or practice. These data attributes may contain a space separated list of values.
If either of the data attributes is specified on a heading, the content of that heading will not be processed. In the generated report, the suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading.
The following files and reports are generated:
- CSV Files of Role, Properties and States Coverage
- Roles with no Guidance or Examples (28)
- Roles with at Least One Guidance or Example (13)
- Roles with More than One Guidance or Example (37)
- Properties and States with no Examples (12)
- Properties and States with One Examples (8)
- Properties and States with More than One Example (28)
- Example Coding Practices
CSV Formatted Reports of Role, Property, and State Coverage
Roles with No Guidance or Examples (28)
application
caption
code
definition
deletion
directory
document
emphasis
figure
generic
heading
img
input
insertion
list
listitem
log
marquee
math
paragraph
progressbar
rowheader
scrollbar
searchbox
status
term
textbox
timer
Roles with at Least One Guidance or Example (13)
Role | Guidance | Example |
---|---|---|
alertdialog |
Alert Dialog | |
article |
Infinite Scrolling Feed | |
columnheader |
Table | |
complementary |
Complementary | Complementary Landmark |
feed |
Feed Pattern | Infinite Scrolling Feed |
link |
Link Pattern | Link |
main |
Main | Main Landmark |
menuitemcheckbox |
Editor Menubar | |
rowgroup |
Table | |
search |
Search | Search Landmark |
separator |
Editor Menubar | |
tooltip |
Tooltip Pattern | |
treegrid |
Treegrid Pattern | Treegrid Email Inbox |
Roles with More than One Guidance or Example (37)
Properties and States with No Guidance or Examples (12)
aria-details
aria-dropeffect
aria-errormessage
aria-flowto
aria-grabbed
aria-invalid
aria-keyshortcuts
aria-multiline
aria-placeholder
aria-readonly
aria-relevant
aria-required
Properties and States with at Least One Guidance or Example (8)
Property or State | Guidance | Example |
---|---|---|
aria-atomic |
Alert | |
aria-busy |
Infinite Scrolling Feed | |
aria-colcount |
Using aria-colcount and aria-colindex | Data Grid |
aria-colspan |
Defining cell spans using aria-colspan and aria-rowspan | |
aria-multiselectable |
Listboxes with Rearrangeable Options | |
aria-orientation |
Vertical Temperature Slider | |
aria-owns |
Navigation Treeview | |
aria-rowspan |
Defining cell spans using aria-colspan and aria-rowspan |
Properties and States with More than One Guidance or Example (28)
Code Quality
Coding Summary
Total Examples | 60 |
---|---|
High Contrast Documentation | 31 |
Uses SVG | 34 |
Uses forced-colors media query |
2 |
Uses currentColor value |
27 |
Uses event.KeyCode |
16 |
Uses event.which |
8 |
Use Class | 36 |
Use Prototype | 22 |
Mouse Events | 15 |
Pointer Events | 11 |
Coding Practices
Example | Created Using | Uses event.keyCode |
Uses event.which |
High Contrast Documentation | Example Code ID | Roles in Javascript and HTML | Roles in Documentation | aria-* Attributes in Javascript and HTML | aria-* Attributes in Documentation | Differences between the documentation and the source code. |
---|---|---|---|---|---|---|---|---|---|---|
Accordion | class | ex1 | 1 | 1 | 5 | 3 | aria-hidden,aria-required | |||
Alert | ex1 | 1 | 1 | 0 | 2 | aria-live,aria-atomic | ||||
Alert Dialog | prototype | Yes | Yes | ex_alertdialog | 2 | 2 | 5 | 4 | aria-hidden | |
Breadcrumb | ex1 | 1 | 0 | 2 | 2 | navigation | ||||
Button (IDL Version) | Yes | example | 1 | 1 | 2 | 2 | ||||
Button | Yes | example | 1 | 1 | 2 | 1 | aria-hidden | |||
Auto-Rotating Image Carousel with Buttons for Slide Control | prototype | ex1 | 2 | 2 | 4 | 4 | ||||
Auto-Rotating Image Carousel with Tabs for Slide Control | prototype | Yes | ex1 | 4 | 4 | 5 | 5 | |||
Checkbox (Mixed-State) | class | Yes | ex1 | 1 | 1 | 2 | 2 | |||
Checkbox (Two State) | class | Yes | ex1 | 2 | 2 | 2 | 2 | |||
Editable Combobox With Both List and Inline Autocomplete | class | Yes | ex1 | 3 | 3 | 7 | 6 | aria-hidden | ||
Editable Combobox With List Autocomplete | class | Yes | ex1 | 3 | 3 | 7 | 6 | aria-hidden | ||
Editable Combobox without Autocomplete | class | Yes | ex1 | 3 | 3 | 7 | 6 | aria-hidden | ||
Date Picker Combobox | class | Yes | ex1 | 4 | 3 | 11 | 10 | gridcell,aria-hidden | ||
Select-Only Combobox | prototype | ex1 | 2 | 3 | 6 | 5 | option,aria-haspopup | |||
Editable Combobox with Grid Popup | prototype | Yes | Yes | ex1 | 2 | 4 | 7 | 7 | row,gridcell | |
Date Picker Dialog | class | Yes | Yes | example | 3 | 2 | 6 | 6 | gridcell | |
Modal Dialog | prototype | Yes | Yes | ex1 | 1 | 1 | 3 | 3 | ||
Disclosure (Show/Hide) for Answers to Frequently Asked Questions | class | Yes | ex1 | 0 | 0 | 2 | 2 | |||
Disclosure (Show/Hide) for Image Description | class | Yes | ex1 | 0 | 0 | 3 | 2 | aria-labelledby | ||
Disclosure Navigation Menu with Top-Level Links | class, prototype | ex1 | 4 | 0 | 5 | 3 | banner,contentinfo,navigation,region,aria-label,aria-labelledby | |||
Disclosure Navigation Menu | class, prototype | Yes | ex1 | 2 | 0 | 4 | 3 | navigation,region,aria-label | ||
Feed Display | prototype | Yes | Yes | not found | 0 | 0 | 6 | 0 | aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize | |
Infinite Scrolling Feed | ex1 | 0 | 2 | 0 | 5 | feed,article,aria-labelledby,aria-busy,aria-describedby,aria-posinset,aria-setsize | ||||
Advanced Data Grid | prototype | Yes | Yes | ex1 | 0 | 0 | 5 | 0 | aria-colindex,aria-controls,aria-haspopup,aria-rowindex,aria-sort | |
Data Grid | prototype | Yes | Yes | ex1 | 4 | 1 | 8 | 6 | button,menu,menuitem,aria-controls,aria-haspopup | |
Layout Grid | prototype | Yes | Yes | ex1 | 5 | 3 | 9 | 3 | button,region,aria-colindex,aria-haspopup,aria-label,aria-live,aria-relevant,aria-sort | |
Link | Yes | not found | 1 | 1 | 1 | 1 | ||||
(Deprecated) Collapsible Dropdown Listbox | class, prototype | ex | 2 | 2 | 8 | 5 | aria-disabled,aria-keyshortcuts,aria-multiselectable | |||
Listbox with Grouped Options | class, prototype | ex | 4 | 3 | 7 | 4 | presentation,aria-disabled,aria-keyshortcuts,aria-multiselectable | |||
Listboxes with Rearrangeable Options | class, prototype | ex1 | 3 | 2 | 9 | 5 | toolbar,aria-disabled,aria-keyshortcuts,aria-label,aria-live | |||
Scrollable Listbox | class, prototype | ex | 2 | 2 | 7 | 4 | aria-disabled,aria-keyshortcuts,aria-multiselectable | |||
Actions Menu Button Using aria-activedescendant | class | Yes | ex1 | 2 | 2 | 5 | 5 | |||
Actions Menu Button Using element.focus() | class | Yes | ex1 | 2 | 2 | 4 | 4 | |||
Navigation Menu Button | class | Yes | ex1 | 3 | 3 | 4 | 4 | |||
Editor Menubar | class | Yes | ex1 | 8 | 7 | 7 | 6 | none,aria-orientation | ||
Navigation Menubar | class | Yes | ex1 | 9 | 8 | 6 | 5 | separator,aria-orientation | ||
Meter | prototype | example | 1 | 1 | 5 | 4 | aria-hidden | |||
Radio Group Using aria-activedescendant | class | Yes | ex1 | 2 | 2 | 3 | 3 | |||
Rating Radio Group | class | Yes | ex1 | 3 | 3 | 3 | 3 | |||
Radio Group Using Roving tabindex | class | Yes | ex1 | 2 | 2 | 2 | 2 | |||
Horizontal Multi-Thumb Slider | class | Yes | ex1 | 2 | 2 | 5 | 5 | |||
Color Viewer Slider | class | Yes | ex1 | 2 | 2 | 5 | 5 | |||
Rating Slider | class | Yes | ex1 | 1 | 1 | 6 | 6 | |||
Media Seek Slider | class | Yes | ex1 | 2 | 2 | 6 | 6 | |||
Vertical Temperature Slider | class | Yes | ex1 | 2 | 2 | 7 | 7 | |||
Date Picker Spin Button | prototype | Yes | example | 2 | 2 | 7 | 7 | |||
Switch Using HTML Button | class | Yes | ex1 | 2 | 2 | 3 | 3 | |||
Switch Using HTML Checkbox Input | class | Yes | ex1 | 1 | 1 | 1 | 1 | |||
Switch | class | Yes | ex1 | 1 | 1 | 2 | 2 | |||
Sortable Table | class | Yes | ex1 | 0 | 0 | 2 | 2 | |||
Table | ex1 | 5 | 5 | 2 | 2 | |||||
Tabs with Automatic Activation | class | Yes | ex1 | 3 | 3 | 3 | 3 | |||
Tabs with Manual Activation | class | Yes | ex1 | 3 | 3 | 3 | 3 | |||
Toolbar | not found | 0 | 0 | 0 | 0 | |||||
Toolbar | prototype | Yes | ex1 | 6 | 6 | 12 | 12 | |||
Treegrid Email Inbox | prototype | Yes | ex1 | 3 | 3 | 7 | 5 | aria-activedescendant,aria-current | ||
File Directory Treeview Using Computed Properties | prototype | Yes | ex1 | 3 | 3 | 4 | 3 | aria-label | ||
File Directory Treeview Using Declared Properties | prototype | Yes | ex1 | 3 | 3 | 7 | 6 | aria-label | ||
Navigation Treeview | class | Yes | Yes | ex1 | 8 | 8 | 5 | 5 |