Operable and How It Applies

 Something that makes it difficult to fully understand the WCAG principles is having a realistic example of how they'd be applied.

What I've found is that some apply to only a small or specific scenario or type of web content. I thought it would be helpful to go through and identify which would apply to common content, and which would be specific.

For the sake of this exercise, a "common" web content type would be a standard marketing website, blog, or other sites with simple text content and maybe a web form or two.

Ultra-Applicable:

These I'd consider basically apply to everything and are the component level to allow basic functionality.

  • 2.1 Keyboard Accessible
    • Everyone needs to be able to navigate and use the site without requiring a mouse or touch screen
  • 2.4 Navigable
    • Users should be able to tab through a main nav list of links, or through a search function, or from contextual page links to get to where they want to go.

Niche Functionality or Industry Specific

A "niche functionality" or "industry specific" application would be something that includes maps, 2-step authentication, e-commerce functionality, or any kind of interactive content.
  • 2.2 Enough Time
    • The first thing that comes to mind is security for logged in sessions and being automatically logged out after a certain amount of time.
    • Anything with video, audio, or animations would need controls, and super should not auto-play.
  • 2.5 Input Modalities
    • These criteria apply most to mobile or touch screen functionality and rely on gestures, down-events, and device motion.
    • Target size for buttons should apply to all buttons/interaction elements, however.

Shouldn't Have to Apply

This I'd consider something that just shouldn't be needed at all as a part of the design process. The benefits of using any of these are not worth the code they're made with.
  • 2.3 Seizures and Physical Reactions
    • Flashing shouldn't exist. There are better ways to convey importance or try to direct attention.
    • Animations from interactions should be a nice-to-have about how crucial it is to successfully use the site. For users who use zoom and may miss the animation that indicates the item they just put in the shopping cart, this may be helpful, but you can use a simple message on success instead.

Popular posts from this blog

Practice Site: Keyboard Accessible Tooltip Fail

Image
While reading about keyboard input methods and learning about the success criteria requiring custom keyboard instructions for any custom key commands, one method of accomplishing this was using a tool tip to present the instructions. It mentioned that the tooltip would have to be accessible via keyboard navigation and be able to be read by a screen reader. That reminded me that on my practice site, I spent a significant amount of time creating an example of success criteria for 3.1.3 to provide a definition of an unusual word when the user hovers over the text "affordance" displaying in a tooltip. I did not, however, make this accessible to keyboard-only users or screen readers. Turns out it wasn't even focusable until I gave it a tab index. More investigation into ARIA Practices for 3.24 Tooltip Widget call out specifically that the tooltip container requires role="tooltip" (which I did not have), and the element triggering the tooltip references the tooltip ...
Read more

Pointer Cancellation: Real-World Examples

Image
 While reading through the Operable Principles, I admit that I was confused about the success criteria around pointer cancellation . The success criteria states, For functionality that can be operated using a single pointer, at least one of the following is true: No Down-Event: The down-event of the pointer is not used to execute any part of the function Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion Up Reversal: The up-event reverses any outcome of the preceding down-event Essential: Completing the function on the down-event is essential Some of my initial questions when reading this are: It mentions functionality using a single pointer, but what are the other options? Is there a double pointer? Do they mean that when they release the down-click the user is prompted to abort the action or undo?  Are they holding down a mouse button reading something tha...
Read more

Practice Site: Accessible Forms

Image
Today I finally bit the bullet and focused on creating a page on the practice site that would allow me to practice with form components, and live events based on actions. I have the basics down thanks to a friend of mine who walked me through the tools and resources that would be best for this very specific scenario and wrote the skeleton of the page that I could edit to make more accessible. She recommended using JQuery and JavaScript to avoid requiring a database or AJAX. Thanks to w3school.com for their amazing resources. My goal is to make the form fields clear on each submit, and post the data in a styled way on the page. I'd also like to make each submit speak a "success" message to alert the user of the new content, and of course, add labels to everything. Since this took the entire day, it will have to do for now. Luckily there are built-in focus states for the input and button elements by default. This was a productive day, but I may need to take a walk after ...
Read more