Recently, I attended WordCamp Denver, a conference where a bunch of us WordPress geeks get together to share tips and discuss the latest and best web dev industry standards. No matter the level of experience you have with WordPress, there is something you can learn at WordCamp.
This year in the developer track, one talk that stuck out for me was about website accessibility. Let me share a little backstory:
We were recently contracted by a client to improve their site accessibility and ensure they were compliant with Web Content Accessibility Guidelines (WCAG). Our initial tests found the site was 80 percent compliant, according to a Google Lighthouse report we ran. This score was fairly high because when we first built the site several years ago, we made sure that all content was not only human-readable, but easy for search engines to crawl and understand as well. For example, one element that is helpful for both human and search engine accessibility is making sure every image has a descriptive “alt tag.” This is a good practice for screen readers and it also helps with SEO by “teaching” search engine robots what the image is and why it’s relevant to the text content on a page. Moz does a fabulous job of explaining what an “alt tag” is.
At WordCamp Denver, speaker Joe LoPreste with St. Pete Design gave a very informative talk concerning the number of lawsuits that have been filed due to website accessibility issues. The stats he shared were staggering! The number of these kinds of lawsuits so far in 2019 is 12 percent higher than the same time period in 2018 and shows no sign of slowing down this year.
Joe gave us some great tools and resources to help make sure the sites we are creating provide the highest-quality user experience possible to everyone. Here is a summary of Joe’s 11 steps to improve website accessibility:
1. Provide alt tags for all non-text content.
The alt tags should be descriptive enough that those who are visually impaired can understand what is in the photo by means of a screen reader — ideally fewer than 200 characters but long enough to paint a picture.
Example:
Works:
<img src=“french_toast_Image.jpg” alt=“french toast with syrup”>
This image is of french toast so technically this works, however, this could be better described.
Better:
<img src=”French_toast_Image.jpg” alt=”Stack of french toast topped with blueberries and banana slices, drizzled with syrup and powdered sugar”>
This alt text is better because it gives a full description of what is in the image.
Elements that are strictly decorative (e.g., background textures or design elements that are abstract and/or do not change the context of the content on the page) should be marked as “decorative” so screen readers will skip over them. In WordPress, there is an option to mark the element as decorative. If hand coding you may also leave the alt tag empty <img src=”/images/background.png” alt=” ” />.
2. Label all form elements.
Make sure that all form elements are properly wrapped in label tags. The label tag enables a keyboard shortcut allowing users to jump/tab from each form element to the next.
Example when using the popular contact form 7 plugin:
<label class=”form-left”> Your First Name (required)
text* first-name] </label>
<label class=”form-right”> Your Last Name (required)
[text* last-name] </label>
<label class=”form-left”> Your Company (required)
[text* company-name] </label>
<label class=”form-right”> Your Phone Number
[tel* tel-303] </label>
<label> Your Email (required)
[email* your-email] </label>
<p style=”clear:both;”> Describe Your Project
[textarea your-message] </p>
[submit “Send”]
3. Add closed captions and audio descriptions to all videos.
YouTube makes it easy to add closed captions to your videos. Be sure you are also adding descriptive text beyond just what’s in the script. For example, if part of the video has some music playing in the background, add a description like [upbeat music plays in the background] so that your hearing impaired or deaf visitors don’t assume a break in the dialog is just an awkward silence.
4. Ensure the color contrast ratio is 4.5:1.
Readability depends not only on text clarity but also on how easy it is to see the text on the page. Making sure you have a high enough color contrast is important, especially to those who experience any color blindness. You can check color contrast on your website with the contrast ratio checker.
Bad color contrast
Good color contrast
5. Make sure all link text is descriptive and underlined.
We have all seen the words “click here” used as anchor text on a link in the past. Anchor text is the copy you see underlined and/or in a contrasting color (often blue) in the copy on a page (e.g., see what I just did there with the words “anchor text?”). Anchor text is clickable, and the text should describe what the link points to. For those who use a screen reader, “click here” gives no context about where the link may take the user if they click on it. Being descriptive in the anchor text used in a hyperlink helps users understand and trust what will happen when they click a link.
6. Don’t color code the copy.
No more can we use color to help convey meaning in web copy. For instance, I know there is a link when I hover over a certain element and it changes color because I am not visually impaired. However, those who have a harder time seeing color may not be able to distinguish that color difference. Therefore, in addition to changing the text color in a hover state, underlining the anchor text for links on a page is a more accessible visual cue. Also make sure to add a readable legend for anything that might include colored identifiers (e.g., required fields are marked with a red *).
Screenshot pulled from https://www.w3.org/WAI/tips/designing/
Screenshot pulled from https://www.w3.org/WAI/tips/designing/
7. Make sure font size is at least 16 pixels and properly spaced.
Proper spacing is important when text is enlarged to 200%, as visually-impaired users’ display preferences are often set. The rule for spacing is 2% between paragraphs and 1.5% between lines.
Example CSS:
p { font-size: 16px; line-height:1.5em; padding-bottom: 32px; }
8. Input errors must be identified and described.
When handling input errors for form items, the area should be highlighted and a description of the field should be included. For example, if a user skipped a form field and clicked to submit the form, the resulting error message should be highlighted and descriptive text such as “Please review the error below: Email field is required.”
Not only is this tactic helpful for folks who use a screen reader to navigate form pages, it’s just a common courtesy to let people know specifically what they missed rather than making them guess!
Screenshot pulled from https://www.w3.org/WAI/tips/designing/
9. You should be able to navigate the whole site using only a keyboard.
This is called tabbed navigation. Making sure that there is a focus state on all tabbed clickable elements is important so that users with ambulatory, vision or motor-related impairments can more easily navigate through the content of your site.
10. Make time limits friendlier.
Some sites, like those for financial institutions or ticket purchasing, are required to automatically log users out after a few minutes of inactivity. If your site has a time limit like this, the best practice for accessibility is to include options to extend the limit. For example, a notification asking if you need more time to complete your transaction should appear for a minute or so before a user is logged out.
11. Provide a skip navigation link option for large navigation menus.
We’ve all seen those long navigation menus or “mega menus.” Screen readers tend to go through each link, and if you have a long menu it can be frustrating to have to go through that menu on each page. Consequently, the “skip” link is required so that readers can go straight to the content versus going through the navigation each time.
Another thing you’ll want to add to your site once you’ve put in the effort to make it accessible is an accessibility statement. This statement shows users that you care about their experience and needs. It provides them with information about the accessibility of your content and demonstrates that you have made a socially-responsible commitment toward accessibility and inclusion. You can easily generate an accessibility statement by going to the W3C Web Accessibility Initiative site and using their statement generator.
In addition to the warm feeling of being inclusive and accommodating to all your site users, there is a federal tax credit available to small business owners who invest in efforts to make their website accessible. Now, we’re not CPAs, so you’ll want to talk with your tax preparer, but you can get more information on this tax credit by reading about form 8826 on the IRS site.
Implementing the accessibility recommendations in this brief list will not make your website 100 percent WCAG compliant, but it will certainly put you on the path to making your site more accessible to search engines that are trying to interpret and categorize your content in their ranking algorithms, and to the end-user by improving their experience and ability to get to the content they want or need.
Don’t wait to make your site more accessible! Even if you don’t have the time or budget to do everything right away, a small step in the right direction is still a step worth taking. If you want to see how your site stacks up in terms of accessibility, the WAVE web accessibility evaluation tool is a great way to quickly test the pages of your site and see what improvements you can make. If you don’t want to take on this task yourself, get in touch with us and we would be happy to help!
