Category Accessibility

As we age, it can become more and more difficult to see small text on the screen, text without contrast, or low-volume audio. It is important to check your website and verify its accessibility. If it is frustrating for users to use your website, they will leave to find an alternative that is more accessible.

Accessible websites are designed so that everyone, including people with disabilities, can use them. It is also important to protect your business from web accessibility lawsuits. You can check your website using Web Accessibility Evaluation Tool (WAVE) powered by WebAIM.

The World Wide Web Consortium (W3C) has developed a comprehensive set of Web Content Accessibility Guidelines (WCAGG). Use WCAG 2.1 guidelines for ADA and 508 compliance.

• Americans with Disabilities Act (ADA)
• Section 508 of the Rehabilitation Act (U.S.)

Use Accessible Text:

Writing long paragraphs with complex sentences makes your content inaccessible to readers unfamiliar with figures of speech, idioms, and abbreviations that may be commonplace in your industry, but not to newcomers or casual readers. Whenever possible:

• Use short sentences written in plain language
• Use bullets and tables instead of walls of text
• Avoid figures of speech and idioms
• Define and explain all terms before using them

Use an Accessible Layout:

Every page on your website should be clearly recognizable to your readers. Build layouts that are simple to follow and consistent from page to page.

• Follow a linear layout that can be navigated using only a keyboard. Check your layout by tabbing to move from one element on your page to the next. Use Shift+Tab to go backward. You should see the tab focus as you move around. Make sure that when you tab through your page, it follows a logical order and does not miss any key elements.
• Make links stand out with an easy-to-see underline.
• Do not underline words in the text that are not links.
• Make buttons descriptive. If a user is using a screen reader, several buttons labeled “click here” is confusing.
• Structure your content using HTML, not text size or bolding.
• Title your pages so they clearly communicate their purpose.
• Don’t bold headings. Format them as headings using tags such as H1.
• Add lots of white space.

Presenting Content:

 All content should be presented in multiple ways and be easy to discern.

• Use good contrast between the font and background. Use this contrast checker to see if it meets WCAG standards.
• Choose a readable font.
• Do not use color alone to convey meaning.
• Provide alt texts for all images, including icons, buttons, graphics, charts, diagrams, and illustrations: if the image is decorative, you can leave the quotation marks empty.
• Add labels for all form controls, input, and all other interface components.
• Videos, audio clips, and animations all need transcripts, captions, or audio descriptions to make them accessible.

Read Also: Checking Your Website for Accessibility

Web Accessibility Evaluation Tool

I just recently finished revising my website and was ready to check it for accessibility. I used the web accessibility evaluation tool (WAVE) powered by WebAIM. This tool is free to use. The first step is to enter your web page address.

After you enter your website address, you will get a summary listing the errors, contrast errors, alerts, features, structural elements, and aria elements. Selecting the view details button at the bottom of the summary section provides details on the errors. The errors on my landing page included a linked image missing alternative text, missing form labels, two empty buttons, and five empty links.

Error List

The next step is to select each of the error messages to get more information on the errors. Three of the empty links are my social media links in the top bar of my website. The top bar has three social media icons for Twitter, LinkedIn, and email. A user can click on any of these links to complete the action in the icon. However, if you have low vision, you would not know what the icons are and, therefore, would not know the correct usage. To make this accessible, you must add titles to the social media icons.

The other two empty link errors are for the hamburger menu icon and then close the menu icon. On my website, I chose to have a menu with titles in the top bar and the hamburger menu for use on smaller screens.

The next set of errors to evaluate are the missing form labels in the MailChimp sign-up form. There are two errors: a missing form label in which a form control does not have a corresponding label and an orphaned form label.

I checked the CSS style changes I made to see if I had inadvertently deleted the label. This was not the case. I then looked at my “contact me” form. This form had the same errors. The problem seems to be that the text explaining the purpose of the box cannot be inside of the box. I also noticed that there is low contrast between the text in the “enter your email box” and the background. I will change this text color to meet accessibility contrast requirements.

