Tables

• Inaccessible table
  • Cells not connected to their headers.
  • Caption not connected to table.
• Accessible table
  • th with scope attribute used (H63).
  • caption used (H39).

Text alternatives

• Inaccessible images and icons
  • No text alternative
  • Icon glyph is exposed to screen reader
• Inaccessible images and icons
  • Visually hidden text alternative
  • Icon element hidden reliably from screenreaders using a custom element with aria-hidden="true" role="presentation"

Form markup and validation

• Inaccessible form
  • label tags omitted or hidden.
  • Required fields not properly marked.
  • Inaccessible datepicker widget from UI framework.
  • Inaccessible styled select and checkbox.
  • Unnoticed insertion of error message.
  • No connection of error messages to invalid fields.
• Accessible form
  • label tags used (H44).
  • Required fields indicated with text (H90).
  • Using native elements for select and datepicker.
  • Tooltip inserted into label tags.
  • Error messages inserted into label tags (G83).
  • First invalid field focused (SCR18).
• Form validation using ARIA
  • aria-required used to mark required field (ARIA2).
  • aria-invalid used to dynamically mark invalid field.
  • aria-describedby used to connect tooltips and error messages to field.
• HTML5 form validation
  • required attribute used to mark required fields.

Content structure

• Inaccessible content structure
  • No useful heading structure.
  • No skip navigation.
• Accessible content structure
  • Visually hidden heading in each areas indicates its content.
  • Content areas use the semantically appropriate tags.
  • Visually hidden but focusable skip navigation allows to jump to specific areas.

ARIA

• Inaccessible auto-suggest
  • Suggestions not keyboard or screenreader accessible.
  • Screenreader users receivce no information about the suggestions.
• Accessible auto-suggest
  • Suggestions are keyboard-accessible.
  • ARIA live region tells the user about the suggestions.
  • ARIA roles listbox (container) and option (suggestions) added.
  • ARIA state aria-expanded toggled when suggestions are shown/hidden.
• Inaccessible modal
  • The user is not informed about the opened modal.
  • Interaction with elements outside of it is still possible.
• Accessible modal
  • Focus is trapped within modal (via some JavaScript intercepting tabbing), main page content is hidden. The user can only interact with the modal.
  • ARIA role dialog is used to inform the user about the nature of this component.
• Accessible modal (native dialog)
  • Using the native dialog element in combination with dialog.showModal() takes care of everything (assuming a recent browser).
• Inaccessible DIY button
  • Not focusable
  • Not triggerable using the keyboard
• Accessible DIY button
  • Fake button supplied with role="button" and tabindex="0" attributes.
  • keydown listener for enter and space keys added (w3c example).

Visual aspects

• Inaccessible focus styles
  • "outline:none" used to remove focus outline. No visual indication on focus.
• Accessible focus styles
  • Using :focus-visible pseudo-class to decide whether to remove outline.