3 Tips to Design for Everybody

3 Tips to Design for Everybody

Everyone wants their Web site to reach their audience and provide a great experience for their customers and potential customers. Most people believe that the colors matching perfectly or the placement of your best-selling service front-and-center is most important. It is ... visually. What about people that are color blind? Visually-impaired people use the Internet with special software and browser plugins to consume content. Has your ideal design considered them as well?

I recently had a client ask me about their site's compliance with Section 508 and the latest version of the Web Content Accessibility Guidelines (WCAG). A recent decision by the Department of Justice's Equal Employment Opportunity Commission (DOJ/EEOC) means that companies subject to ADA compliance must adhere to the WCAG. What does that mean for you? In many cases, it won't mean much. The EEOC isn't going come knocking on the door of every business owner with a Web site, but if you are bidding on public contracts or providing public services, you'll need to pay attention and ensure your site is compliant.

Describe Colors

People with color-blindness can't select clothing from an ecommerce site using a color swatch. It's recommended that you include a color swatch, but label it clearly and without subjective color names. Sure, "Fiery Red" sounds exciting, but it doesn't really indicate what shade of red that product is. It's better to use something like "Dark Red" or "Crimson" to describe the color of the product. For those that are color blind and see only shades of gray, the description will help them make the right decision.

Use Iconography

When completing online forms, no one form indicates an error or missing information the same way. Some just highlight a field, which doesn't help anyone that is color-blind. Others show an icon, however placing an icon in the field can be overridden by certain browser plugins, as in this article about accessibility. Your best solution is to display an error with some kind of message. We use Kendo UI's form validator in our applications, but you're often limited to what the platform uses if you aren't crafting a custom solution. Kendo UI comes with its own challenges to validate certain fields, but it certainly gives us a solid start.

Don't Turn Your Site into an Easter Egg Hunt

That probably sounds funny, but I'm actually being serious. Don't show things only when the correct page element is hovered over by the mouse cursor. It makes it difficult for a user to take action if they rely on some kind of tool to interact with a Web site because they have motor functionality-related disability. These users rely on visible elements so they can request their software to click or select that element. If they can't see it, they don't know they can click it.

How does your site hold up against the new WCAG? Do you bid on contracts with public service organizations or government entities? You may want verify your compliance now and save yourself a headache later.

Ping! Development

1000 Characters left