A History of Accessibility
In 1990, President George W. Bush signed the Americans with Disabilities Act (ADA) into law. The ADA prohibits discrimination on the basis of disability in “places of public accommodation.” While this law attempts to provide accessible accommodations to the disabled community, it’s under a tremendous amount of litigation.
With the internet’s rise to power in the 90s, a gray area formed as to what constitutes accessibility in the digital age. The lack of clarity around guidelines for web and mobile accessibility features is still an issue today. Some lawsuits argue that a website with access barriers denies the right of equal access in the same way that physical barriers do. For instance, not providing closed captions for the hearing impaired community, or adjusting interfaces to be readable for visually impaired individuals.
As we continue to move a majority of our personal and professional lives online, it’s now as important as ever to create equal access for the disabled community across the web and mobile platforms.
An Accessible Webspace
To meet concerns around web accessibility during the rise of the internet in the late 90s; the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) created and published a series web accessibility guidelines. This series continues to be relevant today with its latest publication (WCAG 2.1) back in June 2018. WCAG breaks down into four distinct categories of accessibility (all bullet points are sourced directly from the WCAG 2.1 “at a glance” via this link):
WCAG 2.1 at a Glance
- Perceivable
- Provide text alternatives for non-text content.
- Provide captions and other alternatives for multimedia.
- Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
- Make it easier for users to see and hear content.
- Operable
- Make all functionality available from a keyboard.
- Give users enough time to read and use the content.
- Do not use content that causes seizures or physical reactions.
- Help users navigate and find content.
- Make it easier to use inputs other than keyboard.
- Understandable
- Create text readable and understandable.
- Make content appear and operate in predictable ways.
- Help users avoid and correct mistakes.
- Robust
- Maximize compatibility with current and future user tools.
Source – WCAG 2.1 at a Glance
Success in Accessibility
The WCAG is a stepping stone to understanding the importance of creating an accessible digital environment. Each guideline featured in the WCAG series is testable and matches up to three distinct levels: A, AA, AAA. WAI recommends meeting at least all level A and AA criteria.
The disabled community relies on accessibility tools to find success both inside and outside the workplace. When used appropriately these guidelines provide an environment founded on equality. While ADA doesn’t yet specify WCAG as a formal standard under the law, courts are upholding that compliance with WCAG provides reasonable accessibility. It is likely that it will be law in the near future.
So how does this translate to the retail enterprise landscape?
Accessibility Use Cases & Examples
Accessibility in mobility reaches every facet of the internet. There are a wide variety of disabilities that need to be accommodated to provide a better work and retail experience. Here are a few examples that highlight the importance of accessibility:
Calvin, an online shopper with color blindness
Calvin lives with red and green color blindness. When red and green combinations are used, Calvin cannot distinguish between the two. He struggles when contrast isn’t adequate and only color indicates required fields and sale prices.
Color blindness affects nearly 300 Million people worldwide and is most prevalent in men. It is estimated that 1 in 12 men and 1 in 200 women are colorblind. That is a massive proportion of the global community, and color blind individuals make up a significant percentage of retail customers.
Glancing at a typical listing on a retailer’s website can be a challenge when the color swatches are not labeled. If he decides to make a purchase and moves on to checkout, certain information that is typically highlighted in red (to symbolize importance) may be indistinguishable. Calvin is better able to recognize when required information is followed by an asterisk.
Guidelines to consider when designing interfaces or physical spaces:
- Don’t use color alone to convey information.
- Avoid putting sale prices in red without labeling it “Sale” as well.
- Be sure to include text labels for all information, not just color.
- Include asterisks, and visual keys to highlight important information.
- Provide additional information that doesn’t rely on color perception.
Individuals with colorblindness have better experiences with online content and apps that use adequate contrast. Applications that allow them to adjust said contrast settings in their browsers are essential. There are plugins such as the ‘Colorblinding’ Chrome extension that simulates colorblindness to help web developers. Curating the web experience with colorblind individuals in mind will only help create a more accessible webspace.
Alex, a reporter with a repetitive stress injury
Alex finds it painful to type and use his mouse for extended periods. He uses an ergonomic keyboard and the accessibility settings on his phone. It’s easiest for him to use keyboard commands in place of a mouse. But he has a hard time when online content can’t be navigated by keyboard commands alone.
To make content more accessible for people like Alex, developers and UX/UI teams need to be cognizant of keyboard commands. Interactive elements should be easily identifiable and accessible via keys. iPhones come with accessibility settings installed to meet some of these needs and Apple’s Assistive Touch is a prime example of how developers can create an equal experience for people like Alex.
Examples of Keyboard Accessibility:
- Tab to all: Check that you can tab to all the elements, including links, form fields, buttons, and media player controls. (A common problem is that you cannot tab to media player controls.)
- Tab away: Check that you can tab away from all elements that you can tab into. (A common problem is the keyboard focus gets caught in media controls and you cannot get out; it’s called the “keyboard trap”.)
- Tab order: Check that the tab order follows the logical reading order (e.g., for left-to-right languages: top to bottom, left to right) in sequence.
- Visual focus: Check that the focus is clearly visible as you tab through the elements, that is, you can tell which element has focus, e.g., links have a gray outline around them or are highlighted.
- All functionality by keyboard: Check that you can do everything with the keyboard; that is, you don’t need the mouse to activate actions, options, visible changes, and other functionality. (A common problem is that some functionality is available only with mouse hover, and is not available with keyboard focus.)
- Drop-down lists: Check that after you tab into a drop-down list, you can use the arrow keys to move through all the options without triggering an action. (A common problem for drop-downs used for navigation is that as soon as you arrow down, it automatically selects the first item in the list and goes to a new page — you cannot get to other items in the list.)
- Image links: Check that when images are links, they have a clear visual focus and can be activated using the keyboard (usually by pressing the Enter key).
Angie, an online student who is hard of hearing
Angie is 62 and has been hard of hearing since birth. She hears some sounds but does not understand speech. Recently she started taking online college courses but finds interacting with content challenging. She encounters barriers when video and media content are not captioned.
For individuals like Angie with various levels of hearing impairment, closed captions, screen readers and transcripts are essential to navigating the web. However, some organizations don’t hire professionals to translate audio to text, and automatic captions are not always accurate.
Here are some ways to create accessibility for hearing impaired people like Angie:
- Include all audio info (i.e. sounds, speaker identification) in captions
- Describe of important visuals (like a screenplay) within transcripts
- Screen Readers integration into all aspects of your platform
- They indicate aloud the structural information on webpages such as headings, column and row headers in tables, list items, links, and form controls. In place of images, alt-text is read aloud, giving a description of the image
- When sites aren’t properly coded, they require a ton of time to read text from the top to the bottom without navigation cues
- Alt Text
- Add alt text to images that convey information useful for interacting with or understanding content.
- Describe functionalities with alt text. For instance, a search bar should say “Search” not just show a “magnifying glass”
- Null alt (alt=””) should be added to decorative images
- Ask yourself: “if the image was removed, would the user still get all the information on the page?”
- Don’t include “button”, “link”, or “image of” since screen readers already provide that info
- Brief alt text can be used when an image is sufficiently described in the text. For example, a simple diagram illustrating what’s written in the web page text can have brief alt text such as “Diagram of workflow as described above”
Outfitting digital spaces with audio assistance features such as the ones listed above have positive effects on SEO and better discoverability of online content.
Lola, a middle school student with ADHD and dyslexia
Lola enjoys literature class even though she has substantial difficulty reading. Her school uses online textbooks so she has a text-to-speech software that helps her read. But some websites have a lot of advertisements and moving content that is distracting. Sometimes she gets lost when navigation isn’t clear.
Multiple Means of Navigation:
People with ADHD have difficulty when navigation isn’t clearly evident. It’s okay to be redundant about where information is.
- Navbar, search field, breadcrumbs, and a sitemap are all important features
- Search functionality that suggests alternative spellings and provides helpful error corrections is very helpful
- Use page titles that adequately and briefly describe the content of a page
- Front-load title with important and identifying information
Some people with ADHD or Dyslexia process slower than others. Having moving, flashing, or blinking content may make information difficult to understand. Content might disappear before they have time to read it or it distracts them from focusing on what’s important. This kind of content can also cause seizures in people with epilepsy.
What to check for:
- Moving, blinking, or scrolling information that starts automatically and lasts more than five seconds. If there is, allow users to pause, stop, or hide the movement
- Look for auto-updated information (such as stock price). Ensure that there is a way for the user to pause, stop, or hide the updated information. Or that the user can control the frequency of the update
- Remove content flashes or blinks that occur more than three times in one second
- For people struggling with ADHD or other issues, use of typography alongside white space can help
- Utilize your designer toolbox (whitespace, layout, typography, logical structure)
- Create headings and spacing for group related content
- Whitespace and proximity make relationships between content more apparent
- Use styling and positioning to group content, reduce clutter, and make it easier to scan and understand
Millie, a retiree with low vision, hand tremor, and memory loss
Millie is 85 and has common age-related impairments. She has just started using social media to stay in touch with his family and friends. Like others her age, small text with small links makes it difficult to use websites. Millie’s daughter recently showed her how to enlarge text in a web browser. But when the text doesn’t reflow when enlarged, she is forced to scroll back and forth to read, losing track of her place.
Here are some ways you can help users like Millie have a better experience on your platform:
- Allow users to increase text size
- Properly “reflow” text that has be adjusted
- Ensure text doesn’t disappear or get cut off
- Remove overlaps
- Buttons, form fields, and controls should always be visible and usable
- Make sure horizontal scrolling isn’t required to read text within a section
Adaptive text resizing is often overlooked, but the reality is that Millie represents a large portion of our communities. And people with similar impairments should not be disconnected from social media or any internet platform due to a lack of accessibility.
Louis, a supermarket assistant with Down Syndrome
Louis has difficulty with abstract concepts, reading, and math calculations. He struggles when there are too many product choices and has problems finding his favorite items when the store layout changes. A friend just showed him an app for online grocery purchases that has consistent navigation and direct, identifiable instructions. This made it easier for Louis to get his shopping done, and feel confident about his experience.
Someone like Louis who struggles with understanding complex or abstract ideas does so much better when things are straightforward. He benefits from search functionality that suggests mistyped or misspelled words and clear labels near their respective fields.
Clear navigation and instructions
There are plenty of websites out there with horrible navigation and a lack of instructions. For someone with Down Syndrome, poorly made navigation is more than an annoyance, it’s a hindrance. Navigation is an essential aspect of making a well-organized website. Be clear, consistent, and direct when creating and developing websites.
Moving Forward with Accessibility
After considering the cases presented in this article and developing a better understanding of accessibility, it’s now time for you to take action! Consider the following checklist when evaluating the accessibility of your website. This is in no way an all-encompassing list, in fact, we recommend referring to the World Wide Web Consortium (W3C) for more detailed guidelines.
Checklist
- Perform contrast checks
- Follow color usage rules
- Color usage rules: don’t use color as the only way of communicating something
- Make sure the site is usable when text is resized
- See that things don’t get cut off or overlap. Everything should be visible and usable. Don’t make people scroll horizontally
- Have Clear Navigation Outlines and Instructions
- Offer multiple ways to navigate
- Allow people to search, give them a sitemap, offer clear nav titles, and make sure screen readers don’t just say “link”
- Include descriptive alt-text on images
- If an image conveys information that is useful for understanding it needs alt text
- Check for “keyboard traps” when tabbing
- Make sure users cab tab to all elements (especially media controls), and tab away from them, following a proper order (left to right languages should tab left to right, top to bottom)
- Be wary of moving, flashing, blinking content
- Provide video and audio alternatives
- Perform a basic structure check
Conclusion
We’ve covered a small variety of web accessibility concerns for today’s digital retail space. An accessible internet benefits everyone and will strengthen your brand-customer relationship. Inclusive design opens the door for people everywhere to overcome barriers that prevent them from fully participating in the world that surrounds them. Become a contributor to a better digital landscape by considering these guidelines. And pursue all future web and mobile development with accessibility in mind!
To hear more about web accessibility, check out our podcast episode Applying Web Accessibility Guidelines to Mobile Apps.
