Chris Brailsford• Updated February 22, 2022
Whenever I’m building a website for a client these days, one of the top questions I get asked is “How do I make my site accessible?” While there is no one-size-fits-all solution, there are a number of simple rules to follow so that your content is accessible to as large of your audience as possible.
Provide appropriate contrast between text and backgrounds
With so many people suffering from poor eyesight and color blindness, low contrast between text and the background can make reading difficult. By using a strong contrast between the two, you’ll increase your audience’s ability to read and understand your content. Depending on the level of accessibility guidelines you’re adhering to, that contrast ratio changes, so be sure to test and verify! You can use the WebAIM Contrast Checker or the contrast checker built into the WAVE accessibility browser extension.
Use heading tags in order
As a general rule, heading tags are meant to help break up content on your page, like a table of contents for a book. By using the heading tags (H1-H6) in the right order, you not only make it easier for screen reader users to navigate your page and know what it contains, but also add to your site’s search engine optimization.
Describe your images with alt text or leave it empty
Alternative text is used by screen readers to explain what the image contains, so describe it to your audience! If the image is just for presentation and doesn’t add anything relevant to your content, an empty alt text tells a screen reader to skip over it. By default, WordPress adds the empty alt text attribute to images out of the box, but beware if any plugins change the image (such as lazy loading image plugins, etc) as they might remove this attribute. P.S. You don’t need to include words such as “image of” or “photo of” in your alt text, as the screen reader announces that it’s an image for you.
Don’t rely solely on color to convey information
As I mentioned before, color blindness is one aspect of accessibility, especially when 5-10% of people in the United States are affected. Since 99% of colorblind people suffer from red-green colorblindness, this can seriously impact how users understand success and failure on your website. If a contact form only shows a red border on fields to indicate errors, a colorblind user might not know what they’re doing wrong since they can’t see the difference. That’s why it’s important to include other ways to convey that information, such as an icon or helpful text near the field to show where the problems lie.
Include focus styles for focusable elements
This may seem self-explanatory, but a lot of CSS frameworks opt to remove focus styles from elements like buttons and anchor links, without replacing them with a suitable alternative. If a user is accessing your site with a keyboard, they may not know where they are while tabbing around if there is no focus indicator.
Review auto-generated closed captions
If you’re using a video service such as YouTube to host your videos, you might also be leaning on their auto-generated captions to do the heavy accessibility lifting for you. However, it’s best to play through the video with captions on and see where there might be grammar and punctuation mistakes, as the automated system won’t get everything perfect. Imagine reading a blog post that was one giant run-on sentence. If the system doesn’t know when to add periods, that could be what your viewers experience.
There is certainly more to accessibility than what is on this list, but adhering to these bullets will definitely get you started on the right foot. For greater detail, and to learn about the varying levels of accessibility conformance, you can check out the Web Content Accessibility Guidelines.
