Skip to content

Coverage and Quality Reports

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 or data-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 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)

NOTE: The HC abbreviation means example has High Contrast support.

Roles with More than One Guidance or Example (37)

NOTE: The HC abbreviation means example has High Contrast support.
Role Guidance Examples
alert
banner Banner
button
cell Table
checkbox Checkbox Pattern
combobox
contentinfo Contentinfo
dialog
form Form Landmark
grid
gridcell
group
listbox
menu
menubar Menu and Menubar Pattern
menuitem
menuitemradio
meter Meter
navigation
none
note
option
presentation
radio
radiogroup
region Region
row
slider
spinbutton Spinbutton Pattern
switch Switch Pattern
tab Keyboard Navigation Between Components (The Tab Sequence)
table Table
tablist
tabpanel
toolbar Toolbar
tree
treeitem

Properties and States with No Guidance or Examples (12)

NOTE: The HC abbreviation means example has High Contrast support.
  • 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)

NOTE: The HC abbreviation means example has High Contrast support.

Properties and States with More than One Guidance or Example (28)

NOTE: The HC abbreviation means example has High Contrast support.
Property or State Guidance Examples
aria-activedescendant Managing Focus in Composites Using aria-activedescendant
aria-autocomplete
aria-checked
aria-colindex Data Grid
aria-controls
aria-current
aria-describedby Describing by referencing content with aria-describedby
aria-disabled
aria-expanded
aria-haspopup
aria-hidden
aria-label Naming with a String Attribute Via aria-label
aria-labelledby Naming with Referenced Content Via aria-labelledby
aria-level
aria-live
aria-modal
aria-posinset
aria-pressed
aria-roledescription
aria-rowcount Using aria-rowcount and aria-rowindex
aria-rowindex Using aria-rowcount and aria-rowindex
aria-selected
aria-setsize
aria-sort Indicating sort order with aria-sort
aria-valuemax Using aria-valuemin, aria-valuemax and aria-valuenow
aria-valuemin
aria-valuenow Using aria-valuemin, aria-valuemax and aria-valuenow
aria-valuetext Using aria-valuetext

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

SVG and High Contrast Techniques

Example SVG in HTML SVG in CSS SVG in JS forced-colors media query currentColor value
Accordion Yes
Alert Dialog Yes Yes
Breadcrumb Yes
Button (IDL Version) Yes Yes
Button Yes Yes
Auto-Rotating Image Carousel with Buttons for Slide Control Yes Yes
Auto-Rotating Image Carousel with Tabs for Slide Control Yes Yes
Checkbox (Mixed-State) Yes Yes
Checkbox (Two State) Yes Yes
Editable Combobox With Both List and Inline Autocomplete Yes Yes Yes
Editable Combobox With List Autocomplete Yes Yes Yes
Editable Combobox without Autocomplete Yes Yes Yes
Date Picker Combobox Yes Yes
Disclosure (Show/Hide) for Answers to Frequently Asked Questions Yes Yes
Disclosure (Show/Hide) for Image Description Yes Yes
Feed Display Yes Yes Yes Yes
Link Yes
(Deprecated) Collapsible Dropdown Listbox Yes
Listbox with Grouped Options Yes
Listboxes with Rearrangeable Options Yes
Scrollable Listbox Yes
Actions Menu Button Using aria-activedescendant Yes Yes Yes
Actions Menu Button Using element.focus() Yes Yes Yes
Navigation Menu Button Yes Yes Yes
Editor Menubar Yes
Navigation Menubar Yes Yes Yes Yes
Meter Yes
Radio Group Using aria-activedescendant Yes
Rating Radio Group Yes Yes Yes
Radio Group Using Roving tabindex Yes
Horizontal Multi-Thumb Slider Yes Yes Yes Yes
Color Viewer Slider Yes Yes Yes Yes
Rating Slider Yes Yes Yes Yes Yes
Media Seek Slider Yes Yes Yes Yes
Vertical Temperature Slider Yes Yes Yes Yes
Date Picker Spin Button Yes Yes
Switch Using HTML Button Yes Yes Yes Yes
Sortable Table Yes
Toolbar Yes Yes
Treegrid Email Inbox Yes
Navigation Treeview Yes Yes Yes

Mouse and Pointer Events

Back to Top