Web Accessibility: Using the Web With No Eyesight

Almost everyone uses the internet. Browsing websites, purchasing products online, checking bank account balances, or just chatting with friends using social media, are activities that sighted people take for granted. But, how would you accomplish these tasks if you were blind?

Different Modalities

When a sighted person uses the web, they use their eyes to scan the page, and then make a decision where to click their mouse or where text needs to be input such as on a form. Buttons and links are easily discerned. For a blind person, navigating these simple tasks requires an extraordinary amount of time in comparison and relies on whether the website being used is in compliance with W3C (World Wide Web Consortium) and WebAIM (Web Accessibility In Mind) guidelines and international law.

Web Accessibility: What is WCAG?

WCAG is short for Web Content Accessibility Guidelines.
These guidelines were developed through the W3C process with a goal of providing a shared standard for web accessibility that meets the needs for every individual, organization, and government. It covers a wide range of recommended web content to make it easier to browse the internet for people with disabilities. Its success criteria is written as a testable statement that isn’t technology-specific.

How to Use It

WCAG addresses the shortcomings by defining what “accessible” content is and presenting guidelines in a way that it can be easily understood and adapted to new technology.

Web Accessibility: Screen Magnification

Many visually impaired people need screen magnification devices or software to enable them to read and comprehend content on the web.

This article will discuss and demonstrate several assistive technologies and devices that help make the web more accessible for the visually impaired.

How to Test a Site for Web Accessibility

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
Web Accessibility – Wikipedia

The best reason for building an accessible website is that it is “the absolute right thing to do!” Not only that, but it also comes stocked with other important advantages, among them legal protection, cost savings and marketing potential.

The United States has accessibility laws governing websites funded by the federal government, non-profits, and other public access business sites, while many other counties have established web accessibility laws for a much broader scope.

When you develop a website, consider website accessibility as part of the initial development. The cost of styling is nominal at the beginning of a project, but the the price of going through the entire site to identify and fix the past problems can be very costly.

Web Accessibility: Removing Barriers to Web Accessibility

Do you know who Tim Berners-Lee is? If the name sounds familiar it’s because you probably heard the name before. He created the World Wide Web (WWW) and is founder of the World Wide Web Consortium (W3C), an organization that develops technological standards for the Web. He is committed to the ideal that the internet should be available to anyone, anywhere in the world, on any type of machine that has an internet connection.

This includes people with different technology resources, rural users or even people with disabilities which is estimated to be about 1 billion people worldwide.

In 2008, the W3C released version two of its Web Content Accessibility Guidelines (WCAG2.0). The same week, two major European standards organizations the Electrotechnical Commission (IEC) and the International Standards Organization (ISO) adopted those WCAG 2.0 guidelines.

Barriers

The work of standards organizations help us identify what barriers people face when using the Web. There’s a plethora of information on what Web Accessibility is and what barriers there was to users on the Web. To remove these barriers we must first define what they are. I will focus on three main points that generally define what they are for all users.

1. Perceivable: The interface and the information on a Web Page must be presented in ways that are perceivable.
2. Operable: The navigation components and interface must be usable.
3. Understandable: The user interface and information must be understandable.
4. Robust: The underlying code and programming is robust, adaptable, and secure.

Along with these main points, there are also four main disabilities that can affect access to the web.

Visual

• Text Magnification hardware/software
• Relative font sizes
• Use of proper CSS
• Small or poor contrast text
• Color identifying information

Mobility

• Limited mobility devices
• Mouse typically not an option

Cognitive

• Learning disabilities benefit from well designed and organized pages

Auditory

• Multimedia barriers to users hard or hearing or deaf

Example

Here is an example of ways to design your image ALT text to remove barriers to disabled users when using screen readers.

Because screen readers cannot interpret the content of images on a web page, the use of “ALT” text helps describe in words to the user what the image content is. Taking the time to accurately describe an image content will greatly help the Accessibility on your site.

If an image is a…	The ALT Text should…
Chart or Illustration	Summarize and explain
Photo or work of art	Describe the image’s content
Graphic or button with text	Be the same as the image’s text
Functional icon without text	Describe the action to be taken
Background or other decoration	Contain an empty space (” “)

Although, ALT Text is meant to be short and concise, when longer descriptions are used to explain or describe an image it can be very helpful in breaking down the Web Accessibility barriers to users on your site.

Standards in Accessibility on the Web

As the we move forward in developing web standards and adhering to those standards, we help define what barriers users experience in terms of Accessibility when using the World Wide Web. Organizations helping pave the way for these standards are helping remove barriers to users across the world by evaluating the needs of users from all demographics.

For more information on related articles and resources used in this article:

• Michigan State University: Web Accessibility
• PHYS.ORG: Removing Barriers to the Web
• Wikipedia:: Web Content Accessibility Guidlines
• World Wide Web Consortium (W3C)
• W3C: Web Content Accessibility Guidlines Overview

