Accessibility
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.
Visual
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:
- Make your content easy to read and clear in its presentation
- Designs should meet minimum contrast requirements
- typography should be of a sufficient size
- usually 16px for the default
- avoid using
pxto define font sizes;ems are better as they allow for display relative to a particular device
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.:
- alt text and visually hidden elements are provided as alternatives where relevant
- aria landmarks are provided
- aria roles on interactive UI elements
Auditory
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:
- subtitles on videos
- an indication that audio is playing on the page
Motor
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):
- UI elements maintain a target hit size of at least 44px x 44px
- this does not apply to inline links, while for rows of buttons or navigation (for example) there are guidelines for maintaining sufficient space above and below – even if the UI itself is not of sufficient height. See the WCAG reference below for details.
- the key is the spacing between adjacent UI elements. For example, the target size may be circular or square so long as it is sufficiently distanced from neigboring UI and meets minimum size criteria.
References:
WCAG target size
WCAG target spacing
Coginitive
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.