Let’s talk ADA compliance, shall we? Most of us know it in the context of businesses that we frequent in-person… places with wheelchair accessibility or other accommodations for people with disabilities and the like. Those considerations seem obvious when you stop to think about them. But how do you get a website to be accessible? It’s a question I get a lot.
What does ‘website accessibility’ mean?
The short version is that your website content should be accessible to those users who are blind, deaf, or others with different types of disabilities who rely on assistive technologies like screen readers or voice assistance to navigate your site.
How to make a website accessible?
There are a lot of elements that go into making a website ADA-compliant, but here are my recommendations and tips to get your site on track.
Add Alt Text to All Images
Alt text is short for alternative text. It’s commonly referred to as an ‘alt tag’, but it’s a brief bit of text used within HTML code to describe an image or image function. This is important for a few reasons, with accessibility topping that list.
Any user relying on a screen reader to navigate a website will be read the alt text to help them understand the image that they can’t see. Think about that for a second. If I’m blind, I can’t see the image, so I’m relying on the website, through its use of alt text, to know what I’m missing visually. Totally makes sense, right?
An added benefit of alt text is that they also provide better image context for search engines, giving you a potential boost in SEO. Google can’t technically crawl an image file, but it can crawl the alt text, boosting your SEO if they see that you have a relevant image.
Alt text is also important to include in case an image file can’t be loaded for some reason (think super slow internet connection). The alt text will be displayed so the user has an idea of what should be there.
Alt Text in the Age of Pinterest
You may notice the image card above has text (a version of the post title) baked into it. Normally, I would say to try and steer clear of such things, but if you’re looking for your content to live on a website like Pinterest, it makes sense to have text right on an image. Since this image is purely “decorative” (an ADA image term) you can leave your alt text empty. I know, I know. It goes against the whole process and flow, but if your image is not necessary to understanding your content, alt=”” is sufficient. WordPress users, if you leave your alt text box empty, WordPress will interpret that appropriately on the front end.
If you aren’t sure whether your image is decorative or not, read your content out loud to someone else. If they can understand what you are saying without describing the images, then it’s probably safe to assume that the image(s) are decorative.
Optimal Alt Text
Close your eyes, have someone read the alt text and if you can conjure up a reasonable idea of the image, that’s a good start. Take a look at this example:
<img src="pasta.jpg" alt="bowl of pasta" />
But this is better:
<img src="pasta.jpg" alt="bowl of Turkey Bolognese with Parmesan cheese" />
Alt Text Recap:
- Describe the image as specifically as possible. The number one reason to use alt text is to provide a text description for people who can’t otherwise see the image.
- But keep it on the short side. The most popular screen readers cut off alt text around 125 characters so try to work within that.
- Use your keywords. If it relates to the image, go ahead and pop in one of your keywords in there.
- Don’t just type a list of keywords. Example of poor alt text: “pasta spaghetti Italian food dinner parmesan cheese” That won’t help anyone and Google will dock you.
- Don’t use images as text. Gah, my biggest pet peeve! Search engines can’t read text within your images, so please don’t bake text into your image. If you insist, declare what image says within your alt text.
- No need to include “image of,” “picture of,” etc. in your alt text. It’s already assumed, so you can save your characters.
- Don’t forget buttons. If you add in a form that includes an image as it’s “submit” button, include some alt text to describe its function like “sign up” or “search” etc.
Don’t Rely Solely on Color
I’m all for using color to draw attention to something or convey important meaning, but it’s best to not rely on color alone to convey info. Anyone using a screen reader or perhaps even someone who is colorblind may miss your (colorful) intention. For example, a success or error message on a form should include appropriate messages or icons explaining success or failure, not just indicating so with color.
Provide Structure to your Content
When drafting content, think about the overall structure in terms of a newspaper. There are headlines and subheadlines that quickly draw a reader’s eye to the content they want to read. This isn’t an option for non-sighted users, so it’s important to give your content headings where appropriate. For a vision-impaired user trying to read your content with a screen reader, they rely on these heading tags that are inserted into the code to indicate the various topics or sections on your site. Imagine seeing a teaser on the front page of the newspaper, but not being given any clear indication of where the article resides. How annoying is that?
When using headings, don’t skip heading levels (for example, use an <h1> tag then follow it with an <h3> tag). It will leave those screen reading users wondering if they missed part of the content. Using headings and lists appropriately is crucial to assisting users find their way around your site.
Captions or Transcripts for Video
We talked in-depth about the importance of alt text for images, but what about videos? It’s important to provide captions for those hard of hearing, or at minimum, a transcript below the video so they can understand its contents. As a bonus, captioning or transcribing your videos will also bump SEO. Search engines can’t watch a video to know what it’s about, but they can obtain information via the text included in your closed captions or transcripts.
Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like “click here” and “more” should really be avoided.
Accessibility Bonus Tip:
This one isn’t even really based on ADA best practices so much as just good design: make sure your content is visually easy to read and understand. We’re not just talking quality content, but also legibility. When I’m designing a site, I think about font clarity and sizing, along with colors and contrast. Take a look at the two buttons below:
In general, make sure your site is following the WCAG guidelines as closely as possible. These have become the accepted principles of web accessibility and will ensure that all users have an optimum experience on your website.