Keep an eye on your inbox!
Hmm, that didn't work. Try again?

Introduction to web accessibility

Best practices for making your content available to everyone.

Jeff Cardello
March 6, 2018
Web design

We talk a lot about responsive design — a design approach that ensures a consistent experience across devices. There are so many different types of screens available, but there are also diverse humans with different needs using those screens. To address all those diverse needs, your design should be both responsive and accessible. People with limitations deserve and need a smooth user experience. Web accessibility makes navigating the web better for everyone.

Keep your users’ diverse needs in mind

We need to look beyond our preconceptions about how people navigate the web. There are a multitude of ways to interact outside of hands tapping on keyboards or screens.

People with visual impairments can use screen readers to hear the content of a web page. Those with fine motor challenges might use a mouth stick or head wand to lead their web interactions.

For those of us who don’t face these issues, it’s easy to make assumptions or forget about people using a different approach. We need to take their needs seriously so they have the same access to the web’s universe of information as everyone else. This is such an important issue that a whole set of guidelines have been crafted: The Web Content Accessibility Guidelines (WCAG), which provides best practices for the web development community.

Let’s take a quick peek at some of those best practices.

Tag visual media

In web design, visuals are often favored — in place of lengthy text — to tell a story. Infographics, product photos, and other information-rich visuals are some of our go-to visual tools. But for visually impaired users, those things aren’t helpful.

Alt tags describe images on your site for visually impaired users who use screen readers. It’s easy to forget alt text descriptions, but doing so can really damage usability. Images — unless they’re purely decorative — should have thoughtful alt text descriptions. "Cute dog," for example, isn’t exactly helpful. But "golden retriever carrying a ball in a dog park" paints a picture and tells a much better story for our users who depend on it.

Descriptions within 125 characters is a commonly held best practice and means screen readers can interpret them correctly.

Video content is popular and effective in communicating ideas, but make sure it’s properly captioned and includes a transcript. For animations that describe or demonstrate something without audio, have a separate audio track available to describe what’s going on.

Take care when creating forms

Websites collect information from us through forms. Dating websites gather our personal details with forms. We fill out lengthy applications (forms) for college and grad school. Ecommerce sites use forms to get shipping and billing information at checkout. You can safely assume that if you’re entering information, you’re using a form.

Filling out forms can be an annoying process, especially if they’re not designed logically. Or when they feel like an endless scroll of empty fields. And they can be especially tricky for those living with challenges. Luckily, forms have moved on from the prehistoric approach of mirroring traditional paperwork.

Much like the alt text of an image, each field in a digital form should have a descriptive label tag. Screen readers and other assistive devices read these to communicate the type of information needed from users.

Let’s look at some best practices in designing forms:

  • Leave space between fields so they’re not crammed together
  • Use multi-step forms to break up length
  • Make sure fields are logically organized and grouped
  • Make sure fields are navigable by tabbing
  • Make it obvious when a task is done
  • If there’s a time limit for entering information, make sure it’s easy to reset
‍Southwest Airlines makes it easy to find flights with this simple form that has an autocomplete pop up menu.

Organize and format content logically

Okay, most of us are aware that a content-first design makes for a better-organized website. A logical flow of ideas, meaningful visuals, and clear navigation make for a better web experience than a random assemblage. Bad organization and poor content is terrible whether it's read visually or by a screen reader. That's why it's always a good idea to read copy aloud before going live.

Take care in organizing your content. And take time to make sure a screen reader can make sense of it by using proper H1–H6 tags to delineate each block of content.

Choose a readable color scheme

A layout shouldn’t be muddied by a bad color palette. A combination like dark blue text against a similar shade of blue will lessen the impact and make it hard for everyone to read.

Choose colors that work well together. This is a good design practice for all your users, especially those who have vision challenges.

The WCAG recommends a contrast ratio of 4.5 to 1. There are a number of tools and plugins to determine the contrast of the colors in a design:

‍Noosa’s use of black on blue is fairly accessible, but white would’ve been better.

Build usability on a foundation of practical typography

Fanciful fonts should only be used as embellishments. Your body content font should be both readable and legible. No one wants to read huge blocks of text in a wacky font. Readability is important for scanning — which is typically how we all read online content.

For those with visual impairments, there are tools and plugins that help them enlarge text. If your font sizes are based on pixels, it may be tough to enlarge the text. But if they’re based in ems, they can be scaled up with ease.

A lot of designers use color to convey information, like indicating an error by turning an item red. But people with visual limitations, like color blindness, won’t see these subtleties. So if you do depend on colors to convey information, make sure you also explain it in text — especially in forms.

‍The American Foundation for the blind uses simple typography and a text size tool built into the design.

Accessible typography needs to be clear and legible, so make sure:

  • Characters are distinct so one isn’t easily confused with another — an easy way to test this is to compare the capital I, lowercase i, lowercase l and number 1
  • Type styles are uncomplicated with a clear hierarchy
  • According to the WCAG, a line height of 1.5 is ideal for body copy
  • Fonts should have enough space so words and character don’t look squeezed together

Accessible design means good design

Web accessibility means better usability. Stripping away complexity and increasing usability makes for a better experience for everybody. Just as there are many tools for those with challenges to better navigate the physical world, there are ways to make their experience in the digital realm a seamless one.

Jeff Cardello

Writer, improviser, and reformed music snob. Check me out @JCardello.

You might also like...


Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free


Bring your wildest web designs — and client sites — to life, without writing code.


Build completely custom content structures for client sites and prototypes.


World-class web hosting at your fingertips, without all the usual hassles.