Simple Steps for a Better Accessibility on Web
Mustafa Enes Ertarhanacı
Frontend Developer at Wolt
Contents
- Focus state and keyboard accessibility ⌨️
- Colours and typography 🎨
- Semantic coding 🕸
- Conclusion and further reading 📖
Focus state and keyboard accessibility ⌨️
- Don't remove the focus ring
- Maintain proper focus order
- Provide skip-links
-
Don't hide functionality behind mouse interaction
Don't remove the focus ring
For keyboard users, a visual indicator for the focused element is crucial for navigating a web page.
Focus state and keyboard accessibility ⌨️
Related resources:
Focus state and keyboard accessibility ⌨️
Don't remove the focus ring
Maintain proper focus order
Keyboard users who use tab key for navigating a web page expect to jump between elements in a natural order.
Focus state and keyboard accessibility ⌨️
Maintain proper focus order
Related resources:
Focus state and keyboard accessibility ⌨️
Provide skip-links
Keyboard or screen-reader users should be able to skip the long list of navigation links without tabbing through each of them.
Focus state and keyboard accessibility ⌨️
Provide skip-links
Related resources:
Focus state and keyboard accessibility ⌨️
Don't hide functionality behind mouse interaction
Make everything that works with hover also work with focus.
Focus state and keyboard accessibility ⌨️
Don't hide functionality behind mouse interaction
Focus state and keyboard accessibility ⌨️
Related resources:
Colours and Typography 🎨
- Provide sufficient color contrast
-
Don't rely solely on colour differences when conveying information
- Don't remove underlines from links in a body of text
Provide sufficient color contrast
Users with partial vision problems (such as you, when your device's screen is under sun light) should be able to distinguish text from its background.
Colours and Typography 🎨
Provide sufficient color contrast
An elegant solution to a common problem.
Colours and Typography 🎨
Provide sufficient color contrast
Related resources:
Colours and Typography 🎨
Don't rely solely on colour differences when conveying information
Colours and Typography 🎨
Use indicators, other than just color difference, to convey the difference in meaning.
Don't rely solely on colour differences when conveying information
Colours and Typography 🎨
Don't rely solely on colour differences when conveying information
Colours and Typography 🎨
Don't rely solely on colour differences when conveying information
Related resources:
Colours and Typography 🎨
Don't remove underlines from links in a body of text
For people with partial visual impairments, underlines might be the only good way to distinguish links from surrounding text.
Colours and Typography 🎨
Don't remove underlines from links in a body of text
Related resources:
Colours and Typography 🎨
Semantic Coding 🕸
- Organize page content with proper headings
- Semantic form controls
- Enhancing page semantics with ARIA
Organize page content with proper headings
Screen-reader users can navigate web pages quickly using section headers.
Semantic Coding 🕸
Organize page content with proper headings
Related resources:
Semantic Coding 🕸
Semantic form controls
Always use labels for inputs and consider using fieldset and legend elements when you're dealing with multiple inputs related to one question/topic in the form.
Semantic Coding 🕸
Semantic form controls
Related resources:
Semantic Coding 🕸
Enhancing page semantics with ARIA
"Accessible Rich Internet Applications" attributes can bring semantics to your custom widgets.
Semantic Coding 🕸
Enhancing page semantics with ARIA
Related resources:
Semantic Coding 🕸