https://github.com/nelilly/inaccessible-website
A website with sample accessibility issues
https://github.com/nelilly/inaccessible-website
Last synced: about 1 month ago
JSON representation
A website with sample accessibility issues
- Host: GitHub
- URL: https://github.com/nelilly/inaccessible-website
- Owner: nelilly
- Created: 2019-09-21T15:03:39.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T18:51:52.000Z (over 2 years ago)
- Last Synced: 2023-03-07T22:45:38.525Z (about 2 years ago)
- Language: JavaScript
- Homepage: https://nelilly.github.io/inaccessible-website/
- Size: 33.8 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# inaccessible-website
The [inaccessible website](https://nelilly.github.io/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](https://github.com/nelilly/a11y-manual-testing) and [a11y-workflow](https://github.com/nelilly/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.