Overview
Why is accessibility important?
- Good accessibility is good design. It allows anyone to experience what you’ve made regardless of what technology they use.
- Understanding the tools used to enhance accessibility on the web as well as how a user may be limited will improve the abilities of developers and designers to build more accessibile websites.
Links
ARIA
Accessible Rich Internet Applications (ARIA) provides a framework to make web components accessible. We provide simple ARIA attributes that are consumed by assistive technologies to convey information about widgets, structures, and behaviors. Always prefer the native HTML element to using an ARIA counterpart, where possible (ex. use button type="button" instead of div role="button").
ARIA allows disabled users to interact with more complex applications by declaring the role of certain items on the page.
ARIA attributes are broken down into three categories:
- Roles: Attributes that convey information about what an element is. Ex.,
role="checkbox"indicates that an element is a checkbox. There are many roles, like “alert”, “dialog”, “log”, etc. - States: Attributes that convey the current state of an element. Ex.,
aria-checked="true"indicates that a checkbox is currently checked. Other examples are “aria-expanded”, “aria-pressed”, “aria-sort”, etc. - Properties: Essential attributes that describe the nature of an element. Similar to states, but the primary difference is that properties are less likely to be dynamically updated. Ex.
aria-label="Terms and conditions"informs the user that the element’s accessible label is “Terms and conditions”. Other examples include “aria-labelledby”, “aria-describedby”, “aria-owns”, etc.
Add-Ons
Some users will use add-ons, like Grease Monkey, to interact with your site and make it more readable for them, so making sure that your site is still usable with add-ons is a good idea.
Design
- Avoid using
outline: noneas a blanket on the page. You’ll have to go back in and add focus and it’s easy to forget to add it to some elements on the page.
Search
Include fuzzy checking or spell check on search for a user that may mispell a word
Accessibility Standards
508 standards for the US government
Any others that we should be aware of?
Learning Resources
Courses
- Gerard Cohen Courses on Pluralsight
- Accessibility for Web Design
- Deque Basic Web and Document Accessibility for Content Contributors
- Accessibility: Testing and Screen Reader Use
- Introduction to UX and Accessible Design
- Section 508 Trusted Tester
Articles
- Deque: Accessibility in Design
- Deque: Accessibility in Development
- The Web Accessibility Introduction I wish I had
- Comebacks for Five (Wrong) Arguments Against Accessibility
- Foundations: HTML Semantics
- Is Your Organization Inclusive of Deaf Employees?