Web Design

Ready or Not, Accessibility is Here

By  | Updated December 19th, 2016.

Web Accessibility, Back in times 25 years before when company’s was first connected to the internet, they had the honor of doing their first search. But at that time, the search engine was Veronica and the protocol was Gopher. Yes, Gopher, not Google. It was a simpler time and this was text based searching. No mouse was necessary to use this search engine. Well, here we are 25 years later and we are coming back to our roots. In order to make web pages accessible to people with vision impairments and other disabilities, web pages are being designed to be keyboard-only accessible. So,we are back to the days of text searches; well, not exactly.

Web Accessibility

Image Source

This is more of a revolution that started slowly like a little wave, but has grown into a tsunami. In late 1994 into early 1995 the World Wide Web consortium was formed and open standards were beginning to be established among an international community. That small wave grew as the United States amended Section 508 of the Rehabilitation Act in 1998 to require that Federal agencies make their electronic and information technology accessible to people with disabilities. In mid-1999 the World Wide Web consortium proposed its first guidelines on accessibility. Although there was much lip service given to accessibility, the work of putting it into practical use was slow until 2008, when the Web Content Accessibility Guidelines (WCAG) 2.0 was released.  At that time many companies, including major banks, started putting real effort into their accessibility initiatives. The little wave was becoming a tidal wave and the adoption was accelerating exponentially. In 2015 another revision was made to Section 508 of the Rehabilitation Act and now the law included a technical standard on web accessibility. Also in 2015, the Authoring Tool Accessibility Guidelines (ATAG) 2.0 was published and many other WAI standards were either revised or amended. Now the tsunami is rolling in with health care insurers, universities, Facebook, Dropbox, Adobe, Yahoo and Microsoft, all incorporating accessibility knowledge as a preferred talent on their job postings. The revolution had achieved it aim: to bring accessibility from the dim lit corners onto center stage. Yes, accessibility has arrived.

Why Should I Learn About Accessibility?

I could tell you that more and more companies are looking for people who have web accessibility experience. I could tell you that people who can create accessible web pages earn more money, are in greater demand, and have better job opportunities. I could tell you all that and more, but actually the real reason is simply that it is the right thing to do. Life can be difficult at times for all of us. Now imagine that you have a disability that limits your ability to use the web. You can’t shop online, pay your bills online, bank online, or access useful information online. Why? Because someone decided it would not be cost effective to rewrite a website to be accessible. With all the advances that have been made on the internet, many websites still have accessibility hurdles that make it impossible for people with disabilities to use the Web. Be part of the solution, not part of the problem. Educate yourself on how to develop web pages that are accessible. Join in the revolution.

Legal Requirements for Accessibility

The United States of America is not the only country concerned with accessibility.  Accessibility is becoming a requirement in other countries like the United Kingdom, Australia, India, Ireland, Japan, Spain and many more. These countries have created legislation that requires government websites, web applications, and mobile apps to be accessible. Some of the current accessibility laws include the Ontarians with Disabilities Act (AODA) of Canada, the Law No 2005-102, Article 47 of France, Section 508 of the Rehabilitation Act in the United States, the Federal Disabled Equalization Law in Germany and LOV 2008-06-20 nr 42 in Norway. In the United States, federal agencies’ websites must comply with Section 508 guidelines. Section 508 is undergoing an ICT refresh that “seeks to harmonize its requirements with various voluntary consensus standards, including the Web Accessibility Initiative’s Web Content Accessibility Guidelines (WCAG 2.0)”.

If you work for a federal government agency, contract for a federal government agency, or work for the local or state government, the Americans with Disabilities Act (ADA) applies to you. It would be a good idea to familiarize yourself with the particulars of this law in regards to websites.

Where to Start?

Although Web Accessibility is not a new initiative, the establishing of stable standards and ISO adoption was slow at the start. Over time things have changed and currently there is a plethora of information for anyone and everyone. Here is a list of just some of the websites with information on how to create accessible websites.

Overview

Take a few minutes and read the Web Content Accessibility Guidelines (WCAG 2.0) Overview. This will give you an idea of the direction you need to take to be part of the accessibility revolution.  The guide is currently available in 28 different languages. This guide is a fairly short and easy read, as amazing as that sounds.

Define What Accessibility Is:

