Usability and accessibility

Design that excludes some cannot be “usable”. Here, I collect my preferred resources on specific (web) design tasks, with a strong focus on accessibility.

• A11y overlays: JavaScript-based "overlays" promise accessibility as a convenient add-on, but very much fail to deliver.
• Accessibility statements: The accessibility statement is an important part of a website, to give guidance, signal commitment and under certain circumstances even a legal requirement.
• Alt texts: So called alt-texts (alternative text) are the default means to make visual content accessible in a descriptive format. But using them correctly is not an easy, and for sure not precise, science.
• Cards: "Cards", areas of multiple elements wrapped as a clickable link area, are a standard component in most website designs. To ensure them to be usable for all actually requires careful implementation.
• Code highlighting: As soon as we want to make it look good, sharing program code on the web requires a bit of consideration for inclusiveness.
• Colors and contrast: Sufficient contrast between content and background is one of the most basic, yet still commonly ignored, accessibility features of any design.
• Drag-n-drop: Making a UI drag-and-drop, i.e. enabling moving around items with a mouse or by touch, inevitably leads to the need for alternative forms of interaction for non-keyboard users etc.
• Footnotes: Adding footnotes to an HTML document is anything but straightforward. As the standard astonishingly lacks a dedicated tag for this staple of academic writing, finding a usable and accessible design is tricky.
• Invisible content: Sometimes we want to hide content on websites, either visually or completely, for a variety of reasons. Getting it right is important, as hiding things with CSS can have an accessibility impact.
• JavaScript and Progressive Enhancement: Progressive Enhancement is a core pillar of building robust, inclusive websites. In a nutshell, the idea is that a site is usable with the most minimal requirements and UX-enhancing techniques like JavaScript are used as optional enhancements, where supported.
• Language: Choosing appropriate language can play an important role in an inclusive design. Using language that is easy to understand, avoiding ableism, addressing disability and being gender-inclusive are complex topics and there is not always a straightforward cover-all solution.
• Modals and popups: Opening modal windows on a webpage easily throws off assistive technology. Luckily, lightweight and accessible options exist to ensure good UX for everybody.
• Motion: While moving elements may enrich UX for some, they can be a burden or even outright dangerous to others; careful consideration needs to be taken when animating parts of a design.
• Skip links: An important feature for users navigating the web using their keyboard, designing "skip links" is not as straightfoward as one may think.
• Statistics on a11y: Statistics on disabilities, as well as on accessibility issues, are valuable for shaping advocacy messages.
• Tools: This category collects "accessibility tools" – for assessing and testing, but also for creating more accessible experiences.
• Visualizations: Commonly based on advanced visual representations, the accessibility of (interactive) information and data visualizations is often very limited. A growing community aims to tackle these limitations by developing and showcasing best practices.
• Web components: Web components are a popular technique to build encapsulated HTML building blocks. To make them universally accessible, they have to be carefully designed.