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.
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!
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
for more clarification.
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.
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.
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.