Accessibility Principles for ICT (WCAG)

Accessibility is the successful access that people with disabilities have to content and spaces. As I mentioned at the end of Accommodation versus Inclusive Design, I concluded that accessibility is a mismatch between the design and a user’s needs. On the web (or with ICT – information and communication technology) we can create that match by starting with W3C’s web content accessibility guidelines (WCAG). The 4 principles of WCAG are:

  • perceivable: broadening the sensory experiences to include sight, sound, and touch,
  • operable: all interactive components and navigation are navigable and usable,
  • understandable: content, component functionality, and design are easy to understand, and
  • robust: content & functionality is compatible with a variety of browsers, devices, and assistive technologies.

Challenges on the web

I won’t go into further detail about all its success criteria just because I’ve written quite a bit about them while studying for the WAS exam. However, I do want to mention some common challenges that people face when on the web, and how accessible design can help designers and developers be aware of how to address these barriers.

Problem area
Solution(s)
Images
  • Use alternative text or a visible caption/description
Color
  • Supplement color-coding with other coding information (shapes, texture, etc.)
Contrast
  • Foreground color should stand out (high contrast) against the background color
Video & audio
  • Include captions and transcripts with video and audio files
  • Include audio description with video
Links
  • Use understandable text with intent, functionality, or destination of the hyperlink
Headings
  • Create a logical outline with the headings to make it well-structured and navigable
Keyboard access
  • Make each interactive component on the page reachable by the keyboard
  • All interactive components should create a logical tabbing order
  • Focus should be visible on interactive components
Tables
  • Assign headers to columns or rows
Forms
  • Explicitly assign a label to every form input
Dynamic JavaScript
  • Explicitly assign a name, role, state and/or properties
  • Assign point of focus when widgets are created
PDF documents
  • Create tags for all structures in a PDF

Universal design can help

Universal design creates products and environments that the vast majority of people can use, taking into account the natural physical diversity among people. Universal design doesn’t just think about people with disabilities, it thinks about a lot of people. By expanding our view from accessible design to universal design, we can make a more usable experience for a lot more people.

Stay tuned for my next post that will go further into universal design, its origins, and its solutions in the context of the physical world.

Additional reading

Day 68: How to Fail the Bare Minimum of WCAG Operable

Yesterday I got a head start on looking through the Level A conformance fails within WCAG’s perceivable principle. To keep that momentum going, I’ll be traversing through the other “bare minimum” recommendations to make sites mostly accessible with minor challenges. Today my sights were set on Operable.

Things I accomplished

  • Read Operable success criteria (Level A) failure techniques on How to Meet WCAG 2 site.
  • Mapped success criteria to failures of those criteria that I’ve encountered or read about.

What I learned today

There are 14 bare minimum (Level A) success criteria recommended by W3C in order for websites to be operable (keyboard, mouse, touch, voice, switch). That’s almost half of Operable’s success criteria! These success criteria are, as follows:

  • 2.1.1 Keyboard
  • 2.1.2 No keyboard trap
  • 2.1.4 Character key shortcuts (new in WCAG 2.1)
  • 2.2.1 Timing adjustable
  • 2.2.2 Pause, stop, hide
  • 2.3.1 Three flashes or below threshold
  • 2.4.1 Bypass blocks
  • 2.4.2 Page titled
  • 2.4.3 Focus order
  • 2.4.4 Link purpose (in context)
  • 2.5.1 Pointer gestures (new in WCAG 2.1)
  • 2.5.2 Pointer cancellation (new in WCAG 2.1)
  • 2.5.3 Label in name (new in WCAG 2.1)
  • 2.5.4 Motion actuation (new in WCAG 2.1)

When these fourteen operable success criteria are met, it enables people who use assistive technology and adaptive strategies to access, navigate, and interact with your static and dynamic content.

Examples that fail base conformance

SC 2.1.1 Fail: Several projects I’ve worked on have implemented hover-only focus styling effects or tooltips/pop-ups that excluded keyboard users.

SC 2.1.2 Fail: Modals can be tricky to create. When the keyboard user has no way to close the modal (Esc or Tab to close button) and get back to the content, this SC doesn’t pass.

