Building the main navigation for a website
Manuel Matuzović prepared a tutorial on web.dev: Building the main navigation for a website. This tutorial describes how to build an accessible main navigation of …
Here is my list of notes, tools, and techniques with regards to accessibility. I hope, by learning from it I will make accessibility more accessible for myself and provide a more inclusive user experience with my web projects.
Accessible names and descriptions
How to name a label (for example) to make it effective from an accessibility standpoint: ARIA Authoring Practice Guide has a section Providing Accessible Names …
Designing better error messages
Vitaly Friedman wrote Designing Better Error Messages UX on Smashing Magazine. That is an extremely well prepared article! Vitaly is not sure if a form …
tabindex
WebAIM Tabindex contains an excellent description of how to use the HTML tabindex attribute. The attribute can have three distinct uses: tabindex="1" (or any integer …
Accessibility checklist for WCAG compliance
The A11Y project has a checklist to verify a website for WCAG compliance. This checklist targets many, but not all level A and AA concerns. …
Privacy trumps metrics
A web user’s need for privacy trumps our need for analytics. This is especially the case for people with disabilities, who rightly don’t want their …
Learn Responsive Design
Learn Responsive Design is A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone. …
Inclusive Components Pattern Library
A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with …
HTML elements reference
The MDN Web Docs HTML elements „…are grouped by function to help you find what you have in mind easily. An alphabetical list of all …
sotable
Make any HTML table sortable
Eleventy starter project for WCAG reports
Hidde de Vries describes his Eleventy starter project for Web Content Accessibility (WCAG) reports, which is published on GitHub as eleventy-wcag-reporter. The basic idea is …
Form design
Form design by Geri Reid is a comprehensive compilation of best practices for accessible HTML forms. Geri´s site is beautiful, too.
HTML Specification
Always beneficial to to visit the root: html.spec.whatwg.org.
HTML Hell
A collection of bad practices in HTML, copied from real websites. Initiated by Manuel Matuzović and open for contributions.
An alphabet of accessibility issues
An Alphabet of Accessibility Issues, by Anne Gibson, is a carefully curated list of situations where proper accessibility of a web site would be in …
Website evaluation tools
Any accessible website must … Tools References Any accessible website must … # use semantic-, standards-based HTML, apply accessibility best pratices (which is a wide …
Six ways to make your site more accessible
Hidde de Vries made this enumeration in this talk. Here is a quick summary. Names Markup Structure Language Text Keyboard References Names # Use link …
Indicating the focused element
Focus is important for keyboard navigation Do not disable the focus outline How to style the focus indication References Focus is important for keyboard navigation …
Back to Top
A Back to Top link helps users navigate to the top (start) of long pages.
My approach to accessibility
Through a post from Ethan Marcotte I got drawn into the accessibility topic. Web accessibility, like defined by the W3C, was not on my radar …
Website accessibility got worse
Dave Rupert made me aware with his tweet: The average website accessibility got worse during the last twelve months! This is according to the WebAIM …