-
Notifications
You must be signed in to change notification settings - Fork 4
Accessibility
Use this checklist below to ensure an acceptable level of accessibility.
-
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 emptyalt=""
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.
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.
-
Inputs always have associated labels
-
Inputs should use an associated type attribute (e.g.
search
,tel
,email
, 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 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.