Accessibility of Search Feature and Images

  • content and structure of the system
  • keyboard usage
  • image content and text alternatives
  • colours and contrast ratios
  • media accessibility — documents, videos, audios
Search box at the top of the e-shop
Search box at the top of the e-shop
Search feature model
Search feature model
Focus on Sign In link
Focus on Sign In link
Tabbing back reaches the seach input
Tabbing back reaches the seach input
Element order in the DOM
Element order in the DOM
Autocomplete
Autocomplete
<input autocomplete="off" class="FormControl js-autocomplete-control" name="search" type="text" placeholder="Zadejte, co hledáte...">
  • contentful images should have an alternative text so people who use screen readers can consume such a content
  • decorative images should have a null alternative text (alt="")
  • the alternative text should consider the picture’s content and function
<img src="/common/img/logo.svg" alt="" width="208" height="40" loading="lazy">
Product detail page
Product detail page
Accessibility tree ignore the main picture
Accessibility tree ignore the main picture
Main picture with an alternative text
Main picture with an alternative text
<img src="/data/cache/thumb_50-50-12/categories/1567/1636295215/lplu108808_1.jpg" alt="OBLEČENÍ" loading="lazy">
WAVE tool in action
WAVE tool in action

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store