Accessibility

Your constantly-updated definition of Accessibility and collection of videos and articles

What is Accessibility?

Show Hide video transcript
  1. Transcript loading...

Accessibility is the concept of whether a product or service can be used by everyone—however they encounter it. Accessibility laws exist to aid people with disabilities, but designers should try to accommodate all potential users in many contexts of use anyway. To do so has firm benefits—notably better designs for all.

Accessibility vs Usability

Since they have similarities, accessibility is sometimes confused with usability. Both overlap and are vital parts of user experience (UX) design, but there are also key distinctions between them. Usability is concerned with whether designs are effective, efficient and satisfying to use.

Show Hide video transcript
  1. Transcript loading...

Theoretically, this means that usability includes accessibility, since a product that is inaccessible is also unusable to someone with a disability; practically, however, usability tends not to specifically focus on the user experience of people with disabilities. Accessibility, on the other hand, is concerned with whether all users are able to access an equivalent user experience, however they encounter a product or service (e.g., using assistive devices). Unlike usability, accessibility focuses on people with disabilities.

© Interaction Design Foundation, CC BY-SA 4.0

Accessible Designs Help Everyone

Accessibility is not only the right thing to do, but often also brings benefits to all users. That’s because accessibility features that help people with disabilities often help other people, too. For instance, video captions that help people with hearing difficulties also help a person who is watching the video on mute (e.g., in a social media feed). Legible, high-contrast text that helps people with vision difficulties also helps people with perfect eyesight who are using the app outdoors in bright sunlight. Many users—whatever their abilities—will face challenges due to demanding contexts. When you design for all ability levels, you can create products and services anyone can use and enjoy—or at least find helpful or calming.

Although accessibility is a critical factor that impacts design, many brands overlook it. Based on a 2011 World Health Organization report concerning disability, however, you’ll exclude about 15% of Earth’s population if you don’t make your design accessible. Furthermore, many jurisdictions—including the E.U.—have penalties for failure to create accessible designs. However, designing for accessibility makes sense on more than a legal level; it brings benefits, including these:

  • Improved SEO from semantic HTML

  • Opportunities to reach more users on more devices, in more settings/environments

  • Enhanced public image for your brand

© Interaction Design Foundation, CC BY-SA 4.0

Types of Accessibility Issues

You should consider the number and types of potential accessibility issues users will have. These are common barriers:

  • Visual (e.g., color blindness)

  • Motor/mobility (e.g., wheelchair-user concerns)

  • Auditory (hearing difficulties)

  • Seizures (especially photosensitive epilepsy)

  • Learning/cognitive (e.g., dyslexia)

Ability barriers can also arise for any user:

  • Incidental (e.g., sleep-deprivation)

  • Environmental (e.g., using a mobile device underground)

© Interaction Design Foundation, CC BY-SA 4.0

The possibilities are virtually limitless regarding who might be trying to access your product/service.

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

— Billy Gregory, Senior Accessibility Engineer

© Interaction Design Foundation, CC BY-SA 4.0

Practical Guidelines for Accessibility

The World Wide Web Consortium (W3C) stipulates standards for accessible design in its latest Web Content Accessibility Guidelines (WCAG). You can follow these essential points to accommodate users with diverse abilities:

  • Use a content management system (CMS) supporting accessibility standards (e.g., WordPress). Whenever you amend any pre-used template, ensure themes were designed for accessibility.

  • Include personas with varying abilities.

  • 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.

    © Interaction Design Foundation, CC BY-SA 4.0

  • 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.

    © Interaction Design Foundation, CC BY-SA 4.0

  • Reference shapes to help guide users (e.g., “Click the square button”).

  • Consider how screen readers handle forms. Label fields and give descriptions to screen readers via tags. Make the tab order visually ordered. Assign an ARIA required or not required role to each field (know how to use ARIA). Avoid the asterisk convention.

  • Use proper HTML elements in lists. Don’t put them on the same line as text.

  • Present dynamic content carefully, including slideshows. Consult ARIA standards for overlays, etc.

  • Validate markup using the W3 standards site to ensure all browsers can read your code.

  • Offer transcriptions for audio resources, captions/subtitles for video.

  • Make content easily understandable – simpler language reaches more users, as do effective information hierarchy, progressive disclosure and prompting.

  • Try using your design without a mouse. It can be hard to scroll.

  • Use tools such as WAVE and Color Oracle to test your design’s accessibility.

