The a11y journey

It's hard to talk about a passion that you have without sounding overdramatic or hyperbolic.

The path that led me to becoming a user experience professional, for me, felt like a series of revelations and sparks of discovery. I sometimes look back and think about what would have happened had I not been introduced to Photoshop and shown how to code a basic website. That was, without a doubt, the most pivotal event of my life.

Since then, I've learned and grown and become passionate about user experience enough to rely on it as a career and outlet for creative energy, and until a few years ago, accessibility was something that wasn't important or interesting enough to spend time on.

A client request was made to incorporate screen reader capabilities for JAWS. None of us had much accessibility experience outside of alt text on images, so we took a few weeks and dove completely head first into how to accomplish this.

A fire was lit. A door opened. The way I thought about everything changed. This was my new passion.

Since then, I've been haphazardly sifting through WCAG, absorbing as many online accessibility training courses as possible, and incorporating it into the design process at that base level. For me, this didn't seem like enough, and I sought out a more structured way to learn and ensure that the most effective accessible way to build and code was being communicated and perpetuated. I found the Web Accessibility Specialist (WAS) certification through IAAP, and after speaking to Samantha Evans, Nicholas Steenhout, and Homer Gaines, I enrolled in the Deque Prep Course for WAS certification.

My biggest concern is that I'm not a programmer, and have been out of the coding world for quite some time. From talking to others who were studying for the exam, and those who had completed the prep course, they still felt they didn't have a good grasp on everything that the exam might go into. There wasn't any hands-on code editing to practice with. How much detail in code editing would be on the test?

The blog by Amy Carney called 100 Days of A11y was mentioned on an IAAP forum post, and that seemed to be the answer. Amy documented her journey through the WAS certification in her blog, and broke it down into 100 days of incredibly immersive learning of all things accessibility. What was most important to me was that she passed. This gave me an incredibly organized and manageable list of resources, notes, and structure to base my own study efforts on. I plan to chronicle my own journey, like Amy, here. Mostly because it will help me retain the information that I've learned, and act as a way to hold myself accountable to be productive in posts about it, but also that in some way it might help someone else who had the same questions as I did.

Additionally, I realized I needed to practice coding these specific success criteria and have that hands-on learning. Unlike Amy, I wasn't coding daily, and needed a way to do that. I decided that I'd use this as an opportunity to update my portfolio site and use it as a testing ground for writing accessible code.

I plan to:

  • create a blog post summarizing the specific things I've learned for that day
  • wipe out my current portfolio site and start from scratch with Brackets (I have a Mac otherwise I'd use Notepad++)
  • outline and track my course in a sharable Trello board for anyone else who wants to use 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