Web accessibility ​

Learn Accessibility & Build Accessible Web Apps are great intros.

Liked Lost in Translation talk.

Notes ​

• UI component libraries are using the term “accessible” too freely. Adding focus styles and copy-pasting some ARIA roles doesn't make your library accessible, neither does adding an “accessibility” page where you claim to conform to WCAG just because you ran a Lighthouse test.
• My big a11y tip is to learn about ARIA roles and accessible names and use a test framework that lets you select by role+name. see your app the way screen reader users do. I find a ton of a11y bugs this way

Links ​

• WebAIM Million - Accessibility analysis of the top 1,000,000 home pages.
• Why we use progressive enhancement to build GOV.UK (2016)
• 18F Accessibility Guide - Repo to organize the guidelines and best practices for accessibility at 18f. (Code)
• Accessibility Interview Questions
• prefers-reduced-motion: Sometimes less movement is more (2019)
• Standards for Writing Accessibly (2020)
• Stark - Suite of integrated accessibility compliance tools for product development teams.
• Library: Accessibility resources, guides, communities, and more
• Building an accessible autocomplete control (2020)
• Accessible to all - Build a site that works for all of your users.
• One of my favorite accessibility testing tools: The Tab Key
• Dao of Web Design (2000) (HN)
• N26 and lack of JavaScript
• AriaNg - Modern web frontend making aria2 easier to use.
• Inclusive Components - Blog trying to be a pattern library, with a focus on inclusive design.
• "Building Inclusive Components" with Heydon Pickering (2019)
• BBC Global Experience Language (GEL) (Web) (Code)
• Web Accessibility courses/resources
• Web and Media Accessibility Group AMA (2020)
• Names, Legal Names, and Fractally Deferred Responsibility (2020) (Lobsters)
• Expedia Accessibility Guidelines
• Achieving accessibility through simplicity (2020)
• Building the most inaccessible site possible with a perfect Lighthouse score (2019) (HN)
• Is Dark Mode Such A Good Idea? (2020) (Lobsters) (HN)
• Technica11y - Discussing challenges in technical accessibility.
• Tenon.io - Accessibility as a Service.
• A11Y Project - Community-driven effort to make digital accessibility easier. (Checklist) (HN)
• Appreciating accessibility - Keyboard shortcut guidelines
• A11y Coffee
• Accessibility Testing is like Making Coffee (2020)
• axe-mode - Accessibility testing visualized.
• A11y Testing Is Like Making Coffee
• Accessibility Guide in Russian
• a11yresources - Growing list of accessibility tools and resources.
• 5 Things I've Learned From the Accessibility Community (2020)
• A11y Dialog - Lightweight and flexible accessible modal dialog.
• Coding with voice dictation using Talon Voice (2020) (HN)
• Empathy Prompts - Ideas to help consider Inclusive Design principles when making things for others to use. (Code)
• Pa11y - Automated accessibility testing pal. Runs accessibility tests on your pages via the command line or Node.js, so you can automate your testing process. (Code)
• Evaluatory - Web page evaluation with a focus on accessibility. (Code)
• Bootcampers Guide to Web Accessibility
• screen-reader-reader - General purpose screen reader reader, with the aim of enabling more realistic end-to-end accessibility tests.
• Building accessible websites 101
• Build Accessible Web Apps
• Test Automation for Accessibility
• Are your Anchor Links Accessible? (2020)
• ButtonBuddy - Accessible button contrast generator. (Code)
• axe - Accessibility Testing Tools and Software. (Code)
• Accessibility Guidelines "Silver" (Code)
• Building greater accessibility into Facebook.com (2020)
• Web Content Accessibility Guidelines (Code)
• A Beginner’s Guide To Web Accessibility (2021)
• Accessible front-end components: claims vs reality (2021)
• Overlay Fact Sheet - Introduction, definition, and history of web accessibility overlays.
• Web Accessibility Fundamentals Workshop
• Modern CSS Upgrades To Improve Accessibility (2021)
• Practical Accessibility - Web accessibility course for Web designers and developers, by Sara Soueidan.
• Replit - Why We Switched From Webpack To Vite (2021)
• Why we’ve created an accessibility manual – and how you can help shape it (2021)
• The perfect link
• A Complete Guide To Accessibility Tooling (2021)
• Using CSS to Enforce Accessibility (2021)
• Доступность в дизайне (2021)
• Access Guide - Friendly introduction to digital accessibility.
• Accessible Rich Internet Applications (WAI-ARIA) (Code)
• AccessKit - UI accessibility infrastructure across platforms and programming languages.
• Accessibility beyond 'alt' tag, 'color contrast', and semantic tags (2021)
• WAI-ARIA Authoring Practices (Code)
• Accessibility-First Tool Concepts (2021)
• Eleventy starter project for WCAG reports (Article)
• Inclusive Design 24 Schedule (2021)
• Good and compact material that teaches you the basics of accessibility on the web (2021)
• Buttons vs. Links (2021) (Tweet)
• Visible - Accessibility testing framework at the next level.
• A guide to designing accessible, WCAG-compliant focus indicators (2021) (HN)
• The effect of CSS on screen readers (2021)
• Testing Accessibility workshop series
• Accessibility Myths
• The importance of accessibility in digital products (2021)
• Small Wins for Accessibility and Resilience (2021)
• Auditing React Apps for Accessibility (2021)
• a11y-components
• ally.js - JavaScript library to help modern web applications with accessibility concerns. (Docs)
• This is WCAG - Build and test against the Web Content Accessibility Guidelines (WCAG) consistently by understanding what is a failure against the success criteria.
• Tabster - Web Application Keyboard Navigation Tools.
• Accessibility Support - Accessibility Support data for various HTML, ARIA, CSS, and SVG features. (Code)
• 5 Accessibility Quick Wins (2022)
• Accessibility for real-time web apps
• Guidance on Web Accessibility and the ADA
• A11yAutomation - Tracking the available automation for accessibility. (Code)
• Deep Dive On Accessibility Testing
• Accessible React Forms (2022)
• Best JS frameworks/libraries for web accessibility (2022)
• Series of HTML test cases to determine how specific elements are announced in different screen reader / browser combinations (Code)
• focus-lock - A11y util for scoping a focus.
• Global Accessibility Awareness Day
• Accessibility is Hard and Important
• Automate accessibility tests with Storybook (2022)
• ARIA Authoring Practices Guide (APG)
• eslint-plugin-jsx-a11y - Static AST checker for accessibility rules on JSX elements.
• Where's the fun in accessibility? (2022) (HN)
• Best practices for inclusive textual websites (2022) (Lobsters)
• A details element as a burger menu is not accessible (2022)
• A Horizontal Scroll List and Custom Keyboard Navigation (2021)
• Learn Accessibility
• Aria-label is a code smell (HN)
• A Guide To Keyboard Accessibility: HTML And CSS (2022)
• Setting up a screen reader testing environment on your computer (2022)
• Accessible Front-End Patterns For Responsive Tables (2022)
• Better accessible names (2022)
• Meaningful labels using ARIA – or not. (2022)
• Lost in Translation with Manuel Matuzović (2022)
• Techniques for WCAG 2.1
• A11yWatch - Web accessibility automation tool. (GitHub)
• Accessible Target Sizes Cheatsheet (2023)
• Web Accessibility: A Reference to Creating Inclusive Websites (2023)