Web Accessibility is an important factor in your design and development. With 56 million people with a disability in the United States alone (almost 1 in 5), and 1 billion worldwide, making your website accessible is not something to merely dismiss. Not only is it a requirement for many, it is just plain good UX, leading to your sites ability to reach a wider audience, improve SEO and site search-ability, and maybe even increase conversions. Luckily, making your site accessible is not as hard as you might think!
I will be creating this list of web accessibility recommendations in a three part series, focused each part on: Order and Tags, Content and Labels, and Color and Contrast.
Part 1 - Order and Tags
Order the Page Content Intentionally
When creating each page, it is important to order the content clearly and in a manner that is easy to understand. Think about a blind visitor viewing your page with a screen readeer. With more modern advances in CSS, it is even possible to order your page content so that they would not have to sift through your navigation menu every time they hit a new page. Instead you are able to order the page content first, if so desired.
What to do
Plan out page content across your website in a consistent manner that will allow for an enjoyable experience for all users. This might mean shifting page content code closer to the top, so that viewers using screen readers do not have to sift through a ton of menu options before they get to the meaningful part of the page.
Resources
Make Your Site Keyboard-friendly (Focus states)
Have you ever gone to a website and started 'tabbing' through the site, without using your mouse or trackpad? If not, try it! Some visitors scroll through your site with only the use of their keyboards. CSS now has a selector associated with interactive elements that allow you to style html objects that your browser is "focusing on". This css selectors are :focus and :active, and your site should include usable focus styles to improve keyboard interaction.
What to do
Ensure that you set focus styling for your interactive elements across your site. Many libraries and frameworks such as Bootstrap already include focus styling, so feel free to change but NOT remove it. The styling can go along with your site's design, but should be evident for all users (including color blind viewers).
In the very least, include this to your css document:
*:focus {
border: solid 1px blue;
}
Resources
- Nielsen Norman Group: Keyboard-Only Navigation for Improved Accessibility
- CSS-Tricks: Focusing on Focus Styles
Use Proper Markup Tags
HTML tags have been updated to notify the browser of what content is being delivered where (and how). They are created in a way that screen readers have a sense of the hierarchical order for the content, and help the reading sequence stay in a logical order. As a bonus, using proper tags help with SEO, as google's robots scan and identify page content (and associate that content to SEO ranking) by their tags.
What to do
Semantic html tags have been specifically built to display certain types of content and can be used by screen readers more accurately. Use the right set of semantic tags for the job throughout your website.
Examples of semantic html tags are:
<header> <footer> <button> <form> <table> <thead> <tbody> <h1> <h2>
Examples of non-semantic html tags are:
<div> <span>
Resources
Conclusion
Rock on! I hope you found this first set of recommendations useful in your journey into web accessibility. Web accessibility is always evolving and improving, and I am still trying to learn more about all of the requirements, options, and nuances available do designers and developers. Remember, making your website accessible opens doors to new users and is just plain good UX design, so implementing the basics is a great start. Please respond with any comments or additional resources I can include that readers might find useful!
Additional Resources
Below are some additional web accessibility resources, tools and guidelines for your site or project.
- W3C Web Content Accessibility Guidelines (WCAG) 2.1
- UX Collective: Designing for accessibility is not that hard
- UX Pin: 8 Website Accessibility Best Practices to Improve UX
- Invision Design: A guide to color accessibility in product design
- Inclusive Components: A library of ideas for making components accessible
- Vox Media: Accessibility Checklist for Designers, Engineers, and Project Managers
Additional Tools
- AXE: Web Accessibility Testing Chrome Extension
- Jxnblk Colorable: Color Contrast Checker
- Sim Daltonism: A Color Blindness Simulator
- SilkTide: Disability Simulator for the Web
Top comments (0)