WCAG Perceivable

This study session focused on the Perceivable goals outlined in the WCAG, and followed Day 2 & Day 3 of the 100 Days of A11y blog.

Summary

Being "perceivable" is defined as: information and user interface components must be presentable to users in ways they can perceive.

Applied to web content, that means any and all content should be "visible" regardless of assistive technologies, user preferences for text sizes, written vs audio vs video preferences, color settings, and screen size/zoom (also closely relates to the robust principle).

At first this seems fairly obvious, but it's easy to miss certain considerations if you don't run into them regularly. As an ideal, for example, with any embedded video, you should provide at the very least captioning on the video. To take it a step further, a downloadable transcript would allow someone who may read faster than can listen the ability to read at their own preferred pace, or get the same information from the video if they were without internet connection. Including an option or additional video resource for those who prefer to use sign language takes it even further.

No information should be removed from the user because of their prefered method of interaction, and to a greater extent the quality of experience when interacting with that information should not be degraded either.

I learned the difference between captioning and audio description, which really drove home for me what considerations need to be taken into account when trying to provide the same experience and accommodate to alternative methods. Captions are the text being spoken in a video, and include cues about other noises or inflections and emphases to help you understand context without hearing it. Audio descriptions include a narrator describing the actions that are happening that have no audio to translate into captions. 

I found a video on Youtube that was a great example, and it reminded me of the soundification topic that I heard about during the AccessU conference earlier this summer. Using alternative means to increase the quality of information outside the original format.



Practice Site

Based on the perceivable principle, I focused on the 1.3 Adaptable guideline. I decided to skip adding any examples of text alternatives for time based media for now. 

I added the following sufficient techniques to the practice site:
  • created landmarks and regions and included the appropriate ARIA
    • ARIA11, ARIA12, ARIA13, ARIA20
  • Includes the following HTML-related techniques: G115, H48, H49
  • Additionally I spent far more time than I'd like to admit tweaking and setting up my FTP and hosting for the practice site and completely pausing my progress through the Deque prep course modules
I'm anticipating that as I go through and complete the third module in the Deque prep course on Semantic Structure and Navigation, I'll update what I've added on the practice site with what I've learned and improve on it.

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