The beginning of my a11y journey

I had a lot of fun getting my hosting and domain and FTP setup as I've been out of that game for a long time. I added my practice site as a link in my main nav of this blog.

I plan to add to the site as I work through learning the specific techniques and success criteria that's listed in the WCAG. I'd like to create a way to see the evolution of the site over time too as if it were a progressive web app, but we'll see how ambitious of a goal that is.

So far I have:
  • setup my practice site
  • outlined the 100 Days of A11y posts into Trello cards to address individually and follow the path that Amy Carney took
  • outlined the table of contents for the BOK into Trello cards so I can highlight and address ones I need to focus on specifically
  • completed the first module of the Deque WAS prep course and took thorough notes


Areas of the BOK I plan to focus studying on:
  • anything with ARIA, JavaScript, AJAX, and API's
  • more about screen reader interaction model for touch screens
  • speech controls via voice recognition
  • being able to distinguish between success criteria failures, what conformance level those are, and what would constitute an "optimal best practice" from memory

Strategies for studying that I'm taking:
  • removing my glasses and navigating the Deque University prep course with each of the different screen readers (first 3 modules with Windows Narrator, then JAWS, NVDA, and VoiceOver for Mac)
    • unsure how true I can be to their recommended browser companion for each though
  • writing up a summary of what I learned at the end of each module in the prep course
  • created flash cards to pair the mentioned disabilities with design considerations (from the prep course)
Some things I've learned so far:
  • One thing that stuck out to me while reviewing the BOK in regards to their section on "Choosing accessibility techniques that are well-supported" was the statement: "screen reader behaviors can change at any time, whereas guidelines and recommendations are more stable over time, and usually represent the best approach." That is certainly something to keep in mind when triaging screen reader user requests from a product planning perspective.
  • A way that some users deal with web pages that are difficult to read or navigate is to use a CSS reset tool that allows them to reset the pages CSS so they can change it and view elements based on a style sheet they've customized.
  • The last part of the BOK focuses on remediation of accessibility issues. What's most interesting about this is how relevant the topic is to (what I would consider) a vast majority of real-world cases where large web applications try to approach incorporating accessibility fixes. I'm actually very excited at the fact that they instruct you to focus on being able to prioritize MVP options, take into account an LOE for specific efforts, consider specific road mapping for progressive enhancements, as well as education for relevant stakeholders. Knowing all of the success criteria, techniques, and failures in detail is necessary, but so is being able to help plan it out and get it implemented in a real-world scenario.

I'm very UXcited to learn so much more through this a11y journey.

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