Why it matters

Imagine all the photos are missing from a website. Are you not getting some important information the pictures would convey? What words would make the image meaningful and functional? Use that wording to describe the image in the "alt" text.

Creating good "alt" text is important for anyone unable to see the images. This includes screen reader users, low bandwidth users, and search engines.

See detailed "alt" text examples on WebAIM.

Quick tips 

• Every image should have an "alt" attribute:
  

  • <img src="/-/media/help/branding-governance/images/300px-vegetables.ashx?la=en" alt="Healthy vegetable options include beans, tomatoes, cucumbers, squash, and peppers" />

• In Sitecore, right-click over the image and select "properties" to update the "alt" text.
• If an image is decorative only, you must still have an "alt" tag, but you can leave it blank like this: alt="". This tells screen readers to ignore the image.
• Don't use images with text in them because screen readers can't read it. Also, the words might scale too small to read on mobile devices, and it may get pixelated if a user zooms in closer due to vision issues. Instead, add that text in HTML above or below the image.
• If you use an image with text and also have the text in HTML below the image, that is called a redundant image. In that case, use a blank "alt" tag like this: alt=""
• If an image is a link, it must have descriptive text, either inside that same <a> tag or in the "alt" text.

  • <a href="/employees/healthy-incentives/pike-place-market.aspx" title="Pike Place Public Market sells healthy vegetable options including beans, tomatoes, cucumbers, squash, and peppers" /> <img src="/help/branding-governance/images/300px-vegetables.ashx?la=en" alt="" ></a>

    
    In the Sitecore editor, right-click over the link and select "properties" to update the "title" text.
• Always have a text version available for infographics. Please put the link to the text version before the infographic.

Why it matters

Don't create links that say things like: more, read more, more information, visit this link, or click here.

Instead, describe your target page in the link like this: find King County parks. Screen reader users often scan a web page by reading only the links. If a link doesn't have any text that says where the link is going, they might get a meaningless list of links, as in: more, more, more, more...

If you need to use a short link such as "read more," there are ways to add the description of the link for a screen reader user without showing that description to sighted users.

Quick tips

• Best: Put the description in the link text"
  <a href="/parks/trails.aspx">Find King County park trails</a>
• Still accessible: Add the description for a screen reader user only <a href="/parks/trails.aspx"><span class="sr-only">King County park trails</span> read more</a>
• Don't type out the full link URL as your link text, like this: find the trail at https://www.kingcounty.gov/services/parks-recreation/parks/trails.aspx
• Don't add your description in the title tag.

Why it matters

Screen reader users need to know if a link goes to an unexpected location because it can be confusing when another tab opens or the page does not reload because of a download. Mobile users need to be warned because they might be on a limited data plan.

Identify links that go to unexpected locations, such as:

• Other websites
• PDF documents
• PowerPoint presentations
• Word documents

To help users, add an icon after the link to indicate to sighted users that the link has unexpected behavior. For screen readers, add screen reader only text inside the <a> tag that indicates the unexpected behavior.

Where possible, put necessary content in a web page, not in a PDF file. This is the best user experience for all user types. If it needs to be an attached file, use PDFs rather than Word documents.

Microsoft Word is proprietary as well and an editable document that people can change on their own. Nearly all computers have a PDF reader and because it's not editable, it's the closest to a handout equivalent.

Examples of icons after links

• Somebody else's website external link
• Somebody's PDF download PDF PDF
• Somebody's slideshow download PowerPoint PPT
• Somebody's Word document download Word file DOC

Portal page link lists (with larger font size)

If we want an inline link, it looks like this: Word document download Word file DOC. As you can see, it doesn't get the bolder styling of the link. That is OK, but we also don't get the font color and weight that we get with the link lists.

This styling needs to work on any item in a page. Another issue is it is breaking the line spacing. A normal link doesn't change the line spacing of a paragraph. It's probably the icon that's adding the extra line spacing. Let's talk about whether this needs to be redesigned.

Why it matters

The two elements do different things and should not be interchanged. You even activate links and buttons with different keys.

A link navigates the user to a new resource, taking them away from the current context (internal links are the only wrinkle here). A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu using aria-haspopup. (Source: marcysutton.com)

Quick tip

The only times you’ll likely ever use the <button> element is when you create a form, or add a modal to the page. Never use a <button> element to link to another page or document.

There are UX and cognitive accessiblity issues with making links look like buttons. Buttons perform actions; links are for navigation.

Why it matters

Using acronyms is classic government insider-speak. It is not user-friendly to the typical website visitor. It is also problematic for blind visitors.

When abbreviations are necessary, use the full term at the beginning of the page with the abbreviation in parentheses following the word. You can use the abbreviation from then on.

Quick tips

• When your abbreviation is all caps, screen readers should spell it out. You do not need an <abbr> tag in this case:
  • DNRP
• If it is in all caps but you need it to be pronounced, you can use the <abbr> tag to tell the screen reader to pronounce it as a word:
  • <abbr>NASA</abbr>
  • <abbr>RASKC</abbr>
• If an abbreviation should not be read phonetically, use an <abbr> tag:
  • Call <abbr aria-label="mister">Mr.</abbr> Jones
  • Cost is $30/<abbr aria-label="month">mo</abbr>
• Spell out your abbreviation in an aria-label, not a title attribute.

Why it matters 

Visitors who can’t hear need to read the words spoken in a video. This is especially important for public hearings where citizens learn about their government and provide input.

Captions can also help with comprehension for those who can hear the audio, particularly those for who may not be fluent in the language spoken.

YouTube can create closed captions automatically using text-to-speech recognition, but captions need to be checked and edited to ensure accuracy.

Read more about making videos accessible

Quick tips

Captioning a video is not easy. There are four options:

1. Pay to have your video captioned. Many services can also do multiple languages.
   • A third-party service provides captions for Vimeo. Search Vimeo's help section for this service.
2. Start with an automated captioning tool—but you must still edit the captions.
   • Automated captions always have errors, which can be embarrassing or even problematic.
   • You will need to watch the video while editing the captions to make sure they are accurate.
   • Google and YouTube will not index automatically generated captions, which hurts SEO and could cause your content to be flagged as spam.
   • Available automated caption tools: YouTube, Camtasia.
3. Use the script you wrote for the video as the caption's starting point, and then edit the timing.
4. Create a transcript in YouTube while watching the video.

Why it matters

Some screen readers can’t interpret text that’s embedded in scanned documents. Solve this problem for your readers by using Acrobat Pro to convert images to text and fill out document properties to describe what the document provides.

Read "PDF Accessibility" (about a 4-minute read, external link) to learn the best ways to approach this, as well as the most common failure points.

Quick tips

• Open a PDF containing a scanned image in Adobe Acrobat Pro.
• Click on the "edit" PDF tool in the right page.
• Save.

How can I tell?

Use the mouse to highlight some letters in a document.

• If you can do that, the computer recognizes it as text.
• If not, the computer can’t tell letters are letters.
  • It can’t read them aloud.
  • A search engine won’t see the words.
• Example: is the PDF accessible?