Making the Web Accessible

accessibilityMost things in our world are made to accommodate many kinds of people, particularly, those who are disabled in some way. Braille is on most public signs, and there are wheelchair ramps on many buildings. Movie theaters offer listening devices and many vehicles can be modified to be driven in non-traditional ways (hand brakes, etc). Our Philadelphia website design agency knows that since many of us do not face these challenges, we often neglect them. This is especially true in regards of the web; one of the last frontiers in our world to become fully accessible.

While many are built responsibly with several different users in mind, websites, like buildings, need to be accessible for whoever wishes to use them. “1 in 5 people in the United States has some kind of disability, and an estimated 30 million people are impacted by inaccessible computer and software design” (UsabilityFirst.com). Every person should be given an equal opportunity to access the web, regardless of limitations.

According to the W3C, “Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities” (W3.org). Aside from the obvious, accessibility is also about taking initiative and making sure your site allows equal access to anyone, disabled or not. The web offers information and interaction incomparable to anything else.

Making a site accessible only requires a few easy steps for a developer. Anders Ross, from Instant Shift, states, “An accessible web allows people with disabilities to become more active members of our society” (InstantShift.com). Not only will these make your site available to more people (this means more traffic, and ultimately more money and business for your company) it will result in cleaner, more semantic code.

“Structuring a page properly makes it machine-friendly, whatever that machine is. Add the kind of common sense techniques that allow users (including users with disabilities) and machines to get straight to meaningful content, and you are moving towards making your site accessible.” —SitePoint.com

Not sure if your site is accessible? Follow these steps to find out:

  1. Turn off graphics
  2. Turn off sounds
  3. Check the contrast by viewing the page in gray-scale
  4. Turn off style sheets
  5. Turn off scripts, applets, or other programmatic objects
  6. Use the largest font size allowed by a browser
  7. Resize the browser window
  8. Select all text and copy it into a word processor to make sure it makes sense
  9. Use an automated accessibility tool to check your website (UsabilityFirst.com)

Can your site still function? If your answer is no, then you are not alone. Accessibility has become an afterthought for many as it does not appear to reflect their main audience, yet it is becoming more apparent that nobody understands their audience 100% of the time.

Audience

audience

Web accessibility is not just a thoughtful addition; it is a moral responsibility for a website owner. It is vital to remember that audience is the most important part of any web interaction. “If your audience is unable to understand, view, access or use your website, then all your effort will be futile” (Anders Ross, Instant Shift). A website’s audience will always consist of many different kinds of people: young, old, tech geniuses, people with slow internet connections or older technology, etc. Be aware that your audience is not always going to be exactly like you.

“Accessibility is one of the most ignored aspects of web design. There is an assumption that it requires one to sacrifice aesthetics or that it’s not worth the effort. And yet it is critical to the success of a website. Accessibility guidelines now go hand in hand with web development practices.” —InstantShift.com

Usability and accessibility are often in close association with one another because a website really needs to include both in order to be effective. But our Philadelphia website design agency knows a site cannot be accessible if it isn’t usable. For example, if there are no doors on your building, how do you expect people to get inside?

One could argue that to be a successful developer, one must also be a good anthropologist. Studying people and how and why they use technology is useful when creating something you intend to be used. If you cannot understand how people use your product, then you will not know how to improve it. This is incredibly important when referring to accessibility. The old adage of “walking a mile in their shoes” is appropriate here. Think of what it would be like to view the web with visual impairments, or not having the hands to use a mouse and keyboard.

Think you don’t need your site to be accessible? Think again! Many major websites have been sued for not meeting accessibility standards under Section 508, which deals with web accessibility in the USA. Companies such as Target, The Social Security Administration, and the US Department of Education were once on the list.

“Last year, Target Corp. agreed to pay $6 million in damages to plaintiffs in a California class action lawsuit who were unable to use its Web site … There were many links on Target’s site that were unintelligible to screen-reading software .. there have been improvements since the settlement with the National Federation of the Blind.” —KomoNews.com