Web Accessibility: Designing & Developing for Older Users

As of April 2012, 53% of American adults ages 65 and older use the internet or email. Though these adults are still less likely than all other age groups to use the internet, the latest data represent the first time that half of seniors are going online. After several years of very little growth among this group, these gains are significant.
Pew Research Center

Within that 53% of American adults of at least 65 years of age, 70% use the Internet on a daily basis.

Since these statistics were recorded in 2012, it is believed that the numbers have risen significantly. It is important for web designers and developers to factor this information into their designs to cater to this group of regular Internet users in these ways:

Text Size

Select a larger font and allow the text to be resized up to 200% by the user without creating an issue with the function of the website.

Legible Text Style & Layout

Create a site that is easy to read by selecting a legible font, spacing your lines accordingly, and keeping your lines short.

Contrast & Color

While some color and contrast looks great to young eyes, older eyes can lose the ability to see text on a high-contrast page. At a minimum, your contrast ratio should be 4.5:1 with the involvement of images and text.

Multimedia

With older adults, eyesight and/or hearing can rapidly decrease. By offering multimedia with subtitle options as well as visual and audible, your website visitor will be able to enjoy the presentation.

Text-to-Speech

Some elderly people rely upon speech synthesis software when browsing websites. To make your website accessible, you’ll want to use more text instead of  images, especially on call-to-action buttons.

CAPTCHA

Completely Automated Public Turing tests are used to decipher a live human user, as opposed to a machine spammer by requiring the user to type in the displayed text. As you can see below, the text is very difficult to read, even for those who do not suffer from vision impairments.

It is suggested to offer an audible version of CAPTCHA as a second option, but the user may have difficulties enabling the audio on their computers or have a hard time hearing it if enabled. Removing CAPTCHA from your site altogether is a much better solution, as it doesn’t deter spammers.

 

 

 

 

Links

Due to visual impairments and difficulty with mouse usage, links need to be created over more than two words, as well as providing alternative text that indicates the destination of the link. Links must be underlined and have other visual indications.

Keyboard Use

Many people aren’t able to use a mouse and rely open only utilizing a keyboard. Always allow your site to be functional by the use of keyboard navigation without a mouse. Also, it is important to allow the tab function to move onto different cells within an online form.

Distractions

It is imperative to provide the ability to pause, mute, or stop movement and sound within a website to avoid distractions from the web experience. People may not always want to watch a video on a website, but would just prefer to quietly read the article around it.

Use of Forms & Instructions/Time Limits

Sometimes websites have time limits to complete a form for a transaction; if the time limit is reached, the website will time out and the user will have to start from the beginning. Older people may have a difficult time understanding how to fill out forms to complete the transaction. Does your form require a time limit? If so, it needs to be increased.

Out of Date Software

Not everyone is going to have up to date web browsers and new computers, so your site needs to be as compatible as possible with older software. A warning message indicating that the visitor must download a newer version of a web browser will most likely result in frustration and website abandonment.

For Further Information

• Meeting the Needs of Aging Web Users
• Seniors as Web Users
• Making your Website Senior Friendly
• Designing for the Elderly

 

 

Web Accessibility: Seizure Prevention on the Web

When designing websites it is imperative to follow the necessary standards to design a site that is safe for those who suffer from photosensitive epilepsy or other seizures.

Photosensitive epilepsy is a form of epilepsy in which seizures are triggered by visual stimuli that form patterns in time or space, such as flashing lights, bold, regular patterns, or regular moving patterns.

Web Content Accessibility Guidelines state that web pages should not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

What Happened to HTML5 and Accessibility

HTML5 has improved greatly over the years. One of its biggest successes was trying to make the World Wide Web more accessible by moving in a more semantic direction. It introduced several new semantic elements such as: <section>, <article>, <aside>, <hgroup>, <header>, <h1> through <h6> level headings, <footer>, and <address>. While these new elements are great, they don’t actually do anything.

They crack the door open slightly to provide value to assistive technologies that can expand upon the elements through programming. These new elements have been made standards by W3’s Consortium. While these are made standards, not everyone is required by law to follow them. The biggest problem with HTML5 and its accessibility features is the compatibility of the browsers that interpret the markup. Most development companies follow these standards but they are free to take their own direction when building a browser.

Accessibility and Compatibility

HTML5 has great accessibility features but there are still some issues. Because HTML5 is constantly evolving, it makes it difficult in the development stages. Here are some of the current issues:

• Competing video formats are making HTML5 based video playback almost impossible to implement
• Inconsistencies between web browsers
• The heading structure is not useful in assistive devices
• Interpretation and support among technology products

One of the top browsers that has kept current with the evolution of HTML5 is Mozilla’s Firefox. This screen shot shows which major browsers support HTML5 accessibility attribute features:

The ARIA

Every developer and designer should ensure their website covers as many disabilities as possible to provide users with a rich accessible experience. That’s where ARIA (Accessible Rich Internet Applications) or WAI-ARIA comes into play. ARIA defines the roles, names, descriptions, values, and states of objects to help assistive technologies, such as screen readers to better understand the information laid out on the page.

ARIA When and How

ARIA has a wide range of accessibility elements. For that reason we will only be covering a few examples in this section. The elements that will be explained are better known as the “Landmark Roles.”

The document Role

The document role helps assistive technologies switch from normal browsing mode into a mode more suitable for interacting with web documents. Most webpages are considered a document because you often read them, while a document role still supports users to have interactions. This is often inserted into the body element.

<body role="document">...</body>

The banner Role

The banner role should only be used once within the html markup. It is usually used within the top of the page in the <header> or any element that contains the prime heading or in-page title of the site.

<header role="banner">...</header>

The complementary Role

The complementary role is generally used in the <aside> or sidebar section of the HTML document. The complementary role element lets assistive technologies know that whatever is inside this area, it is complementary to the main content.

<aside role="complementary">...</aside>

The contentinfo Role

The contentinfo role is used within the area that contains copyrights and links to privacy statement information. It is generally used in the <footer> element of your markup.

<footer role="complementary">...</footer>

The form Role

The form role is used by a screen reader to let users know that they can fill out a form. On some screen readers, users have quick keys to direct them to this sections of the page quickly. There is a lot more that goes into forms and it is recommended that you read the help documentation provided by W3.

<form role="form">...</form>

The main Role

The main role in ARIA is better explained as the most important element for screen readers and users alike. It is essentially used a link to “Skip to the main content”. It helps users know that this is what they are essentially looking for on a page.

<section role="main">...</section>

The navigation Role

The navigation role element is used in the navigation or <nav> element. The most important thing for any website is to be able to clearly navigate it. The navigation role tells screen readers that this is your navigational links.

<nav role="navigation">...</nav>

The search Role

The search role tells assistive technologies that users can search the website through this section. It is often used in a text input field labeled with role search.

<input type="text" name="search" role="search">

For More Information

• Kaltura HTML5 Video and Media JavaScript Library – HTML5 Video
• Web Accessibility Tutorials – W3C
• HTML Essential Training Using WAI ARIA roles
• Aria Made Easy
• Using WAI-ARIA in HTML

Article: How to Design with Dyslexia in Mind

Dyslexia is a learning disability that affects 3-7% of the population, and up to 20% may have some degree of the symptoms. It is not an intelligence problem, but considered a cognitive disorder that primarily affects learning, memory, perception, and problem solving. Specifically, it impairs a person’s ability to read. As web designers, we need to be aware of the design choices we make so we don’t make it harder for people with dyslexia to read a website.

Dyslexia Design Decisions

When making design choices we need to consider the needs of the following two groups:

Dyslexic people who use computer speech output technology: Like many visually-impaired users, many dyslexics now rely on computers to read the text to them. Thus pages should be designed to be compatible with most screen readers. All important information should be conveyed in text, as computers can not read or interpret graphic images.

Dyslexics who need clear graphics and distortion-free text: Other dyslexic individuals, who are reading your site on their own, will appreciate clear, simple, and consistent graphic navigational icons. They will be troubled by flashing text, variations in fonts, distracting sounds or animations, and textured or patterned backgrounds.
Dyslexia

Web Accessibility: Low-Bandwidth Users

As of 2013, we have an estimated 2.7 billion users on the internet, which is nearly 40% of the entire human population (7.3 billion, as of July 2015). Of those users, only 1.8 billion are connecting to the internet at broadband speeds (this includes both land-line and mobile broadband connections). With web pages becoming more and more data heavy, thanks in large part to Plugins, large images and videos becoming common content, the 33% of internet users who have connection speeds under 150 kbits/s are at a major disadvantage when it comes to accessibility.

So what can you, as a developer, do to better serve the lower third of internet users who suffer from low connection speeds? Well, Aptivate has already put together a very comprehensive guide to developing with low-bandwidth users in mind, so in this article, I’ll just be reviewing the most important aspects of their approach.

Size Matters

One of the main points that you must be aware of when developing for low-bandwidth users, is to keep the total size of a page (including all HTML, Javascript, CSS and images) under 25kB. I know that this may not sound achievable in some situations, but in the modern age of design, minimalist structure and design is not only good for low-bandwidth users, but also for all users in general.

After all, when users arrive at a page that has too much (or too little) information displayed on a single page, they are likely to leave. This requires designers and developers to work hard at distilling the raw idea of what you need to convey to users on your site, instead of just filling your site with content.

A Picture Takes as Long as 1000 Words

