Skip to Content

The Basics of Universal Design

How to Implement Universal Design

So how does one design universally? It takes practice. There's no one-size-fits-all method that generates the perfect solution to any given problem. Instead, truly good design requires research and experimentation: look at what others have done to see what works and what doesn't, then try things out yourself.

That said, there are some basic rules of thumb that can help you design a website or application that is legible, accessible, and high quality. Here are some of the recommended best practices for universal web design, as well as some resources and guidelines for ensuring your design is accessible.

Best Practices

As the Internet grows and changes, so do the best practices for universal web design. The concepts detailed below are not intended as a comprehensive summary, but as an introduction to some of the considerations you'll need to make in designing an accessible, high-quality website.

Semantic HTML

One of the most important practices in accessible, quality web design is semantic HTML. Semantic HTML means using super-specific HTML elements to encode your site's content based on its role within the context of the page. This has two purposes:

First, by attaching meaning to individual HTML elements, we give screen reader software (generally used by people who are blind or visually impaired) a way to parse the page content.

Second, using semantic tags forces us to think about the logical structure of the page and where each element fits within it.

Responsive Design

Another important element of universal web design is responsive design. Responsive design ensures that a site is functional and accessible on all devices, regardless of browser or screen size. This is obviously important for universal usability, but it's also a good way to analyze the overall layout of a design. Does the design work on mobile as well as desktop without sacrificing any important components? If not, you may need to rethink the design of those components.

Alt Text and Contrast

Two important pieces of accessible web design are alternative text (a.k.a. alt text) and color contrast.

For those who are blind or visually impaired, all images need a text alternative that conveys the same meaning. If it's decorative, mark it decorative; if it's informational, describe it. If you have a hard time describing an image because it's ambiguous or contains a lot of text, consider replacing it for the benefit of both sighted and non-sighted users.

Similarly, consider the contrast of the colors you're using in your design. If there's not enough contrast between text and background, users who are colorblind (and even those that aren't) may have trouble reading things.

Checking Accessibility

So you've built a website. How do you make sure it's accessible?

The W3C publishes a set of standards known as Web Content Accessibility Guidelines, a.k.a. WCAG. These guidelines illustrate the fundamental requirements for making a webpage accessible to disabled users, and are widely used as a benchmark for assessing accessibility. If your work falls under Section 508 (U.S. Disability Law), it must meet the criteria for WCAG 2.0 Levels A and AA to be compliant with the law.

There also are many tools available online for evaluating the accessibility of a webpage according to WCAG and other guidelines.

Summary

What it means to practice universal design can vary based on what you're designing and why. In order to design an accessible, high-quality website, follow best practices and guidelines, then test your designs with available tools.