Many of the terms in the Information Technology field are transient and evolving. This is where accessibility has an advantage. WCAG 2.0 is approved as an ISO standard: ISO/IEC 40500:2012. This is a very big deal. You now have a fixed basis for creating a web page, that is, by ISO/IEC 40500:2012definition, accessible. Also WCAG 2.0 is a stable version that will not change. Many countries have based their accessibility laws on WCAG 2.0 level AA, including the United States, the United Kingdom, Australia, and many more.

Specific Definitions

There are 4 principles of accessibility that are covered in WCAG 2.0. They are perceivable, operable, understandable, and robust. I will touch just briefly on each of the 4 principles and their high points. For a full description, go to the Web Content Accessibility Guidelines (WCAG) Overview and expand each principle and its sub items.

Perceivable – Provide text alternatives for any non-text content so that it can be changed into the other forms that people need.

  • Non-text Content

Any and all non-text content that you present to the user should have a text alternative that serves the equivalent purpose.  You could use an aria-label to provide labels for objects were there is no text on the page, such as a portlet. You could describe the portlet with additional text. If you are displaying an image, and that image has some significance or contains some text, then it will need a label for the screen reader to be able to read it.  Otherwise, its significance will be lost, and so will the user.

  • Time-Based MediaAudio-only and Video-only (Prerecorded)

Prerecorded Audio-only: An alternative for time-based media must be provided that presents equivalent information for prerecorded audio-only content.

Prerecorded Video-only: Either an alternative for time-based media or an audio track should be provided that presents equivalent information for prerecorded video-only content.

This basically means providing options such as:  Captioning, Sign Language and Extended Audio Descriptions. The idea is to present alternatives for people with disabilities so that these do not become a barrier that limit or exclude them. Imagine you are deaf and your bank has changed its online bill pay method. In order to facilitate the change, the bank has a video to educate the clients on the new method. If there is no option for sign language, then the bank has just alienated deaf customers by not providing this valuable information in an alternate form.

Operable – Make all functionality available from a keyboard

  • Keyboard Accessible

The content of your website should be operable through a keyboard interface without requiring specific timings for individual keystrokes. This does not mean that a user cannot use a mouse. Rather, both options (keyboard only or keyboard and mouse) must be able to navigate and complete any submissions. One important note is to ensure that a person can exit from a window with no mouse. This one is very easy to test, simply unplug your mouse and try to use the web page.

  • Seizures

Be careful that your web page does not contain anything that flashes more than three times in any one second period.  Make sure the flash is below the general flash and red flash thresholds. Whether your web page is geared to accessibility or not, this is a rule that always needs to be followed. The Epilepsy Foundation states that “The frequency or speed of flashing light that is most likely to cause seizures varies from person to person. Generally, flashing lights most likely to trigger seizures are between the frequency of 5 to 30 flashes per second (Hertz)”.  You certainly would not want to be known for creating web pages that cause people to go into epileptic seizures.

  • Navigable

It is imperative to find ways to help users navigate, find content, and determine where they are, as well as return to previous pages easily. This not only applies to accessible web content, but applies to all web content. A well designed web page should be easy to navigate, should be logical to navigate, and should be well organized. As an example, you should not have to go from the top of the web page to the bottom and back to the top again to fill out forms. They should be organized so the user fills in fields from top to bottom.

Understandable – Make text content readable and understandable.

  • Readable

You must make the default language of the Web page programmatically determinable. One of the benefits of this is that screen readers can load the correct pronunciation rules for that language.

You also have to create text that is clear, simple, and easy to understand. Although this sounds very easy, this will be one of the most time consuming tasks. There might be an infinite number of ways to say something, yet your job is to find the most clear and simple way. When one of my friend moved to a foreign country he had to make a withdrawal at an ATM machine. He selected English as the language to display. When he had entered all the required information, the display had a button that said “Correct”. Since he had reviewed all his information and it was all correct, he selected the button that was labeled”Correct”. SURPRISINGLY! All his information was wiped out. It appears “Correct” meant you want to correct your information. This was not clear and understandable and resulted in a frustrating situation for the three people waiting behind him, since he had to start all over.

  • Predictable

To make your web page operate in a predictable way may sound easy enough. Then why is this one of my biggest complaints when it comes to shopping online? I’m on a web page and I’m tabbing through the fields. Instead of going to the next field, a dialog box opens with some options and suddenly I am selecting options. NO! I was just tabbing through the fields. Imagine a blind person using a screen reader and experiencing that situation.

  • Input Assistance

