Images drive people attention and make them comfortable on your website. Web authors want to use images that are relevant to the content of the page.
A picture is worth thousand words. While content is important, visuals allow the visitor to stop and read the content if the image gives the right perception to them.
Enough now that we have to agree that images are necessary to attract visitors to the website. They can see the images and understand what it speaks. How about those who cannot see the images? It can be
- Visitor who is blind or visually challenged?
- Search engines that cannot read the images?
For these set of users a text description need to be provided for the images on the web page.
How to provide text description to the images?
There are two easy ways to provide the text description to the images.
The alt way
The “alt” attribute of the image will allow the developers to describe the images on the web. Whatever the text you provide within the quotes (“”) of the alt attribute is recognized by the screen readers.
The code below will be read out as “Graphic Maxability Logo” by the screen reader.
<img src=”” alt=”Maxability Logo” height=”300” width=”250” />
The ARIA way
The aria-label property can also be used instead of HTML alt attribute. While it is always better to use the properties and of native host language, aria-label property will also provide the same experience as the alt attribute for the end user.
The code below will be read out as “Graphic Maxability Logo” by the screen reader.
<img src=”” aria-label=”Maxability Logo” height=”300” width=”250” />
The description thus provided through the alt attribute or aria-label property will be read aloud by the screen reading technologies used by blind / visually challenged visitors. They also help search engines to understand the intent of the images for better ranking.
What is a good alternate text?
What is a good alternate text is an off topic for this course. You can still read our article titled Writing an appropriate alternate text for more information.
Can you or will you provide alternate text for every image?
Before you understand if you can provide alternate text for all types of images, let us understand is it required to provide alternate text for all types of images.
The 1X1 pixel spacer images, though these are technically images they do not pass any information to the user. They are just to style the elements. Similarily web pages often contain many images that are purely for styling purposes, they don’t convey any message to the user. Sighted users simply ignore them, so same experience is always good for screen reader users.
So the underlying message is to avoide providing alternate text for decorative or styling images.
Remember that even for decorative images or styling images the alt attribute is required. The text within the quotes as shown below is not required. Some screen readers read aloud the source of the image (src information) if an alt attribute is not provided.
<img src=’images/spacer.ping’ alt=’’ height=’1px’ width=’1px’ />
Background Images
Images that are loaded from stylesheets are the background images. To identify the background images on the web page just disable the style sheet from the browser and reload the page. The images that are not loaded when stylesheets are disabled are all background images.
Technically the background images need to be a stylestic or decorative images. They shouldn’t convey any message to the user. No harm if the background images are purely for decoration. IF those images convey any information, do the following fixes to ensure they convey the relevant information to the screen reader users and search engines.
The alt way
Convert the CSS image to a real image and load it through markup. This means now the image is displayed on the browser from <img element. As mentioned above the ‘alt’ attribute and it’s associated alternate text reads aloud the message to the screen reader user.
The ARIA way
In case the background image cannot be loaded from the markup, the alternate text can be conveyed through the ARIA roles and properties. Remember that the first priority of fixing need to be the native markup only.
Use ARIA role img and aria-label property on the containor where the images is loaded from the stylesheet as shown below.
<div role=’img’ aria-label=’alternate text’></div>
About role=’img’
Since the image is loaded from stylesheet, screen readers cannot identify the image by the screen readers. Typically screen readers announce the type of element when user navigates to it. Eg: An image is announced as Graphic or image, anchor element is announced as a link etc. To ensure that the same semantics are conveyed even for a background image, role=’img’ is used.