Tips: Making Your Projects Web Accessible  (1 of 3)
Tags: design, a11y, ux, html
Published: 2020-09-25 04:48:40

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_**
- [Understanding Meaningful Sequence](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html)
- [Meaningful Sequence Techniques](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=132#meaningful-sequence)

### 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](https://www.nngroup.com/articles/keyboard-accessibility/)
- [CSS-Tricks: Focusing on Focus Styles](https://css-tricks.com/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_**
- [Using the Right Tags for the Job](https://www.htmlhelp.com/design/style/docstyle-tags.html)
- [W3 School's HTML Accessibility](https://www.w3schools.com/html/html_accessibility.asp)

---

## 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](https://www.w3.org/TR/WCAG21/)
- [UX Collective: Designing for accessibility is not that hard](https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94)
- [UX Pin: 8 Website Accessibility Best Practices to Improve UX](https://www.uxpin.com/studio/blog/8-website-accessibility-best-practices-to-improve-ux/)
- [Invision Design: A guide to color accessibility in product design](https://www.invisionapp.com/inside-design/color-accessibility-product-design/)
- [Inclusive Components: A library of ideas for making components accessible](https://inclusive-components.design/)
- [Vox Media: Accessibility Checklist for Designers, Engineers, and Project Managers](http://accessibility.voxmedia.com/)

### Additional Tools
- [AXE: Web Accessibility Testing Chrome Extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
- [Jxnblk Colorable: Color Contrast Checker](https://colorable.jxnblk.com/)
- [Sim Daltonism: A Color Blindness Simulator](https://michelf.ca/projects/sim-daltonism/)
- [SilkTide: Disability Simulator for the Web](https://silktide.com/resources/toolbar/)

---

### Part 2 - Content and Labels - Coming Soon...