Web Accessibility 101: Designing for All

Web design is accessibility. Most web designers aim to create products for the largest swath of people within their audience, casting their designs out like gaping nets to yield them the greatest influx of users.

And while there’s logic to that design principle, it overshadows a simpler and more inclusive principle: Design for all people, not most.

Optimize pages and content so that every possible user can enjoy and interact with your website and access the information and data available. Engaging in this practice will help develop a wider market and diversify your customer base. 15% of the world’s population has some level of disability.

These are people who, like everyone else, use the internet often and rely heavily on digital communication and tools. Optimizing your website to ensure users can enjoy a great experience can expand your web of interaction.

Through practicing inclusion in your design, you’ll be able to reach millions of people who are often overlooked.

Designing for accessibility doesn’t have to be hard. It just needs to be simple and considerate of all potential users. Here are some tips that will help you to to optimize your website for maximum accessibility.

Understand Your Users

Knowing your audience is crucial in any project, so it’s the best place to start. Understand that your users can include individuals with different capabilities. Some of your users may be hearing or visually impaired, others may have seizure disorders, and others still may have mobility issues.

While you can’t design for every possible scenario, you’ll broaden your design horizon if you take the time to think of as many as you can. After you’ve thought about your expanded audience, do some research. Read case studies, talk to friends who have experience, and consult accessibility guides.

Maybe try taking a page from the educational field, Principles of Universal Design is a good reference.

Think UX

Now that you’ve developed an understanding with your future users, put that understanding into your user experience (UX) framework. This step will help you empathize with your users and consider things you might not have thought of before

It’ll also point you in the direction of a wide variety of assistive technology definitions.

Just as a designer should consider the behavior of a website in every major browser, assistive technologies should be part of the functionality checklist. Sometimes, even the smallest changes in web design can open new doors for disabled users.

A Simple Change

For instance, the easiest change to implement is how you use emphasis tags.

Visually, there’s no difference between <b> and <strong>, nor does <i> appear any differently than <em>. But for people with disabilities, these tags can change their user experiences sharply.

While they render the same, effectively bold and italics, the difference between these tags is their function. While the simpler bold and italic tags are presentational (changing the way the text renders), strong and emphasis indicates different speech patterns for assistive technology.

But it’s not as simple as blindly replacing all <b> with <strong>. Many headers use bold text for contrast, for example, but perhaps it’s not best for users with disabilities to experience a <strong> tag here.

Think, “Does this text need to be spoken differently for a user to experience its full meaning?” If not, consider dropping the <strong> or <em> unless they are really necessary.

Subtle changes and considerations like this can make all the difference for users with disabilities. It’s important to upgrade and not downgrade the UX.

Designing for the Visually Impaired

While the above advice already benefits the visually impaired, not everyone with visual problems will have the same impairment level or type.

It’s equally as important to offer options that can accommodate those who retain the use of their sight.

Consider these elements:

• Allow users to enlarge the font size. Most browsers will do this with or without your consent, but it’ll look nicer if you have CSS prepared for it.
• Avoid certain color combinations like red and green or blue and yellow. Instead, why not use color to increase conversions while increasing accessibility?
• Code in the alt text. Alternative text can be read by assistive technology and explain any graphics on the page.
• Use periods in abbreviations, even the well-known. The way a screen reader processes information is often phonetic: imagine hearing “Fibby” vs. F.B.I.

For more information on ways to incorporate elements for visually impaired users, check out the American Foundation for the Blind.

Designing for the Hearing Impaired

Although the hearing impaired require fewer accommodations, recent trends in video use on websites have increased the need for smart design choices. So if your website incorporates any auditory components, use closed captioning or sign language interpretation.

Avoid the temptation to use automatic closed captioning – stop by any random video that’s been processed using automated transcription to see word translations that don’t make sense and can be count-productive.

For specific captioning guidelines, the National Association of the Deaf’s recommendations can be found here.

Designing for Photosensitive Epilepsy

One of the design concerns around the prevalent use of video, especially video that uses an autoplay function, surrounds users who have photosensitive epilepsy. These users can experience seizures triggered by strobe light-type effects or moving images.

Web designers can use the Photosensitive Epilepsy Analysis Tool to check the likelihood of their content triggering a seizure.

If the content is identified as at-risk but cannot be changed to reduce the risk, always warn about the potential and don’t automatically play the video. Make sure the warning is visible and near the play button.

Designing for Mobility Impairment

Some mobility impairments will range from total loss of fine motor control to a mild tremor. Either level of impairment results in the same user experience on a website that hasn’t considered them:

• Users must exert greater effort to reach links and may tire quickly.
• Users cannot navigate the website because it does not allow keyboard use.
• Having to scroll through a long page could result in fatigue because there’s no “back to top” or skip option available.

Sites that are optimized for touch screen or fine mouse input can present with more severe consequences for the mobility impaired, possibly rendering the site unusable.

Incorporating design elements like navigation that can be operated using the keyboard and frequent anchor links that can draw the user to different sections of the page can go a long way to helping these users.

Create a “Basic” Website Option

Your design is flawless, interactive, and striking, uses the latest and greatest trends available on the open market – and is barely accessible for any of the above-described users.

If that sounds like your web design, an easier alternative can be creating a “simple” layout that users can toggle on and off. This will appeal to more than just disabled users: For users who suffer from high contrast triggered migraines, for instance, having an easy-to-access toggle can be the difference between becoming a customer or leaving to contend with a three-hour migraine.

Don’t stop there, either. Apply the same option for your subscription lists, allowing users to easily edit their preferences before receiving email marketing.

Keep understanding your different users. Keep thinking about them. The more you understand and empathize with your users, the easier accessible UX design will become. Who knows? You may even change someone’s world.

Website Accessibility Tools