Skip to main content

Accessibility: Images, Headings and Links

Tony Verga avatar


More than a billion people in the world have a disability, and barriers often get in their way online. "Accessibility" is the inclusive practice of removing barriers that prevent people with disabilities from getting things done online. Simple web page elements can have a huge impact on user experience for these types of visitors. This page is intended to teach you the basics, by helping you get started with:

If this is your first time using this feature, we recommend taking a quick tour with our Accessibility Overview. You can also reference more ways to learn if you'd prefer to follow along with a webinar, or take a formal course in our academy.

How do I add alternative text to images?

Alternative text (or "alt text") is a description of an image file, which is stored within an attribute of image tags used on web pages. Here's an example:

<img src="/images/global/siteimprove-logo.svg" alt="Siteimprove logo">

In this case, the alt attribute is set to "Siteimprove logo". Users who are blind or visually impaired rely on alt text to understand the context of images placed within the content. The presence of this description allows for screen readers (a type of assistive technology) to describe the image out loud, rather than defaulting to the image source (i.e. file name).

Every image asset should include an alt attribute, regardless of its purpose. Informative images, like the one used in my example above, should have a description describing their purpose. Decorative images, which only exist "for looks", and don't support their surrounding content, should have an empty alt attribute, like this:

<img src="/images/global/decorative-image.png" alt="">

The presence of an empty alt attribute will "hide" an image from users of assistive technology.

Help Center Article: Accessibility: Image Alt text best practices

The Importance of Alternative Text (Video):

How to fix a broken link video.

How do I fix issues with Headings?

Headings on a page serve to organize content and create a hierarchy of information. They also make it significantly easier for visitors with disabilities to navigate your website. Each page should have a heading structure, identified by <h1> through <h6> tags, and should follow a logical outline (i.e. heading levels should be used to differentiate between main points and subpoints of your content). The Accessibility module will help you address issues like headings missing text and pages that lack headings altogether. An example of that first issue is as follows:

<h2></h2>
<p>
This is my example paragraph. There are many like it, but this one is mine.
</p>

Heading tags should never be left empty, even if the goal is to create space on your pages. These types of visual effects should be done through CSS. In this case, the <h2> tag should include text describing the contents of the paragraph below it:

<h2>My Example Paragraph</h2>
<p>
This is my example paragraph. There are many like it, but this one is mine.
</p>

If there are heading tags on your page that serve no purpose, they should be removed entirely.

Help Center Article: The importance of headings

How to Address Heading Issues (Video):

How to Address Heading Issues (Video)

How do I address issues related to link text?

Link text is used to describe the content that you're linking to on your website. Users of screen reader technology can generate a list of links, having them read alphabetically and navigating websites from there. For this reason, link text should be as descriptive as possible, and text like "Click Here" and "Read More" should be avoided entirely (as they depend on visual context in order to understand them). Siteimprove can help you address issues where the link text is used for multiple different destination URLs, or is too generic in its current context (e.g. "Read More"). An example of what to avoid is as follows:

<h2>Poor Link Text Example</h2>
<p>
<a href=/example/blogpost>Click Here</a> to read more about how to write proper link text.
</p>

By using "Click Here" as link text, you assume that your visitor has the visual context to know they will be going (i.e. a post about writing proper link text). The link text should be a description of where the visitor will end up, similar to the example below:

<h2>Proper Link Text Example</h2>
<p>
We have a post on our blog about <a href="/example/blogpost">how to write proper link text</a>.
</p>

How to Address Link Text Issues (Video):

How to Address Link Text Issues (Video)

Navigating the Accessibility Page Report

The Siteimprove Page Report helps take the guesswork out of addressing issues on your site. We highlight any issues we detect using a snapshot of your live page, making it easy to identify where to make fixes. In addition, each issue type contains an explanation of the issue, and how to fix it.

In-App Tutorial: Navigating the Page Report - Accessibility

More Ways to Learn

Academy Courses:

Accessibility Fundamentals for the Web
Leveraging the Accessibility Module (Mastering Web Optimization Learning Path)

Webinar:
Attend a Live Webinar
Watch an On-Demand Webinar
Assistive Technology Demonstration

Was this article helpful?

10 out of 11 found this helpful