Accessibility Practices in Answers

Owned by Daniel LaGrow, created
Last updated: Oct 03, 2024
7 min read

Instructions

Section 1.1: Text Attributes

Answers provides you with only one font to use. The font is accessible to use for your articles, however, you should be aware of the rules for using special attributes. Special attributes like using bold, italic, strikethrough, and underlined text should be avoided. Screen readers can read these attributes, but only if certain settings in the screen reader are adjusted. Not many people make these changes, so a screen reader may not be able to inform the reader that a text attribute is being used. This means that normal text and text with an attribute will sound the same. In short, do not use text attributes unless there is a special circumstance.

Bold Text Example

The students listed in bold made the baseball team.

  • John McCune

  • Chris Taverna

  • Justin Rose

  • Dan LaGrow

This example shows two people’s names bolded. The screen reader will read all of the names, but will not help the reader know who made the team.

The students listed in bold made the baseball team.

  • John McCune (callback)

  • Chris Taverna

  • Justin Rose (callback)

  • Dan LaGrow

This example shows the text bolded and has an additional queue. The “(callback)” queue will be read by screen readers, and it will be easier for a reader to understand the content.

Capitalized Text Example

Topics in capital letters will be covered on Friday’s Science Exam.

  • THE SOLAR SYSTEM

  • PLANETS

  • STARS

  • Neighboring Galaxies

Many of the words in this example had capital letters. The screen reader will not make any distinction between capital and lower case letters and read them the same way.

The following subjects will be covered on Friday’s Science Exam.

  • The Solar System (covered)

  • Planets (covered)

  • Stars (covered)

  • Neighboring Galaxies

Italicized Text Example

The students listed with italic text made the baseball team.

  • John McCune

  • Chris Taverna

  • Justin Rose

  • Dan LaGrow

The students listed with italic text made the baseball team.

  • John McCune (callback)

  • Chris Taverna

  • Justin Rose (callback)

  • Dan LaGrow

Underlined Text Example

The students listed with italic text made the baseball team.

  • John McCune

  • Chris Taverna

  • Justin Rose

  • Dan LaGrow

The students listed with their names underlined made the baseball team.

  • John McCune (callback)

  • Chris Taverna

  • Justin Rose (callback)

  • Dan LaGrow

Section 1.2: NVDA Settings for Text Attributes

A screen reader reads text with strikethrough like normal text. So when you use strikethrough, be sure to modify the settings in the screen readers.

  1. In NVDA, go to the Preference Tab, the click Document Formatting.

    The NVDA Settings with Document Formatting highlighted in a red box.

  2. Select the Font Attributes check box in the pop up box.

    Document Formatting Page with Font Attributes and Apply button highlighted in a red box.

  3. In JAWS, you can examine the font attributes at the cursor, including whether or not there is strikethrough, by pressing INSERT + F.

Section 1.3: Color contrast

If you want to use multiple colors in your text, you should always consider the color’s contrast. The contrast is determined by two factors, the text color and the background color. In our text right now, the text color is black, and the background color is white. Black text on a white background gives us the best possible contrast ratio of 21 to 1. If you were to use other colors for the text, like red or green, the color contrast would be lower. The same is true for the background. Try keeping the contrast ratio above 4.5 to 1. The Adobe Color Contrast Analyzer is a great resource for testing colors and backgrounds.

Section 1.4: Creating a Link

When creating a link for an Answers article, we want to make our link easy to see, read, and access. When creating an accessible link in Answers, follow these simple rules.

  1. Visual Queues: Every link needs two visual queues to make them accessible. A visual queue will help the link stand out from the surrounding text. The best visual queues you can use are underlining the link, and changing the text color. In most cases, a link’s text will turn blue for you. To underline the link, highlight your text, go up to the menu at the top of the page. Click the More Formatting button, then click Underline.

  2. Avoid URLs, use words instead: A common mistake that is made when creating links is to only use URLs. While URLs do tell readers where the link will go when clicked, they are not accessible for students who use screen readers. If a student using a screen reader tried reading a URL, it will be read one letter, number, or character at a time. This is very time consuming and does not help anyone with learning what the link is. To fix this issue, we will move away from using URLs and create “Descriptive Links.” These types of links will describe what the link is with meaningful text. For videos, and other special links, Answers will give you four different link sizes to choose from. Please only click on the smallest link size, which is text based. The other link sizes will not pass accessibility checkers, so we need to avoid them.

    1. To make your link descriptive, place your link in the article.

    2. Click on the link and click Edit Link. In Display Text, type in a description of your link.

    3. Click Save.

  1. Context: If you are using full URLs as a way of providing examples in your articles, be sure they are unlinked. That way they will be read as normal text. In general, I always recommend keeping the use of URLs to a minimum for the purpose of keeping the content simple and easy to read. With this in mind, all of the links on your page should be descriptive links with examples being an exception. It does not matter if the link is for an email address, a webpage, or a source.

Section 1.5: Alternative Text (Alt Text)

When adding an Alternative Text or Alt Text to an image, there are two things to consider. The first is to decide on the type of alt text you need for the image. The first type of alt text is a brief description of 150 characters or less describing your image to the reader. This is very important for students who use screen readers because screen readers cannot read an image. If there is no alt text, the image will just be skipped over. The alt text will give the screen reader a description to tell the reader what the photo is. The trick to making a good alt text is to keep the description simple while telling as much as you can.

How to add Alternative Text (Alt Text) to your images.

  1. Click on the Edit icon to edit your article.

  2. In Edit mode, click on your image and click Alt Text.

  3. Type in a brief description of 150 characters or less of your image.

Tip: If you see “Edit Alt Text”, that means you already have an Alt Text in your image.

How to make your image an artifact or decorative in Answers:

  1. Click on the Edit icon to edit your article.

  2. In Edit mode, click on your image and click Alt Text.

  3. Type in “Decorative” or “Artifact” in your Alt Text box

Related articles