Writing for accessibility

Alt text

Alt text is a text description of visual content like photos, graphs, icons, and charts. Alt text is short for alternative text. It lets people who use screen readers perceive and understand visual content. The screen reader reads the alt text out loud to users with visual impairment.

Alt text also helps people with slow load speeds. That's because the alt text displays instead of an image that hasn't loaded.

Writing alt text for informational images

The county requires alt text for informational images.

These include images for actions, instructions, and locations:

• Describe the meaning of the image, not its visual attributes.
• Write a short phrase. Leave off the words a, an, and the.
• Leave off the words image and icon from the alt text.
• Use the words graph or map in the alt text.
• Charts and graphs should include short and, when possible, long versions of alt text.

Using context to decide on alt text

Any alt text you write depends on the role of the image in supporting the content. For example, an image of commissioners with shovels and hard hats could mean commissioners taking part in the community or a groundbreaking ceremony.

Example of an informational image and alt text

Example context for the photo: It’s on a web page with information about the kind of help you can get at service centers.

Example alt text for the photo: Staff member showing someone how to fill out a form

 

Example of a chart and both versions of alt text

Example context for the graph: It’s on a microsite promoting organics recycling.

Example alt text (short version that describes the image): 
Graph showing number of tons of organics recycling 2009-2018

Example alt text (long version that describes detailed information - create a long version, if possible): 
Graph showing number of tons of organics recycling rose from just under 1,000 tons in 2009 to almost 6,000 tons in 2018

Example of a map with both versions of alt text

Example context for the map: It’s in a newsletter announcing a road closure affecting part of Glenwood Avenue in Minneapolis.

Example alt text (short version that describes the image): 
Map of Glenwood Avenue closure. Includes select access points to the street

Example alt text (long version that describes the detour - create a long version, if possible):
Map of Glenwood Avenue closure, showing access points into Glenwood Avenue. The closure runs from Aldrich Avenue North to 12th Street North. It includes parts of Holden Street North and Royalston Avenue. Access Simpson Housing and Catholic Charities at Glenwood Avenue and East Lyndale Avenue North

Example of an icon with alt text

Icons that carry information need alt text. Icons that function as a button or a link don't need alt text.

In this example, the checkmark and blank circle are the first and second steps for filling out a county form.   

Example alt text for the green checkmark:  First step is completed

Example alt text for the blank circle: Second step is not completed   

Treating decorative images differently

Decorative images use different alt text. Don’t write a phrase to describe the image. Instead, be sure the image gets a “null” alt text attribute. Screen readers won’t read anything out loud for the decorative image. That avoids audible clutter for users with visual impairment.

Example of a decorative image and how to treat alt text

Example context for the image: It’s on a page with information about licenses for transient merchants. It only adds visual interest but no information.

So for this example decorative image:

• Developers: You would create a “null” alt text attribute in the code.
• Content creators: You would avoid writing any alt text for the image.

   

Deciding whether an image is informational or decorative

Ask yourself whether a visually impaired user could understand the page without the image. If the page makes sense without the image, treat the image as decorative. If the page loses meaning without the image, treat the image as informational.

If the image already has text in HTML that describes the image, you don't need alt text. The visible descriptive text fills that role, since screen readers will read it.

Bold and italics

Use bold or italics with care. Screen readers don’t read this text as different than regular text. Bold and italics are also harder to read for people with neurodivergence.

Use clear words and concise text to avoid having to emphasize text in a special way.

If you have to use bold or italics:

• Avoid whole paragraphs of emphasized text.
• Use <strong> and <em> tags, not <b> or <i> tags.

Headings

Headings organize the content of a page. They also outline the hierarchy of the content. Screen readers announce headings and heading levels to visually impaired users. So correct use of heading levels is important for accessibility.

For full detail about headings, visit Heading levels.

Hidden text

We can create text for visually impaired users but hide it from sighted users. In accessibility we call this hidden text. 

Hidden text conveys information to assistive technology. Assistive technology can then convey information to users that they might otherwise miss.

An example of how hidden text works

Some sections of content don’t have a heading, like a set of accordions about property taxes. A sighted user sees the accordions and doesn’t need a heading to tell them the accordions exist.

But a user with a screen reader would not know the accordions exist. This would especially be true if they set their screen reader to scan the page using only headings. Hidden text would notify the screen reader the accordions exist.

Hidden text could say set of accordions with sub-topics about property taxes.

Link labels

Link labels are the text of a link. The label tells users where the link will take them such as a webpage or document. Users with screen readers will sometimes navigate a page from link to link. This makes meaningful link labels especially important.

Don’t use link labels that only say:

• Read more
• Learn more
• Click here

Make link labels specific and meaningful, for example:

• How to qualify for the homestead program
• Absentee voting process
• Apply for a library card

Be mindful of using language such as see (the page), look at (the information), or view (the content). These words assume users’ ability. Instead use inclusive language, such as visit, review, or access.

Tab titles

The tab title is text that appears in the browser tab. Screen readers announce tab titles when a user opens a new browser tab. Users with visual impairment then know which site or page they have open.

How to write tab titles:

• Use the H1 page title and website name.
• Separate them with the pipe character.

Examples of tab titles:

• Eye care | NorthPoint
• Home | Hennepin County Design System
• Property tax assessment | Hennepin County

Transcripts and closed captions

A transcript is a written record of the speech and sound within a video or audio file. Closed captioning is a display of real-time text of all audio within a video.

Auto-generated closed captions often have mistakes that mispresent the content. Platforms like YouTube and Vimeo have auto-generated closed captions. Correct any mistakes in those closed captions. Follow the platform's instructions for correcting closed captions.

Inaccurate closed captions may create legal risk for the county. They may fail to adhere to federal accessibility law.

Required text versions of video and audio:

• Prerecorded video without sound must have an audio description or text transcript available.
• Prerecorded video with sound must include synchronized captions. It must also include an audio description or a text transcript.
• Prerecorded audio only must have a text transcript available.