Frank Spillers explains how accessibility affects usability and search engine optimization (SEO).

Show Hide video transcript
  1. Transcript loading...

Naturally, you should test for accessibility on users themselves. Note that while it’s impossible to cover all use cases, your efforts to reach all users can yield many rewards—sometimes in unexpected areas.

Learn More about Accessibility

See some revealing insights on accessibility, including examples.

Here’s a helpful resource featuring examples of accessible design.

Learn how to design with accessibility in mind with our course addressing accessibility.

Questions related to Accessibility

What are accessibility settings?

Accessibility settings in websites and apps allow users with different abilities and preferences to access and interact with the content and functionality of the website or app. Accessibility settings can include things like changing the font size, color contrast, text spacing, keyboard navigation, screen reader support, captions, transcripts, and alternative text for images. Accessibility settings can help users who have visual, auditory, cognitive, motor, or other impairments to use the website or app more easily and effectively. Accessibility settings can also benefit users with temporary or situational difficulties, such as using a device in bright sunlight or with one hand.

What is web accessibility?

Web Accessibility, as explained by Frank Spillers, is fundamentally about optimizing the user experience for everyone, ensuring that content is accessible, inclusive, and user-friendly, regardless of ability. It aligns closely with usability, focusing on simplifying layouts, optimizing code, and making content more understandable and navigable, especially for screen-reader users. Accessibility goes beyond usability, emphasizing the need for content to be usable and accessible to all, promoting equality and inclusion on the web. Further insights on web accessibility can be gleaned from this video by Frank Spillers.

Show Hide video transcript
  1. Transcript loading...

What is accessibility testing?

Accessibility testing is done to make your web and mobile apps usable to people with special needs such as vision, hearing, and other cognitive impairments. It is an important part of the development process, as it helps to ensure that all users can access and use a website or application, regardless of their abilities. Accessibility testing also helps to comply with legal and ethical standards, such as the Web Content Accessibility Guidelines (WCAG) 2.x, which provide a set of criteria for making web content accessible to people with disabilities.

Accessibility testing can be done using both automated and manual methods. Automated tools can help to identify some common accessibility issues, such as missing alt text for images, insufficient colour contrast, or keyboard accessibility. However, automated tools cannot detect all accessibility problems, such as how well the content is structured, how clear the instructions are, or how the website or app works with assistive technologies. Therefore, manual testing is also necessary to check the usability and functionality of the website or app from the perspective of different users with different needs and preferences. Manual testing can involve using accessibility checklists, testing with assistive technologies, such as screen readers or speech recognition software, and testing with real users who have disabilities or impairments.

Show Hide video transcript
  1. Transcript loading...

What are the four areas of accessibility?

The four areas of accessibility stated in the Web Content Accessibility Guidelines (WCAG) are:

- Perceivable: Users must be able to perceive the content and functionality of the website or app using one or more of their senses. This means providing alternatives for non-text content, such as images, audio, and video, using captions, transcripts, and alt text. It also means ensuring that the content is presented in a way that is compatible with different devices and assistive technologies, such as screen readers, magnifiers, or braille displays.

- Operable: Users must be able to operate the website or app using different input methods, such as keyboard, mouse, touch, voice, or gesture. This means ensuring that the website or app is responsive, navigable, and compatible with different browsers and platforms. It also means providing mechanisms to help users find and access the content they need, such as menus, headings, links, search functions, and skip links.

- Understandable: Users must be able to understand the content and functionality of the website or app. This means ensuring that the content is clear, concise, and consistent, using plain language, appropriate grammar, and punctuation. It also means providing feedback, guidance, and error messages to help users complete tasks and avoid mistakes.

- Robust: Users must be able to access the website or app using current and future technologies. This means ensuring that the website or app is built using valid and standard code that follows web development best practices. It also means testing the website or app with different browsers, devices, and assistive technologies to identify and fix any compatibility issues.

These four areas are based on four design principles that describe what web content must be to be considered accessible. Each area has a number of guidelines and success criteria that specify how to meet the principles in practice. You can find more information about the WCAG on the W3C website.

Use our step-by-step guide to ensure accessibility in your products.

Get your free template for “Steps to Ensure Accessibility in Your Products”
Steps to Ensure Accessibility in Your Products Steps to Ensure Accessibility in Your Products
Secure form
Please provide your name.
We respect your privacy
Please provide a valid email address.
311,267 designers enjoy our newsletter—sure you don’t want to receive it?

