As Web Accessibility becomes an increasingly hot topic amongst many major industries, It’s really important to start designing with accessibility in mind. The WCAG (Web Content Accessibility Guidelines) have set some good standards for how you can approach development and design for the web. I’ve created a few tips for web designers, specifically.

 

1.) Pick high contrasting colors

 
Color Contrast Tool
It’s important to have a color contrast ratio of a minimum of 4.5:1. There are many great tools that have been popping up on the web that have the ability to test colors against each other, and some tools that can even test out background images.

One of my favorites is WebAim Color Contrast Checker. You simply copy and paste your two hexadecimal colors, and see your results immediately. If you fail the Color Contrast Ratio, you have the ability to try lightening or darkening your colors right within the tool.

Free Software Tools:
There are many free plugins and apps out there that can make our lives easier!

 

2.) Use Appropriate Fonts Sizes and Weights

 
eyeball

Does anyone else remember the days of using 8-bit fonts? I can sadly admit to also using them. As my eyeballs grow older though, I can definitely relate to those that struggle with reading small body copy on the web. I haven’t resorted to increasing my browser font size quite yet! (You’ll still find me with my face inches from the screen pretty often though while designing.)

Minimum Font Sizes:
This is a hard to measure since there are so many different fonts out there, but in general, it’s wise to use at least a minimum of 14-16 pixels for body copy. Try to stay away from using “light” font weights in your body copy, because this can also be incredibly hard to read.

 

3.) Use Hierarchy!

 
hierarchy copy
If you aren’t familiar with website design, this is already a pretty common practice in SEO. (Search Engine Optimization) You should be structuring your content from most important to least so a screen reader can easily skim your website without any confusion.

Your H1 tag is the most important which usually includes your company name or the service offered. This tag should only be used once per page. H2-H6 are mostly used as sub-headlines. Depending on the amount of content per page, you may not use beyond H3 or even H4 tags. In this case, it’s good to include a copy style guide with all of these title tags designed to make sure your future developer is using these appropriately.

 

4.) Designing Photo Slideshows Correctly (Or not at all.)

 
Correct Pagination
For the past decade, it’s been embedded into our work that we must use these photo slideshows to add promotional value to the websites we work on. The truth is, as consumers we’ve been trained to avoid most forms of advertisements, and it’s rare that anyone will notice anything beyond your first banner anyway.

When it comes to accessibility, these are poorly designed. Slideshows move so quickly that screen readers typically cannot read the full message in a few seconds. A lot of these banners with copy embedded on them cannot be read, period. It’s important to separate your text from your photo banner for this reason.

Some ways you can remedy this is to include a pause/play button along with navigation pagination icons. You can do one better though, and consider only including one marketing message per page instead.

 

5.) Labeling form fields

 
form field example

Since minimalism has become a major trend in web design, we’ve lost sight of a lot of things like functionality. Hiding items for the sake of having white space makes no sense. When it comes to form fields, you should always include a label next or above your form fields. Don’t specifically rely on including the label of the field within the form field itself.

 

To learn more about accessibility, please visit the following resources below:

Resources:

 

“The one argument for accessibility that doesn’t get made nearly often enough is how extraordinarily better it makes some people’s lives. How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?” ― Steve Krug