There are many different types of disabilities to consider when deciding to make your site accessible, but I will explain why there are a few that require special attention when it comes to web design and development.

Physical Disabilities and Motor Impairments

keyboardPhysical Disabilities

People with physical disabilities often have to rely on non-traditional methods of using a computer due to lack of hands or limbs. This means they cannot use input devices such as mice and keyboards. Therefore, they must use custom-made items that facilitate their interaction with computers. For those of us who are not physically disabled, it may be hard to imagine what it would be like if you were.

Try browsing this site without a mouse. You can scroll up and down using the arrow keys, and perhaps use the Tab key to highlight different text inputs, but that is where your interaction would stop. “Unless these users’ needs are taken into account when you create Website navigation and input methods, physically disabled users may well find your site completely inaccessible” (SitePoint.com). This could be helped by organizing content in a sensible and cohesive manner, and offering a way to skip unnecessary content.

Motor Impairments

Motor impairments are a little bit different. Rather than lacking limbs, some motor impairments consist of limited muscle control or limited mobility in one or more areas. “This may include hands that are too large or small for a keyboard, shakiness, arthritis, paralysis, and limb loss, among other difficulties” (UsabilityFirst.com). There are many aids available, however, such as Sticky Keys, which make difficult keystrokes easier. There are also pointers and other devices (mouth-sticks, blow-suck tubes, and tongue-activated joysticks) controlled by head or mouth movements and speech-to-text systems that help users enter messages without using a keyboard.

Cognitive and Neurological Disorders

Individuals with cognitive and neurological disabilities can find the web to be a very confusing place. Even for the savviest of users, the web can be a daunting experience. Finding the right information is often frustrating at times and it becomes worse when websites use complex designs, inconsistent navigation, and repetitive elements that distract from the goal of the site. The following list contains some of the typical barriers experienced by those with cognitive and neurological disabilities:

  • Complex navigation mechanisms and page layouts that are difficult to understand and use
  • Complex sentences that are difficult to read and unusual words that are difficult to understand
  • Long passages of text without images, graphs, or other illustrations to highlight the context
  • Moving, blinking, or flickering content, and background audio that cannot be turned off
  • Web browsers and media players that do not provide mechanisms to suppress animations and audio
  • Visual page designs that cannot be adapted using web browser controls or custom style sheets

Blind and Partially Sighted

braille-keyboardVisual disabilities, including blindness and people who are partially sighted (nearsightedness, farsightedness, etc) also need special accommodations. Blind people often use applications and devices called screen readers, which read the text of the page. Some screen readers may also convert text to Braille (using a small pad device which creates Braille) and many individuals use Braille keyboards. Since screen readers can only read text, a developer must be careful when using images as text, buttons, or navigation items. If this is the case, proper descriptive alt and title attributes on link elements must be in place. This will also be useful for any user who has graphics turned off to speed up download time.

Many operating systems use auditory feedback to indicate that an action has been completed. They include “a click after a keypress, a whoosh accompanying opening and closing windows, or a klunk when a file is deleted” (UsabilityFirst.com). Auditory feedback is also important to non-visually impaired individuals. Apple computers feature the sound of crumpling paper when an item is moved into the trashcan—an indication that the desired action has been completed.

A partially sighted person may need to increase the font size of a page or change colors to create more contrast between the background and the text. Most browsers allow people to adjust the text size and colors, but a developer must be sure that their site will allow for this.

Take for example, Readability, a web and mobile app which turns any webpage into a read-only text version and adds it to a reading list. While its features are based mainly on preference, it is a prime of example of accessible design. Readability’s elegant controls allow users to choose a font size and background color that is comfortable for them.

Colorblindness

A developer should also be mindful of color choices for action items. Genetic colorblindness is rare, only affecting about 8% of all men and about 0.5% of all women to some degree. However, acquired colorblindness, caused by injury or diseases like glaucoma, increase the number of those affected significantly. It is not always feasible to offer several different color schemes to cater to these people, and many of them realize this. But one area which we can easily control is action buttons.

