- Testing keyboard accessibility
- How to enable reader mode in Chrome and Firefox
- WebAIM Keyboard Accessibility and Testing
- Download Atkinson Hyperlegible Font
- Download Intel One Mono Font
- ARIA Devtools extension for Firefox and ARIA Devtools extension for Chrome (Handy tool that shows you how a screenreader reads a page and highlights any errors in ARIA and landmark roles. )
- Accessibility checker extension for Firefox and Accessibility checker extension for Chrome (better than WAVE extension, to be used to check for oversights, not as an overall metric for accessibility)
- “How To Write Alt Text and Image Descriptions for the Visually Impaired”
- https://veroniiiica.com/how-to-write-alt-text-image-descriptions-visually-impaired/
- WebAIM Color contrast checker and The contrast triangle (for checking contrast and accessibility of links with and without underlines )
- px to em converter (em and rem will vary based on the root or parent font size, but by default 16px = 1rem or 1em)
- Gif speed changer and gif loop count changer
- A11y Project checklist
- W3C Easy Checks A First Review of Web Accessibility
- Responsive design checker site or alternatively, how to open responsive design mode in Firefox and how to check responsive design mode in Chrome
- Setting up a screen reader testing environment on your computer
- Why Screen reader testing (Note that sighted people might still make mistakes and not notice things a person who relies on screenreaders might.)
- The contrast triangle (for checking contrast and accessibility of links with and without underlines )
- Check your design with text size increased to 200 percent and How to change your font size in Firefox or how to change your font size in Chrome. Note that you are changing the FONT size, not simply zooming in on the page.
Resources for Making Your Site More Accessible!
Here are all there resources from the guidelines page and more for learning how to make your site accessible.
Checking, downloads, & more useful websites
(click here to expand)
Coding snippets & help
(click here to expand)
- Solaria's Readability Tips
- Styleswitcher (for changing color themes)
- Dark Mode Revisited (Javascript Dark/Light mode toggles, NOTE: to make this keyboard accessible, the switcher should be a button element, not a link element as shown in the tutorial)
- Start and stop gifs on button click
- Alternative gif pausing script
- HTML semantics cheat sheet
- “What I've Learned About Web Accessibility as a Dyslexic, Sighted, Mouse User”
- More accessible tooltips.
- Responsive Web Directory Resources
- “Light/dark mode done fast”
- “Alt-texts: The Ultimate Guide”
- “Accessible JavaScript: Beyond the Mouse”
- Web Reading Mode: Title, author, and date metadata extraction (about reader mode in different browsers)
- Building websites for Safari Reader Mode and other reading apps.
- Design for reading: tips for optimizing content for Reader modes and reading apps
- 5 ways to make your Neocities site more accessible
- Building a website like it's 1999... in 2022
- Hiding Content from Screen Readers (Good for ASCII art)
- “Writing good alt text”
- “Bring on the tables” (How to use tables in an accessible way)
Articles, essays, & blog posts
(click here to expand)
- “Why Autoplay Is an Accessibility No-No”
- How letter spacing makes all-caps easier to read
- Why color contrast matters for accessibility
- “Don’t forget keyboard navigation”
- “The right tag for the job: why you should use semantic HTML”
- “Pixels vs. Relative Units in CSS: why it’s still a big deal”
- Overview of font accessibility
W3, MDN, & WebAIM docs
(click here to expand)
- MDN: Accessibility
- MDN: Responsive Design
- MDN Web Docs: HTML elements reference
- MDN Web Docs: Web accessibility for seizures and physical reactions
- MDN: HTML elements reference
- MDN: Basic concepts of flexbox
- MDN: Viewport Meta Tag
- MDN: prefers-reduced-motion
- W3C Introduction to Web Accessibility
- W3: Audio Control
- W3: Three Flashes or Below Threshold
- W3: Animation from Interactions
- W3: Use of color
- W3: Contrast (Minimum level AA) and W3: Contrast (Enhanced level AAA)
- W3: Resize Text
- W3: Keyboard Accessible
- W3: Resize Text and W3: Reflow
- Mobile Accessibility at W3C
- How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
- CSS Variables - The var() Function
- W3 Schools HTML Responsive Web Design - Introduction and Responsive Web Design
- W3 "The amazing em unit and other best practices"
- WebAIM: Typefaces and Fonts
- WebAIM Introduction to Web Accessibility