SC 2.1.4 Fail: Creating single-character keyboard shortcuts without giving the user control to deactivate or change those shortcuts can greatly affect keyboard and speech input users.

SC 2.2.1 Fail: I am guilty of the client-side meta redirect! I know now that setting a timer of any kind requires extra consideration for people who need more time to make decisions and understand what’s going on. There is no user control in this situation.

SC 2.2.2 Fail: Carousels, the bane of my existence, can easily fail this success criteria if it doesn’t have a pause, stop, or hide mechanism. It’s taking choice away from any user. Additionally, it makes content less perceivable by people with visual or cognitive disabilities.

SC 2.3.1 Fail: I’ve seen video ads, fixed a web page, that are not only distracting, but have a flashing when its trying to grab a users attention. If the contrast is high and lasts more then 3 flashes, it’s a fail. Not only does it fragment attention for people with cognitive disabilities, but could create a severe reaction for people with photosensitive seizure disorders.

SC 2.4.1 Fail: No additional links are provided to skip repetitive content or navigate to different regions of the page. This creates an exhaustive experience for keyboard users tabbing through that web page.

SC 2.4.2 Fail: This is a current issue I’m battling. A web page doesn’t have a unique title or descriptive title that identifies the pages purpose or intent.

SC 2.4.3 Fail: I’ve seen some bad tabindexing, which ruins the relationship between keyboard (or screen reader) navigation and understanding content’s logic.

SC 2.4.4 Fail: This is a recent fail I’ve found in a recent accessibility audit. An image is linked, but there is not alternative text given to that image to let a screen reader user know what it’s purpose is.

SC 2.5.1 Fail: Custom complex gestures (requires multiple touch points) for touch devices is difficult for people with motor disabilities and those who use assistive technology that cannot equate these actions.

SC 2.5.2 Fail: No room for touch error was enabled. People with visual, cognitive, and motor disabilities could suffer from accidental button activation or disorientation when inadvertently taken to another part of the site.

SC 2.5.3 Fail: Visible linked text is different from a hidden accessible name (i.e. title or aria-label), which becomes an unknown hidden voice command for people who use speech input to operate controls and navigate the webpage. It also confuses understanding of content for screen reader users.

SC 2.5.4 Fail: No alternative means of control activation other than device motion (e.g. shaking or tilting) is available. This can exclude people with motor disabilities.

In conclusion

This was a lot to digest in under two hours. However, these base recommendations are so critical in order for people with disabilities (and everyone else) to be able to operate, navigate, understand, and appreciate a site and its services. I cannot afford to glaze over them, but rather advocate for at least this bare minimum in sites I collaborate on.

An Overview of WCAG’s Second Principle: Operable

5 guidelines. 29 success criteria (including 14 Level A conformance. 3 Level AA conformance. 12 Level AAA conformance). And many ever-changing techniques that are sufficient, advisory, or a failure. Just as I pointed out in my Perceivable principle review, this is just one way the World Wide Web Consortium’s (W3C) “Operable” principle within the current Web Content Accessibility Guidelines (WCAG)  2.1 recommendation can be broken down. And yet, the documentation that follows is even more massive! Though, looking at it by the numbers can leave one feeling intimidated, exhausted, and uninspired to learn the golden standard of web accessibility, there are better ways to break down the docs into chunks.

Introduction

On that note, I’ll introduce you to WCAG’s second principle: Operable. As stated earlier, it has many components, so to speak, but it all boils down to giving everyone the opportunity to successfully navigate each part of your website via the technology of their choosing. For instance, I navigate the web mostly with my mouse, sometimes in unison with my keyboard, when skipping from page to page, link to link. Additionally, my fingers do the walking (nod to the old school yellow pages) when I’m on my smartphone and zipping through sites. However, there are many people who solely use their keyboard to navigate the web. Additionally, all of us rely on clear wayfinding to get from one place to another online.

The second Web Content Accessibility Guideline‘s says: “User interface components and navigation must be operable.” This is a generally defined idea, leading up to more objective goals (success criteria) and techniques.

This principle offers us suggestions and insights to successfully make our websites more inclusive, inviting more people to interact with it in a way that maybe different than our own. “Operable” models a way for us to be considerate of people who think differently, move differently, and perceive differently than ourselves. No matter the physical and cognitive differences among us, everyone should still be able to navigate your website without hurdles.

