Skip to page content

User Experience Impossible: The Line Between Accessibility and Usability

Internet accessibility concept

Federico Caputo/Hemera/Thinkstock

Bob goes to a popular federal government site, using his assistive technology, and starts reading a teaser for an article. Just below the teaser, there’s an embedded video on the page. He presses the tab key, trying to navigate to a link for the full article, but suddenly he’s trapped—he can’t tab past the video. He’s stuck, and he can’t access the content. Frustrated, Bob leaves the site.

Would you call this a bad user experience? I sure would, but I’d say that it’s even more than that. Let’s explore why.

People often argue whether accessibility is related to usability. I’d say that they are close. In fact, they should be married, because they complement one another, but they’re not the same thing. Some people might even say that accessibility is usability for people with disabilities, but it’s oh, so much more.

According to the World Wide Web Consortium’s Web Accessibility Initiative (W3C-WAI), accessibility is the means through which “… people with disabilities can perceive, understand, navigate, and interact with the Web, and they can contribute to the Web.” And the International Standards Organization’s standard ISO9241 defines usability as the “… effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.”

Accessibility is a benchmark of the quality of our users’ experiences. The two are quite different by definition, but in practice, they’re still separate issues. Accessibility means that your audience can get to the content and message you want them to receive. It’s more than just user experience. Without accessibility, the user experience—good or bad—can’t even happen. So, as the saying goes, “usability depends on accessibility.”

A screen capture of our webinar, "How to Use Assistive Technology to Comply with Section 508," as seen on YouTube with the subtitles turned on.Even people who don’t have disabilities can’t access digital media if there are barriers to content. What sort of barriers exist for people without disabilities? Here are two examples:

  • Our friend Bob’s brother, Todd, is waiting for his flight in Oakland, and he’s on his way to meet some new clients. He needs to research loans for this last minute meeting, and he’d like to watch a video on the Small Business Administration’s site or its YouTube channel. Unfortunately, it’s so noisy in the waiting area that he can’t hear the video, and he left his earbuds in his gym bag at home. How can he get the content from the video that he can’t hear?
  • Bob and Todd’s sister, Amanda, is somewhat distracted at the moment. While watching her kids play soccer in the park, she’s using her tablet to order a consumer information catalogue. Unfortunately, the site’s order form has placeholder text within each form field where she needs to input her name and address. In between glances at her children, when she touches each field to input her information, she forgets what the placeholders say since they disappear when she touches the fields. Over and over, Amanda touches in and out of the form fields to find what she’s supposed to input. What should have been a three-minute task progresses to 15 minutes before she gives up and decides to watch the game—not having ordered the publication.

These two examples are common occurrences. Fortunately for Todd, the Small Business Administration rightly captions their videos, so he can read the captions and access the info for his meeting. Instead of the random site she was on before, Amanda can order the Consumer Action Handbook from USA.gov where the order form has text labels outside the form fields. Amanda only has to look above each form field to determine what she needs to input in it. Accessibility for the win!

We, in government, must remember that our users are entitled to receive government information. We must do all we can to provide that information and enable people to even have a user experience. In the end, it all goes back to my favorite saying: Access for all…or as many as possible. Usability can follow afterward, and then you can measure the user experience.

Tags: , , , , , , ,

13 Enlightened Replies

