Advance on this post: I recently had the opportunity to design a website for a client that works with individuals and families that have experienced a traumatic brain injury. Different from our typical client, this pro-bono project was made possible by Mockingbird 1% for Good — part of our ongoing effort to make the world a little better for everyone.
This project has been a welcome doorway into the world of web accessibility. I quickly learned how little I knew, and how strongly the lessons I learned applied to the legal industry. Thanks to the patience and assistance of a great client, we were able to design a website that appeals and works for everyone, including those with disabilities.
Without further delay — or in case you happen to be a skim reader — please help yourself to any of these website accessibility tips. And don’t be shy, implement them and keep a sharp eye on your analytics.
Why Legal Cares About Accessibility
Let’s just start with the easy stuff. People with visual, motor, cognitive, hearing impairments, or any type of disability deserve to be treated equally. Everyone should care about accessibility.
- It’s not being accommodating, it’s being decent.
- Do you have any clients who are elderly? Clearly, with age comes wisdom, but so too comes vision and cognitive changes.
- Do you have clients that have been injured in say, a car accident? The workplace? Affecting cognitive, visual, auditory, or motor impairments?
- All for one, and one for all. Designing with disabilities in mind only enhances good, classic, design techniques for everyone.
- Legally, it’s the law…well almost. You know the old Section 508 of the Rehabilitation Act and how it currently only requires government websites to comply with accessibility standards? Well times are changing. In some cases, the DOJ has ruled that all websites must comply with the ADA, even if the current regulations are not explicit.
These are some pretty convincing punch points. But now let’s get technical, so that we can start to make changes that are inclusive and a win for everyone.
20.6 million people are estimated to be visually impaired in the US. Imagine you are blind or visually impaired, how will you interpret a website and its content? Even more important, how can you make critical decisions like, who to choose to represent you in a legal case?
caption: How does a screen reader work? Try installing and activating Chrome Vox, to view your website as a screen reader would. Now, don’t cheat, close your eyes!
Some people will use a screen reader. All the text, links and images in a website will be read out loud, from top to bottom. Some good practices here are to make sure all of your text is text, rather than images. Be sure to have a page hierarchy that makes sense: important, broad info at the top, clear navigation, and also clear divisions on the sections of your site.
Other people won’t need a screenreader, but will use a text-only zoom. This is set in their browser accessibility settings. To help them out, you just need to make sure that all your text can be enlarged without breaking your site. To test this, try opening your website in Firefox. Select Options, Content, Fonts & Colors and try increasing the font size. Is your site still readable and useable? Is all the content still on the page?
If you have a website, at some point, some designer, somewhere, has probably hit you over the head with the battle cry, color matters. I firmly agree, but not in the way you think. Better stated here, contrasting color matters. Genetic color blindness affects about 8% of all men and about 0.5% of all women.
Contrasting color is a fascinating topic — placing two colors together can actually change the way you perceive each color (see image below). But color can also determine whether or not information will even be visible to people. To see what I mean, try running your website through various color deficiency filters to experience your site through different eyes.
Even people without visual impairments struggle with content comprehension when there is not sufficient contrast in colors. Changes in vision that occur with age can make it more difficult to read a computer screen as well. People experience reductions in the amount of light that reaches the retina, loss of contrast, and loss of ability to discern details.
So, what is the golden color contrast ratio that will magically allow more people to see your content (and thus increase your pool of potential clients)? Properly known as contrast ratio, the minimum current standard is a ratio of 4.5 to 1. Test your site’s color contrast ratio and adjust to make things readable. Many visually impaired users make use of highlighting as a quick trick to increase contrast and visual focus. Now, onto those lovely hero images you’ve got on your site…
Alt Text for Images Matters
With visual impairments in mind, alt text for images becomes very important. Rather than a tool for SEO or text to look at while the page loads, alt text may be the entirety of information that a potential client has to conceptualize, visualize and interpret your message. So, make it good!
Providing strong alt text can be helpful for both people with visual impairments and those with some types of cognitive disabilities. There are tons of articles on how to provide strong, descriptive, alternative text for images — so I’ll let you Google that for the complete list. But one I‘d like to highlight: don’t use the phrase “image of…” or “photo of…” in your alternate text as that is redundant information in an image tag.
A Side Note on Font Awesome
Let’s jump to an example where I felt sheepish. I have always been a fan of Font Awesome: scalable vector icons where you can easily change the size, color and other appearances. For a website mockup, I used a Font Awesome icon, over a button, over an image. I assumed that this layered approach would be good for multiple types of users on the site, and for providing good visual cues and separators. I also assumed, as a sheep might, that since Font Awesome is popular, that it would be well-versed in current accessibility practices. Well bah-bah-bad idea. Ok, done with the sheep thing, really.
I looked into font awesome accessibility, and the verdict is, it’s not that great — on it’s own. Their website says: “Screen Reader Compatible. Font Awesome won’t trip up screen readers, unlike other icon fonts.” Now this is fairly useless information, when there isn’t additional information to help us understand exactly how it interacts with screen readers.
There are many reasons that icons and font awesome are super handy for websites. Most browsers (used in conjunction with screen readers) expose CSS generated content through the accessibility layer. Meaning, screen readers may be able to describe your icon out loud. Using an icon on a button or call to action is good, just don’t forget to provide an alternate way for people to understand your content if the icon isn’t expressed.
So, general rule of thumb on this one: use CSS generated content only to supplement the design, not to create key page content.
Don’t Be Terrified: Best Practices Still Apply
That’s right, the world has not flipped over on it’s axis, oh wait, yes it has. But don’t worry about that, because all the great things that you are having your designer / marketing assistant / front desk person / nephew do on your website are still applicable to good, universal website design.
Great designs are built in a way that maximize aesthetic and functional appeal to everyone, regardless of age and ability. Wait now — you say you don’t have someone implementing great design, content, and accessible features on your website? Well, seize the day: call someone who cares about this stuff.
Or ruminate on this: how many potential clients are missing out on your legal services because they struggle to figure out who you are and how you can help them?