Links zur Umsetzung von zugänglichem Code.
Sammlungen / Komponenten
- Accessible Components (github v. Scott O’Hara)
- A11y Tools von Lloydi
- Accessibility Quick Guides von Paul J. Adam
- 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
ARIA-Bibliothek der Deque University - A11yphant – a11yphant teaches web accessibility, one step at a time, broken down into manageable pieces.
- Gov.uk Design system – Designsystem der gov.uk Website mit Code-Beispielen
- MagentaA11y – Checklisten und Demos von T-Mobile
- U.S. Web Design System (USWDS), das für die US-Regierung entwickelt wurde
- Liste zugänglicher Patterns aus dem Smashing Magazine (von 2021)
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)
Formulare
- 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
Flyout Menü
- W3C Best Practices Tutorial – Folgendes Beispiel zeigt, wie ein fly-out menu gebaut werden soll.
Links
- Guter Artikel zum Thema Skip-Links (Benutzen von Landmarks und Skiplinks – the 2021 Way)
Mit Beispiel Videos zum Lesen mit NDVA - „Skip Navigation“ Links
- Text Links: Best Practices for Screen Readers
- Video mit Screenreader Test für verlinktes Bild
- Textlinks barrierefrei
- Understanding Sucess Criterion 2.4.4: Link Purpose (In Context) (Level A, englisch)
- Links & Hypertext
Bilder
- An alt Decision Tree
- Tooltips — eine schlechte Idee für echten Inhalt (Unterstützung des
Title-Attributs in Screenreadern) - (Don’t) Use title attributes
SVGS
- Accessible SVGs
- Using text symbols in pseudo-elements accessibly (z. B. * in Formularen)
Media Queries
- Reduced Motion Media Query
- Revisiting prefers-reduced-motion, the reduced motion media query
- Prefers reduced motion (Systemüberprüfung und Abfrage dessen)