Low Contrast Errors

On my blog page, I initially had low contrast errors in the author and date fields for the individual fields. I fixed those with CSS. However, I still have errors for low contrast in the sidebar text. To fix those errors in a Google Chrome browser, right-click on the offending text and select “inspect.”

After identifying the class for the blog post info, date and comments, I added the CSS to change the text color from gray to black.

.oceanwp-recent-posts .recent-posts-info {color:black}

.oceanwp-recent-posts .recent-posts-comments a {color:black}

If you need to check contrast for text color or when creating images, another option is to use the WebAIM contrast checker. The minimum acceptable contrast ratio is 4.5:1 except for large text, which should be at least 3:1, incidental or decorative text and logotypes.

Headings

You can then select the structure tab on the WAVE tool to evaluate the overall structure of your website.

Notice that my website has a header and a navigation menu, but no H1 header for the overall page. There are a series of H2 headers throughout the webpage and H4 headers on the footer. H3 headers are found in the individual blog posts. To make the webpage easier to navigate, WAVE recommends adding an H1 header for the website.

Accessibility Summary

The web accessibility evaluation tool is straightforward to use. Errors, contrast errors, alerts, features, structural elements, and aria elements are all identified. Selecting one of the icons brings up a details page where information about the error can be found as well as suggestions on how to fix it. I was able to resolve all of my alternative text errors, structural errors, and contrast errors. I was not able to fix the errors associated with my forms. Though I suspect if an additional label were added outside of each text entry box, the error would be resolved.

eLearning specifically and education, in general, must be accessible to everyone. The news, public interest stories, books, social media, employment opportunities, and online courses are all hosted online. It has become an inconvenience to use a paper copy. Since this is the medium of choice for information, it is even more critical that everyone has access to the best of their abilities. Making our website and eLearning content accessible may increase search engine optimization and the audiences we can reach, but that should not be the primary motivation. Learn how to take steps to make your online content more accessible so it meets 508 compliance guides.

Guidelines for 508 compliance

An excellent resource for guidelines for accessibility standards is W3.org The World Web Consortium (W3C) develops recommendations that are reviewed by the Accessible Platform Architects  Working Group.  These guidelines are called the Web Content Accessibility Guidelines (WCAG). 

Where to start:

• First, make use of headings to break up your content. Using headers is something I frequently forget!
• Use short phrases to describe images and buttons.
• Describe the data that is found in tables and graphs. Using text makes this information available to screen readers.
• For audio content, a transcript should be included on your website or eLearning. The authoring tool that I use most often to create eLearning modules, Articulate Storyline 360, has made this much easier by introducing text to speech, closed captions, and a handy place to include a transcript in the Articulate Storyline Player.
• Make sure that your color choice and text style are easy to read for people with low vision or color blindness. Check the contrast ratio at WebAIM Contrast Checker. W3.org has detailed information on each of the standards.
• One standard that I need to remind myself of constantly is that the user must have adequate time to read the content. As a fast reader, I tend not to allow enough time for individual pop-ups to be read. 

There used to be a mall in Cincinnati, Ohio, which had video games and an arcade right inside one of the entrances. You had no warning as you entered the mall and were assaulted with flashing lights, strobe lights, loud noises, and other sights and sounds of an arcade. People with epilepsy and as yet undiagnosed seizure disorders were having seizures as they walked in the door. How is this pertinent? As gamification increases in elearning, we need to be careful not to cause seizures by including flashing lights and other content that may cause photosensitive reactions. 

Ready to check your website or eLearning for 508 compliance?

508 Compliance

Section 508 is part of the Rehabilitation Act of 1973, which requires all federal agencies and their contractors to make sure that their electronic content is available and accessible to all.  The United States Access Board, where you can find the complete list of standards, is found here.

According to the Access Board, all public-facing content must comply with 508 compliance. For non-public-facing content, they require 508 compliance for content in the following eight categories:

