inaccessible-website

The inaccessible website is a playground to help designers and developers understand how to test for and remediate potential accessibility issues.

It's primarily intended to be used with the a11y-manual-testing and a11y-workflow repositories.

I discovered that once you know good design accessibility design principles, it's very hard to make a bad website.

Issues Found in Design

• Background and foreground colors must have a sufficient contrast ratio.

Issues Found in Automated Testing

• :focus styles are turned off.
• Many img elements are missing alt attribbutes.
• Many input elements do not have associated labels.
• In the carousel and gallery, links do not have discernible text.
• Headlines in the header are out of order (h3 follows h1).
• Search form submit button does not contain discernible text.
• Font sizes in the footer are too small.

Issues Found in Manual Testing

• When the navigation opens the user is not directed to that content.
• The navigation close button contains × as text. This will read as "times" in most screen readers.
• In VoiceOver/Safari/iOS the h1 requires an id="skip" and tabindex="-1" to be programmatically focused on from the skip nav using JS.
• In VoiceOver/Safari/iOS there is a text node that reads "opens in a new window" below the Contact form.