Accessibility

User Experience (UX) topic overview/definition

16 shares
10
5
1

What is Accessibility?

Accessibility defines users’ ability to use products/services, but not the extent to which they can attain goals (usability). Designers should create output accommodating the needs of all potential users, be they disabled (e.g., color-blind users) or anyone facing situational barriers (e.g., being forced to multitask).

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

While accessibility is different from usability, it has a clear impact on the user experience and should always be considered as part of a great user experience.

Learn how accessibility affects SEO and usability.

Accessible Designs, for All

In practice, accessibility is about designing for users with disabilities. Philosophically, it isn’t so much about designing for disability as it is about designing for everyone. Designing Interactive Systems author, David Benyon, offers five reasons an inaccessible product excludes users:

  1. Physical – takes too much strength to use.
  2. Conceptual – has hard-to-understand instructions.
  3. Economic – is too expensive.
  4. Cultural – users can’t understand metaphors regarding product interaction.
  5. Social – on joining a group, users don’t understand that group’s social conventions.

A 2011 W.H.O. report revealed about 15% of the world’s population had some disability. When designing, you should consider the number and type of potential accessibility issues users will have. Barriers include visual (e.g., color blindness), motor/mobility (e.g., wheelchair-user concerns), auditory (hearing difficulties), seizures (especially photosensitive epilepsy) and learning (e.g., dyslexia). Also design to maximize ease of use when users (of any ability) encounter your creation in stressful/mobile situations. By designing to reach all ability levels, you’ll produce output virtually anyone can use and enjoy (or find helpful/calming), whatever the context. Designing for accessibility thus helps all users.

Accessibility Through Universal Design

“When UX doesn’t consider ALL users, shouldn’t it be known as “SOME User Experience” or… SUX?”

— Billy Gregory, Senior Accessibility Engineer

Helping all users by designing for accessibility is also known as universal design. You can increase accessibility by applying the following Universal Design principles:

  1. Equitable Use – Design to accommodate users with diverse abilities (e.g., deafness).
  2. Flexible Use – E.g., accommodate right- and left-handedness.
  3. Simple, Intuitive Use – Simplify complex information. Use a proper information hierarchy, progressive disclosure and effective prompting towards task completion.
  4. Perceptible Information – Optimize readability of vital information and present information redundantly (i.e., use pictures and text).
  5. Tolerance for Error – Arrange elements to minimize accidental actions. E.g., ensure users have data validation so they can only book reservations in the future.
  6. Low Physical Effort – E.g., minimize repetitive actions.
  7. Size and Space for Approach and Use – E.g., accommodate touch target areas for average-sized fingertips.

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Practical Guidelines for Accessibility

