Sam Jones   |  @samjonester

Accessibility Techniques

Accessibility techniques are a way to create a more usable experience for all users. An accessible experience can be viewed as a continuum, and this post is an introduction to techniques that span that continuum. We will start with accessibility techniques that are most likely to fix issues that block users with disabilities from successfully navigating your application. As we get comfortable with the most impactful techniques, we will move into techniques that create a more inclusive experience and provide equal access to even more people.

When I started learning about accessibility techniques, I was quickly overwhelmed and found it difficult to find a good jumping-off-point that humanized the techniques. These techniques may be “just the beginning”, but they will provide the most impact during initial development, and are where I like to start.

Keyboard Navigation

Testing and improving keyboard accessibility can unblock navigation for users with motor disabilities. It can also be a good gut check when creating content to be navigable by users relying on screen readers. Ensuring your page is navigable by keyboard is the most impactful action to take. Start here and build more advanced techniques on top of this base.

I like to think about keyboard accessibility as two categories. The first, focus, enables keyboard navigation on the current state of the page. The second, toggling visibility, ensures that when content is dynamically added or removed, keyboard navigation is still meaningful.

Focus

The TAB key is used for navigation through actions within a web application. As you hit tab, the next element in the tab order receives focus and can accept action.

Toggling Visibility

As dynamic content is displayed or hidden, ensure that keyboard navigation is still meaningful.


Extras


In my mind this line represents the division between ensuring basic navigation and providing an inclusive experience. After becoming comfortable with the most impactful techniques, these are great places to continue learning.

Getting Started with Aria

Aria is a set of html attributes that define Accessible Rich Internet Applications. There are many aria attributes, and each provide a way for screen readers to convey semantic meaning to users with vision disabilities. I started with these attributes while learning about how to add contextual information using Aria.

Visual Representation

Tools I Recommend

Static testing is nice, but doesn’t replace manual testing. Static tests can only look at the current state of the DOM, and are missing context to make determinations about usability. There are some checks that can be very effectively analyzed by a static tool, though. Here are the tools that I recommend adding to your accessibility test suite for static testing.

Start taking action today, as any action will improve the usability of your site.


Share this: