Accessibility (a) Rules - 3

Images

It's not just about adding alt text to an image; it's much more than that.

Decorative images

• If an image doesn't add additional context or information (decorative image) that allows the user to better understand the context then it should be hidden from assistive technology (AT), such as a screen reader.

• Use any of these methods to hide images from AT:

  • An empty or null text alternative (alt)
  • Applying ARIA
  • Add the image as a CSS background

<!-- All of these choices lead to the same result. -->
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="presentation" alt="Accessibility (a) Rules - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="none" alt="Accessibility (a) Rules - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" aria-hidden="true" alt="Accessibility (a) Rules - 3" >

• When in doubt, add descriptions to images.

Empty or null alt

• Do not set the image alt attribute to "" unless the image is purely decorative.

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)		Ignores the image completely	Decorative or non-informative images
Missing alt		May read the filename/URL	Not recommended; implies negligence

Informative images

• If an image conveys a concept, idea, or emotion you should include programmatic alternative text describing the purpose of the image.

• Add a highly detailed description of the image wherever possible.

e.g.

<img src="/static/imghwm/default1.png" data-src=".../Ladybug_Swarm.jpg" class="lazy" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• If the image is an (inline), add role="img".

• Since elements do not support the alt attribute, use alternative coding methods to provide a description.

Method	Use Case	Pros	Cons
	Short, brief descriptions	Simple, widely supported	Limited in length
aria-label	Brief descriptions	Quick, inline	Best for short text
aria-labelledby	Complex descriptions using	Comprehensive, flexible	More verbose
	Visible description in a figure context	Visible and accessible	Not ideal for all SVGs

Functional images

• Any image with a functional purpose (e.g., a logo that links to the home page, a magnifying glass icon used as a search button) should include appropriate alt text.

• Alt text should describe the image’s action, not its visual aspects.

• If the image is both informative and actionable you can add alternative descriptions to each element—but it is not a requirement. e.g.
  

<!-- All of these choices lead to the same result. -->
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="presentation" alt="Accessibility (a) Rules - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" role="none" alt="Accessibility (a) Rules - 3" >
<img  src="/static/imghwm/default1.png" data-src=".../Ladybug.jpg" class="lazy" aria-hidden="true" alt="Accessibility (a) Rules - 3" >

Complex images

• If an image requires more explanation than a decorative, informational, or functional image include infographics, maps, graphs/charts, and complex illustrations use any of these methods to add alternative descriptions

• Link out to a resource or provide a jump link to a longer explanation later on the page. e.g.
  

<img src="/static/imghwm/default1.png" data-src=".../Ladybug_Swarm.jpg" class="lazy" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• Append the aria-describedby attribute to the element then link the image to an ID containing a longer description. e.g.

<div title="Navigate to the homepage">
   <a href="/">
      <img src="/static/imghwm/default1.png" data-src=".../Ladybug_Logo.png" class="lazy" alt="Lovely Ladybugs for your Lawn">
   </a>
</div>

Alternative text best practices

• Advised to cap alternative text to 150 characters or less to avoid reader fatigue.

• Avoid using words like "image of" or "photo of" in the description, as the screen reader will identify these file types.

• When naming images, be as consistent and accurate as possible. Image names are a fallback when the alternative text is missing or ignored.

• Avoid using non-alpha characters (for example, #, 9, &)

• Use dashes between words rather than underscores in image names or alternative text.

• Use proper punctuation whenever possible. Without it, the image descriptions will sound like one long, never-ending, run-on sentence.

• Write alternative text like a human and not a robot. Keyword stuffing does not benefit anyone—people using screen readers will be annoyed, and search engine algorithms will penalize them.

The above is the detailed content of Accessibility (a) Rules - 3. For more information, please follow other related articles on the PHP Chinese website!