Making your website accessible can get complex and, for some things, you really do need a WCAG 2.0 AA knowledgable web developer, but in this blog post, I wanted to provide four simple things that anyone can do to make a big impact on their website’s accessibility.
These bullet points are not only found in ADA Website Compliance lawsuits but they make a significant difference in the usability of a website.
1. Alt attributes – Make sure that all images on your website have an alt attribute. If the images are intended to convey meaning, put an alt text value inside that attribute that describes the image.
Here is what the code of an image might look like:
<img src=”dog-picture.png” alt=”spotted pitbull puppy”>
The alt=”” part is the attribute, the alt text value is spotted pitbull puppy.
2. Anchor text – Update any links on your website to have descriptive anchor text that describes where the link goes. We’ve all come across links that say, “click here” or “learn more”. Avoid these because they leave it uncertain as to where the links go.
You’ll also want to avoid the extra-long URL strings as these get fully read aloud by screen readers. Something like:
https://accessible.org/folder/subfolder/this-article-title-goes-on-forever-and-ever/
Instead, use descriptive anchor text like “cherry pie recipe” or “how to restart your computer” that accurately describe the page that follows.
3. Closed captioning – If you use YouTube videos, it’s relatively easy to update the automatic closed captioning that YouTube provides and give your videos accurate closed captions.
Read my article on how to make YouTube videos accessible.
4. Heading structure – Headings organize and structure your page’s content. Each page should have one H1 heading followed by H2s and then H3s under H2s and so on.
The H1 is the main topic of the page. It provides a broad overview of the content on the page.
H2s divide the main topic into subtopics.
H3s are nestled under H2 and divide the subtopics into sub-subtopics.
You can continue on like this down to H6s but the furthest I’ve seen any website I’ve worked on go is to H4.
Here’s an illustration:
We go to Fruits.com/apples and the page is all about apples.
The H1 would be “Apples” or “Apple Information” or something like that.
Depending on how you approach the content, an H2 could be “Types of Apples”.
And then H3s under that could be “Fuji Apples” and “Honeycrisp Apples” and so on.