Accessibility on the web is a big topic, but broadly is a set of practices and technical specifics to make content accessible for disabled people. Here’s a great starter guide to web accessibility.
Some parts of web accessibility deal with the content itself. There are specific actions you can take to ensure that your content is still accessible. Here are areas where you can affect the accessibility of your website content as a content manager.
-
Images
-
Audio/Video
-
Text
-
Color
Once important consideration is for people browsing your website in a different way than you, for example by using a screen readers. Here’s a quick video introduction to screen readers.
Images
Some disabled people will use a screen reader to interact with a website. If you’ve ever turned on Voice Over on an iPhone, that’s an example of this type of software. The screen reader will read out the information presented on a website to a listener. However, they can’t read out an image. Instead, images can have Alternative Text or Alt Text which is a description of the image that will be read aloud. Additionally for folks on slow bandwidth connections, the image may not load and they’ll instead see the Alt Text, so it’s important for more than just folks on screen readers. Here’s a great guide on how to write good alt text. In Fireside you can right click on any image select properties, and then add the alt text and click save.
Infographics
Some Images will have a small amount of text on them. Generally this is a bad idea, but can be a reasonable compromise if the text on the image is a part of that image’s alt text. However, if you have an image with a lot of text, like an infographic, that text is too long for the alt text which should only be a couple sentences maximum. As such, if you make an infographic for a website, use empty alt text, but ensure that the entire text of the infographic is somewhere else on that same page. That way, screen reader users will have access to the exact same content.
Audio/Video
Audio and Video content needs to have a transcript available and closed captioning. If you upload a video to youtube that is linked on your site or upload an audio file, you must include captions as a part of the video, and provide a transcript for audio. Here’s a great guide to adding captions to a youtube video.
Text
Text needs to be semantically correct. This means that there are the appropriate HTML markers around the text for screen readers to navigate to and understand what kind of content exists on a page. This impacts many different parts of a page, but some common ways to help are below.
Headings
Screen reader users may want to navigate to different parts of a page. One landmark you can give them is to use appropriate headings. In HTML this is are the <h1> <h2> <h3> tags for example. In Fireside you can select some text in the editor and then choose a heading type. This has an effect on styling, but also semantically will tell a screen reader where that text is in relation to other text. What you need to do is to make each subheading continue down by one and not skip a heading level. For example, if you’re writing content a heading might be a Heading 2 or <h2> but then the next subheading under that would be Heading 3 <h3> and not an <h4>. The important thing to keep in mind is to not skip levels. Finally, it’s a best practice to only use a single Heading 1 <h1> on a page. That likely already exists for the page title, so simply start with an H2 and you’ll be fine.
Hyperlinks
When you hyperlink content the best practice is to have the written text be descriptive of the link content, and not the URL itself or vague text that doesn’t make sense out of context. For example Read More is bad hyperlink text because it doesn’t say anything about where that link is going. Screen reader users are able to quickly cycle through all of the links on a page, but without the surrounding context, a list of links that say Read More or here aren’t useful. As such, hyperlink some text that says something about where the link is going. So maybe, read more about HR 1 or Click here for casework assistance.
Language
Another type of disabilities to consider are intellectual and developmental disabilities. Not everyone will have the same cognitive capacity to understand words and meaning. As such, try and target your writing for a lower reading level, that way it is understandable to a wider audience. The average American adult has between a 7th and 8th grade reading comprehension, so that’s the maximum reading level you should have. Here’s a sample reading level checker.
Color
For constituents who are low vision or color blind, they may be seeing your website, but if the contrast ratio between two colors isn’t high enough it may be difficult or impossible for them to see that content. As such, you want to be mindful when changing the color of text. If you make it a light gray on white, that may not be visible to everyone viewing your website. Additionally, when you are designing your site, the contrast ratio of the main colors is an important thing to keep in mind. Here’s a great introduction to contrast and color accessibility.
Summary
You can follow the above guidelines to ensure that your website is as accessible as it can be to constituents with varying disabilities. This is really important as 61 million adults in the United States live with a disability. (That’s 1/4 adults). The CDC has a great explainer on how many people are impacted by some type of disability.