1. Emergency notifications
2. Initial or final decisions adjudicating an administrative claim or proceeding
3. Internal or external program or policy announcements
4. Notices of benefits, program eligibility, employment opportunities, or personnel actions
5. Formal acknowledgment of receipt
6. Survey questionnaires
7. Templates and forms
8. Educational and training materials

Did you read the story about the young man with a disability who opened a coffee shop because he could get no one to hire him? Can you even imagine the contributions a person with that level of grit and determination could contribute to your business? The numbers cited vary, but consistently the studies indicate that the percentage of Americans with disabilities who are unemployed is very high. At this time of the year, where giving to others is a focus and a New Year brings the promise of new beginnings, I thought I would bring this topic up for discussion and advice. I work with several young people with disabilities and here are some of my experiences.

Stumbling blocks to college for people with disabilities

One young man I know has always wanted to work in the field of computer science. He was diagnosed with Asperger’s at a young age. He and his parents decided to go against the advice to move him to a public school so he could get additional help with his studies, and against advice to put him in reading lab and low-level math courses. Why? Because if they did, he would be tracked into the lowest level courses through-out his education, and there would be very little chance of him getting a college education. Remember, his dream is to work in the field of computer science.

He graduated from high school, an achievement in itself, and scored the minimally acceptable ACT score to get into college. He worked tirelessly to pass his computer science courses. Some he took twice and a few three times, but he made it. He went to the tutoring center, attended his professor’s office hours, and had many of his textbooks read out loud to him, but he made it!

At one point, this young man was not sure he would finish college as there were a few higher-level computer science courses that he struggled to pass. He decided to get an Associate’s degree, finish his BA in Computer Science, and maintain his part-time job at a local grocery store. He completed both degrees in the past year.

This post is the story of one young man, but he represents thousands of young men and women with and without disabilities who have this level of determination to succeed.

Interviewing with communication challenges

Communication struggles

Like many recent graduates, this young man with a passion for computer science is working hard to get a job in his field. However, there is a problem. His disability makes it harder for him to communicate than the average person. He will have a hard time expressing his passion in an interview. His answers to your questions will probably be short. His nervousness will compound his communication struggles.

Delayed responses

Have you ever been in a conversation with someone whose response takes 15 or even 30 seconds longer than you are comfortable with? Imagine being a busy recruiter or a hiring manager, and your candidate seems slow to answer. You may think the candidate is bored or disinterested, but it may be that his or her brain takes an extra few seconds to process the question.

Inability to read nonverbal cues

In addition to being a little slower in their conversation skills, a second thing I have noticed when working with young people with disabilities is that some believe everything you say and interpret it very concretely. One young man had a recruiter call him about a possible job opening for which he would be qualified. They spoke on the phone, and the recruiter said she would call back after receiving this young man’s resume. The young man sat by the phone for four days believing that the recruiter would call. It is a week later, and the recruiter never called back. Many people with Autism Spectrum Disorder (ASD) cannot interpret facial expressions or make meaning out of conversation other than the actual words spoken. This recruiter’s tone may have implied that she was not interested, but the young man would not be able to receive that message. Telling him that he was not a viable candidate hurts for a minute or even a day. Not telling him leaves hope that hurts indefinitely.

“A child is only as disabled as their environment and the beliefs of the people around them.” —Bala Pillai DPT, PCS

Customer service training on disabilities

As an instructional designer, with a medical and educational background, one company that prides itself on customer service asked me what course I would recommend they develop next for their employees. I suggested a course on communicating with people with disabilities for their call center employees. I wonder if they ever developed the course?

Should you disclose a disability to an employer?

As the New Year brings new opportunities, please feel free to reach out to me if I can help you or anyone you know with a disability. I can help with educational questions and share my experiences with you, but unfortunately, I cannot help with questions about employment. As you have read in this article, I have no solutions, do you?

Should an applicant disclose their disability? Should an employer be able to offer a lower salary to an otherwise great applicant who cannot work as fast as his or her colleagues?