Accessibility, Usability, and SEO

May 17 is Global Accessibility Awareness Day, 2018 so what a great day for another article about accessibility! Global Accessibility Awareness Day happens on the third Thursday in May every year. There are events happening all over the world, including some fabulous webinars on a very wide range of accessibility-related topics. You can learn all about it on the Global Accessibility Awareness Day 2018 website. 

Accessibility, usability, and SEO are different concepts, but on the web there is a considerable overlap. The steps you might take to make your site more accessible will often improve the experience for all users. Since search engines read your pages the same way a screen reader does, you may get an SEO boost as well.

Usability and Accessibility

In the most basic terms, website usability is a broad concept that encompasses the ease with which visitors are able to accomplish their goal, and their level of satisfaction with the overall experience. Usability and accessibility are different concepts, but there is a great deal of overlap in the ways that the basic criteria can be met. Usability is concerned with effectiveness, efficiency and satisfaction. Designing and coding for overall site usability is a great boost to improving site accessibility.

Accessible content

For example, providing captions for video content makes that content available to visitors who are deaf or hard of hearing. If you have ever forgotten your earbuds, you know how difficult can be to listen to a video in a noisy environment or in a place where you don’t want to disturb others around you. Good color contrast is a requirement for people with low vision, and it’s also a benefit for people who are outdoors in bright sunlight. A site with clear navigation and simple structure is essential for users with certain cognitive impairments, and it is also easier for any user who is distracted or tired.

Accessible forms

One example of where there can be a real distinction between meeting usability goals and accessibility goals is form input fields and how input errors are handled. If you would like to have visitors to your site provide information to you, such as their name and email address, you may have a form that entices them to sign up to get a free download. If you want people to buy things from your site or donate to your cause, you probably have a more complex form. Is it easy for visitors to understand what information is needed, and what requirements need to be met in terms of input formatting? What happens when people enter information that does not pass the validation criteria on your form? The answer to that question may well determine whether the visitor completes the process of providing their information or completing their transaction.

Error prevention and error messaging are important parts of the usability of your site if you have forms.

Your approach to providing the information needed to successfully complete the form will determine whether you are making it usable for all visitors. The main thing to remember is that people using screen reading software (i.e. “screen readers”) are using tab navigation to move through the fields, and will receive information sequentially as they tab.

• If there is important information that people need to know before completing the form, put that information at the top of the form. This is helpful for all users, and essential for users of screen readers.
• If there are required fields, take steps to ensure that the required status will be announced by screen readers.
• If the input for certain form fields needs to be formatted in a certain way, providing help text that identifies the correct formatting (e.g., “no dashes or spaces” for a credit card or telephone number field) will help your visitors, but it will be most helpful for blind or low vision visitors if it is placed above the field or in the label.
• If help text is present below input fields, the instructions at the top of the form should note this (e.g., “Extra help can be found immediately after each field.”).
• If there is important information that users need to know before submitting the form, (e.g., “Please click the Submit button only once to avoid duplicate transactions.” or “By submitting this form you will be added to our mailing list”) place that information above the submit button rather than below it.
• If there is an error detected when the submit button is clicked, shift focus to the error message when it appears so users do not have to search for the error.

As the examples above show, simply providing information can improve the usability of a form, but the way it is provided may determine whether it is improving accessibility.

Accessibility and SEO

It is often noted that improving accessibility can boost traffic to your site by improving your Search Engine Optimization. SEO engines behave in the same way as screen readers, stepping through content in a linearized manner. Three of the biggest problems cited by screen reader users are ambiguous text for links and buttons, images with missing or improper descriptions (alt text), and missing or improper headings. Improvements in all three of these areas can improve your SEO.

Alt text

When a search engine crawls your web page the alt text that it reads is part of the information used to index your site. According to Google, your alt text “…provides Google with useful information about the subject matter of the image. We use this information to help determine the best image to return for a user’s query.” Keep the alt text brief for maximum SEO impact and optimum screen reader experience. Pro tip: assigning meaningful filenames for your images helps too!

Link text

The text within the anchor tags of a text link should provide useful information to the reader. Urging your readers to “Find out more about what we do” provides much more useful information in the link text than telling readers that they can “Click here to learn more about who we are”.

Using link text that provides value to sighted visitors also makes it understandable to screen reader users who may be scanning your page by tabbing from link to link. It will also provide useful information to search engine crawlers. Don’t try to get too cute about inserting keywords, though; keep in mind that authentic content is always the best content.

Headings

Well-structured headings make it easier for visitors to identify the location of information they are interested in on a web page. For sighted visitors, they provide clear reference points and divide the content into manageable chunks. Headings are also another way that screen readers can scan your site. In fact, polling of screen reader users has repeatedly shown that navigating through page headings is the preferred strategy for finding information on long or complex pages. Title text that provides a good user experience will also be good for SEO. Heading structure alone probably does not have a big effect on page ranking, but it can help to reinforce the important divisions in content.

Best practices for headings include using an H1 heading on every page to convey the main topic, and using H1 only once per page. Lower lower level headings should be nested beneath higher level headings. Ideally, there should be no gaps in the header structure, but this is not necessarily a requirement if the overall structure still makes sense. If you look at the header structure of your page in a tool such as the WAVE site auditing tool, it should look like a well-organized outline. Again, be informative and write headings for humans, not for crawlers.

It’s All Good!

A site with good usability is obviously going to provide a better experience for your visitors. Practices that improve SEO can be good for your marketing efforts, as long as it does not get in the way of creating solid content. Usability, SEO and accessibility are all different things, but they are all good - and good for you! If you approach your design, development, and content strategy with accessibility in mind you can magnify the benefits of those efforts.