Help users avoid and correct mistakes. Sometimes, as an Information Technology person, you wish the computer terminal had a hand that could reach out and slap users because they fail to follow complete, specific, and simple directions; such as entering their zip code in the quantity field. How can Web pages be built to minimize those errors? First off, trap all errors and then provide useful information to help the user correct the problem. If a user has entered all his personal data and the Web page simply displays “INPUT ERROR”, the user has no idea what is wrong. Identify the field and put the focus on the field that is in error and make a useful suggestion if you can. If a quantity field has zero entered, then tell the user “The quantity entered is zero. Please enter the desired quantity”.

Also, it is best to provide a mechanism for reviewing, confirming, and correcting information before finalizing the submission. Most shopping sites have an “Are you really sure?” page displayed before the final submission.

Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

When designing and writing code for your web page, make sure that it will be easily adaptable to future trends. For instance, make sure elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique. This is not always possible, but 99% of the time it is. Think of the content in terms of flexibility: can it be used again and again as changes become necessary?

Example:

We will use a very simple, but useful, example to show the difference between an accessible web page and a non-accessible web page. This example will focus mainly on using a screen reader for access, but the concepts apply to all accessibility.

Our example is based in Boston and the purpose of the web page is to determine, subjectively, which is the best café in the city. The web page has been designed to pole employees in a large company for a quick response with very little effort.

The survey will ask the following questions:

  • What is your favorite café in Boston?
  • Do you wish to get a copy of the results?

The bad example (just in case you were not sure)

Web Accessibility Example 1

It might be obvious to a web content designer that there are blatant issues with this survey page. Some of the problems might be more subtle, especially if you are designing web pages in a more production line environment. For someone who can see this page and use a mouse, this page works just fine. You may say that it even looks good. However, if you use a screen reader to view web pages, this survey page is a nightmare. You won’t know where you are on the page, you won’t know how to select the café, or why you are even filling this out in the first place. Although this is a rather simplistic example, it drives home the point that you, as a web content designer/developer have to completely change the way you look at web pages. It is no longer just about how good they look or how well they flow and the symmetry of their design. When you look at a web page, the question is: can everybody use it? That is why the WCAG 2.0 guideline is perfect. It gives you specific examples and detailed instructions on each aspect of accessibility.

The good example (just in case you were still not sure)

Web Accessibility Example 2

The revisions made to this survey page are minimal, but are enough to make the page available and navigable to someone who uses a screen reader. Now a screen reader will announce the title of the page letting the user know why he is filling out this survey.  As he tabs into the first box, the screen reader will announce the legend elements. The screen reader will let the user know that they have to select a café from a list of cafés. The list of cafés is now sorted alphabetically, making it easier to select a café using only a keyboard.  The sequence of descriptions in the results form is now in the proper order to be selected/entered. These corrections were relatively easy and do not involve a complete rewrite or redesign of the entire page. This is not always the case.  You will have to carefully evaluate each page and estimate the hours to amend vs the hours to redesign. This is where an evaluation tool can come in handy. Although not complete, the tool can give you a basic idea of how many changes might be needed in order to pass an audit, and this will help in your decision to amend or redesign.

Evaluation Tools:

There are different types of audit tools. Some help you to prepare the audit report, some are helpful authoring tools, and others try to automatically audit a page for compliance to a pre-selected standard, such as WCAG 2.0.

WCAG-EM Report Tool is a tool that helps you generate a report according to the Website Accessibility Conformance Evaluation Methodology (WCAG-EM). The tool does not actually perform any accessibility checks; it simply helps you put together a proper evaluation report from your input. The tool walks you through each check you need to perform and provides you with optional criterion text for that check. Although this is not an automated tool, it does help to guide you through all the steps.

There are also many free tools that can perform a basic audit, however keep in mind that no tool can replace a human being (at least not yet). Also, I am not endorsing any one tool over another; I am just presenting a sample so that you are aware of the possibilities.

Accessibility Valet can check Web pages against either Section 508 or W3C Web Content Accessibility Guidelines (WCAG) for accessibility compliance. You can check one URL at a time for free or pay for a subscription to submit unlimited pages.

Accessibility Checker is open source and was developed in 2009 by the Inclusive Design Research Centre of the University of Toronto.