Trackback  •  Comments RSS

  1. trueaxguy says:

    Ummm interesing, this web site is not even keyboard navigatable…. major fail guys.. seriously

    • Alycia Piazza says:

      I apologize you are having problems. Can you tell us specifically what’s wrong? I tested and can navigate using the tab key. We take compliance with accessibility standards seriously so I want to make sure we understand the problem. Thanks.

      • Adrian Roselli says:

        The ReCAPTCHA on this page uses a tabindex value. Since browsers honor tabindex values before falling to source order in the DOM, the very first (through fifth) tab stop on the page is the CAPTCHA. It takes six presses of the tab key to get to the “Skip Navigation” link. That’s the issue I suspect TRUEAXGUY is referencing.

        I’ve mentioned this issue to DigitalGov on Twitter (https://twitter.com/aardrian/status/534751243491901440), heard from Jonathan Rubin of the GSA on Twitter (https://twitter.com/jonathan_rubin/status/534788879518539776), and used it as motivation on writing a post about tabindex best practices for accessibility: http://blog.adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html

        As I’ve said before, I am happy to help, but the easiest fix is to remove ReCAPTCHA or, failing that, go to line 449 of this page (I don’t know where you call it in your pre-rendered code) and remove this: tabindex: 4 (making sure to also remove the comma from the line before it so the JavaScript doesn’t break).

        • Alycia Piazza says:

          Adrian – sorry for the delay in responding. We have had issues recreating the problem but we are having a 508 specialist look into this and consider your feedback. Thank you for the thorough explanation.

          • Adrian Roselli says:

            Alycia,

            Thanks for the update. I can probably marshal some help if you would like to hear from more users with more browser and OS configurations (a “508 specialist” might just focus on the law, not the issue at hand). That might reduce some burden on the team at DigitalGov and perhaps save taxpayers some coin on testing. It seems like that might be more in-line with the new 18F approach to obtaining digital services.

            If you would like me to help, just let me know.

      • Adrian Roselli says:

        Also, the ReCAPTCHA is blocked by one of my browsers because it’s served as HTTP instead of HTTPS, while the page itself is served as HTTP. This means some users may never even be able to comment (no error messages are displayed on submission, it just silently fails).

        Since you have moderation enabled, and since CAPTCHA is already a proven accessibility barrier, and since it’s messing with keyboard navigation, I strongly suggest you remove ReCAPTCHA altogether.

      • TRUEAXGUy says:

        When the page first loads, focus is in the address bar, when you press tab, it cycles through the browsers buttons/menu/etc but it does not seem to ever enter into the pages contents. Even when I used the mouse to click on the web page, once I press tab, it exits the pages content and I am back in the address bar. This is with IE 9.

        When posting a comment, with focus in the Name *, when you press tab, it does not go to the Email * field either, not sure where it goes.

  2. TRUEAXGUY says:

    It seems to work better with firefox as opposed to IE 9

  3. TRUEAXGUY says:

    I am now able to tab through the pages now… not sure why it was not working before

  4. Jonathan Hassell says:

    Good article, Angela.

    I completely agree. The wider range of contexts we use websites and mobile apps in are placing many more people than just those who are disabled in need of accessibility. To back up your points, check out my interview with Axel Leblois where we talk about this, and the innovation opportunities accessibility brings to mobile: https://www.youtube.com/watch?v=JqoN7mrIskE

    For anyone wanting to see how accessibility and usability link, in terms of implementation standards, check out my presentation on ‘How BS 8878 brings together accessibility & usability’ at: https://www.youtube.com/watch?v=5VTpcB8jmMA

    Jonathan

  5. glen says:

    I wasn’t sure if I agreed with the article when I first read it but I suppose syntactically and grammatically, it’s correct. Accessibility is the ability to get to the information whereas usability or user experience is how affective you can get your task done (and whether you enjoy it). However, I’m not sure I want to limit the definition of accessibility to just the ability to get to the information. If that were true, we’d have lots of developers checking off the accessibility box saying “We’re done. We’re WCAG compliant. We added accessibility because you can get to the info”. I’d much rather have them implement accessibility into a delightful user experience. Our organization has an accessibility department in the same orgchart as designers and usability analysts because we want them all knit together. We want accessibility to be desinged into the website or web application from the beginning and considered on the same level as user experience.

    I think there’s a stigma with accessibility needs to be addressed too. Accessibility does not mean disability. You nailed it with your Todd and Amanda examples. Does Todd think he’s disabled because he can’t hear the video? Of course not. So are video captions an accessibility feature? Technially, yes, but if you have the idea that accessibility means disability, then you might not want to admit that you’re using an accessibility feature. I think we need to change the perception of accessibility so that it goes back to its root word – “access”. You have access to the information no matter what your situation.

    Sometimes this is called “situational disability” but I wish someone would come up with a better term for it.

    Case in point, the main picture at the top of this article shows a red accessibility key with a picture of a wheelchair. That’s just promoting that accessibility is for people with disabilities.

    At the end of the day, when my eyes are tired, I often hit Ctrl++ to zoom the font on the webpage I’m reading. I’m using an accessibility feature but I’m not disabled.

    When giving a demo, I often make the focus outline on a webpage obnoxiously big and bright so that people in the back of the room can see where I’m tabbing (WCAG 2.4.7). The people in the back of the room aren’t disabled.

    But I’m digressing. At least this article made me think about it a little differently.

  6. David J. Hark says:

    Red hyperlinks without an underline present an issue for those of limited color vision. I wonder if the slight difference in contrast with normal text is sufficient. Does this meet the Section 508 standard: §1194.22 (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup?

Top