There’s a lot of blog posts and guides online about “ADA compliance” or “accessibility requirements” for websites, and you may wonder what the fuss is all about.
Put simply, the Web Content Accessibility Guidelines (WCAG) give us one central standard that equips us to make websites accessible to all people.
You might immediately think of blind persons, who use screen readers to interact with websites.
Other WCAG rules help us support those with various forms of color-blindness, those for whom seizures or migraines can be caused by video or flickering content, even those who are unable for whatever reason to use a mouse and/or a keyboard.
It feels profoundly alienating to be excluded from something for a reason you can’t change, and I’m sure you don’t want to give that experience to anyone visiting your website. So what can you do?
1. Decide to do it.
This may sound obvious, but the first thing you can do right now to make your website more accessible is to decide if this matters to you.
To become familiar with WCAG and the many people these guidelines help, you can check out one of these excellent (and free!) resources:
- Accessibility Fundamentals Overview – this is published by the Web Accessibility Initiative, the authors of WCAG, offering information and demonstrations of how people access and interact with websites.
- WordPress Accessibility Handbook – Yes, WordPress has an Accessibility Team, who are committed to equipping web designers and developers to build websites that are fully accessible.
2. Try out a screen reader.
WebAIM shares some great observations about how media readers interact with website content. No matter how many resources you read about accessibility, perhaps the most effective way to understand it is to experience your website through a screen reader. The author notes that your first experience with a screen reader can be confusing and that it takes a little practice to get comfortable with one. Some places where this can be particularly revealing for you are
- Alt text for images: If the image is purely decorative, then it should explicitly have an empty alt text assigned (alt=””). If the image conveys meaning to your website visitors, then you should describe it in alt text. WordPress makes this easy through the Media Library; you can page through the images, see the image in context on the webpage, and fill in the “Alternative Text” field properly.
- Use headings wisely: In a document, headings serve as landmarks, indicating where you want to stop for a deeper look and where you can just cruise past. On your webpage, the heading styles perform a similar function. Use these to outline the content on the page–never as just a styling shortcut–so that your visitors can quickly find the information that is most relevant to them.
3. Think about color contrast.
A disability need not be as stark as full blindness to make a website difficult to interact with. Even natural aging can diminish eyesight so that a high degree of color contrast between elements on your website makes the difference between understanding your content and moving on.
The WCAG defines contrast ratios for text, based on its size, weight, color, and background color. Instead of using the formulas provided by WCAG, you can use one of the many color contrast checkers available online. My favorite is Accessible Colors.
The example above is the default when you load this page, and fails to meet the contrast ratio. In addition to the “failing” sample, the page offers two passing options: one changing the text color while keeping the same background color, and one keeping the text color while changing the background color. This tool allows you to change the text size, toggle between regular and bold, and try different combinations of colors.
I use the Sharp Color Picker extension to Firefox as well so that I can easily grab colors from the webpage and test their contrast.
Making your website accessible doesn’t mean you have to scrap everything or rebuild it from scratch. Instead, you can take three steps to learn a little more about accessibility, experience it for yourself, and make some small adjustments to your content.
Web Teks will always be here to give you a hand along the way. We are experts in ADA compliance, having developed and implemented a number of accessibility plans and services for a variety of clients.
Web Teks can help you too – contact us.