Guidelines

To dig a little deeper, how can we ensure that everyone can access the variety of services and information we have to offer? Trail down through the levels within this principle, from subjective to objective, via its guidelines and success criteria. The Operable guidelines say that your entire webpage should:

  • be keyboard accessible
  • allow enough time for viewing
  • be considerate of people with seizures or other sensitive reactions
  • be navigable
  • consider various modes of device input

Success Criteria

Digging even deeper into those 4 guidelines, we find each guideline offers its own goals (success criteria) to target common accessibility problems. Rather than writing out all 29 criteria, which could be several blog posts in and of themselves, I’ll expand upon the guidelines to include some goals that the criteria are aiming for:

  • every part of your page can be accessed by keyboard alone, yet no part of the page should trap that keyboard user within itself
  • visitors should have some control over animation and timed sessions
  • use of animation (during interaction) and flashing should be regulated
  • visitors need a point of reference to understand where they are, and ways to jump past repetitive content
  • allow visitors to easily operate web apps and site functionality with other input methods other than a keyboard

I encourage you to check out all the success criteria, now that you are more confident in understanding the guidelines within the second principle. If that page still looks too intimidating, try reading How to Meet WCAG, which is more approachable and provides clearer techniques that help you visualize how to meaningfully apply what you’ve learned.

Conclusion

Regardless of how you take your next steps, I hope you are becoming more confident to dive into WCAG documentation and its supplemental materials and guides to help you better understand web accessibility. I can’t emphasize enough that, despite all the technical specs, taking a moment to empathize with people who have different levels of abilities than your own is so important. Ask yourself, “How could my website prevent a person with a visual, hearing, physical, or cognitive impairment from entering in and walking away with what they came for?” In the end, it’s the empathizing and relating to your wider audience that will make your accessibility efforts a success, rather than all the vast technical memorization and compliance, in which you devoted your time.

An aside

This is Day 6 of my 100 Days of Accessibility journey to learn all things web accessibility. The best way I retain information is to share with others, so I spent my “study” time today writing this post to advance my knowledge, and yours, too.

I’d also like to note another resource that I’ve recently tapped into. I’ve started reading Form Design Patterns by Adam Silver (Smashing Magazine) in the hopes of learning how to make accessible and usable forms on pages that I design and develop. As an added note, I’m reading it on my Kindle Paperwhite because it is more accessible to me in that format, which allows me to enlarge the print, control lighting (no glaring white background or overwhelming backlighting), and read without distractions. Flexible formats are a wonderful thing for everyone!

Day 4: WCAG Operable

Moving onto the second WCAG principle: Operable! 1.5 hours dedicated to studying today.

Things I accomplished

  • Read through all the Operable guidelines, success criteria, and sufficient techniques.
  • Added to my WCAG 2.1 POUR spreadsheet to include Operable.
  • Started drafting a blog post to sum up the perceivable principle as though I were explaining its what, why, and how to developers. Coming soon!

What I learned today

  • SC 2.2.2: “For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it” Carousels, I’m looking at you! I’ve never thought to create a hide option. Something to explore further, since it only makes sense to me to provide that kind of flexibility to users.
  • Guideline 2.5: Input Modalities. This was completely new to me! Of course, all those guidelines were added as part of the WCAG 2.1 upgrade, so I imagine that’s why. Admittedly, I’ll need to read about these more in-depth, as I’m not quite finding an immediate application to projects I’ve worked on in the past.
  • My undeveloped opinion: it would seem to me that 2.5.5 Target Size would be a no-brainer (in usability) and not nice-to-have AAA conformance level. I mean, it really benefits everyone (mobile users), right?

Making progress

Though I’m only two principles into WCAG, I’m actually surprised how much I already know and have applied in my web design/development work over the last 5 years. It goes to show that the best way to learn this stuff is working with others who know it, apply it, and care about it. It also hasn’t hurt to lurk in conversations about web accessibility on Twitter, Slack, and listserv emails. Those two factors have helped me advance forward, alongside the fact that I have close friends and family with various disabilities, who have helped me relate to the challenges many people face when navigating online.