-
ARIA Authoring Practices Guide (APG)
https://www.w3.org/WAI/ARIA/apg/ -
Design System
This design system documents the styles, components and templates available to use on your website.
https://design-system.w3.org
-
Deutschland - KoliBri - Public UI
Die barrierefreie Web Component Bibliothek
https://public-ui.github.io -
USA - U.S. Web Design System (USWDS)
A design system for the federal government. We make it easier to build accessible, mobile-friendly government websites.
https://designsystem.digital.gov -
Großbritannien - GOV.UK Design System
Design your service using GOV.UK styles, components and patterns
https://design-system.service.gov.uk -
Schweiz - Richtlinien für das Webdesign Bund
https://swiss.github.io/styleguide/de/
- BBC Global Experience Language (GEL)
Guidance for developers building accessible websites based on BBC GEL
https://bbc.github.io/gel/
-
Übersicht einiger Bibliotheken und Design Systeme
https://component.gallery -
ING-Bank
Lion - Fundamental white label web components for building your design system.
https://lion-web.netlify.app -
Shopify
Components are the reusable building blocks for creating Shopify admin experiences.
https://polaris.shopify.com/components -
Shoelace
A forward-thinking library of web components.
https://shoelace.style -
Porsche Design System
The Porsche Design System provides the design fundamentals and elements for efficiently creating aesthetic and high-quality web applications, including easy-to-use Figma and UX Pin libraries, coded Web Components and comprehensive usage guidelines.
https://designsystem.porsche.com/v3/ -
Clarity Design System
Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
-
WAVE (Web Accessibility Evaluation Tools)
Diese kostenlose Browsererweiterung bietet die Möglichkeit, sich mögliche Barrieren auf der Website, wie falsche Überschriftenstrukturen oder fehlende Alt-Texte anzeigen zu lassen.
https://wave.webaim.org/
https://chromewebstore.google.com/detail/jbbplnpkjmmeebjpijfedlgcdilocofh -
ARIA DevTools (Chrome)
Easily spot missing ARIA labels, misused ARIA roles, and incomplete keyboard support in your web applications.
https://chromewebstore.google.com/detail/aria-devtools/dneemiigcbbgbdjlcdjjnianlikimpck?hl=en -
axe DevTools - Web Accessibility Testing (Chrome)
Accessibility Checker for Developers, Testers, and Designers in Chrome.
https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd -
HeadingsMap (Chrome)
To show, browse and audit (for accessibility and SEO) the headings structure.
https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi -
IBM Equal Access Accessibility Checker (Chrome)
A web browser extension for checking accessibility issues.
https://www.ibm.com/able/
https://chromewebstore.google.com/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp -
LERA
LERA - Automated Accessibility Testing & Reporting Tool.
https://chromewebstore.google.com/detail/lera/neninfnjnhknniefcpognoooalfdaofc -
Lighthouse
Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.
https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk -
Successive - Accessibility
The web accessibility tool which will allow you to use more than 10 accessibility features at one place
https://chromewebstore.google.com/detail/successive-accessibility/medoddhnmodhnpolgfhgkompgiobnimd
-
Google Lighthouse
Google Lighthouse ist ein automatisierter Test, zur Überprüfung der „Accessibility Essentials“ wie Kontraste, Schriftgröße, Labels, Touch Targets oder Alt-Text. Die Browsererweiterung Headingsmap bietet einen sehr guten Überblick über die Überschriften und die gesamte Struktur einer Webseite.
https://chrome.google.com/ -
Screenreader-Check
- Google Talk Back für Android: https://support.google.com/accessibility/
- Apple VoiceOver für iOS: https://support.apple.com/de-de/HT211899
-
Kontrast-Checker
Ausreichenden Kontrast zwischen Vorder- und Hintergrundfarbe prüfen.
https://contrastchecker.com/
-
Übersetzung der Web Content Accessibility Guidelines
https://www.aktion-mensch.de/inklusion/barrierefreiheit/web-content-accessibility-guidelines -
Bundesfachstelle Barrierefreiheit
Die Bundesfachstelle Barrierefreiheit bündelt aktuelle Informationen, Fachwissen und spannende Veröffentlichungen rund um das Thema Barrierefreiheit.
https://www.bundesfachstelle-barrierefreiheit.de/ -
Portal der Bundesregierung zur digitalen Barrierefreiheit
Informationsseite der Bundesregierung zum Barrierefreiheitsstärkungsgesetz, Anforderungen an die IT, sowie Umsetzungsempfehlungen.
https://www.barrierefreiheit-dienstekonsolidierung.bund.de/ -
Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik
Handreichungen und praktische Publikationen zur Umsetzung von digitaler Barrierefreiheit für Umsetzerinnen und Entscheiderinnen.
https://www.bfit-bund.de/ -
Norm der digitalen Barrierefreiheit
Im geschützten Bereich der BFIT-Bund steht bei berechtigtem Interesse die zentrale Norm der digitalen Barrierefreiheit EN 301 549 auf Deutsch zur Verfügung.
https://www.bfit-bund.de/ -
IAAP (International Association of Accessibility Professionals)
Die deutschsprachige Niederlassung der IAAP ist ein Fachverband für professionelle Barrierefreiheits-Dienstleister. Auf der Website und im Newsletter finden sich viele hilfreiche News zum Thema.
https://iaap-dach.org/nachrichten.html