Wes Hatch

front-end developer


AA accessibility (WCAG) guidelines, typography / contrast information, and interaction hit-sizes.

When we think of accessibility, we generally think of how to provide content via alternate channels in support of visually impaired users. However, the visual is but one of several categories of user impairment; the others are often overlooked.

According to the WCAG, there are actually four categories of user impairment:

Accessibility is a way to ensure that your content is, quite literally, accessible. That it is easily consumed and understood by a wide range of users with different abilities, experiences, knowledge, and context. Each of these categories requires its own set of considerations during the design process and the corresponding technical implementation.

Lastly, it should be said that provisions for accessiblity (or a11y, for short) are not hard! They are just often overlooked as many folks simply are not aware of them.


Most often, visual impairment is what developers, designers, and the rest of us think of when the term accessibility is mentioned. This is a quick (i.e. non-exhaustive) checklist of some basic considerations in support of visually impaired users:

Also, for users that need additional support, provide “hints” in the form of aria attributes, aria landmarks and roles, image alt text, and visually hidden alternatives for screen readers. i.e.:


Perhaps the most overlooked category, or the one with the fewest allowances in it. For users with auditory impairment, a few items that should be addressed are:


Users with impaired motor skills will have difficulty clicking buttons or links that are clustered together. Many of the large tech companies (Apple, Google, Microsoft) have guidelines that stipulate the recommended minimum spacing between interactive UI elements and their dimension. These can be summarized as (per the WCAG):

WCAG target size
WCAG target spacing


This last category is usually the most difficult to define or make allowances for. In general though, we should assume that our UX, or particular aspects of it, may not be immediately understood.

For example, the function of a particular button or the consequences of a particular action may not be obvious. While the result of clicking a “📄” icon might be understood by some users, consider that for others it may not be immediately obvious. Users will have different contexts and experiences from which to draw. The more context and hints around intent that we can provide, the better. What does a thing or action do? Will my data be safe? Did I mean to do that? Is it okay to click?

To follow up on the “📄” example above, we should ensure that all icon buttons provide help text on hover.