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 🕸

Conclusion and further Reading 📖

Thank you!

Questions

Made with Slides.com