When we’re creating for the web, it’s easy to forget about making our content accessible for all audience types. With more than 36 million adults in the United States being unable to read past a third-grade reading level and the growing usage of screen readers for the visually impaired, making your website accessible is more important than ever.
Making Your Site Accessible
When it comes to website structure, we often consider the website finished when the front-end is visually pleasing. However, screen readers use the website’s code to navigate. So if your code is messy, your website would appear to be messy and confusing to screen reader users.
To combat this, make sure things are correctly tagged and when in doubt, keep your pages simple.
How Screen Readers Work
Screen readers read the contents of pages out loud. They relay the contents of the webpage line by line, as it is depicted in the code.
However, screen readers give the user the ability to skip around the page as they desire. They can use tags as skip points, meaning that your <div>, <p>, <ul>, among many others can become objects of navigation. They can also navigate by ARIA landmarks, like <main>, <nav>, and <header>.
How to Make Your Content Accessible
It’s okay if you haven’t paid attention to accessibility in the past – it’s pretty easy to work into your new content as you create. Just keep the following tactics in mind and you can easily add accessibility to your future content.
ARIA Landmarks
ARIA landmarks are designed with screen readers in mind and can help them move around the different sections of the page. You can add ARIA landmarks by putting “role” attributes in your HTML containers.
ARIA Landmark Roles:
- role=”application”
- role=”banner”
- role=”complementary”
- role=”contentinfo”
- role=”form”
- role=”main”
- role=”navigation”
If you use a role multiple times on a page, you can add the “aria-label” attribute to differentiate between the roles.
Example:
<div role=”complementary” aria-label=”sidebar”> <div role=”complementary” aria-label=”floating table of contents”>
Design for Screen Reader Navigation
When a user is looking for something specific, they will likely scan through the text to find what they’re looking for. Those using screen readers will often skip from paragraph to paragraph in the same fashion. However, like someone who scans the page, screen reader users won’t want to go through all the information.
Instead, they will rely on headers or the first one or two sentences of a paragraph to figure out if this is the section they need. To promote efficiency, make sure your headers are descriptive and the first sentence of a paragraph gives a clear idea what the paragraph is about. This will help those using screen readers navigate your site.
Logical Code Layout
Also, make sure your code is laid out in a logical manner. For example, putting the navigation links at the top of the page is incredibly helpful to those using screen readers. This way, they are immediately presented with all the places they can go to without having to search for them.
Pay attention to your page elements, like <div> and <ul>. Screen reader users can use them to skip around the page, so use them in a logical pattern. If you use them willy-nilly, it may be hard for those using a screen reader to get a feel for the site.
Screen Readers and Links
When creating links in your content, consider the link text. Vague link text, like “Click here,” is not helpful to screen reader users since the screen reader doesn’t tell them where the “click here” is navigating to. When possible, add descriptive link text that gives users an idea of where the link will take them, such as “visit our knowledge base.”
Alt Text for Images
Alt text is an attribute added to images in HTML that allows you to describe the image on the page. This gives the screen reader something to tell the user. Without the alt text, the image’s usefulness becomes null. You should always add alt text, especially if the image shares something that’s not communicated in the text, such as a graph or chart.
Accessibility and Mobile
Mobile sites are in high demand since the explosion of smartphones and tablets. But did you know having a mobile version of your site is not only good for mobile traffic but for accessibility, as well?
Turns out, touch screens are easier for those with impaired vision to navigate. Not only are mobile versions of sites less cluttered, but mobile screen readers can react to where the user touches. They don’t have to navigate by tag by tag or paragraph or paragraph anymore. Instead, they can navigate by touch. It’s still a good idea to have things organized in an intuitive manner to aid their navigation, but simply having a mobile version of your site is a great way to boost accessibility.
Starting on the Road to Accessibility
Starting on the journey to accessibility can be intimidating, but never fear! Implementing these changes for accessibility is easier than it seems. Just keep these things in mind as your write your website content. Make sure your headers are descriptive and the first sentence or two of a paragraph is a good representative of the rest.
While you may think, “this is too hard” or “I don’t have time,” you can actually reap a lot of benefits by making your site accessible. For one, having an accessible site opens it up for a whole new stream of web traffic and makes it more likely for the traffic to stay. It is also possible that making your website accessible could increase your SEO ratings. By making the code simpler, using good tag techniques, and making sure your headers and paragraphs are clear, your SEO can improve.
