Accessibility Practices in Answers

 Instructions

Section 1.1: 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.

   Open

   

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.

Open

3. 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.2: 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

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: Can we bolden, capitalize, italicize, highlight, strikethrough, or underline our text?

Screen readers have the ability to read these attributes. However, very few screen reader users change the settings for to read them. This means that we do not need to use them to emphasize our text. If you were to use these attributes, use them as little as possible. You should also create a second way for people to see the text.

Bold Text Example

The students listed in bold made the baseball team.

• John McCune

• Chris Taverna

• Justin Rose

• Dan LaGrow

The students listed in bold made the baseball team.

• John McCune (callback)

• Chris Taverna

• Justin Rose (callback)

• Dan LaGrow

Capitalized Text Example

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

• THE SOLAR SYSTEM

• PLANETS

• STARS

• Neighboring Galaxies

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.5: NVDA Settings for Strikethrough

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.

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

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

 Related articles