“When creating buttons or notices that call the user’s attention and require their direct interaction, try to avoid using color combos that are easily confused by colorblind users (red and green, blue and yellow).” —Mashable.com

Colorblindness is difficult to test for since there are not many reliable web-based testing services. If you are unsure if your action buttons are clear, always remember to have clear, distinct language on them. Rather than say “click the green button to continue,” have your buttons contain clear iconography or text, (e.g., Click YES to continue). Regardless of your color choice, your desired action will be clear.

Monster.com’s Breakthrough

Recently, the job search site Monster.com was the first in its industry to have a site that is 100% accessible to blind users. This is important for two reasons:

  1. Many sites cannot make this claim.
  2. Underemployment and unemployment are major problems in the blind community.

To make its website and mobile applications accessible to job seekers who are blind, Monster is making them compatible with innovative technology called screen access software that renders on-screen information into Braille or speech so that blind individuals can use keyboard commands to access the same information as sighted users.

In accordance with the agreement, Monster is in the process of making its desktop and mobile websites fully and equally accessible and will have its mobile applications accessible within two years. Monster has also ensured the templates employers use to post job advertisements on its site will be fully and equally accessible within six months (Mass.gov).

Hearing Impairments

Hearing Aids
People with hearing disabilities can read text on a page, so hearing loss really does not hinder computer use in that respect. But since they are either partially or totally deaf, they cannot hear audio content on a site. One alternative is to provide closed-captioning on all videos or sign language videos for audio-only content. Most video services, like YouTube, offer closed-captioning as an option, but they are not always accurate. So, if you are going to provide captions make sure they are correct. Closed-captioning is also perfect for non-native English speakers who find it easier to understand written language. It also comes in handy for people who may work in noisy environments or particularly quiet ones where noise from a video would be inappropriate (or if you forgot your headphones!).

“For some people with auditory disabilities, sign language is the first language and they may not read a written language fluently. Providing important information in sign language and using simpler text that is supplemented by images, graphs, and other illustrations help make web content more understandable to many. However, it is important to remember that not all people with auditory disabilities know sign language.” —W3.org

Epilepsy

Epileptic people are incredibly sensitive to rapid, flashing lights. Therefore, they would not be able to view pages that automatically refresh or images that flash at a frequency between 5 and 45Hz. They would also be sensitive to flashing logos and banners, or slideshows that change too frequently. “Visual effects that flicker or produce a strobe-like effect may seizures in some individuals” (WebAim.org).

Surprisingly, there is no exact limit as to when a seemingly harmless animation becomes seizure-inducing. Furthermore, many content creators have no idea that their work will be harmful. Take for example a now infamous episode of the popular Anime Series, Pokemon. Several years ago, this episode was aired in Japan and shortly thereafter, never aired again. About 20 minutes into the episode, there is a sequence of rapidly-flashing red and blue lights on the screen.
pokemon

“Straight away, children across Japan were struck down with various ailments. Some kids passed out, or experienced blurred vision. Others felt dizzy, or nauseous. In extreme cases, some even experienced seizures and cases of temporary blindness.” —Kotaku.com

Roughly 1 in 4,000 people are vulnerable to photosensitive, or photo epileptic seizures caused by visual stimuli that feature flashing lights, bold patterns or moving patterns.  While 1 in 4,000 seems small, approximately 700 children (out of the 4 million or so that watched the episode) had to be hospitalized. But thankfully, only a small portion of the children were actually diagnosed with photosensitive epilepsy. Since its initial airing, the episode only aired one more time, edited heavily to remove the offensive content. However, despite this, the episode was eventually banned by the Japanese government and cannot be found on any DVD set of the show (bootleg copies, however, do exist). An English dub was created to be aired in America, but it was eventually canned when it was learned that the Japanese ban meant it could not be aired anywhere else.

