Skip to main content
Login

Accessibility: Images, Headings and Links

Modified on: Wed, 30 Oct, 2024 at 5:02 AM

Tip: If you are an Account Owner/Administrator and want to give your team a good start with Accessibility, check out the article Accessibility: Getting started for Account Owners/Administrators.

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 [Interactive tutorial]. You can also reference more ways to learn if you'd prefer to follow along with a webinar, or take a formal course in Siteimprove Frontier.

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:

 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:

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

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

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>

More Ways to Learn

Articles:

Siteimprove Frontier:

Check out our Siteimprove Frontier (opens in new tab) education platform which includes:

  • Online training courses
  • Certifications to help you develop and showcase your Siteimprove expertise
  • Live Coaching sessions in an office hours format to get help with your specific needs
  • Community to connect with other Siteimprove customers and share best practices

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.