„The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.“
W3C – Accessibility
When writing publicly available web applications, accessibility is essential for users to interact with your application. As we want to make the web app usable by everyone, regardless of their disabilities, age or other considerations, we need to consider what factors might play a role for these user groups
Due to deadlines and „more important“ tasks, accessibility often gets pushed into the background. But with a few simple rules and a little bit of consistent consideration of accessibility during implementation, we can substantially improve the interactions.
The best thing about a standard is that you can choose one.
Web Content Accessibility Guidelines (WCAG 2.1)
At the top of this specification are four principles that provide the foundation for Web accessibility:
- Perceivable – Information and user interface components must be presentable to users in ways they can perceive (visible to one of their senses)
- Operable – a user must be able to use the interface components and navigation
- This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
- Understandable – Information and the operation of user interface must be understandable.
- This means that users must be able to understand the information as well as the operation of the user interface ()
- Robust – Content must be robust enough to be interpreted by many users and assistive technologies.
So lets break this up into basic steps:
1. Mind color contrast
Websites should be designed that the color contrast between text and background is sufficient to make them easier to read for people with visual impairments. Aim for a 4.5:1 ratio between the foreground color (e.g. text, links, etc.) and the background color. This ratio ensures people with moderately low vision can tell the colors apart and see your content. Always mind impairments such as red–green or blue-yellow color blindness.
Furhter reading: Colors with Good Contrast and Contrast Checker
2. Support keyboard navigation
A primary keyboard navigation convention common across all platforms is that the tab and shift+tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include multiple focusable elements. The path that the focus follows when pressing the tab key is known as the tab sequence or tab ring.
Avoid using the tabindex attribute within a non-interactive element to make something intended to be interactive focusable using keyboard navigation. An example of this would be using a <div> element to describe a button, instead of the <button> element.
3. Write Semantic HTML
4. Use Alt texts for images
Images should have alternative text descriptions that are accessible to people with visual impairments or in case the image cannot be displayed.
5. Use ARIA landmarks
6. Caption tables
<table>
<caption>My Table Caption</caption>
<tr>
...7. Use headings properly
8. Underline links
9. Add <label> tags to forms
Further ressources:
Be First to Comment