Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brandonhimpfen/web-accessibility-checklist
A quick checklist for web accessibility, which also acts as a great beginners' guide.
https://github.com/brandonhimpfen/web-accessibility-checklist
a11y accessibility web-accessibility
Last synced: 3 months ago
JSON representation
A quick checklist for web accessibility, which also acts as a great beginners' guide.
- Host: GitHub
- URL: https://github.com/brandonhimpfen/web-accessibility-checklist
- Owner: brandonhimpfen
- Created: 2021-09-14T17:38:36.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-01T15:42:38.000Z (over 1 year ago)
- Last Synced: 2024-07-30T21:02:07.063Z (6 months ago)
- Topics: a11y, accessibility, web-accessibility
- Homepage: https://himpfen.com/checklists
- Size: 4.88 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Accessibility Checklist
[](https://github.com/sponsors/brandonhimpfen/) [](https://ko-fi.com/brandonhimpfen) [](https://paypal.me/brandonhimpfen) [](https://tinyurl.com/e8ymxdw3)
A quick checklist for web accessibility, which also acts as a great beginners' guide.
## Landmarks
``````
Typically your website's header.
``````
Navigation of your website, which contains navigation links.
``````
The one area where content is primarily focused.
``````
One content item. An example is a single blog post in an index.
``````
Separated content section that supports the main content.
``````
Footer that contains information about the document such as website author, website ownership, copyright information, links to legal documents, etc...
``````
Give the end user the ability to search your document or website.
## Language Attribute
``````
Specify the language of the document.
## Document Outline
Use semantic headings and structure
## Links
Ensure links have a `:focus` state
Ensure links are recognizable, such as by underline and different colour then the text.
## Images
State what the image is about using `alt`
## JavaScript
Unobtrusive Javascript
Use unobtrusive Javascript.
No-JavaScript Alternatives
Provide an alternative for end users who don't have JavaScript enabled or where JavaScript is unavailable.
## Forms
Logical layout
Form controls have `label`
An example would be: ```Your Name: ```.
Don't use `placeholder` attributes instead of the `label` tag
Group related form elements
Group related form elements with `fieldset`.
## Media (Audio and Video)
Provide text transcripts for audio
Subtitles for videos
## Colour and Contrast
Test colour contrast
## Colour Blindness Test
Deuteranopia
Protanopia
Tritanopia
## Testing
Test using a screen reader
Test using only the keyboard