Links: Technische Umsetzung

Links zur Umsetzung von zugänglichem Code.

Allgemeines

Accessibility Not-Checklist
The Not-Checklist acts as a guide to make sure you haven’t missed anything. If you’re new to accessibility, the resource provides a foundation – it’s an overview of what you’ll need to consider, but it won’t teach you WCAG from front to back.
The A11y project: CHECK YOUR WCAG COMPLIANCE
Checklisten für einzelne Komponenten
Tutorials for web developers at W3C
W3C: Using Aria
This document is a practical guide for developers on how to add accessibility information to HTML elements using the Accessible Rich Internet Applications specification
Start Building Accessible Web Applications Today
Video tutorial by Marcy Sutton (empfohlen von MDN)
Introduction to ARIA by web.dev
Keyboard-navigable JavaScript widgets (mdn web docs)
HTML5 Accessibility
Get the current accessibility support status of HTML5 features across major browsers
Style with Stateful, Semantic Selectors
Styling mit zustandsorientieren, semantischen Selektoren
Anatomy of an accessible and inclusive cookies banner
HTML Semantics and Accessibility Cheat Sheet Diese Tabelle listet die am meisten vorkommenden und nützlichsten HTML Elemente, die einen Einfluss auf die Barrierefreiheit haben.
<dialog> The Dialog Element (mdn web docs)

A11y Tools von Lloydi
Best Practices (10up Engineering)
Gute github Sammlung zum Thema Barrierefreiheit der Firma 10up (https://10up.com), die sich dem Thema verschrieben hat, mit html und css Codebeispielen, Toolsammlung…
Accessible Front-End Components
A look into reliable accessible components: from tabs and tables to toggles and tooltips.
Accessibility (Englische mdn web docs)
Gute Sammlung mit den Themen Html, css, javascript, WAI-Aria Basics, Multimedia, mobil & Troubleshooting
ARIA Authoring Practices Guide (APG): Hilfreiche Ressource für die zugängliche Umsetzung von Widgets, wie z.B. Tap Panels oder Akkordeons. Beispiele unter dem Tab „Patterns“.
Deque University ARIA Examples
Code Library (Beta) von Deque University
A11yphant – a11yphant teaches web accessibility, one step at a time, broken down into manageable pieces.

Use legend and fieldset
It’s 2022 and people are still afraid to use <fieldset> and <legend>
Use autofill (W3C, Identify Purpose Input, Level AA)
How to Build Great HTML Form Controls: Super Artikel zum Thema Formulare und A11y
Barrierefreie Formulare erstellen Barrierefreie Eingabefelder

W3C Best Practices Tutorial – Folgendes Beispiel zeigt, wie ein fly-out menu gebaut werden soll.

An alt Decision Tree
Tooltips — eine schlechte Idee für echten Inhalt (Unterstützung des Title-Attributs in Screenreadern)
(Don’t) Use title attributes