As I've discussed forms in past blogs, now seems like a great time to delve into web accessibility. Accessibility is a broad topic that covers many areas and details, but I'll aim to provide an overall understanding from a web developer's perspective.
Accessibility means developing content to be as accessible as possible, no matter an individual's physical and cognitive abilities and how they access the web.
MDN
What is Accessibility?
Web accessibility is the practice of designing and developing websites that can be used by a wide range of people, including those with physical, visual, or cognitive disabilities. These disabilities may result from aging or be temporary. According to the WHO, over a billion people live with some form of disability.
Improving accessibility not only benefits users but also enhances SEO and ensures better usability on mobile devices and at low network speeds. In some countries, providing accessible websites is a legal requirement.
Law
As a Japanese person currently staying in Canada, I chose these two countries. Both follow the WCAG (Web Content Accessibility Guidelines) as the foundation for the accessibility standards.
Canada: The Standard on Web Accessibility requires all federal government websites to comply with WCAG 2.0 Level AA.
Japan: The JIS X 8341-3 standard is aligned with WCAG, specifically addressing web accessibility for older adults and people with disabilities. Public websites are encouraged to report their compliance annually.
Helpful Resources
WCAG 2 Overview
WCAG 2 at a Glance (summary)
Web Accessibility Laws & Policies (by country)
The WCAG is built around four key principles:
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
e.g., Providing text alternatives, using distinguishable colors, etc.
Operable - User interface components and navigation must be operable.
e.g., Ensuring keyboard accessibility, providing enough time for users to read or interact with content, etc.
Understandable - Information and the operation of the user interface must be understandable.
e.g., Improving readability, maintaining predictability, offering input assistance, etc.
Robust - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
e.g., Ensuring compatibility with current and future users' tools, etc.
How to Meet WCAG (Quick Reference)
Categories of Disabilities
Visual - includes people with blindness, low-level vision, and color blindness.
Auditory - includes hearing impairments and deafness.
Motor - includes physical disabilities (such as loss of limbs or paralysis) or neurological or genetic disorders that lead to weakness or loss of control in limbs.
Cognitive - refers to a broad range of disabilities, including intellectual disabilities, mental illness, learning disabilities, and age-related challenges with thinking and memory.
Speech - includes conditions like stuttering and muteness.
Some Tools
For Visual Impairments - Screen magnifiers or screen readers.
For Hearing Impairments - Provide textual alternatives and transcripts.
For mobility Impairments - Keyboard accessibility and head pointers.
For Cognitive Impairment - Use visual aids and provide clear, easily understood content.
For Speech Impairment - Text-based communication.
Reference: MDN
How to Code
There are many ways to improve accessibility, but here are a few we can start implementing today:
Semantic, Well-structured HTML Text Alternatives for Non-Text Content Keyboard-Accessible Navigation Forms with Labels and Error Handling There are many more areas to cover, and improving accessibility should be an ongoing effort. I believe this is a good start toward writing better code that minimizes barriers.
Use meaningful tags instead of
Write descriptive alt texts for images, icons, and media.
Some tags, such as for clickable buttons to ensure they can be accessed via the keyboard. Additionally, provide aria-* labels for descriptions.
WAI-ARIA Overview
Providing only placeholders won't help, as they disappear once a user starts typing. It's important to include labels. Also, providing clear error messages explaining why an error occurred and how to correct it is crucial.
