Accessible Website Development 101

Providing accessible documents is a critical part of your company’s accessibility strategy, but there’s more work to be done to be fully accessible to your customers with visual impairments or blindness. Another major component of accessibility is your company’s website. Just like sighted customers, people with blindness and visual disabilities use the internet to search for, engage, and do business with companies. Optimizing your site for your visually impaired customers doesn’t have to be overly complicated or involve a software developer. There are many little changes you can make that will improve your website for people with blindness or visual impairment.

Simple changes can improve website accessibility.

While some changes require an experienced software developer to make changes in the code of your website, many smaller changes can be made with little or no IT support. These simple changes add up to a big difference for your blind and visually impaired customers experiencing your site.

Fonts. Smaller fonts are generally hard to read, and sites are not always designed to function when a user is zoomed in on text. Also, serif fonts are harder on the eyes than san serif fonts. In addition, it’s important to chose font a color that has a high color-contrast ratio with the background color of the webpage.

Page titles. Clear, informative page titles help customers search and navigate the pages of your website and find the information they need. This is actually a useful user experience for all your customers, so put this one at the top of your to-do list!

Copy. Read your content as a script, outside of the framework of your designed webpage. Does it make sense? Does it provide clear instructions of what to do next? You can also add heading elements for each section for easier reading and quicker scanning of your page. Keeping your copy concise, clear and informative helps all of your customers, but especially those accessing your site through a screen reader.

Forms and microcopy. Make sure each form field has an easy-to-understand label that lets the customer know what information you are asking for in the field. Microcopy, such as thank-you messages and receipt text, also should be revised for clarity.

Navigation and calls-to-action (CTAs). The navigation of your site should be consistent across the entire website, and clear enough to guide customers to find the information they need. Similarly, calls-to-action should state specifically what the customer is being asked to do and what they will receive in return.

Alt-text. All non-text elements, like images and multimedia content, on a page have something called “alt-text” in their metadata. Alt-text is simply a description of the element that will be announced by a screen reader where the element normally would appear. Remember, people interacting with your site through a screen reader won’t see the images and videos on a page. Make sure the alt-text clearly describes that content for them.

Image sliders. Any element that moves or scrolls without user interaction is not accessible. You can replace a slider with a static image, or have your sliders set up to move only when clicked.

Review your site for accessibility issues first.

Before you change anything, it’s best to review your site and create a list of potential accessibility issues. Common accessibility issues to address include:

• Dynamic elements such as homepage sliders, fly-outs, and pop-ups
• Images, videos and other multimedia
• Font sizes, types and colors
• Headlines
• Navigation, links, and calls-to-action (CTA) buttons
• Colors and gradients

Once you have a list of all the potential accessibility pitfalls on your site, sit down with your technical resources to decide which changes can be made easily, with the least impact to your company’s existing website, and which might require a redesign of certain pages or downtime on the site.

Redesign your site for accessibility.

More and more companies are choosing to take accessibility into account when redesigning their websites. And in some industries, an accessible website is mandated by law. If your company is considering a redesign of its existing website, or building its first, there are a few things to keep in mind to improve its accessibility.

• Design “mobile first.” Mobile views tend to be more accessible.
• Provide alternate stylesheets for larger font sizes and text-only versions.
• Allow customers to stop animations and auto-play elements. This includes product carousels, image sliders, background sounds, and videos.
• Test your layout in text-only zoom and on a screen reader.
• Offer text-only alternatives for longer content.
• Up the contrast between foreground and background colors. Avoid gradients.

Who benefits from accessible websites? Everyone!

While some of these tips directly affect the experience for people with blindness or visual impairments, many of them will actually improve the user experience for everyone. Making your website more accessible is one more example of how including everyone is good for your all of your customers, and good for your business.