Skip to content

Accessibility

Riccardo Andreatta edited this page Mar 9, 2021 · 1 revision

Use this checklist below to ensure an acceptable level of accessibility.

Miscellaneous

  • Use open web standards such as HTML, CSS, JavaScript

  • Vet HTML and CSS using their respective W3C validators (HTML/CSS)

  • Include visually-hidden skip navigation that is operable via keyboard focus

  • Focus styles should be present and visible for keyboard operability

  • Images should always have an alt attribute , where its value conveys the same thing that is communicated to a sighted user. Decorative images that provide no important meaning to non-sighted users should utilize an empty alt="" value. This ensures screen readers omit them from announcements.

  • Timed responses are properly indicated to users.

  • All form fields can be activated, operated and submitted using a keyboard.

  • Users can control galleries and modal windows using a keyboard.

Navigations

These points are taken from W3C's Accessible Menus Tutorial.

  • Use informed markup. Use informed labeling for the navigation itself along with current nav items. Labeling could be done via visually-hidden text or WAI-ARIA labels.

  • Navigations should have proper states (active, hover, focus, current, visited).

  • Dropdown navigations should be mouse/touch/keyboard operable and should leverage WAI-ARIA markup.

Web Forms

  • Inputs always have associated labels

  • Inputs should use an associated type attribute (e.g. searchtelemail, etc)

  • Make sure required fields are visually indicated as such (e.g. an asterisk *)

  • All form fields can be operated using a keyboard, with apparent focus styles.

  • Validation messages show all errors at once instead of progressively showing more errors

  • Validation messages use same field names as form and in the same order

Color

Color combinations should be in compliance with WCAG 2.0 minimum contrast. Use a color contrast checker to ensure your ratio meets the standard.

Important information should not be conveyed with color alone. Use other visual identifiers like font-weight, sizing, shapes, special characters.

Clone this wiki locally