Development Specifications

Here's what you need to specify to ensure developers have what they need to deploy an accessible design.

Invisible Design

Developers and Computer Magic

Much of the battle for an accessible website is won in the HTML of your site. In the contemporary design agency, designers are usually responsible for design and developers are usually responsible for development. If you're in charge of both the design and the development of a website, this section will point you to some great resources filled with CSS and HTML magic. If you're responsible for the design (the strategy, the user experience, and the user interface) but not the implementation, there's still a lot to keep in mind.

As the designer, it's your responsibility to make sure the developers have everything they need to code an accessible website. Daunting? Hardly!

Here's what you need to specify to ensure developers have what they need to deploy an accessible design.

Alt Tags

What You Need to Know about Alt Tags

An Alt tag is an HTML attribute that can be applied to images on a website. An alt tag describes an image. They're important because they provide context about imagery to users with impaired vision. Without an alt tag, a screen reader will read aloud a long string of meaningless numbers and letters followed by the type of file.

If your responsible for the development of your website take a look at the resources below. Otherwise, be sure to include the text description of images in your handoff to development. Additionally, serves like Wordpress, Squarespace, and Webflow allow users to alt tag images when uploading. Just be sure to look!

How to Write a Good Alt Tag Description

A good image description is concise and informed by context. Consider what's most important about the image and what type of information the image provides for a sighted user.

If the image is of a famous celebrity or athlete, then say so. Provide the context that the image provides.

Take a look at some of the examples below or at

Daniel Göransson's ultimate guideOpen in New Window

for more clarification.

Three business people awkwardly high five.
alt = "Three business people awkwardly high five."
Left: Professional rapper Aubrey Drake Graham's head superimposed onto a gray cat's body. Right: A cat's head superimposed onto professional rapper Aubrey Drake Graham's body.
alt = "Left: Professional rapper Aubrey Drake Graham's head superimposed onto a gray cat's body. Right: A cat's head superimposed onto professional rapper Aubrey Drake Graham's body."

Alt Tags on Charts and Graphs

Providing alt tags for charts and graphs can be tricky. Again, context is most important. Describe what a sighted user understands as a result of viewing the chart or graph. The color and type of data visualization tool is less important than the overarching message of the graphic.

In other words, it's more important to note that the graphic is showing that sales have increased by 25% in the last fiscal year than that the graphic is a black and white line graph.

Chart titled 'Futura in Contemporary Graphic Culture' showing that Wes Anderson Films account for 70% of Futura's use while Futura's use everywhere else accounts for the other 30%.
alt = "Chart titled 'Futura in Contemporary Graphic Culture' showing that Wes Anderson Films account for 70% of Futura's use while Futura's use everywhere else accounts for the other 30%."

Learn More about Alt Tags

ARIA Tags

What You Need to Know about ARIA Tags

ARIA tags are another HTML attribute that provides context to screen readers about the purpose of an element on screen. The most common use is tagging navigational elements on screen an ARIA "navigation" tag. This provides a user with context about the following information they are going to hear.

It's an exercise in empathy and usability to try to understand how useful these audible landmarks are for a lot of users.

Learn More about ARIA Tags

Focus State

What You Need to Know about Focus States

A focus state (focus indicator) shows what element on a page a screen reader is currently "focused" on. Browsers have a default focus state but designers can override those in an effort to create a better user experience.

Graphic showing a logical focus order in a website
This is a bad example of a focus order. It follows the default path (top to bottom, left to right) of a screen reader and is inconsistent with the visual hierarchy of the layout.
Graphic showing a logical focus order in a website
This is an example of a focus order consistent with the visual hierarchy of the layout.