When I was first learning accessibility, I found myself feeling overwhelmed by the amount of information available. It was difficult to know what topics to start learning or where I could begin to improve my web development projects. Over the past several years, my knowledge around accessibility has grown, in large part, due to the expertise of my colleagues. In addition, the focus that DockYard and my team place on accessibility inspires and challenges me to work towards a web that is made for everyone.
Accessibility is the practice of creating inclusive user experiences for all people, through the use of UX best practices.
I wrote this post to showcase a few quick accessibility tips that can springboard your exploration into accessibility. I hope you find inspiration here and see that accessibility is very approachable and easily attained.
Semantic HTML
Accessibility starts by writing semantic HTML. This means writing HTML that has contextual meaning. For example, if you have a group of items that need to be in a list, and order is important, use an ordered list.
DON’T
<p>My Favorite Foods</p>
<div>
<div>Double Cheeseburger</div>
<div>Stuffed Crust Pizza</div>
<div>Chocolate Peanut Butter Ice Cream</div>
</div>
DO
<h1>My Favorite Foods</h1>
<ol>
<li>Double Cheeseburger</li>
<li>Stuffed Crust Pizza</li>
<li>Chocolate Peanut Butter Ice Cream</li>
</ol>
Related and Helpful
Understanding Levels of Compliance
There are three levels of accessibility compliance in the WCAG (Web Content Accessibility Guidelines). These levels are created to provide testable success criteria. In other words, they are levels a developer can target to support accessibility.
- A - minimal support that must be used to ensure assistive technology is able to read, understand, or operate the page or view
- AA - ideal support that should be used for your projects
- AAA - specific support needs and specialized use-cases
Content Provides Context
When it comes to content, it is important to use easy-to-understand language that clearly conveys your message. For example, do not write button or link text that says “Click Here” or “Read More.” Instead, write clear, concise, active language like “Explore our Pricing” and “Contact Us.” If assistive technologies can only announce “Click Here,” the user has no context to the purpose of what that click is doing. Also, the user may not even be “clicking” but using a different method of interacting with your page or view.
DON’T
<button>Click Here</button>
<button>Read More...</button>
DO
<button>Explore our Pricing</button>
<button>Contact Us</button>
Meaningful and Unique Page Titles
The page’s <title> is often the first piece of information announced with assistive technology. Ensure that each page a user visits announces a unique and descriptive page <title>.
It’s important to note that accessibility and SEO best practices can be combined. 55 characters is a good target length for <title> that will display cleanly in search results. A recommended format to follow is, “Page Name | Company/Brand Name | Relevant Keywords (if any).”
DON’T
Home Page
<title>Ratings for Movies</title>
Contact Page
<title>Ratings for Movies</title>
DO
Home Page
<title>Ratings and Reviews | Company</title>
Contact Page
<title>Contact Us | Company</title>
Contrast Ratio
Color contrast refers to how legible colors are when they are placed next to, and on top of each other. When testing for accessible colors, there is a contrast ratio that can be used to confirm legibility. There are so many wonderful tools out there that can test contrast ratio. I’ve included some below.
- A - minimal support: contrast ratio 3:1
- AA - ideal support: contrast ratio of 4.5:1
- AAA - specific support needs: contrast ratio of 7:1
Related and Helpful
These are some key accessibility practices UX developers can use in their web development projects to help create more inclusive user experiences. Thanks for reading!
DockYard is a digital product agency offering custom software, mobile, and web application development consulting. We provide exceptional professional services in strategy, user experience, design, and full stack engineering using Ember.js and Elixir. With staff nationwide, we’ve got consultants in key markets across the U.S., including Portland, Los Angeles, Salt Lake City, Minneapolis, Dallas, Miami, Washington D.C., and Boston.