EvalAccess is one of the few tools that lets you evaluate an entire website for WCAG 1.0 compliance. The problem is it can’t evaluate for WCAG 2.0 compliance.

TAW can evaluate for WCAG 1.0 and2.0 compliance. TAW goes a step beyond and provides recommendations on how to resolve the issues it finds. It is available online and as a desktop application as well as a Firefox add-on.

WAVE was developed by WebAIMand is available online and as a Firefox add-on. It reports accessibility violations and provides recommendations on how to repair them.

Web Accessibility Checker can analyze individual web pages for their accessibility. The user can choose to evaluate against WCAG 1.0 and 2.0, Section 508, BITV and the Stanca Act.

Lastly, there are some commercial audit and formatting programs. They are inexpensive but have very limited abilities. As mentioned before, it takes a human being to completely test a site properly for accessibility. I will only mention a few interesting ones; however I am not endorsing any one product over another.

CommonLook Office Professional A companion to the core Microsoft Office writing tools, CommonLook Office Pro makes it easy for any user to create accessible, Section 508 compliant PDF documents directly from Microsoft Word or PowerPoint 2007, 2010 or 2013. This will help with much of the content on your website. Notice though the next statement about CommonLook Office. No prior knowledge of accessibility or Section 508 or WCAG 2.0 is required. CommonLook Office Pro presents simple instructions to guide the user through every accessibility checkpoint relevant to the document. I think it is always nice when work can be automated.

SortSite This product checks sites against the W3C WCAG 1.0 and 2.0 accessibility standards, and compliance with Section 508 of the Rehabilitation Act.

Total Validator This tool can do HTML validation against the W3C Markup Standards and Accessibility validation against the WCAG (1.0 and 2.0) and the US Section 508 standards.

Where Do You Go From Here?

Maybe your company does not have an accessibility initiative. Why not make yourself the advocate for developing web pages/sites that are accessible? As it is a change to an organizational accessibility culture, no one person can do this alone.  But you can begin the change. There are many viable resources that you can quote from in order to make a compelling argument. Also, since you are the advocate, you may just be the one assigned to head up this new and innovative move. Don’t be overwhelmed if that ends up being the case; there are many companies that will evaluate your web site for accessibility compliance. This actually might be the best place to start. With an objective review of your company’s web site, you may have just the necessary ammunition to show the need for a change in the design of the company website. It won’t be just your opinion, but that of an industry expert. Here just a few companies that offer this service listed in alphabetic order.

If your company has already adopted this philosophy, then why not ask to be involved in the next design and implementation of an accessible web site? Look online for some courses you could take to help you become a more valuable contributor to an accessible design. Do plenty of reading on your own to become familiar with the terminology and the concepts. Practice on your own using some of the concepts and principles you learn to create a test web site that is accessible. Also, you could research and become familiar with some of the free accessibility testing tools that exist. This will give the ability to have valuable input in design discussions and later on in the evaluation audits.

If you are a contractor then you especially know the advantages of adding accessibility to web pages. Market yourself as a web page developer for accessible websites or conversion of websites to meet the accessibility standards. You will need to quote specific standards you can meet for your accessible web site designs (WCAG 2.0 A,WCAG 2.0 AA, WCAG 2.0 AAA). Be careful if you are going to state your designs are at the WCAG 2.0 AAA standard. Remember that W3C states “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content”. It will be better to aim for WCAG 2.0 AA as your standard for all your site designs.

As we stated in the beginning, the real reason for becoming talented in designing accessible web pages is not about you alone. It is about the many disabled people who have a more difficult time in life because of the limited abilities of the technology being developed. This becomes especially evident when looking at the fact that the probability of severe disability is 1-in-20 for people aged 15 to 24, while 1-in-4 for those aged 65 to 69. Who are the disabled? They might just be you at 65 years old.

Before the tsunami of accessibility washes over you, get out in front of it. Be part of this change of culture and help to do the right thing. In this case, the right thing will also benefit you,your career, and your company. Now comes the hard part, a commitment of that very valuable commodity – time. Don’t just go away after reading this article and say “Yeah, I should look into that someday” or “That’s too much too learn, I’ll let someone else do that work”. Do something now to improve both someone else’s life and your own. I have some links at the end of the article that can help you to get started. You will be amazed at how fast you can become and advocate for accessibility.

Web Design Articles:

Leave a Reply

Your email address will not be published. Required fields are marked *