Accessibility Tip of the Week: Columns, the right tool for the job

This week Robert Hardy, our district website accessibility specialist, shares about how to control the layout of a document using the Columns Tool. Please contact Robert with any accessibility questions. He is more than happy to talk by phone or schedule a time to meet with you.

One of the most important elements of creating accessible content is to use the right tool for the job. As so many of us are self-taught Microsoft Office users, we find ourselves relying on the tools we are familiar with, rather than the ones designed for the task.

For instance, we may use asterisks rather than bulleted lists, or bolded text rather than true heading styles. While this may visually create the structure of a document, it fails to provide the programmatic accompaniment needed for users of assistive technology. These methods also often require more work from the author for a less satisfactory end product.

One of the more problematic uses of the wrong tool is the use of tables to define a document’s layout, rather than using the columns tool. By using the table tool rather than columns, the programmatic structure of the document is one of a data table. This sets users of assistive technology up for trouble, as these tools will anticipate a data table and describe the page in terms of rows and columns. As is apparent from the example below, describing the second column as “_______________” isn’t very informative.

Name:_______________Date_______________
Class:_______________School_______________

Rather than use tables, using the column tool is the way to get the job done:

Name ______________

Class: _______________

Date:   _______________

School: _______________

To add a columned section to your Microsoft Word document, simply select the Column Tool from the Layout Ribbon and select how many columns you would like.

Now, for many, the column tool within Microsoft Word is initially unwieldy, pushing text into the wrong columns or leaving too much blank space. Thankfully, there are solutions.

To control the margins of your columns, you can select the columned space, click the Column Tool, and then select More Columns. You can then define the column width, the spacing between columns and even if you want columns to be different widths.

To control the flow of text between columns, you can insert column breaks that force the text below them to the next column:

  • Windows: [Ctrl]+[Shift]+[Enter]
  • Mac: [Cmd]+[Shift]+[Enter]

These two simple controls over the Column Tool remove its unwieldy nature and enable authors to use the right tool for the job. If you have questions about this or other accessibility features, please reach out to Robert Hardy, the district’s website accessibility specialist.

Accessibility Tip of the Week: Creating true lists and lists without bullets

Empty to-do list

This week Robert Hardy, our district website accessibility specialist, shares about how to create true lists in a digital document. Please contact Robert with any accessibility questions. He is more than happy to talk by phone or schedule a time to meet with you.

Underlying each digital document is a programmatic structure that is critical for users of assistive technologies. If elements such as lists are only created visually, without using the appropriate tools, this programmatic structure becomes inaccurate, creating confusion for many users.

The programmatic accompaniment is particularly important when it comes to lists, as the list would otherwise appear as a collection of very short paragraphs. There are two list types available to content authors: unordered and ordered lists. An unordered, or bulleted list, is the most common, and can be used in a wide variety of applications such as shopping or to-do lists. An ordered list uses numbers rather than bullet points and is frequently used to describe the steps in a process.

Both list types can be created easily within Microsoft Office, Google Docs or other software suites. Simply select either the bulleted or numbered list option from the main ribbon:

Microsoft Word screenshot. The home ribbon is active and the bulleted and numbered list options are highlighted.

By selecting these options, content authors ensure their documents have the correct programmatic accompaniment and can be understood by everyone in the community.

Lists without bullets

Sometimes, a list structure is required, but the visual bullets aren’t desired. Thankfully, both Microsoft Word and Google Docs allow for a bulleted list to be created without visual bullets:

Microsoft Word:

  1. Create your bulleted list using the steps described above.
  2. Highlight the bulleted list and select the down arrow beside the bulleted list option. Select Define New Bullet.
  3. The Customize Bulleted List menu will open. Under Bullet Character, select the blank space. This will replace the bullets within your list with blank spaces, creating a programmatic list without the accompanying visual elements.

