Let's Make the Web Accessible for All! #a11y
Design for Color Blindness
Things To Keep In Mind
✅ Red-/green deficiencies are more common in men.
✅ Use blue if you want users to perceive color as you do.
✅ Use any 2 colors as long as they vary by lightness.
✅ Colorbrlind users can tell red and green apart.
✅ Colorbrlind users can’t tell dark green and brown apart.
✅ Colorbrlind users can’t tell red
When you use the <object> element, you can provide content between its opening and closing tags to be used as a fallback for when the linked image doesn’t load. This was a perfect opportunity to feed two birds with one scone:
- Provide a text presentation of the data presented in the chart as a fallback, and
- associate that text with the image ( &
The Practical Accessibility Course
A focus indicator can also take other forms, but outlines are very common for good reasons.
Outlines have an advantage over other visual indicators (like borders or background colors, for example) in that they can be applied to the element without causing any significant changes to that element. And since an outline is not part of an element’s box... See more
Outlines have an advantage over other visual indicators (like borders or background colors, for example) in that they can be applied to the element without causing any significant changes to that element. And since an outline is not part of an element’s box... See more
sarasoueidan.com • A guide to designing accessible, WCAG-compliant focus indicators
Why outlines work best and box-shadow should be avoided to indicate focus
To give both sighted and non-sighted users an equivalent experience, we can use the well-supported aria-invalid attribute. When the user focuses the input, it will now announce “Invalid” (or similar) in screen readers.
Adam Silver • Form Design Patterns
When the image of text is complex, the text alternative will often need to be accompanied by either (1) a more extended description of the image’s content, or (2) an alternative presentation of the image’s content.
The Practical Accessibility Course
Disabling buttons can cause more problems for users than benefits.
Missing feedback
When you click a disabled button, nothing happens. The button doesn’t explain what’s wrong or help you fix the problem. It provides no helpful feedback. If the user thinks their answers are correct, not providing feedback can make the UI feel broken.
Missing focus
Disab
... See more