Dear Ms. FEWD,
How do you make a site accessible to a wide number of disabilities? What types of things does a developer need to take into consideration when coding an accessible site?
There are a number of things we can keep in mind so that everyone can get around our sites.
First, follow W3C standards in code, and run your code through a validator. This will give you a good solid base to start from. Make sure links have meaningful text (tell the user where they’re going, not just “click here”), all content images have their alt text describing the image, form elements have labels, and your header tags are in the right order, for instance. This makes it much easier for devices like screen readers to navigate your site, and present the information to the user as you intended.
Ensure that your text and background colors have at least a 4.5 contrast ratio between them, so that colorblind and low-vision users can differentiate between the two and be able to see your content. This goes for images, too – don’t place white text over a light image, or black text over a dark image. Color pick around the image and run it through a contrast ratio calculator with the color of your text, to ensure your user will be able to see your text.
What about touch targets? Have you ever fat fingered something on your mobile device, and hit something you didn’t mean to? Of course, we all have. How do we make this easier for our users? We make it bigger, and therefore easier to hit. W3C recommends, within the 3.2 Touch Target Size and Spacing section:
“Best practices for touch target size include the following:
- Ensuring that touch targets are at least 9 mm high by 9 mm wide.
- Ensuring that touch targets close to the minimum size are surrounded by a small amount of inactive space.”
I find the millimeter unit of measurement strange, as it’s not a unit we typically use in development. However, we can convert it into a more usable unit of measurement by using the information we have on measurements from W3, some standard conversions and a little algebra1, we know that 9mm equals about 34px. Or, if you don’t have time for the math, here’s a conversion tool that will do it for you: Millimeter to Pixel Conversion
For audio items, make sure a written script is included so that your user has access to all the content being talked about. Also include a description so all users know what the video is about.
This next section is for developers, designers and marketers. Under no circumstances should you have anything blinking on your site. Blinking that has a heavy contrast between the different states, or something that blinks anywhere from 5-30 times per second, is enough to cause seizures in those that are photosensitive. Likewise, Kinetosis (motion sickness) is also something we can trigger, usually caused by animated pieces on the page. Make sure rotating items are slow, especially when it’s something the user has to read. Another good idea is to give your user a control panel (pause, play, next, previous) so that they can control when it moves. Animated text over a background (or text over an animated background) can also cause an issue for our user. If it’s not an important and/or functional animation (like navigation open/close), and is just there as a design element and to be neat or to call attention, please rethink your design.
As a developer, make sure you can tab through your site, from top to bottom, without getting stuck in a loop between elements in your page. This is called a keyboard trap and makes navigating with a keyboard, and also some screen reading devices, nearly impossible. It’s up to us to make sure that any user and any method can get through the site, in its entirety.
Last, make sure you run your site up against accessibility standards, like WCAG 2.0 AA or Section 508. Have a few good tools on hand in addition to going through the documentation – it makes it easier to spot your issues, and some tools are better than others in certain areas.
A couple of tools that I use, in addition to the chosen accessibility standards documentation:
- W3C Validator – start your accessible website by ensuring it has a good solid code base.
- aXe Chrome plugin – this will run anywhere, so it is good for local environments and intranets. Also marks color contrast issues with the actual ratio, not just that it failed, so you know how much you need to change it by.
- Need just a color contrast calculator to see if you meet the 4.5 color contrast ratio requirement? Lea Verou’s contrast ratio calculator is one of my favorite tools. Put in your background and text colors in the inputs, and it will output the number, telling you whether you’re above or below 4.5.
- CynthiaSays – the free version that is presented on the homepage will only run on public facing sites. Meaning anything like an intranet, behind a password, or requiring a VPN to log in won’t run unless you purchase their commercial option. However, it does have options to run against WCAG 2.0 A, AA, AAA and Section 508 accessibility standards.
Do you have a front end development question? Ms. FEWD has answers. Email her at MsFEWD@tahzoo.com.
1 The math to figure out how many pixels are in 9mm.
We’ll be working with decimals, so convert the given information from W3:
1/96 inch = .0104166666666667inch
From measurement standards, we know that
1mm = 0.03927inch
Divide 1/96th inch by how many inches in a millimeter to find out how many millimeters in 1/96th of an inch:
.0104166666666667inch/.03937inch = ~0.26458mm
Then with some simple algebra, we can figure out how many pixels in 9mm, solving for x and then multiplying x by 1px:
0.26458mm * x = 9mm
0.26458mm/0.26458mm * x = 9mm/0.26458mm
x = ~34.016
1px * 34.016 = ~34px