Accessibility auditing testing site
We setup this site to test our tools and our auditors. We deliberately introduced 142+ accessibility barriers to page(s) content organized into several categories. We continue to use these pages are in the process of updating them and adding more items to test to both improve our automated scanners as well as our auditors.
Break down of what we tested
-
Color and Contrast
- Color alone is used to convey content
- Small text does not have a contrast ratio of at least 4.5:1 so does not meet AA
- Large text does not have a contrast ratio of at least 3:1 so does not meet AA
- Small text does not have a contrast ratio of at least 7:1 so does not meet AAA
- Large text does not have a contrast ratio of at least 4.5:1 so does not meet AAA
- Focus not visible
- Content, Layout, and Typography
-
CSS, HTML, and IFrame
-
CSS
- Content is not readable and functional when text is increased
- Non-decorative content inserted using CSS
- visibility:hidden used to visually hide content when it should be available to screenreader
- display:none used to visually hide content when it should be available to screenreader
- Page zoom - boxes that don't expand with the text
-
HTML
- Duplicate id
- Article element used to mark-up an element that's not an article/blog post etc.
- Empty paragraph
- Deprecated center element
- Invalid ARIA role names
- Object not embedded accessibly - wmode parameter not set to window
- Spacer image found
- Inline style adds color
- Start and close tags don't match
- PRE element without CODE element inside it
- Deprecated font element
- Frames
-
CSS
-
Forms
- Errors identified by color only
- Labels missing when they would look clumsy for some form controls
- Error messages - no suggestion for corrections given, e.g. required format
- Left aligned form labels with too much white space
- Group of radio buttons not enclosed in a fieldset
- Form element has no label
- Fieldset without a legend
- Empty legend
- Label element with for= attribute but not matching id= attribute of form control
- Group of check boxes not enclosed in a fieldset
- Empty label found
- Two unique labels, but identical for= attributes
- Errors identified with a poor color contrast
- Non-unique field label found
- Missing labels in checkboxes
- Field hint not associated with input
- Placeholder no label
- Errors are not identified
- Form control that changes context without warning
-
Image and Multimedia
-
Images
- Image has alt and title that are different
- Image with presentation role has non-empty alt
- Image with no alt attribute
- Background image that conveys information does not have a text alternative
- Image has empty alt and non-empty title
- A distraction is present, an animated gif
- Image that conveys information has an empty alt attribute
- Image that conveys information has inappropriate alt text
- Image alt attribute contains image file name
- Image alt attribute contains image file name
- Multimedia
-
Images
-
Keyboard Access
- Alert shows for a short time
- Lightbox - close button doesn't receive focus
- Focus order in wrong order
- Tabindex greater than 0
- Keyboard focus is not indicated visually
- Keyboard focus assigned to a non focusable element using tabindex=0
- Keyboard focus assigned to a non focusable element using tabindex=0
- Concertina items don't get keyboard focus
- Keyboard trap
- Dropdown navigation - only the top level items receive focus
- Lightbox - ESC key doesn't close the lightbox
- Link with a role=button does not work with space bar
- Tooltips don't receive keyboard focus
- Accesskey attribute used
- Lightbox - focus is not moved immediately to lightbox
- Lightbox - focus is not retained within the lightbox
- Fake button is not keyboard accessible
- Fake button is not keyboard accessible
-
Language of content
- Text language changed without required change in direction
- html element has an empty lang attribute
- lang attribute not used to identify change of language
- Text language is in the wrong direction
- html element has an invalid value in the lang attribute
- lang attribute used to identify change of language, but with invalid value
- html element is missing a lang attribute
- html element has lang attribute set to wrong language
- lang attribute used to identify change of language, but with wrong language
- Page title and Headings