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 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, 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.

White text over an image on the OSD website. The text has a gray outline applied to it, ensuring readability.

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 (6105), the district’s Website Accessibility Specialist.

Accessibility Tip of the Week: Exporting to PDF

Container ship being loadedThis week Robert Hardy, our district website accessibility specialist, shares about exporting documents to PDF. 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 publishing attachments to the web, it is recommended to use the PDF file type. PDFs are preferred as they do not place a burden on the end-user to own a specific software suite, they retain formatting across devices and they contain many built-in accessibility features.

Documents are generally created within an authoring tool such as Microsoft Word or Google Docs and then exported to PDF. Microsoft Office users can export an accessible PDF by simply changing the document’s file type while saving. Google Docs users can use Grackle to generate accessible PDFs.

Whatever the authoring tool, it is recommended to keep the original document available in case of future revisions. Revising a Word or Docs document is significantly easier than revising a PDF.

Microsoft Office Users – Saving as PDF

  1. Create an accessible document in Word or PowerPoint. Guides for these software suites can be found on the district’s Website Accessibility Resources page.
  2. Go to File > Save As.
  3. At the bottom of the Save As menu, select the File Format field.
  4. Select PDF.
  5. If given the option, select “Best for electronic distribution.”
  6. Click save.

Google Docs Users – Saving as PDF

Google Docs users are encouraged to install and use Grackle. Grackle acts as both an accessibility checker and a means for exporting accessible PDFs.

To install Grackle:

  1. Open a Google Docs document.
  2. Go to Add-ons > Get Add-ons.
  3. Search for ‘Grackle Docs,’ and then select Grackle Docs.
  4. Select Install.

To Run Grackle:

  1. In your Google Docs document, go to Add-ons > Grackle Docs > Launch.
  2. Grackle will open on the right side of the screen. Accessibility errors should be corrected as appropriate. A guide covering Google Docs accessibility and Grackle errors can be found on the district’s Website Accessibility Resources page.
  3. Select Re-Check to rescan your document for issues as necessary.

Exporting a PDF from Grackle:

  1. Once all accessibility checks are complete, select Export to PDF.
  2. On the Progress Monitor menu, leave the settings as the defaults and select Start. An email will be sent to you containing your accessible PDF.

If you have any questions about these processes, or accessibility in general, feel free to reach out to Robert Hardy (x6105) for assistance.

Website Accessibility Tip of the Week: Using True Headings

Open book with many pagesThis week Robert Hardy, our district website accessibility specialist, shares about using
true headings. 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.

Headings are used to break up large chunks of text and inform the reader of a document’s structure. Headings are created visually by enlarging, bolding or underlining text. While these alterations enable a sighted reader to skim a document, they do not provide the programmatic accompaniment necessary for a screen reader user to scan through a document.

Fortunately, adding true headings to a document is a straightforward process. To add
headings in Word or Google Docs, simply highlight the intended text and select the appropriate heading style from the top ribbon. Guides for each software suite are available on the district’s Website Accessibility Resources page.

Heading styles typically range from Heading 1 (H1) to Heading 6 (H6), with heading
levels 1-3 being the most common. Rather than using headings in consecutive order, authors should nest headings, creating a built-in table of contents. The document title would be a Heading 1, chapter titles would be Heading 2 and subsections would be Heading 3. The resulting document structure would be:

  • Heading 1 (document title)
    • Heading 2 (chapter titles)
      • Heading 3 (subchapter titles)
    • Heading 2
      • Heading 3
      • Heading 3
        • Heading 4

A screen reader user can access a Headings menu that allows them to navigate through
the document structure, enabling them to skim a document and find just the pertinent
sections.

Beyond increasing accessibility, the use of true headings grants the author greater
control over their document structure. Heading styles can be customized en-masse, and an interactive Tables of Contents can also be added to a document using the heading structure as a basis. For more information on these techniques, see the blog post The Increased Efficiency of True Headings.

For more information on true headings, and other elements of semantic structure,
consider attending the Accessibility – Semantic Structure workshop on October, 21, 2019. In the meantime, if you have questions about headings or other accessibility issues, please reach out to Robert Hardy at Ext. 6105.

Accessibility Tip of the Week: Resources available on district website

Stack of booksThis week Robert Hardy, our district website accessibility specialist, shares about accessibility resources. 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.

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 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 documents 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 (x6105), for assistance.

Workshops offered for staff to learn how to make accessible content to post online

Workshop sign

This year the Communications Department will offer a wealth of training opportunities focused on creating accessible content. Learn how to incorporate accessibility into your document workflow and efficiently create accessible content to post online.

In addition to topic specific workshops, the Communications and Community Relations Department is also excited to offer a new open workshop on accessibility. Do you have questions about creating accessible flyers, or do you have a unique document workflow? Attendees are invited to bring these and other questions to discuss and brainstorm.

More information and links for registration can be found in the Fall 2019 PD Catalog, or at the links below:

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.  Have a great year!

Accessibility Tip of the Week: Make documents POUR

Tea being pouredThis week Robert Hardy, our district website accessibility specialist, shares about making documents POUR. 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 considering the accessibility of a document or piece of content, it can be easy to focus on the technical details. Are the alt tags included? Is this form fillable? What is lost in this approach is the understanding of the end user and how they will interact with the content.

The Web Content Accessibility Guidelines (WCAG) provide a framework for document review that is less technically focused, and instead focuses on the experience of the end user. This framework can be helpful when considering the life cycle of a document and deciding upon the best route toward accessibility compliance.

The framework is called POUR. Documents must be:

  • Perceivable – Can the document be easily perceived? Are there contrast issues, or is text locked in an image?
  • Operable – Are interactive elements set up in a way that enables interaction? For most text documents, this is not a concern, but it does arise when creating forms or designing websites. Interactive elements must be operable with both a keyboard and a mouse.
  • Understandable – Is the language as clear and concise as possible? Consider the intent of your message and remove additional clutter.
  • Robust – Can the content be accessed across a wide range of devices? PDFs are a robust document solution for desktop and mobile devices. The SchoolMessenger and Schoology platforms have also been designed to be robust.

Taken together, these principles provide a non-technical framework with which to consider your content.

For additional accessibility tips, consider attending an upcoming accessibility workshop. A complete list of summer workshops is available in the Summer 2019 Professional Development Catalog. In the meantime, if you have questions or tips regarding accessibility, please reach out to Robert Hardy, the school district’s website accessibility specialist, at extension 6105.

Accessibility Tip of the Week: Be mindful of images containing text

Princeton open house flyer. All event details, including location, attendees and time are included within the image.This week Robert Hardy, our district website accessibility specialist, shares about being mindful of images containing text. 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 producing content for the web, it is important to be mindful of images containing text, such as event flyers. These images can present a challenge for accessibility, as the text contained within them is not ‘true text’, but is actually part of a rendered image. This practice effectively locks away much of the content for those who rely on assistive technology such as screen magnifiers or screen readers.

To test if your content is locked away in an image, try selecting the text with your mouse or keyboard. If you cannot select it, it is locked away and must be presented in an alternative format.

For shorter content, adding the text to the alternative text tag for the image should be sufficient. Steps on creating these tags are included on the Website Accessibility Resources page.

While this may work well for short pieces of content, longer documents, such as the flyer below, require more space than an alternative text tag would allow. In these cases, the relevant content should be placed in the copy alongside the image.

This practice not only improves the accessibility of your document, but also has the added benefit of improving the likelihood of your content appearing in search engines such as Google. Search engines are, after all, advanced screen readers!

As always, if you have any accessibility tips or questions, please reach out to Robert Hardy (6105).