“There is no absolute threshold at which a harmless animation turns into a dangerous, seizure-causing graphic. However, the guidelines that are used in the United States under Section 508 have set the threshold between 2 and 55 flickers per second. This does not mean that anything that moves at that rate will cause a seizure, because that would make all videos and animations unusable. Movement is not the issue. Flickering and strobe-like effects are the issue.” —WebAim.org

While the Pokemon episode was on television, this situation could happen on any website. The following two images are a perfect example of that. Be warned, these images are considered to be bad examples to use and are uncomfortable to look at for too long. Do not click on them if you think you may suffer from photo epileptic seizures: A strobing, flickering image, An optical illusion image (the lines appear to be in motion).

Thankfully, most designers do not create graphics like these on purpose. Multimedia and flash developers, however, are notorious for modern-looking animations that flicker and strobe on the screen. If something you create makes you or a non-epileptic friend mildly uncomfortable upon viewing it, you may want to reconsider this part of your project.

What You Can Do

On a basic level, there are several things you can do as a developer to make your site more accessible. The first and most simple step is to use headings properly (like our Philadelphia website design agency does). It is vital to arrange headings in a cohesive manner: <h1>, <h2>, <h3> and so on. Screen readers will be able to navigate pages more easily if the information is arranged correctly. Furthermore, you must label your site appropriately. For example:

<html> 
<head> 
    <title>Your Title</title> 
</head>   

<body> 
    <h1>Your Heading</h1> 

    <h2>Secondary Heading</h2> 

    <h3>Tertiary Heading</h3> 

    <h4>Lower Level Heading</h4> 
</body> 
</html>

WordPress Makes It Easy

Making a site accessible can seem daunting, but WordPress will make the transition a little smoother. At its most basic level, it already has much of what is needed to create an accessible site and can be extended through supplemental plugins.

Many WordPress themes have Navigation Links built into their design. Navigation links allow users to skip past areas of content to access other areas of a site. The skipped areas could include the navigation bar and search boxes. These links often appear wherever it is necessary for users to skip to the desired content (usually at the top of a page). These links may be:

  • Skip to Main Content
  • Jump to Navigation Bar
  • Jump to Search

Why It’s important

If you still are not convinced, consider this: web accessibility is the law. Government sites and any site that offers goods and services on the web are required to be accessible. “A service provider must take reasonable steps to deliver their service to all, including disabled people. But the law is not reason alone; think of accessibility as an enrichment of the product, not a burden” (InstantShift.com).

Your website is your business’ presence on the web; its digital storefront. As I stated before, if a building does not have doors, people cannot enter it. Be considerate of what you do with your website. Mild annoyances to us can be gigantic road blocks for people with disabilities.

“The web is evolving into a complex world. It is not a place where people are concerned solely with profit; rather, there is a higher level of consciousness that is spurring people to consider more carefully the needs of those with disabilities.” —InstantShift.com

Take the time to understand your audience and stay informed on accessibility issues and advancements. Spend a little extra time incorporating accessibility into your development process; in the long run it will expand your audience which in turn will expand your business.


Sources

How to Make Your Website More Accessible – InstantShift.com
Creating Accessible Websites – AFB.org
4 Ways to Make Your WordPress Site More Accessible – SitePoint.com
Web Content Accessibility Guidelines – W3C.org
Monster.com First in Industry to Make Website Accessible for Blind Users – Mass.gov
Accessibility – W3C.org
Types of Accessibility Aids – W3C.org
Responsible Considerations For Responsive Web Design – SmashingMagazine.com
10 Ways To Make Your XHTML Site Accessible Using Web Standards – SmashingMagazine.com
An Introduction To Accessible Web Design – SitePoint.com
The Banned Pokémon Episode That Gave Children Seizures – Kotaku.com
Efforts under way to make Web more accessible – Associated Press
Section 508 Lawsuits – Evengrounds.com
Web accessibility guide – VORD Web Design
Creating Accessible Images – WebAim.org

Client Spotlight

Check out some of the work we've done to help these clients succeed: