skip to content

Image with screen readers - details

in development

Tags:

Discover the impact of the role presentation based on different screen readers.

Images

null alt without role presentation

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="">

null alt with role presentation

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="" 
     role="presentation">

alt value without role presentation

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a 
          human, with small arms, and a large head with lots of sharp teeth.">

alt value with role presentation

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a 
          human, with small arms, and a large head with lots of sharp teeth." 
     role="presentation">

alt value with title attribute

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png" 
     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a 
          human, with small arms, and a large head with lots of sharp teeth." 
     title="The Mozilla red dinosaur">

no alt nor title attibute

code

<img src="https://mdn.github.io/learning-area/accessibility/html/dinosaur.png">
  • Based on Mozilla’s dinosaur
W3C SVG