Google Docs:

  1. Create a bulleted list using the steps described above.
  2. Highlight the list and then go to Format > Bullets & numbering > List options > More Bullet. This will open the Insert Special Characters menu.
  3. Click where Symbol is listed and change it to Format & Whitespace.
  4. Select the top leftmost blank square. This will replace the bullets within your list with blank spaces, creating a programmatic list without the accompanying visual elements.

If you have questions or tips regarding this or other accessibility concerns, please reach out to Robert Hardy, the district’s website accessibility specialist.

Accessibility Tip of the Week: Ensuring Sufficient Contrast

Colorful umbrella

This week Robert Hardy, our district website accessibility specialist, shares about how to ensure your content has a sufficiently high contrast ratio. Please reach out to Robert with any accessibility questions. He is more than happy to talk by phone or schedule a time to meet with you.

When designing content, it is important to consider the perceived contrast of text or graphical elements against their background.  Text with a low contrast ratio can be difficult to read and may cause issues with eye strain or reader fatigue.

The Web Content Accessibility Guidelines (WCAG), defines a minimum contrast ratio of 4.5:1 for regular text, and 3:1 for large text. For most textual content, black or dark gray text on a white background has a sufficiently high contrast ratio. For instance, the text within this blog has a ratio of 11:1, far surpassing the minimum threshold.

Care should be taken when changing font colors. Here are some examples of text color combinations and their ratios against a white background:

  • Low contrast gray text Ratio: 1.3:1
  • Sufficient contrast gray text Ratio: 4.6:1
  • Low contrast blue text Ratio: 1.9:1
  • Sufficient contrast blue text Ratio: 6.1:1
  • Sufficient contrast red text Ratio: 5.6:1

Additional care should be taken when altering background colors. Generally, including a background of the same color type will create contrast issues and should be avoided. Here are some examples of low contrast content using the sufficiently contrasted colors from above:

  • Low contrast gray text on a gray background text Ratio: 2.1:1
  • Low contrast blue text on blue background Ratio: 2.6:1
  • Low contrast red text on red background Ratio: 1.5:1

When designing graphical content, such as flyers or website layouts, it can be challenging to ensure sufficient contrast when placing text over an image. To do so, you can use design elements such as text shadows or text outlines, as we have done on our district page.

Screen Shot 2021-03-18 at 1.43.26 PM

By including a text outline, we are able to display white text over a complex, and occasionally white background.

Low contrast text is generally apparent to a content author, but these tools can help to check the contrast ratios of your content:

  • Colour Contrast Analyser – Works for both Mac and Windows and can check contrast across multiple applications.
  • Color Contrast Analyzer – Google Chrome extension that visually displays the perceived contrast of content. Useful for designing web content.

If you have questions about using these tools or ensuring the contrast of your content is sufficient, please feel free to reach out to Robert Hardy, the district’s Website Accessibility Specialist.

Accessibility Tip of the Week: Resources available on district website

Open book with many pages

This week Robert Hardy, our district website accessibility specialist, shares about accessibility resources. Please contact Robert with any accessibility questions. He is more than happy to talk by phone or schedule a time to meet with you.

The Olympia School District is committed to providing accessible content for our students and our community. To aid in this effort, the Communications department has created and gathered a wealth of resources on the creation of accessible documents and media for posting to the web.

These resources may be found on the district’s Website Accessibility Resources page, and they cover the most popular tools used within the district, including:

Please take advantage of these resources when producing content intended for the web. If you use a unique software suite, or if you have accessibility questions in general, please reach out to Robert Hardy for assistance.

Accessibility Tip of the Week – use scripts to generate captions

Clapperboard

This week Robert Hardy, our district website accessibility specialist, shares about how to create accurate captions for scripted content. Please contact Robert with any accessibility questions. He is more than happy to talk by phone or schedule a time to meet with you.

Providing accurate captions for video content is necessary to ensure it is accessible to everyone in our community. While manually typing and creating captions can be laborious, YouTube’s captioning tool automatically transcribes the audio from a video into text. By having YouTube do the heavy lifting, all that is left for staff to do is edit the captions for accuracy, as described in our captioning guide.