What Is Good Accessibility?

Good accessibility is the practice of designing and developing websites, apps, and other digital products and services that are usable by everyone, regardless of their abilities or disabilities. Good accessibility means that people can access and use the content and functionality of a website or app in a similar amount of time and effort as someone who does not have a disability. It also means that people are empowered, independent, and not frustrated by something that is poorly designed or implemented

To acheive good accessibility youYou should aim for user-friendly designs with clear, purpose-driven content that meets the needs of all users, including those with cognitive impairments or who may not have extensive experience with the language used. Understanding the various disability types, such as those illustrated in our video with Frank Spillers, CEO of Experience Dynamics, can help address around 80% of accessibility issues by focusing on core accessibility needs like screen reader compatibility and keyboard access.

Show Hide video transcript
  1. Transcript loading...

What Is an Example of Poor Accessibility?

An example of poor accessibility is a website lacking alt text for images that are meant to convey meaning. This causes issues for visually impaired users relying on screen readers. Poor accessibility is a crucial aspect of design failures and bad user experience, as illustrated in our articles on Bad UX Examples and Design Failures. Explore more on the impact of inadequate accessibility at interaction-design.org.

What Is the Difference Between Accessibility and Inclusion?

Accessibility is focused on making products and content usable for everyone, regardless of disabilities, by removing barriers and optimizing user experiences. It emphasizes adaptations and adjustments to accommodate individual needs. On the other hand, inclusion refers to the proactive design of products, services, and environments that are welcoming and usable for a diverse range of people from the start. It’s about designing universally, considering all users' varied needs and preferences. For deeper insights and understanding of inclusion, refer to this article on Inclusive Design.

Where to Learn About Accessibility?

To learn about accessibility, consider enrolling in the Accessibility: How to Design for All course offered by Interaction Design Foundation. This course provides extensive insights into designing universally to ensure content and products are accessible to everyone, including people with disabilities. You will learn about the principles and guidelines of accessibility, allowing you to create inclusive user experiences. The course suits designers, developers, and anyone interested in making the digital world more inclusive.

Show Hide video transcript
  1. Transcript loading...

Literature on Accessibility

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

Learn more about Accessibility

Take a deep dive into Accessibility with our course Accessibility: How to Design for All .

Good accessibility is crucial to making your website or app a success. Not only is designing for accessibility required by law in many countries—if you fail to consider accessibility, you are excluding millions of people from using your product. The UN estimates that more than 1 billion people around the world live with some form of disability and as populations age over the coming years, that number is expected to rise rapidly. Add to that the 10 percent of people who suffer from color blindness, and you start to get an idea of why accessibility is so important—not just for moral and legal reasons, but also so that your products can reach their full potential. You need to design for accessibility!

So… what is a proven and pain-free way to well-executed accessibility? If you’ve ever tried to optimize your site or app for accessibility, you’ll know it can be a complex and intimidating task… and it can therefore be very tempting to leave it until last or, worse still, avoid it altogether. By understanding that accessibility is about more than just optimizing your code, you’ll find you can build it into your design process. This will ensure you are taking a disability advocacy approach, and keeping the focus on your users throughout the development process.

This course will help you achieve exactly that—from handling images to getting the most out of ARIA markup, you’ll learn how to approach accessibility from all angles. You’ll gain practical, hands-on skills that’ll enable you to assess and optimize for common accessibility issues, as well as show you how to place an emphasis on the quality of the user experience by avoiding classic mistakes. Whats more, you’ll also come away with the knowledge to conduct effective accessibility testing through working with users with disabilities.

The course includes interviews with an accessibility specialist and blind user, as well as multiple real-world examples of websites and apps where you can demonstrate your skills through analysis and accessibility tests. Not only will this give you a more practical view of accessibility, but you’ll also be able to optimize your websites and mobile apps in an expert manner—avoiding key mistakes that are commonly made when designing for accessibility.

You will be taught by Frank Spillers, CEO of the award-winning UX firm Experience Dynamics, and will be able to leverage his experience from two decades of working with accessibility. Given that, you will be able to learn from, and avoid, the mistakes he’s come across, and apply the best practices he’s developed over time in order to truly make your accessibility efforts shine. Upon completing the course, you will have the skills required to adhere to accessibility guidelines while growing your awareness of accessibility, and ensuring your organization’s maturity grows alongside your own.

All open-source articles on Accessibility

Please check the value and try again.

Open Access - Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help democratize design knowledge!