Key Points for Website Accessibility

With all of the news going around regarding website compliance, we can assume that you may be concerned about your website being able to pass an accessibility scan. In Web Services, we have been taking all client requests to validate at WCAG 2.0 (AA) and (AAA) levels for existing sites and ensuring current accessibility guidelines are satisfactory on all new custom WordPress theme redesigns.

But, as those who have spoke with us on the subject most likely have heard “ADA Compliance will be a journey, not a destination that we can visit once or twice”.

If you manage your credit union’s website content and are pushing updates, you will want to ensure that the changes you make don’t break any guidelines and threaten your site on a compliance scan. We’re here to give you a few pointers and steps you need to utilize when making updates on your site.

Adding Alt Attributes

This can be claimed as one of the most important parts of website compliance. An alt attribute (tag) is a string of text that is assigned to an individual image that shows if the image is unable to load or is read through by a screen reader.

Adding alt text to an imageWhen uploading an image in WordPress, the Attachment Details screen will show. This section has an entry field labeled “Alt Text”. Use this to describe the image in one or more words. The text will automatically save when you click out of the entry field.

 
 
 

If you are adding an image using HTML, you will have to add an alt attribute within the <img> tag in the code. Don’t forget the quotation marks!

Sample alt text in code

NOTE: If you upload an image and add it in a page, banner, or post BEFORE you add the alt attribute in the Media Library, the tag may not syndicate with the posted image. Replace the image with itself or add in the alt text using the text editor to ensure the tag exists.

Color Contrasting

When adding your content to your page, be conscientious of how the text sits on the background. Although a screen reader can catch it, visual impairment can make the text difficult to read. You can check the color comparison with the WebAIM Color Contrast Checker to ensure the text satisfies WCAG .20 guidelines.

Color Contrast RatioPassing Contrast Ratios
WCAG (AA) small text: 4.5:1
WCAG (AA) large text: 3:1
WCAG (AAA) small text: 7:1
WCAG (AAA) large text: 4.5:1

 
If you don’t know the hex code for your specific colors, you can download this nifty tool called Pixie that shows you the color code of what your mouse is hovering on. Or, if you are familiar with it, use your browser inspector.

NOTE: The accessibility scanner cannot distinguish text on a background image, only color that is styled in as a background color.

Link Names

Although scanners could potentially miss this key item, it is a failure of success criterion to use non-specific link text, the biggest culprit being “Click Here” as linked text in a set of content. As mentioned in the previously linked site, screen readers may have a feature that lists the links together on the page. Even if the reader also states the URL, it may not be descriptive enough for the user to identify the link they are clicking. We have recently posted an article solely focused on avoiding the use of “click here” in our Web Services news posts.

Beware of Copying and Pasting

Text editor tabSometimes it seems easier to write your page or post content using a text editor you’re more familiar with, or by copying text from a pdf or email. What you may not realize is this can generate all sorts of hidden HTML and CSS styling that can cause a compliance scanner to have problems with your site. Check the text editor tab to see if additional code had been added when pasting.

Conclusion

By taking these considerations into account, you can significantly reduce your chance of defying the current WCAG guidelines in place when managing your website content. It doesn’t hurt to routinely scan your own website for potential problems using a Web Accessibility Checker tool after pushing any updates.