Accessibility Tip of the Week: Don’t rely on color alone to convey meaning

This week Robert Hardy, our district website accessibility specialist, shares about how to use color to enhance design — not drive it. Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.

When designing content for the web, be sure not to rely on color alone to convey meaning. Use color to enhance design, but not drive it. Colorblind or screen reader users may not be able to easily perceive differences in color, which can create confusion.

Take for example the graph below showing this week’s high temperatures in Seattle and Olympia.

High temps for Seattle and Olympia are shown, with Seattle represented by a blue line and Olympia represented by a orange line

While this may appear to clearly convey the data, looking at this graph with the colors removed quickly reveals problems. What line represents each city?

The same high and low temps line graph is shown, but with colors removed. Both Seattle and Olympia are represented by black lines, creating confusion.

By adding texture to the lines in the graph, line labeling can be clear, regardless of the colors being used.

Color Alone3 (1)

To make these graphs even more accessible, the author could also include the accompanying data table, as was discussed in the Providing Alternative Text for Complex Images blog post.

When working with text alone, additional differentiation could be added through bolding, underlining or the inclusion of accompanying symbols. These tools enable color to accentuate a message, rather than convey it. Always consider what information would be lost if the document was converted to grayscale.

If you have any accessibility tips or questions, please reach out to Robert Hardy (6105), the district’s Website Accessibility Specialist.

Accessibility Tip of the Week: Working with tables in Microsoft Office and Google Docs

This week Robert Hardy, our district website accessibility specialist, shares about working with tables in Microsoft Office and Google Docs. Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.

One way to make your content more accessible is to include tables alongside graphs or charts. Including a table not only enhances the accessibility of the document, it also allows data to be easily extracted for future use.

When adding a table, it is important to take a few steps to ensure the table is accessible.

Use True Tables

Be sure to use true tables within your documents, rather than tables built using the tab key. To add a table in Microsoft Word or Google Docs, go to Insert > Table and select your table size.

Mark table row and column headers

When reading a table, users will glance up or to the left to see column or row headers. These titles allow a reader to comprehend relationships within the data.

3 empty table examples. The first table contains no headers. The second table includes a header row. The third table includes a header row and column.

Unfortunately, unless table row and column headers are programmatically defined, they are inaccessible for a screen reader user.

Microsoft Office

To mark a column or row title in Microsoft Word or PowerPoint:

  1. Select the table.
  2. Go to the Table Design ribbon.
  3. Ensure Header Row and First Column are selected appropriately. Header Row signifies a row of column titles, while First Column denotes row titles.

If your table spreads over multiple pages, you will also want to ensure Repeat Header Rows is selected under the Table Layout ribbon.

Google Docs

Users of Google Docs can use Grackle Docs to create accessible tables:

  1. Open the Grackle add-on by going to Add-ons > Grackle Docs > Launch. The Grackle Docs add-on will launch on the right side of the screen.
  2. Grackle will recognize that a table has been included without a header row or column. The error will appear as “Tables must be tagged or marked as layout tables.”
  3. Click “+Tag” beside the error to enter the Tag Table menu.
  4. In the Tag Table menu, select the appropriate options from the “Mark first row as header” and/or “Mark first column as header” options.

Avoid blank or merged cells

If you are converting your final document to PDF, it is recommended to avoid blank or merged cells in your table. Blank or merged cells can confuse Adobe Acrobat, creating tables that are misleading or downright inaccessible. Populate blank cells with meaningful data, or with a placeholder such as inserting three hyphens in the cell. If your table has merged cells, usually contained within a header row, consider if the table can be broken into two simple tables.

For tips on working with tables in other software suites, please refer to the district’s Website Accessibility Resources page. If you have additional questions or tips, please reach out to Robert Hardy at extension 6105.

Accessibility Tip of the Week: Marking images as decorative

Olympia School District Staff Directory

This week Robert Hardy, our district website accessibility specialist, shares about when to label an image as a “decorative image.” Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.

When choosing an alternative text for an image, one option is to label the image as decorative. By marking an image as decorative, authors can indicate the image adds no additional information to the content.

The majority of decorative images are simply aesthetic flourishes such as decorative page breaks or content borders. While visually appealing, these images can create meaningless clutter for a screen reader user. By marking these elements as decorative, authors enable screen reader users to skip over them and focus solely on the content.

Beyond design elements, other images may also be considered decorative, so long as they do not add additional information to the page. For instance, consider the district’s staff directory. It includes profile pictures alongside a name. The likely alternative text for such an image would be the individual’s name, but that information is already included in the accompanying text. By marking the image as decorative, a screen reader user is saved the experience of hearing each name twice, and no meaningful information is lost.

While choosing the correct alternative text for an image is a decidedly subjective task, it can be helpful to keep in mind the content and function of the image. Why is the image included? Would the message be the same without the image? If so, consider marking it as decorative.

To mark an image as decorative in HTML, set the alternative text tag to two quote marks with nothing between them. This alt=”” is universally understood by screen reader users. Software suites, such as Microsoft Office 365 or Acrobat Pro, also allow the author to mark images as decorative.

For more information on crafting alternative text and other accessibility concerns, see the district’s Website Accessibility Resources page.

Register for upcoming accessibility workshops

Workshop sign

