Usability and accessibility

Sebastian Greger

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.