Accessibility: Images, Headings and Links
Modified on: Fri, 17 Sep, 2021 at 1:09 PM
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:
- How do I add alternative text to images?
- How do I fix issues with headings?
- How do I address issues related to link text?
- Navigating the Accessibility Page Report
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:
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:
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 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 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):
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
- Accessibility Fundamentals for the Web
- Leveraging the Accessibility Module (Mastering Web Optimization Learning Path)
Did you find it helpful?Send feedback