A Case for Accessibility in Web Design
“Cyber space, after all, is the public square of the 21st century.”
-Hillary Clinton
This quote from former Secretary of State Hillary Clinton is becoming more relevant every day in most 21st century societies. In a time when Internet access is viewed as a basic human right, why isn’t accessibility in web design something we talk about more seriously? Anyone who designs, builds or manages a website has the responsibility to recognize that people experience and interact with the web in different ways. We have a responsibility to create websites that reflect that.
In the words of Anne Gibson, contributing author to A List Apart, “We need to recognize that it is none of our business why our audience is using the web the way they’re using it.”
There is a misconception that accessibility can be treated as an afterthought: "My website works for me; now I’ll make it accessible to users who are different from me." This attitude is unfortunately common and undoubtedly stems from the way that web officials define Accessibility. The World Wide Web Consortium’s Web Accessibility Initiative, a group that develops guidelines for creating accessible websites, states, “Web Accessibility means that people with disabilities can use the Web.” In Gibson’s article, Reframing Accessibility for the Web, she responds to this definition: “This is wrong. Web Accessibility means that people can use the web. Not ‘people with disabilities.’ Not ‘blind people and deaf people.’ Not ‘people who have cognitive disabilities’ or ‘men who are color blind’ or ‘people with motor disabilities.’ People. People who are using the web. People who are using what you are building.”
While this post is not about attacking the way some people view Web accessibility, it is important when thinking and talking about accessibility to keep inclusivity at the forefront of your mind. There are some easy ways to help your users have more meaningful and less frustrating interactions with your site and other web content.
Note: This is by no means a comprehensive list of all of the different ways people use the web, but it is a good place to start in terms of thinking about your website’s accessibility.
Users Who Are Deaf and Hard-of-Hearing
My “adorable niece Kate” (that’s how she signed off on her most recent email to me), is hard-of-hearing. She can hear a bit with the assistance of hearing aids, but without them, her hearing is almost completely non-existent.
Kate was gracious enough to answer a few questions about her experiences with Web Accessibility. She told me that a lot of videos online claim to have captions, but don’t, and “when some do provide captions, they rarely work anyway.” What she means is that the words do not match the audio, or don’t sync up at the right time.
She says because she is hard-of-hearing, and not completely deaf, she can hear the videos and understand some of it. But for users who are completely deaf, that is not the case. If a page or feature of your site relies on a video component to convey information to the visitor, it is imperative that your video has accurate captions enabled. Most video hosting services include a captioning tool. You can find instructions on how to implement captions on YouTube here.
In another great article on A List Apart, Lisa Herrod says, “Native sign languages aren’t simply a gestural representation of spoken language; sign language is a visual-spatial language, without a natural written form. Grammar and syntax are very different from that of spoken languages, and rely heavily on facial expression to convey essential meaning and emphasis.”
When creating captions, this is a very important thing to remember. Often times, putting a literal word-for-word transcription doesn’t adequately convey a video’s information to users whose native language is a sign language. It is much more accurate to consider captioning for deaf and hard-of-hearing users as translation from one language into another. Including important sound effects and other non-lingual information as well will help create the best experience for those users.
Seeing Things Differently
For users that are blind or visually impaired, a screen reader is a helpful tool. A screen reader is software that interprets the information displayed on a computer screen and translates that information into text-to-speech audio, or in some cases, a Braille output device. Screen readers allow the user to navigate the page with keyboard input (typically moving from item to item using the tab key), with each item being read aloud, in the case of a text-to-speech screen reader.
The way in which a website’s code is structured can effect how a screen reader user interacts with your site. Screen readers read websites’ content in the order they are written in the code, not in the order they are displayed on the screen. In the case of image use, it is necessary to use proper alternative text (using the alt attribute in the HTML tag), particularly when graphical content is important to understanding the content being displayed.
When designing the visual side of a website, keep in mind that people experience color very differently. Color blind and color deficient users may not be able to see items of your website that are close together in hue. The most typically problematic example of this is the use of color to define links within text. If the link text is not underlined, which is a growing trend among designers, the text should be in contrast to the main text color enough that all sighted users can differentiate between the two, no matter their level of color perception.
People that are dyslexic may have a hard time reading the typefaces used on your site. Many dyslexic people find sans-serif fonts much easier to read than fonts with serifs. There are several fonts that were designed specifically with dyslexic readers in mind, created based on research and information from people that have trouble reading certain typefaces. Unfortunately, many of them look like a grown up Comic Sans, but there are other options. No typeface is perfect for every reader, but consider the ways in which your font choices might appear to different users.
Varying Inputs
Some users interact with the web only with a mouse or a keyboard rather than both. People that use the web with only a keyboard rely on websites’ ability to be navigated using the keyboard. This means that clickable items like buttons must also be able to be accessed using just the keyboard (for example, hitting “enter” to submit a form or pressing “escape” to close a lightbox).
Fortunately, most frameworks and plugins that developers use to build sites incorporate this sort of functionality by default, but it is always best to test your site’s mouseless accessibility. Unplug your mouse and attempt to navigate and access all parts of your site. If it isn’t possible, or could be easier, make the necessary changes to make your site accessible to keyboard only users.
Vestibular Symptoms & Parallax Effects
The vestibular system is the sensory system that gives a person their sense of balance and spatial orientation. Issues with this system can cause one to experience symptoms such as vertigo and motion sickness. These are unpleasant experiences that most people are at least somewhat familiar with.
Parallax scrolling is a popular web design trend in which elements on the page move at different speeds as the user scrolls, creating the illusion of depth. While this effect can be used for some pretty interesting and conceptual effects, it is also making many users sick. Apple’s iOS7, released in 2013, incorporates parallax and zooming effects, which many users complained contributed to feelings of nausea and motion sickness.
If the subtle effect of the floating app icons on the iPhone are making people feel ill, imagine how an intensely parallax heavy website would make them feel. This isn’t to say that parallax is totally out of bounds, but take it into consideration when designing your site. Is the potential risk of losing visitors by making them feel physically ill worth the cool visual effect you want to achieve?
Creating a website that gives every type of user an incredible experience is difficult, and perhaps even impossible. But creating a website that is accessible for most users, one that treats every user with the respect and integrity they deserve as a human being, isn’t. Most of us strive to treat others as we’d like to be treated. Shouldn’t that be the case with our web design?