Though this metric isn’t completely accurate, the message is this: If you can convey a message with words, instead of pictures, always use words. When you do have to use a picture, have it in the correct format to reduce size, and if the image is very large, consider using a thumbnail that links to the full-size image. This way, the user isn’t forced to download those large images when your page loads initially.

Cache and Inform

Allowing your site to be cached enables users to save duplicate content (like images) so they don’t have to re-download that content each time they visit your page. There are several techniques that you can utilize for this, and the full guidelines go over those techniques in their section about caching.

Lastly, it’s best to warn users of page sizes when you link to them. This way, they can decide whether or not they want to follow the link. For example, if you provide a link to a chart that details more about the subject you are talking about on your site, a user would probably be very interested in the link. However, if that chart is a 20MB image, the user may want to know that before they prepare for the 5-minute or more download time that it will take to access the information.

Additional Resources

More information on this subject can be found in thew following locations:

• Aptivate – Guidelines for developing with low bandwidth in mind
• Wikipedia – Web Access
• Publishers for Development – The Bandwidth Challenge
• KM4Dev – Low Bandwidth Design
• KS Toolkit – Low Bandwidth Tools

Web Design and Section 508

In the Rehabilitation Act of 1973, US lawmakers recognized that the emerging information technologies could restrict the opportunities for those with a disabilities. This law started the process of enforceable requirements to ensure all individuals can receive the same benefits of internet access.  Section 508, as it is known today, provides web developers the guidelines for being compliant.

This section bars the Federal government from procuring electronic and information technology (E&IT) goods and services that are not fully accessible to those with disabilities.
WebAIM.com Overview of the Rehabilitation Act of 1973

It is very clear, to do business with US federal government agencies, or any company or non-profit organization that adopts these policies, must be consistent with the Section 508 requirements. Be too creative and web design proposals can be rejected.

Web Design Requirements for Section 508

Section 508 1194.22a-p provides the 16 requirements for web design. Since they have been the standard for many years, most are included in web development tools or are considered best practices. For easy reference, listed below are the first five.  All the requirements with explanations are available at the Quick Reference Guide to Section 508: Web Based Internet and Internet Information and Applications.

• 1194.22 (a) A text equivalent for every non-text element shall be provided.
• 1194.22 (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
• 1194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color.
• 1194.22 (d) Documents shall be organized so they are readable without requiring an associated style sheet.
• 1194.22 (e) Redundant text links shall be provided for each active region of a server-side image map.

Win Government Contracts

Web designers seeking the award of government contracts should understand the law. They should be familiar with the accessibility requirements of those with disabilities and incorporate them in all web projects.

Resources:

• WebAIM.com Overview of the Rehabilitation Act of 1973
• GSA Government Wide Section 508 Accessibility Program Reference Guide
• ClarkWP Magazine: Web Accessibility, Small flashing Objects and Text
• ClarkWP Magazine: Web Builders’ Guidelines for Government Websites

Web Accessibility: How Screen Readers Read a Website

Screen readers are assisting eyes of a screen that uses verbal translation. Screen Readers work by translating screen text into computerized speech so that a person can listen to the screen content. Currently these audio devices read content is a linear format.

Experienced screen interface users have concocted a few methods as ways to “skim” the web content. Some methods include: Using the links to parachute from link to link. Using Headings to bungee jump to other Headings- where Headings available.

When Web developers conveniently define these element, visitors can use ARIA Landmarks and HTML5 sectioning tags to navigate through a site.

Web Accessibility: Lists

Why should we use lists? Why are lists important to web accessibility? How do are lists need to be structured in compliance with web accessibility laws?

Using ul, ol, and dl elements for defining list content ensures users with disabilities can easily distinguish a list from the rest of the content and move between items of a list and between lists themselves. You should write link text that clearly communicates the target of the link making navigation easier for all users. Using link lists also makes it easier to find and update links on web resources.

According to the Web Accessibility Guidelines (WAC), website designers and developers are required to:

Web Accessibility: Media Accessibility User Requirements

The WAI Media Accessibility User Requirements document covers a range of subjects relating to allowing people with disabilities to access media on the web in an alternate way.

Web Accessibility: The Search Form

As the Internet constantly evolves with technology, speed and the desire to provide a stimulating experience, it is not always easily adaptable to those who search only occasionally or have disabilities through hearing, eyesight, technology or others. It is important to remember the need to create and post content with all searchers in mind, regardless whether we feel they will be potential customers or followers of our content.

WebAxe, a blog and podcast on web accessibility, answers it this way:

An accessible web page makes all pertinent content available to any human user who wants it regardless of browsing technology. Web accessibility benefits more than people with a disability; keep in mind that a user may be temporarily disabled or using older technology.

The W3C’s definition says:

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

The search form is a critical aspect of a website’s functionality, easily allowing the visitor to search the site for information. According to the W3C’s specifications on search forms: