When we deliver a WCAG compliance audit to our clients, one of the most common questions that we receive is “can I make any of these fixes myself?” Fortunately, in most cases, the answer is yes. Though a number of issues will require changes to site code, there are almost always content-based changes that any site editor can tackle. This article will identify some of the most common accessibility issues that just about anyone can fix.
Understanding Accessibility
While the concept of accessibility is easy to understand, the specifics of achieving WCAG compliance can be challenging to fully grasp. So, before getting into the specific fixes, we find that it’s helpful if one has a clear idea of the larger issues that we’re trying to address. So before we get into the specifics of how to implement your fixes, we’re going to look at the bigger picture.
These are just a few of the issues and technologies that are factors in the larger accessibility equation. For the purposes of this article, we’re only touching on issues where there are simple, content-based fixes. There are many more issues that will come up in a WCAG audit than what is noted below, but those will require the assistance of a programmer. So we will leave those for another day.
Screen Readers
Screen readers are used by blind people (and others with varying disabilities) to assist them with navigating a website. A screen reader operates by reading through the code of a page. It reads the code rather than the text on the page because the code identifies links, images and headings that aren’t readily apparent when looking at the page text. Because of this, it’s vital that all of those elements are clearly identified.
Color Contrast
Sufficient contrast between foreground and background elements is vital for people with colorblindness or low vision. Imagine a website that had a color scheme like this image:
If you’re lucky, you see the number 3 in the image above. Even without color blindness, detecting that number on that background is a challenge. But for some, it is impossible to discern what it is.
Captions for multimedia
Deaf users rely on closed captions or transcripts when playing video or audio files. We’ll discuss options for adding these to your your multimedia below.
WCAG Compliance Issues and Fixes
Issue 1: ‘Alt Text’
As we explained above, a screen reader scans the code/HTML of a web page and reads the contents aloud. When it comes across an image, it can’t see what the image is. And the image name frequently isn’t very helpful in describing it. Take the example below from The New York Times website:
Without alternative text, a screen reader would see that an image is present. But there wouldn’t be any way to know what is actually being shown in the image. The image name/url (https://static01.nyt.com/images/2024/06/04/multimedia/04dc-assess-tlqc/04dc-assess-tlqc-threeByTwoSmallAt2X.jpg?format=pjpg&quality=75&auto=webp&disable=upscale) tells you nothing. This is where alt text comes into play. Alt text takes on the job of describing the image. So when a screen reader sees that an image is present, it looks for (and reads) the alt text to describe the contents of the image to the user.
The Fix: How to Add Alt Text to Images
Most content management systems give you the option to add alt text to an image. Whether you use WordPress, Shopify, Squarespace, Wix, or any other platform, there is usually a straightforward method to type in alt text. Frequently you’ll be able to do this when uploading an image to your website. Here are instructions for adding alt text to an image in each of the platforms noted above:
Add Alt Text to Images in WordPress
There are a few ways to add alt text in WordPress. The way that we would recommend is to add alt text to images when you upload them to your website. If you get in the habit of doing this every time you add an image to the site, you’ll find it much easier than if you’re adding it after the fact.
- When you upload your new image to the Media area, it will place a thumbnail of the image you’ve just uploaded into your list of files.
- Click your newly uploaded image and it will bring it into editing view (like the screenshot below)
- The highlighted field above is the alternative text field. Once you add your text and click out of that field, WordPress will automatically save your changes.
Important Note: The alt text field is a description of the image. This should not just be the name of the image, and feel free to provide some detail. You want your screen-reader users to truly understand what is conveyed in the image you’ve chosen. Going back to The New York Times image that we referenced above, they describe the image in great detail.
The alt text for the image above is “A migrant wearing a blue top and dark pants climbs concertina wire to cross from Mexico into the United States near El Paso. A large fence is in the background, and shrubbery is in the foreground.”
This is a perfect example of the level of detail that you can (and should use) for your alt text. Screen reader users will appreciate you for it. Plus, alt text is also good for SEO, so don’t skimp.
Adding alt text in other platforms
Issue 2: Heading Structure
Sticking with the theme of accommodating screen readers, we’ll now discuss heading structure. This is an issue that comes up a lot in our audits. When people are adding content to a page and they add headings, they tend to think about the heading tags (H1, H2, H3, etc.) with an eye toward design rather than accessibility. So they may put in a H2 tag at the top of the page instead of H1, or they might skip over a header because H4 looks better than the H3.
But headings on a web page have a specific purpose, which is to establish a logical structure for a page. This is how the application of headings is recommended on the W3C (the World Wide Web Consortium is the organization behind WCAG compliance standards) website:
Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.
The Fix: How to Change Headings
This issue is straightforward, in theory. But depending on your content management system’s flexibility (or lack thereof), you might need to request assistance from your developer. Actually changing your headings from one to another might not need any explanation. But here’s a brief one, just in case.
Whatever CMS you use to run your site, there is likely going to be a format dropdown in your text editor. If you’re using the latest version of WordPress with the Gutenberg editor, you might find that every heading occupies its own “block.” If this is your setup, then it’s simply a matter of clicking the header block, and then clicking the header number to bring up the dropdown to change it.
Other text editors may be more like Microsoft Word where the text is all part of a single block. In these cases, you’d highlight the text that you want to change and then select the appropriate heading.
The Challenge: Where things can get a bit tricky is that websites typically have a stylesheet (CSS) that controls the font type and size of the site headings. So you might find that it’s easy to change the heading from H3 to H2, but H2 is way too large for the page. And there might not be a way for you to make adjustments to the font size on the page. If this is the case, you will need to ask a developer (unless you’re able to do this yourself) to modify the heading styles in the CSS.
Issue 3: Link Text
One issue that we come across all the time is improper link text. What is improper link text? It can be link text that’s misleading, in that it suggests that clicking on the link will take you somewhere other than where it’s actually going. But more often, it’s link text that is vague or somewhat meaningless. Text like “Click here” or “Read more” is a prime example of this. While a “Click here” link/button might make sense if you are able to physically see a block of text with a “click here” button below it. But when a screen reader is navigating a page, that “click here” button might be totally disconnected from the text that preceded it. Or it’s at least not obvious that the button is connected to the text. So it won’t be at all clear where “click here” might be taking the user.
The Fix: Changing Link Text
When you create a link, ensure that the linked text makes the destination clear. And if yours is a site that has boxes with content followed by a “read more” link or button, consider doing away with those links altogether and simply linking the title. If you can’t get rid of the button, then you can hopefully change the button text to something that is more specific.
Issue 4: Color Contrast
Moving away from screen readers, we now get into visual accessibility. As described above, many users can have difficulty distinguishing the difference between background and foreground elements if the color contrast isn’t high enough. So, the WCAG has established that the required minimum contrast for WCAG compliance is 3:1 for large text (page titles, headers, etc.) and 4.5:1 for small text (standard text size on a page). Of course, you aren’t going to just know what contrast ratios are. Fortunately, there are a number of free tools out there that can tell you what your contrast is. WebAIM has a couple excellent resources:
- Contrast Checker – use this if you already know what colors you are using (or are thinking about using) for your foreground (text) and background. You will plug in the hex colors and Contrast Checker will tell you the contrast ratio.
- WAVE Web Accessibility Evaluation Tool – This tool scans your entire page for accessibility issues. Contrast is only one of the issues that it identifies. But there is a very useful visual indicator when a contrast issue is present on a page. One word of caution when using this, or any automated tool: False positives are always a possibility. So if you’re getting a notification of a contrast error, just verify that it is correctly capturing the colors on the page.
Additional Note: There are a number of things that an automated testing tool can’t check. One of those things is if you are displaying text on top of a background image. An automated testing tool isn’t usually going to be able to see the colors in the image and where the text is located on the image. An automated tool might give you a warning about potential contrast issues if it detects text on top of an image. But you will need to conduct a manual assessment to confirm.
The Fix: Adjusting the colors on the page
Depending on your content management system, this may or may not be easy to do. In theory, if you have the ability to change either your text color or background color within your text/page editor, the fix can be pretty simple. But more often than not, when a contrast issue is present, it tends to be a global issue that will necessitate a change within your site’s stylesheet.
If your site is built in WordPress, you’ll see an option in the block editor to change the text color or the background color. But that feature should only be used if you’re changing the colors for a specific block on a page. It is not recommended to use this method on a larger scale.
Issue 5: Multimedia Accessibility
If you are including various forms of media on your website, such as videos, audio, or PDFs, every form of content needs to be accessible to all users. Here are some examples of the required criteria for WCAG compliance:
- Video – Captions, transcript, visible player controls, and no autoplay. YouTube can automatically generate captions, which is a great help. But be aware that this tool uses machine learning algorithms to create the captions and is not always accurate. The WCAG makes it clear that captions must be accurate. So you can’t rely on the accuracy of an automated caption tool.
- Audio – Roughly the same requirements as video apply to audio files, though captions aren’t going to be needed. However, the same warning applies to transcripts. While you can use an automated tool to transcribe your audio, it is essential to review (and edit) the transcript for accuracy.
- PDF – Think about PDFs the same way you would for a webpage. Screen readers must be able to read the document, it needs to be structured in a logical manner, images need alt text, etc.
The Fix: Tune Up Multimedia Files
With all multimedia, you’re going to want to take advantage of third-party tools to help you make your files accessible. Here are a few resources to consider:
- YouTube – As noted above, YouTube is able to transcribe a video and provide captions automatically. But they can often be incorrect, so you will need to review every file to make sure they’re correct. Here are instructions on how to edit captions.
- Audio transcriptions – There are several transcription services, both automated and human. With an automated service, they are going to be affordable (some are even free), but they will have errors that need to be corrected. (Some are better than others in terms of accuracy, so you’ll want to look into the best option for you.) Human transcription services are going to be far more accurate but also more expensive. So weigh your options and determine what’s right for you.
- PDFs – Adobe Acrobat Pro has some great built-in tools to remediate accessibility issues in PDFs. It will help you identify and fix accessibility issues. This is a good first step. If you have a lot of PDF files on your website, you could turn to a service to help with the remediation work.
In Closing
WCAG compliance can be an enormous undertaking, and an expensive one. But it is also essential to the health and success of your website. When you receive an accessibility audit of your site, the sheer number of issues that will need to be addressed can be overwhelming. You will need to engage a developer to resolve many of the issues that come up in an audit. But the issues that we have described above will shave off a considerable amount of time from any remediation efforts.
If you have questions about any of the issues described above, or about WCAG compliance in general, feel free to reach out to us. We’re always happy to help.
