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.

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.

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 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:

Web Accessibility: Providing Descriptive Titles for Web Pages

The objective of this technique is to give each Web page a descriptive title. Descriptive titles help users find content, orient themselves within it, and navigate through it. A descriptive title allows a user to easily identify what Web page they are using and to tell when the Web page has changed.
W3C Working Group Note

Having a descriptive title for web pages is vital for many reasons, but according to the W3C Working Group Note, it is especially important in regards to web accessibility practices and guidelines.

Web Accessibility: Headings and Section Titles

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

The World Wide Web Consortium (W3C) is an international community whose mission is to lead the Web to its full potential. They have published Four Principles of Accessibility: Perceivable, Operable, Understandable, and Robust (POUR). You can read more about those standards and you can contact W3C directly for more information.

Web Accessibility: Preparing for Older Web Users

We are all aging. That’s an undeniable fact. In the 2013 United Nations World Population Aging report their studies showed that every country in the world is experiencing a shift to a larger population of older citizens. Generally this happens when mortality rates decrease and fertility rates decline.

In other words less people die and less people are born. That changes the ratio of young people to older people and creates what is known as an aging population.

In this article we are going to define senior populations as being 65 years and older though this number is being debated around the world.

Web Accessibility: Small Flashing Objects and Text

The criteria for presenting small flashing objects and text on a web page varies depending upon the reference you use when it comes to defining what amount of flashing and moving is permitted on the web within the web accessibility laws. Of course, this changes depending upon which country’s laws are being followed as well.

The important point to consider is that you don’t let small flashing objects flash faster than 3 times per second. According to W3C.org:

The criterion is 25% of any 10 degree visual field, any single flashing event on a screen (there is no other flashing on a screen) that is smaller than a contiguous area of 21,824 sq pixels (any shape), would pass the General and Red Flash Thresholds.

That is an image the size of 341 x 246 pixels. The definition of a “general flash” or a “red flash” are defined below in the threshold definition by WCAG 2.0 Recommendation as:

a flash or rapidly changing image sequence is below the threshold (i.e., content passes) if any of the following are true:

• there are no more than three general flashes and / or no more than three red flashes within any one-second period; or
• the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance

Squizlabs’ HTML_CodeSniffer describes this as:

The definition of small enough is given as “25% of any 10 degree visual field on the screen… at typical viewing distance”. This size, therefore, depends on the screen size, resolution, and viewing distance. The higher the resolution or screen size, the larger the permitted area.

Objects that flash and blink on the web page run the risk of initiating optically-induced seizures in visitors. According to WebAIM, no element should flash at a rate of 2 flashes per 55 cycles per second.  Using their 508 checklist, one or more elements that flicker on a page that does not meet this criteria is considered to fail, and will put someone at risk who is sensitive of optically-induced seizures.

W3C Recommendation 2.3.1 states that:

Three Flashes or Below Threshold: web pages do not contain anything that flashes more than three times in any one second period.

The intent is to reduce the chance of seizures since some people are sensitive to flashing on screens. This includes people with photosensitive epilepsy as well as photosensitive seizure disorders.

W3C goes on to further explain this is detail so that a writer could fully understand how critical it is to make sure accessibility standards are met. The other resources all show that optical seizures are the main reason why that this criteria is maintained. These sources differ in the timing of the flashing time limit but they agree about the results. So whatever source you choose consider your reader.

The web standards for moving and flashing text for web accessibility are found in Section 508 1194.22 (i), WCAG 1.0 A 7.1, and WCAG 2.0 A 2.3.1.

References and Resources

• W3C: Keeping the flashing area small enough – W3C.org
• TechRepublic, by Nicole Nash in Web Designer
• Accessibility and Usability Design, Web2.0 Applications and Software
• WebAIM, Section 508 Checklist
• Powermapper, Accessibility Checkpoint
• HTML_CodeSniffer, Success Criterion 2.3.1