For scripted content, though, YouTube can do even more. By copying and pasting the video’s script into YouTube, YouTube can automatically sync the script and create accurate captions from it.

To create captions using a script:

  1. Upload your video to YouTube.
  2. Open your YouTube Studio and select Subtitles from the left-hand menu.
  3. Select the video you’d like to create captions for and you will be taken to the Video Subtitles menu.
  4. If YouTube has already created a rough draft of captions, you will have the option to “Duplicate and Edit” the automated transcript. If YouTube has not yet generated captions, select the Add button.
  5. You will be taken to the caption editing tool.
  6. Within the caption editing tool, you can toggle between “Edit as text” view, or a caption preview. To insert a script, you’ll want to be on the Edit as Text view which contains just a singular large text input box with an option to “Assign Timings” above it.
  7. Copy and paste your script into the text editing box.
  8. Select “Assign Timings” from the top. You may be given a prompt that says this may take a few minutes, if so, select Ok.
  9. You can review the timings of your captions by reopening the caption editor and previewing the captions.
  10. Once you are happy with the captions, select “Publish.”

If you have questions about this process or any other accessibility concerns, please reach out to Robert Hardy, the district’s website accessibility specialist.

Accessibility Tip of the Week: Changing Default Heading Styles

This week Robert Hardy, our district website accessibility specialist, shares about how to modify the default appearance of true headings in Microsoft Word 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.

Several staff members have asked if it is possible to change the default styling of the true headings within Microsoft Word and Google Docs. The answer is, thankfully, yes! Not only can the styling be altered within each document (as described in the MS Word and Google Docs quick-start guides), but the default styling can also be changed for future documents.

Google Docs

  1. Highlight the text you would like to make a heading.
  2. From the style drop-down in the top menu, select the desired heading level. In this example, it will be a Heading 1.Google Docs top menu. The Style menu drop-down is highlighted.
  3. Change the formatting of the heading text as you would like it to appear in this and future documents.
  4. Go back to the Style drop-down in the top menu and highlight the appropriate heading style. In the menu that appears, select ‘Update ‘Heading X’ to match’. This will update all text set to the same heading style within this document.Google Docs screenshot. The Style menu is activated, Heading 1 is activated, and Update Heading 1 to match is selected.
  5. Repeat the previous steps as desired for other heading styles.
  6. To save this styling as the default for future documents, return to the Style menu and highlight ‘Options’. Select ‘Save as my default styles.’Google Docs screenshot. The Style menu is activated, Options is activated, and Save as my default styles is highlighted.

Microsoft Word

  1. Right-click the appropriate heading style from the Home ribbon and select ‘Modify.’MS Word screenshot of the Home ribbon / Styles menu. Heading 1 has been right-clicked and Modify is highlighted.
  2. Within the Formatting section of the Modify Style menu, select the text properties you would like for this heading style.MS Word screenshot. The Modify Style menu is activated and the Formatting section is highlighted.
  3. Once the desired formatting has been achieved, check the ‘Add to template’ box. This ensures the heading style will be altered for future documents using the standard template.MS Word Screenshot. The Modify Style menu is activated and the checkbox Add to template has been checked and is highglighted.
  4. Click Ok.

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.

Accessibility Tip of the Week: Include tables when using graphs

This week Robert Hardy, our district website accessibility specialist, shares about the importance of including data tables alongside graphs when sharing data online.

When preparing data for publication online, special care should be taken to ensure it accessible to everyone in our community.

Using Graphs

Graphs are a powerful tool for sighted users, enabling readers to gain a quick understanding of not only broad datasets, but data trends. For users of assistive technology, however, graphs alone can be a challenge as they are generally created as static images containing text (this blog post covers the perils of images containing text).

Include true tables

To use graphs accessibly, it is critical to include the corresponding dataset in a table alongside the graph.

