6 Steps to Make Sites Accessible for Individuals Using Screen Readers

By Angela Seckinger — Thursday, November 29th, 2018 at 11:00am
6-steps-accessible-screen-readers.png
 

The web is an amazing resource and everyone should be able to browse, navigate, and interact with it using any device. That’s why inclusive web design is so important.

Government agencies are taking active steps to enforce accessibility guidelines. For example, this article, Feds Prod Universities to Address Website Accessibility Complaints, points out the enormous job universities face in addressing these details. So, it is important to develop an action plan to address accessibility quickly and regularly.

Since there is so much to cover regarding accessibility and building an inclusive web, this post will focus on visitors utilizing assistive technologies, especially screen readers. A common challenge for visitors using screen readers is related to struggles with navigation and the overall flow of text. Here are the six steps to help incorporate best practices for creating accessible websites for screen readers.

Step 1. Conduct an accessibility audit.

To start the audit, review all the headings on the site using a tool like the View Document Outline feature of the Firefox Web Developer Toolbar.

view-document-firefox.png

Most likely, what you will find are a lot of Headings used for styling purposes, not necessarily semantics for guiding the user through the page structure. For the ultimate testing, turn off your monitor and put away your mouse. You can also conduct the audit using a screen reader.

As a web developer, you should be familiar with at least one screen reader. There are many screen readers available, but the free screen readers that seem to be the easiest to test with are NVDA via Firefox (on Windows) and VoiceOver via Safari (on Mac).

With the screen reader, or with your eyes closed and/or monitor off, listen for anything that does not make sense. Note where you have difficulty finding your way. Move around the page and try to understand the content. Also, make sure navigation and tabbing is in the correct order. Soon, you might realize how challenging this process is and hopefully also develop an understanding for what these users are going through as they interact with your website. Be sure to check for punctuation marks, date ranges and abbreviations too. This first step will help you quickly identify the most obvious difficulties for anyone using a screen reader on your website, while the next steps will help you correct the most common issues you will find.

Step 2. Update any Headings that do not help with navigation or page structure.

When navigating a website, most screen reader users use headings as their guide. This means you should use heading tags to build a logical skeleton of the page so when the user is moving through the section with a screen reader, they can find their way around easily.

Headings that are random and are just included to add bigger, beautiful formatting from a styling perspective, should be changed and those styling attributes added to the CSS instead. Also, be sure not to mix and match heading tags since skipping from H1 to H3 or H4 and back to H2 will definitely confuse your screen reader user and they might even wonder if they missed some content along the way.

Step 3. Update alt text for links and images, to state the purpose of the image on that page.

Do your images and links have effective alt text? Alt text is key for non-text-based elements to enable the screen reader to clearly describe what is happening or expected on that page. Also, if the image itself contains any text, be sure to include that text in the alt text field. In addition, if an image is meant to be a “call to action” or link, provide unique and descriptive alt text specifically describing what will happen when those image links are clicked or where the link will go.

For images that are just used for decoration, it is better to leave the alt text field empty as long as the file name describes the image as a decorative element. Custom controls like buttons, elements, divs, and the like, need to be labeled so that when read by the screen reader this clearly indicates things that are happening on the page. For example, It is ideal to use the button element, rather than a link that looks like a button, and it is better to code lists with correct markup, instead of including images of bullets to create the appearance of a list.

Step 4. Design your forms for accessibility  

Do your form fields and buttons have appropriate labels? When form fields are not labeled appropriately, the screen reader user might not be able to recognize what type of content should be entered into that form field. Each field in your form should have a clearly descriptive label tag such as “enter full name” or whatever is appropriate and clearly recognized for that form field.

Also, the tab order should flow in the same fashion as the navigation is expected from one item to the next, and in the correct order, all the way down to the submit button. If certain form fields are required, the field should be labeled as such, and set up to alert the user they have to enter data in that field. In addition, do not use CAPTCHA to prevent form submission spam. Instead, consider these WebAim alternatives to CAPTCHA fields. Once the user submits the form, clearly describe any errors including the number of errors and describe how to go back and correct those errors.

Step 5. Use tables exclusively for tabular data

Using tables for page layout can be very distracting and confusing for screen reader users. Whenever a screen reader encounters a table, the table is fully described by the screen reader such as the number of columns and rows of the table and a lot of other extra details that really are not related or important to the actual content. If it is necessary to use a table to show the data points, be sure to use appropriate headers for the columns and rows to explain the purpose of the cells and use all the table attributes available so the data within the table is easily interpreted.

Step 6. Choose a content management system that supports accessibility

Automated code checks are designed to check page content for page-level WCAG compliance.

There are several tools available which are designed to automatically check website code for accessibility compliance. Having a built-in accessibility checker within your content management system is ideal, especially one that completes those checks before even publishing the page. Cascade Cloud offers a variety of built-in features to help you create and publish accessible content. Over time, you will learn to understand the results and warnings of an automated test and whether any action or corrections need to be taken. Learn more about the accessibility features available in Cascade Cloud.

Implementing these six steps should lead you to overall success with most screen readers. There is much more to discuss on the topic, but that is not within the scope of this current post. Planning these steps into your web content processes will help improve the accessibility of your website for those using screen readers. However, accessibility involves much more than just screen readers, so look for those and other related accessibility and user-friendly posts in the future.

Subscribe to our blog via RSS Download RSS

Hannon Hill Corporation

3423 Piedmont Road NE, Suite 520
Atlanta, GA 30305

Phone: 678.904.6900
Toll Free: 1.800.407.3540
Fax: 678.904.6901

info@hannonhill.com

GSA Contract Holder

JOIN OUR MAILING LIST

CONTACT US