New accessibility workshops for Olympia School District staff have been posted on pdEnroller. Learn how to incorporate accessibility into your document workflow and efficiently create accessible content to post online. Staff are also welcome to bring their existing documents and brainstorm on how to create accessible versions for the web.

New and upcoming workshops include:

Beyond workshops, the Olympia School District’s Accessibility Specialist, Robert Hardy (6105), wants to help you! Please reach out with any accessibility questions, or to schedule a time to meet one-on-one.

Accessibility Tip of the Week: The increased efficiency of true headings

This week Robert Hardy, our district website accessibility specialist, shares about the increased efficiency of true headings in documents.

Outside of enhancing access to content, one of the benefits of creating accessible documents is the greater control it gives to the document author.

Many Word and Docs users are self-taught, and as such, learned to create titles and headings by enlarging the font, changing the alignment, bolding the text, and occasionally underlining it. This process is cumbersome at best, requiring each heading to be styled individually. It also doesn’t provide an accompanying programmatic markup for the software. Is the content bolded for emphasis, or is it bolded as a title? Curious readers want to know.

By creating true headings in the accessible way, using the heading styles in Word or Google Docs, the efficiency of the workflow is greatly improved. Rather than the process described above, the author can simply highlight the text and pick a heading style. This provides both a visual and programmatically defined heading.

Microsoft Word screenshot - heading styles

If the author decides to change the visual layout of their headings down the line, changes can be made en masse, rather than to each heading individually. By changing the styling of just one heading, going to the Headings Styles Pane, right clicking and selecting “Update Heading X to Match Selection”, each instance of that heading type will be updated. This is not only much more efficient, but also ensures consistency throughout a document.

Microsoft Word screenshot - heading styles menu. A heading style is right-clicked and 'Update Heading 1 to Match Selection' is highlighted.

In Microsoft Word, true headings can also be used to create a table of contents. This is particularly helpful for longer documents. Simply go to the References ribbon and select the Table of Contents button. A fully functional table of contents based on the heading structure will be inserted.

Microsoft Word screenshot. The References ribbon is active and Table of Contents is highlighted.

These types of efficiency gains are common across different software suites, and are a pleasant example of the benefits of designing our content for the broadest audience possible.

If you have questions about true headings, or other aspects of accessibility, please feel free to reach out to Robert Hardy (x6105), the district’s website accessibility specialist.

Accessibility Tip of the Week: Adding Alt Text in Microsoft Office and Google Docs

Blank canvas hung on wall

This week Robert Hardy, our district website accessibility specialist, shares about adding alternative text in Microsoft Office and Google Docs. Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.

A screen reader operates by synthesizing text into speech. When it encounters an image, it requires a description of the image to read to the user. This description is called alternative text.

Effective alternative text describes both the content and the function of an image, ensuring the meaning of the image is conveyed to all users. A good way to approach writing alternative text is to consider what information would be left out if the image was missing.

Microsoft Office

Newer versions of Microsoft Office allow alt text to be added by right-clicking an image and selecting “Alt Text.” Both a Title and a Description field will be available – filling in just the Description field is sufficient as most screen readers ignore the Title field.

To add alternative text in an older version of Microsoft Office:
Microsoft Word Format Picture Menu. The Size and Properties tab is selected, and the Alt Text option is expanded. The Description field is highlighted.

  1. Right-click the image and select Format Picture.
  2. Select the Size and Properties icon.
  3. Expand the Alt Text option.
  4. Enter alternative text into the Description field.

Google Docs

Google Docs screenshot. The Alt Text menu is displayed and the Description field is highlighted.

  1. Right-click the image and select Alt Text.
  2. Enter alternative text into the Description field.

Including alternative text is essential to creating accessible content. Guides on including alternative text in your other content may be found on the district’s Website Accessibility Resources page.

If you have questions about alternative text, or other aspects of accessibility, please feel free to reach out to Robert Hardy (x6105), the district’s website accessibility specialist.

Accessibility Tip of the Week: Microsoft Office Accessibility Checker

Person appears to be ready to mark a checklist of items. Next to person doing this is a laptop computer.

This week Robert Hardy, our district website accessibility specialist, shares about the Accessibility Checker in Microsoft Office.

The Accessibility Checker within Microsoft Office is a powerful tool that can be used as a final step in document creation. The steps involved in running the Accessibility Checker differ depending on your operating system, but are quite straightforward. Please note these steps are the same for both Word & PowerPoint.

  • Mac– Go to the Review ribbon and select “Check Accessibility.
  • Windows– Go to the File menu and under Info, select “Check for Issues” and then “Check Accessibility.”

The Accessibility Checker will open on the right side of the screen and will contain a list of issues located within the document. The quick-start guides located on the district’s Website Accessibility Resources page cover each of these errors and how to resolve them.

When working with older Word documents, users may receive the error “Cannot check the current file type for accessibility issues.” To resolve this error, go to File & Save As. In the Save As window, select the File Type option and select “Word Document (.docx).” The Accessibility Checker should now be able to run without errors.

Accessible content from Microsoft Word documents can either be copied and pasted directly onto a SchoolMessenger or Schoology page, or exported as an accessible PDF.

As always, if you have any accessibility tips or questions, please feel free to reach out to the district’s Website Accessibility Specialist, Robert Hardy at extension 6105.