When including the data table, be sure not to include a screenshot of the table, as this once again returns to the issue of being an image of text. Rather, copy and paste your data from an existing document, or create a table in Word or Google Docs by going to Insert > Table.

Example graph, table included below
CityTuesdayWednesdayThursdayFriday
Seattle58615961
Olympia61636264

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. Unfortunately, unless these titles are programmatically defined, perceiving such relationships while using assistive technology can be incredibly laborious.

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.

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.

If you are preparing data for publication, or have any other accessibility tips or questions, please reach out to Robert Hardy, the district’s Website Accessibility Specialist.

Additional workshops set on creating accessible content and videos

Workshop sign

The Communications and Community Relations Department is offering additional Zoom workshops on creating accessible documents and videos. Learn how to incorporate accessibility into your workflow and efficiently create accessible content to share online. Staff are also welcome to bring their existing documents and brainstorm on how to create accessible versions for the web.

Creating Accessible Content

This one-hour course offers a broad overview of the components of accessibility, as well as how to create accessible documents to share online. Authoring tools covered include Microsoft Word, Google Documents, Microsoft PowerPoint, Google Slides and more.

Enhancing the Accuracy of Automatically-Generated Captions

Interested in creating accessible videos to share with our community? Attendees of this workshop will learn how to leverage YouTube’s speech recognition software to efficiently create captions. Tips include increasing the accuracy of the automatic captioning, how to edit the captions for grammar and spelling and how to correctly format captions for sounds or music.

If you have additional accessibility tips or questions, please reach out to Robert Hardy, the district’s website accessibility specialist.

Use Grackle’s Export to PDF feature when creating accessible PDFs

This week Robert Hardy, our district website accessibility specialist, shares about how to correctly export an accessible PDF when using Grackle.

Grackle is a powerful tool, available to all OSD staff, that simplifies the creation of accessible documents using Google Docs or Slides. Users of Docs or Slides can launch Grackle, scan their documents for accessibility concerns, and export tagged, accessible PDFs, which is ideal for posting to the web.

While regular users of Google Docs and Slides may be familiar with creating PDF versions of their documents by going to File > Download > PDF Document, this unfortunately does not create accessible PDFs. To create an accessible PDF, be sure to use Grackle’s Export to PDF feature.

Grackle Slides screenshot - Export to PDF is selected.

Selecting this option will create a ready to post PDF version of the file within your Google Drive.

General guides on using both Grackle Docs and Slides are available on the district’s Website Accessibility Resources page. If you have any questions about using Grackle, or other accessibility workflows, please reach out to Robert Hardy, the district’s website accessibility specialist.

Editing captions in Microsoft Word or Google Docs

Clapperboard

The YouTube captioning workflow is wonderful in that in negates the need to manually transcribe the audio from our videos, but automatically generated captions still require editing for accuracy. While this editing can be done directly within YouTube, as described in our captioning guide, users may prefer to edit their text within Microsoft Word or Google Docs.

Such a workflow enables users to utilize the more powerful text editing tools, such as spellcheck or find and replace, available within Word or Google Docs.  

To edit your captions in Word or Google Docs:

  1. Navigate to YouTube Studio and go to the Subtitles menu on the left.
  2. Select the video you wish to work on.
  3. On the Video Subtitles screen, select Duplicate and Edit. The transcript of the video will be displayed within the captioning tool.
  4. Select all of the text (Ctrl+A or Cmd+A) and copy it (Ctrl+C or Cmd+C).
  5. Open your preferred text editor and paste the text (Ctrl+V or Cmd+V).
  6. Edit the captions within the text editor and then select all and copy it.
  7. Return to the captioning tool, delete the previous text and paste in your revised text.
  8. Select Assign Timings and then Publish.

The Communications and Community Relations Department is offering an additional Zoom workshop on the YouTube captioning workflow on February 1. If you have captioning questions or tips in the meantime, please reach out to Robert Hardy, the district’s website accessibility specialist.