zudell.io.

< Back

jon@zudell.io > a11y v0.2.0

# Posted1725148800000

# Overview

Accessibility or a11y for short is the property of being usable by individuals with disabilities.https://dequeuniversity.com/is the defacto authority on implementing accessibility.


Different disabilities require different accessibility solutions. A non-comprehensive list is provided below:

  • Poor Vision
  • Color Blindness
  • Blindness
  • Deafness
  • Impaired Cognition
  • Technological Illiteracy

In the case of visual impairments there are two user cohorts that must be supported screen reader users and standard browser users. Accessibility concerns in are mitigated on multiple fronts.


# JavaScript for a11y

User experiences can be greatly enhanced by leveraging JavaScript. However, it can be challenging to gracefully degrade from an asyncronous JavaScript driven experience to html form submission. When JavaScript is enabled the effects of dynamic content on screen readers must be examined. When properly implemented client side code will leverage native accessibility features to enhace the user experience. Consider using theCauldron React Libraryit contains many common component patterns implemented to use ARIA features.


# Keyboard First

User input should be accepted in a variety of ways such as mouse events, touch gestures, and keyboard input. Implementing keyboard navigation with tab selection applies to screen readers and browsers as such it is a high value item.


# Example Sign Up Form

The following form implements appropriate tab order and features an accessible password field. The field can show or hide the password which helps users with input difficulties. The tab ordering is left to the screen reader to determine. Aria labels are used to provide context to the user. The form also features a responsive design.


Sign Up

Already have an account?[sign_in]

< Back