Accessible Drag and Drop Examples

A11y
Der perfekte „Alt-Text“: Wir haben sechs blinde und sehbehinderte Menschen gefragt, welche Bildbeschreibungen ihnen wirklich etwas bringen › Regionales Rechenzentrum Erlangen (RRZE)
Tipps für Online-Redakteurinnen und -Redakteure, Best Practice: So könnte der "perfekte Alt-Text" laute, Alt-Texte: die wichtigsten Punkte
Color and Contrast.com
Color & Contrast is an interactive guide to color for designers.
Evaluatory
Web page evaluation with a focus on accessibility.
Generating Accessibility Test Results for a Whole Website With Pa11y CI · Matthias Ott – User Experience Designer
Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.
Digital Accessibility Checklists and Cheat Sheets | HolisticA11Y
Easy and digestible digital accessibility cheat sheets that will help you design, develop and test to achieve ADA compliance/accessibility compliance
WAI-ARIA 1.1 Cheat Sheet • DigitalA11Y
A complete guide to WAI-ARIA 1.1. The only WAI ARIA cheat sheet you would ever need
Understanding WCAG Success Criterion • DigitalA11Y
Links to various Understanding WCAG success criterion documents & code snippets.
WCAG, but in language I can understand
An as-close-to-a-single-paragraph-as-I-can-manage summary of each rule in the Web Content Accessibility Guidelines, version 2.1, level AA.
Abbreviations can be problematic
We can all agree that abbreviations like acronyms usually need to be defined, but what if the HTML method we use isn’t accessible to all users?
Bold and italics aren’t read by screen readers
Emphasis and other text-level semantics are normally ignored by screen readers, so it you’re relying on them for meaning you could be in trouble.
article vs. section: How To Choose The Right One — Smashing Magazine
In this article, Olushuyi explores a mental model that helps you decide between the `` and `` elements when writing documents. You will explore how grouping content affects accessibility and how you can make it all count for users.
How-to: Use Firefox for accessibility testing - The A11Y Project
Firefox has become one of the best tools for accessibility audits. Let’s go over Firefox’s accessibility features that you can use today.
Perceived affordances and the functionality mismatch - Tink - Léonie Watson
Don’t Use ARIA Menu Roles for Site Nav
Once again, the advice is in the title of the post. But I will ramble anyway since you scrolled this far. First run with the advice, and then review some background on ARIA and how navigation and menu items are defined. This way you can tap out quickly when it…
Generating Accessibility Test Results for a Whole Website With Evaluatory · Matthias Ott – User Experience Designer
Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.
Menu Structure
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
VoiceOver and list-style-type: none | Writing | gerardkcohen.me
With that bit of additional CSS, we are able to return the list
semantics for VoiceOver users without needing to touch the markup.
Level Up Your Headings Game · Matthias Ott – User Experience Designer
Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.
It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties
It was late 2020 when I last tested how browsers use CSS display properties to break the semantics of elements. I had been waiting for Safari to fix how it handles display: contents for four years now, and was excited when the announcement came in June. Then I started testing…
Style with Stateful, Semantic Selectors
If a state is important enough to indicate visually, it's probably important enough to expose to assistive technologies. Here's how we can use that to create more robust styles.
Richtlinien für barrierefreie Webinhalte (WCAG) 2.1
Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.1 decken einen großen Bereich
von Empfehlungen ab, um Webinhalte barrierefreier zu machen. Wenn Sie diesen Richtlinien
folgen, dann werden Inhalte für eine größere Gruppe von Menschen mit Behinderungen
barrierefreier sein. Dies beinhaltet Vorkehrungen für Blindheit und Sehbehinderung,
Gehörlosigkeit und nachlassendes Hörvermögen, eingeschränkte Bewegungsfähigkeit, Sprachbehinderungen,
Photosensibilität und Kombinationen aus diesen Behinderungen sowie einige Vorkehrungen
für Lernbehinderungen und kognitive Einschränkungen; es werden jedoch nicht alle Benutzeranforderungen
für Menschen mit diesen Behinderungen abgedeckt. Diese Richtlinien beziehen sich auf
die Barrierefreiheit von Webinhalten auf Desktops, Laptops, Tablets und mobilen Geräten.
Darüber hinaus wird das Befolgen dieser Richtlinien Webinhalte in vielen Fällen für
Nutzer im Allgemeinen benutzbarer machen.
Butter Pep
A11Y 101: WAI-ARIA States
Now that we had a look at all the possible ARIA properties let's do the same for all of the...
EightShapes Contrast Grid
The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?
“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario.
Building accessible web applications: What, Why, Who and How | LeanIX Engineering
An attempt to raise awareness of a topic that should be important to anyone building user interfaces for humans.
Building accessible web applications: What, Why, Who and How - by Konstantin Tieber
Konstantin thinks accessibility is a topic that anyone who builds user interfaces for humans on the web should be aware of. In this talk he's answering the "...
Building The Most Inaccessible Site Possible With A Perfect Lighthouse Score - Manuel Matuzović
Google’s built-in testing tool Lighthouse judges the accessibility of our websites with a score between 0 and 100. It’s laudable to try to get a high grading...
Please, stop disabling zoom