Adding portfolio items is a great way to promote you work. Finding a way to display them visually to entice visitors is half of the fun. Drag and drop tools like page builders provide lots of ways to accomplish this but they don’t always create accessible links or accessible link text. The following example will show you what is not accessible and how to fix it in this use case. Ideally these topics will translate to your project. If you get stuck or need help reach out to us via the contact form or on social media.
In order to pass Google’s Lighthouse Accessibility tests, we need to provide accessible link text, let’s start with the actual guideline/success criterion.
WCAG success criterion
WCAG 2.4.4 Link Purpose: (Level A): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Accessible Links Example
These images have a color overlay effect to communicate to a visual user that they can be clicked which is great. These images are all links as well but the link effect is achieved by the plugin and its outside the image. This means the image alt text is not used to describe the link. Active images, images used as links, will create accessible links if the alt text used on the image, describes the link’s purpose.
Example of an inaccessible link
<!-- Example of our Link code -->
<div class="uabb-module-content uabb-ib2-outter uabb-new-ib uabb-ib-effect-style7">
<img class="uabb-new-ib-img" src="https://mindsetatx.com/wp-content/uploads/2019/12/gallery2.jpg" alt="Four Points Rugby Project">
<div class="uabb-new-ib-desc">
<div class="uabb-new-ib-content uabb-text-editor uabb-simplify"></div>
</div>
<!-- This line is the one we need to fix -->
<a class="uabb-new-ib-link" href="/four-points-rugby-club/" target="_self"></a>
</div>
On our anchor tag shown in the above code sample, we don’t have any text between the opening and closing of the anchor. This means a screen reader does not have any way to describe the link. Unfortunately the plugin itself does not offer a field to enter text into this link directly so we’ll have to replace this module with something we can take more control over.
Example of an accessible link
<div class="gallery-container">
<a href="/four-points-rugby-club/">
<img alt="" src="wp-content/uploads/2019/12/gallery2.jpg" width="auto" height="auto" />
<span class=”green-overlay”></span>
<span class="sr-only">Read more about our Four Points Rugby Project</span>
</a>
</div>
/* Styles */
.gallery-container {
position: relative;
}
.gallery-container img {
display: block;
height: auto;
width: 100%;
}
.green-overlay {
background: rgba(1,96,104,0.75);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.gallery-container:hover .green-overlay {
opacity: 1;
}
In the revised code there’s a couple things going on. First the image we are calling using our image tag has a null alt text attribute. Alt Text is good, but not always necessary. This image is a link, the content of the image is not as important as the meaning of the link, therefore we use alt=”” to hide the image from view for screen readers. Instead we provide additional text to the user via a span tag. This span has a class of “sr-only” so the text will be hidden from visual users but read out loud by screen readers. Now our links are described and the gallery image displays exactly the same way for visual users.
Screen reader only text
Often times accessible link issues are tied to the lack of context. Using an instagram icon to link to instagram does not communicate anything to a screenreader. Adding screen reader only text will allow you to visually display an icon but add context to that icon with additional text that is available to the screen reader only.
Using display: none, in CSS will hide the text from all users. so we need to visually hide that text only. This is done with css like so:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}Using a screen reader only class like this will help content authors and developers create visually appealing designs while still adequately delivering accessible links. Each link’s purpose will be programmatically defined and all users, without regard to ability will be able to consume the information on the site.
If you have any questions about accessibility, accessible links, accessible link text, accessibility and WCAG, or have a special case, please reach out to use we’d love to help.