When designing for accessibility you can follow these guidelines:

  • Use a CMS supporting accessibility standards (e.g., WordPress); when amending any pre-used template, ensure themes were designed for accessibility.
  • Use header tags in text (optimally, use CSS for consistency throughout). Move consecutively from one heading level to the next (without skipping).
  • Use alt text on content-enhancing images.
  • Have a link strategy (i.e., describe the link before inserting it – e.g., “Read more about the Interaction Design Foundation, at their website. Offer visual cues (e.g., PDF icons), underline links and highlight menu links on mouseover.
  • Improve visibility with careful color selection and high contrast.
  • Reference shapes to help guide users (e.g., “Click the square button”).
  • Consider forms vis-à-vis screen readers. Label fields and give descriptions to screen readers via tags. Make tab order visually ordered and assign an ARIA required or not required role to each field (know how to use ARIA). Avoid the asterisk convention.
  • Avoid tables for layout (only use for data presentation). Use the HTML scope attribute to describe relationships between cells.
  • Use proper HTML elements in lists (don’t put them on the same line as text).
  • Try using your design without a mouse. Scrolling can present difficulties.
  • Present dynamic content carefully (consulting ARIA standards for overlays, etc.), including slideshows.
  • Validate markup using the W3 standards site to ensure all browsers can read your code.
  • Avoid Flash.
  • Offer transcriptions for audio resources, captions/subtitles for video.
  • Make content readable – simpler language reaches more users.

Furthermore, include personas with varying abilities and use accessibility-testing tools (such as WAVE and Color Oracle) to assess output. While testing on real users is vital, designing with these considerations in mind will give you an early advantage.

Learn More about Accessibility

Some revealing insights on Accessibility, including examples: https://uxplanet.org/a-primer-to-web-accessibility-for-designers-2c548448c612

A helpful resource featuring examples of accessible design: https://medium.com/tealmedia/designing-for-accessibility-the-ultimate-in-ux-e366165d0db7

Learn how to design with accessibility in mind with the IDF’s course addressing Accessibility: https://www.interaction-design.org/courses/interaction-design-for-usability

Literature on Accessibility

Here’s the entire UX literature on Accessibility by the Interaction Design Foundation, collated in one place:

Featured article

Accessibility: Usability for all

Accessibility: Usability for all

Let’s examine a topic we often take for granted to understand what it’s really about. Doing so, you’ll be able to proceed with a broader appreciation of how users engage your designs.

Author/Copyright holder: WhisperToMe. Copyright terms and licence: Public Domain

The Overlooked, Misunderstood Nature of Accessibility

A design is only useful if it’s accessible to the user: any user, anywhere, anytime. We often mistake the concept of accessibility as involving people with disabilities. However, we’re all disabled in many contexts and circumstances. Accessibility is all about people. If you’ve ever broken a leg, you’ll know how difficult formerly simple tasks become. How about a power outage? One moment, you’re going about your business; the next, you’re plunged into darkness. Moving a couple of steps becomes risky! Whatever task we’d taken for granted suddenly has us negotiating barriers.

Mobile devices are a great example of dealing with users with accessibility issues. When using mobile phones, we’re on the go, doing other things, with our attention split several ways. With the pervasiveness of handheld smart-gadgets, we as designers need to embrace accessibility for all and in all contexts.

In many countries, designing for accessibility isn’t just morally correct; it’s also a legal obligation. Throughout the EU, legislation to prevent discrimination against disabled people exists; failing to comply with these laws could cost a company dearly. Compliance is cheaper, but it pays big dividends, too.

The good news is that there are standards for accessibility, and these are easy to understand. Better still, if we consider them at the start of the design process, we’ll find them easy to implement. Accessibility is simply a function of access. People with a visual impairment, for example, may not be able to read the text on your website. However, if you have properly formatted your text, they’ll be able to use screen reading software to hear your words.

Designing for accessibility takes some forethought. Examine your options in the planning phase and stay focused on accessibility throughout development. It’s easy to get caught up in the substance of your work and forget about this essential point. Keep it in mind, and test your designs often to be certain that your efforts are successful.

The Key Areas for Considering

Author/Copyright holder: Yahoo! Accessibility Lab. Copyright terms and licence: CC BY-SA 2.0

We are all, designers and users, different. Some of us have dyslexia; others have partial hearing loss, for instance. The areas of user needs we should consider for accessible design are:

  • Visual: Long-sightedness, blindness, color blindness, are all forms of visual disability you need to cater for in your design.
  • Motor/Mobility: This category doesn’t just extend to problems with the use of the hands and arms (which are very likely to cause problems with web accessibility), but also with other muscular or skeletal conditions. If, for example, your web design were to feature in a trade-show booth, you’d need to consider how someone in a wheelchair could access that booth, and turn around and exit it on completing the task.
  • Auditory: Auditory disabilities affect the hearing and come in varying degrees of severity, up to and including total deafness.
  • Seizures: Some individuals can be affected by light, motion, flickering, etc. on screen, thus triggering seizures. The most common issue in this category is photosensitive epilepsy.
  • Learning: It’s also important to remember that not all disabilities are physical. Learning and cognitive disabilities can also influence accessibility.

Now, think about yourself as a user. Have you ever noticed difficulties when driving and using your cell phone? How does it feel when you’re trying to multitask? Do you have automatic transmission to make it easier?

As users with handheld/mobile devices, we all face difficulties when we have to divide our attention. Happily, GPS systems speak to us, so we don’t have to take our eyes off the road, except for the odd glance to see how far ahead a turn is. Good GPS software designers are fully aware of what it’s like for motorist users and design to help, not hinder or distract.

Example: Arnold has an interview at 3 p.m. in a town he’s never been to, and he has to use a neighbor-friend’s car. His neighbor returns late. Unfortunately, a snowstorm has started, too. Worse, the car is low on gas, so Arnold will have to fill up on the way. So, the factors that are impeding Arnold constitute his disabilities as a user, which are:

  • Unfamiliarity with road
  • Running late
  • Snowstorm
  • Low fuel

Arnold has four handicaps slowing him down. He thinks about calling the interviewers. However, he decides against it and stays focused on driving. One thing that is going in Arnold’s favor, though, is his GPS. Its large screen format isn’t cluttered. A bright red arrow contrasting starkly with a light-green screen shows him his route at a glance with a minimum of text and images. He feels better when its voice tells him a gas station is near. After refuelling, he gets back on the road, passes Legoland, which his GPS shows as a large icon. His interviewer had mentioned Legoland as a landmark; they’re nearby. Arnold breathes a sigh of relief. Even with the snowstorm, he’s thereby 2:50 p.m.! The designers of his easy-to-use GPS deserve thanks.

Planning for Accessibility of a Website

Author/Copyright holder: Dennis311. Copyright terms and licence: CC BY 2.0

You can use many ways to make your website accessible. To get started, here are some simple tips that can help ensure that many people with disabilities can access your site easily:

  • If you use a CMS, choose one that supports accessibility standards. Drupal and WordPress, for example, support these. If you’re going to amend a template rather than create one for the theme, make certain that the theme was designed with accessibility in mind. It can save time, effort and money.
  • Use header tags to create headings in your text; ideally, ensure that you use CSS to make this consistent throughout the site. Try not to skip from one heading level to the next (e.g., H1 to H4, rather H1 to H2); this can confuse screen reader software. Users with more severe visual impairments may access your site using a refreshable Braille display or terminal, which depends on screen readers.
  • Use alt text on your images; if you use images to enhance content, then a screen reader will need to explain them— that’s what the alt text is for. However, if your image is purely for decoration and adds no other value (other than looking good), you should skip the alt text to avoid confusing someone having the site content read to him/her.
  • Have a link strategy. Screen readers sometimes stutter over links and stop on the first letter. That means it’s important not to have “click here” links scattered through the text. The best link descriptions have a text description before the link and then a unique name for the link. (E.g., “Read more about the Interaction Design Foundation, at their website.) Consider offering a visual cue (such as a PDF icon) by links to make it clear what the link will deliver. Use underlines on links (they help color blind people distinguish links from text). Highlight menu links on mouseover to assist with locating the cursor.
  • Choose colors carefully; if in doubt, test your color schemes with some color-blind people. Color blindness is an incredibly common disability, and the wrong palette can make it difficult for a color-blind person to read your text or navigate your site. You also need to ensure that you provide high levels of contrast between text and background; the elderly, for example, can find it hard to see text unless the contrast is high.
  • Don’t refer just to the color of something when giving instructions; “click the red button” isn’t helpful to a color-blind person. “Click the circular button” is. Use shapes and forms to help guide users rather than relying on color alone.
  • Think about the design of forms. Screen readers can struggle with forms. Label fields, and use the
  • Avoid tables for layout. Screen readers can handle tables, but they start explaining how many columns and rows are present, which can be annoyingly distracting when the table is simply a layout technique. Keep tables for data presentation. Make certain to use the HTML scope attribute to explain relationships between cells, too.
  • Learn to use the proper HTML elements for lists and don’t put them on the same line as the text. This helps screen reading software to parse lists.
  • Put your mouse away, and see if your site works with a keyboard only. People with motion disabilities often find objects using trackpads. They may need a mouth stick or a single-switch input device; or, they may have to rely on their keyboard. Think about making it easy for people to skip through sections of content in this way, too… scrolling is a PITA without a mouse.
  • Familiarize yourself with ARIA (Accessible Rich Internet Applications) standards and learn to use them when necessary.
  • Consider the way you’re presenting dynamic content. Don’t auto-play video (which can play havoc with a screen reader). ARIA standards can help with overlays, popups, lightboxes, etc. If you’re using a slideshow, make certain to have alt text on all images and that users can navigate the show via the keyboard.
  • Validate your markup at the W3 standards website. Make sure that your HTML and CSS won’t conflict with assistive technologies. This also helps ensure that all browsers will read your code properly.
  • Avoid Flash. This hardly needs saying any more, given Apple and Mozilla’s disdain for Flash (among many others), but Flash is a terribly inaccessible technology. If you must use it, keep it to a minimum.
  • Offer transcriptions for audio files. Hearing-impaired users can’t use software to read voices… so, help them out and include a transcript.
  • Similarly, in video, offer captions for the hearing impaired.
  • Focus on readable content. The simpler the language, the easier it will be to read for learning-impaired users.

Technologies that Facilitate Accessibility Online

Much specialist technology is available for you to use to make your website a more accessible place. Some of the most common technology is listed below. In an ideal world, we designers would try to access this technology and test our sites with it to ensure site accessibility. We may understand that this isn’t always practicable, but it’s important to stay conscientious. Saving one user from having a bad experience is worth it.

Common Technologies Used to Facilitate Accessibility Online

  • Alternative web browsers
  • Braille for the web
  • Eye-tracking applications
  • Head wands
  • Mouth sticks
  • Screen magnifiers
  • Screen readers

The University of Minnesota-Duluth website provides a wealth of useful information regarding accessibility technology:

http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html

Accessibility Testing Tools

In addition to the W3 tools mentioned above, many different accessibility testing tools are available online. The following is a small selection of these:

WAVE—evaluates the overall level of accessibility for any given website.

Color Oracle— displays your site’s colors in a manner similar to how a user with color blindness would see the page.

Image Analyzer— examines website images and tests their compliance with accessibility standards.

Remember, users are people; no automated tools can beat testing your website for accessibility with real users. It’s also a great opportunity to conduct user research on a wider scale with those facing accessibility problems. Using the data can improve your website design for everyone, not just those facing certain challenges.

The Take Away

Designing with user accessibility in mind means envisioning all users as having needs that require attention. Although many users have physical and cognitive disabilities, all will be distracted at some point when accessing sites. Even so-called “fully able-bodied” users, sitting in quiet rooms with large monitors, will be hampered if the phone goes and they have to navigate with one hand.

Making accessible designs means planning and building in view of this. We have a variety of tips at our disposal, ranging from using header tags and alt text on images to having a link strategy. With careful consideration, we can determine what’s necessary to optimize accessibility, testing our designs on real users in the field.

Nobody’s perfect! Yet, by designing with everyone in mind in such an imperfect world, we’ll be another step closer to making better UXs.

Where To Learn More

Quesenbery, W. (2010). “Accessibility First – for a Better User Experience for All”. UX Matters. Retrieved from: http://www.uxmatters.com/mt/archives/2010/12/acces...

Thurow, S. (2015).“Measuring Accessibility In the User Experience (UX) And The Searcher Experience”. Marketing Land. Retrieved from: http://marketingland.com/measuring-accessibility-u...

Van Toll, T.J. (2014). “Mobile And Accessibility: Why You Should Care And What You Can Do About It”. . Smashing Magazine. Retrieved from: www.smashingmagazine.com/2014/05/mobile-accessibility-why-care-what-can-you-do/

Watson, L. (2012). “Accessibility is part of UX (it isn’t a swear word)”. No Mensa/blog. Retrieved from: http://www.nomensa.com/blog/2012/accessibility-is-...

Resources

Hero Image: Author/Copyright holder: Pixabay. Copyright terms and licence: CC0 Public Domain.

Show full article Show collapsed article

All literature

The 7 Factors that Influence User Experience

The 7 Factors that Influence User Experience

User Experience (UX) is critical to the success or failure of a product in the market but what do we mean by UX? All too often UX is confused with usability which describes to some extent how easy a product is to use and it is true that UX as a discipline began with usability – however, UX has grown to accommodate rather more than usability and ...

  • 347 shares
  • 6 months ago
Learn to Create Accessible Websites with the Principles of Universal Design

Learn to Create Accessible Websites with the Principles of Universal Design

“Productivity is never an accident. It is always the result of a commitment to excellence, intelligent planning and focused effort.” — Paul J. Meyer, premier international authority on goal setting, motivation, time management, and personal and professional development Accessibility is not the first item we consider when we start designing a w...

  • 289 shares
  • 1 week ago
Understand the Social Needs for Accessibility in UX Design

Understand the Social Needs for Accessibility in UX Design

As UX designers, we have a lot on our plates. The term “UX Unicorn” exists for a reason. We are responsible for our clients’ goals as well as our users’ needs. You might ask then, why should you think about Accessibility in your UX Design process? Imagine going into a design workshop and telling your client that you need more hours to make his...

  • 419 shares
  • 5 months ago
Occam’s Razor: The simplest solution is always the best

Occam’s Razor: The simplest solution is always the best

Now that we appreciate the need for simplicity in designs better, let’s see another great concept. You may have heard of Occam’s Razor; did you know that you can apply it to web design? When you’ve got it in your “toolbox”, you’ll have an edge in the marketplace. Occam’s Razor, put simply, states: “the simplest solution is almost always the bes...

  • 347 shares
  • 2 months ago
Design for All

Ch 42: Design for All

42.1 What is Design for All?Contemporary interactive technologies and environments are used by a multitude of users with diverse characteristics, needs and requirements, including able-bodied and disabled people, people of all ages, people with different skills and levels of expertise, people from all over the world with different languages, cul...

Book chapter
Tactile Interaction

Ch 20: Tactile Interaction

The following chapter describes a variety of ways in which Tactile Interaction may be used to enhance the human computer interface, i.e. the design of interactive products. Opening with a general discussion on a broad range of potential applications for Tactile Interaction, the chapter quickly moves onto to consider the key physical, perceptual ...

Book chapter
Accessibility: Usability for all

Accessibility: Usability for all

Let’s examine a topic we often take for granted to understand what it’s really about. Doing so, you’ll be able to proceed with a broader appreciation of how users engage your designs. The Overlooked, Misunderstood Nature of AccessibilityAuthor/Copyright holder: WhisperToMe. Copyright terms and licence: Public Domain A design is only useful if ...

  • 170 shares
  • 5 months ago
Stand on the shoulders of giants and follow international standards

Stand on the shoulders of giants and follow international standards

Design can be very subjective. This leads UX practitioners facing criticism and a lack of credibility when dealing with other more scientific disciplines. Fortunately, you can rely on international standards to refer to and easily bridge the gap. The ISO 9241 Standard for the Ergonomics of Human-System Interaction is directly aligned with...

  • 524 shares
  • 1 year ago