Web Design: Do Accessible / ADA Compliant Websites Look Ugly?
A few clients have asked me about design when it comes to website accessibility.
Specifically, does my website have to look ugly if I make it accessible / ADA compliant?
Absolutely Not.
It’s actually quite the contrary.
There aren’t a lot of things that need to look different when you make a website accessible.
If anything, after you’ve accounted for accessibility, your website will look a lot better and even convert better.
Here are the potential design changes that may need to be made:
Maybe Changes for Accessibility
- Remove any carousels or slideshows. (optional but highly recommended)
- Update your color scheme for sufficient color contrast.
- Remove any text embedded in images. (your logo can stay the same)
- Add headings to structure and organize content.
- Re-order your visible page elements to match the programmatic order.
- Stack form names and fields vertically. (optional but recommended)
- Remove anything that’s flashing, blinking, or moving. (possibly optional)
- Add some additional descriptive or instructive text.
- More white space. (optional)
- Bigger text. (optional)
The biggest item on there is providing for sufficient color contrast in your text and images that convey information.
And even that’s not too bad.
Let’s take a look at each of the items above.
Remove Carousels
This is optional because you can technically make carousels / slideshows conform with WCAG but they’re hell on screen reader users so, if at all possible, you should leave them out.
Jared Smith (WebAIM) says it best on his mini website, ShouldIUseACarousel.com:
“Carousels pose accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks. Carousels are this decade’s <blink> tag.”
Avoid if possible.
Color Contrast
You may need to update your color scheme if you have text or meaningful non-text (e.g., icons that convey info) that doesn’t have sufficient contrast with your background.
This is less painful than you think.
Illustration:
You use olive green text on a white background. All you have to do is increase the darkness of the shade of green until it inches to the 4.5:1 ratio (or 3:0 ratio if you’re using large text or non-text content).
It’s really not that big of a shift and it definitely won’t make your website look ugly.
(Think of moving over a few paces to a slightly darker version of your color on a color gradient.)
There may be some pushback from the branding and marketing departments but if you want to conform with WCAG 2.1 AA, you’ll do it.
This marks the biggest design change for most websites and yet only amounts to a slight shift in color.
Images of Text
Unless it’s for branding, your text should be coded in as text (selectable) and not bedded inside of an image.
This shouldn’t dramatically alter any website design.
Visible Headings
I recommend either adding headings (where called for) or replacing existing text meant as headings (likely styled as bigger/bolder) with actual headings.
When I say headings, I mean <h1>, <h2>, etc.
This may add in some more text to your page but doesn’t dramatically alter the design.
Page Order
The visual order of your page needs to match the programmatic order.
Thus, you may need to make adjustments one way or another but, again, this shouldn’t dramatically affect your design.
Vertical Forms
It’s best practice to stack your visible names and accompanying form fields vertically.
For example, you have “name” and then the form field for name underneath it.
This may not look as smooth compared to a two-column form that alternates fields from column A on the left side and then column B on the right side but it’s really not a big deal.
You can always just center the one column and then use large form fields to keep everything looking symmetrical.
Blinking, Flashing, Movement
How many websites even use blinking or flashing anymore?
One client of mine had an animated gif that automatically played on loop.
Some movement is technically permissible under WCAG but it’s best practice just to eliminate that type of stuff as it can be distracting, or, in the extreme, cause seizures.
Again, not a big loss. Even if you currently incorporate blinking, flashing, or moving items it’s probably not helping you at all.
Additional Text
Various WCAG success criteria may call for you to add a little extra text to provide cues, guidance, or instructions.
For example, maybe you add text beneath a data table or provide more error instructions on form fields.
Once again, no big deal.
More White Space
It’s immensely helpful to incorporate more white space in your design — especially around text elements.
This can help everyone, including those with dyslexia.
Even right now, it’s killing me that Medium doesn’t add more white space after its headings.
Just add more white space. It makes everything so much more visually appealing.
Bigger Text
There technically isn’t a text size requirement in WCAG but small text is difficult to read so, again, let’s take things up a notch.
For main body text, I recommend a baseline of 14 pt and then using either 16 or 18 if you’re feeling up to making the world a better place.
Can people zoom?
Of course.
But why not start out with a larger base so less people have to toggle the settings?
Not So Ugly Now, Huh?
I can feel your fists slowly unclenching from my Costco desk (yeah, the picnic table one that’s like $50, big whoop, wanna fight about it?).
You had this ugly-website myth held so firm inside your head and now you’re starting to realize that accessibility barely changes the look of your website, if at all.
In fact, maybe you should thank accessibility for some redesign considerations that will significantly improve the look and feel of your website (or app — it’s a free for all, everything wins).
Conversions will improve, too.
Accessible websites — that not only follow WCAG 2.1 AA but also accessibility best practices — are much more aesthetically pleasing than those where accessibility has not been addressed.
