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:

• Google Docs
• Microsoft Word
• Google Slides
• Microsoft PowerPoint
• Excel
• SchoolMessenger pages
• Schoology pages

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 the Communications Department.

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.

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 the Communications Department.

Accessible design has the potential to positively impact everyone, regardless of whether or not we perceive ourselves as having a disability that directly impacts computer use. This is because accessible design doesn’t exist within a vacuum, but rather, is an implementation of universal design principals. By making our content more accessible for some, we inherently make it more accessible for all.

In the physical world, this is perhaps best demonstrated in the application of curb cuts. In the 60s and 70s students at Berkley with mobility issues strove for greater independence and advocated to get curb cuts installed across the city. As their adoption became more widespread, however, others began to reap the benefits of a more accessible environment. Bike riders, and people pushing a stroller or shopping cart, appreciated the more universal design. Now it would be almost inconceivable to build a sidewalk devoid of ramps. By improving conditions for one segment of the population, the students at Berkley improved them for everyone.

While the physical world may be predefined, we have a unique opportunity in the digital realm. The virtual world is one we are actively building, and by taking universal design principals into account, we not only enhance the independence of those with disabilities, but we also improve the experience for everyone else. Closed captions can be quite handy when viewing a video in a noisy, or quiet, environment. Similarly, alt tags can fill in the gaps left by images that fail to load on a slow internet connection.

In this, more accurate framework, the population that benefits from accessible design expands drastically. It expands universally. This can be helpful to keep in mind as we progress along the continuum of accessibility. Be selfish in your design decisions. In doing so, you’ll help everyone else.

The Website Accessibility Resources page has guides covering the steps involved in incorporating universal design into your digital presence. If you have questions regarding creating accessibkle content, please reach out to the Communications Department.

Some images are difficult to describe succinctly. Images such as graphs or flow charts don’t lend themselves to simple interpretation, and can be concerning when approached from an accessibility standpoint.

In actuality, these complex images can be simple to make accessible. Rather than provide an alternative text tag, the author can include additional content alongside their complex image. This additional content not only enhances accessibility, but also improves the user experience overall.

Graphs

When it comes to graphs or charts, the easiest and most accessible route is to provide a data table alongside the image. Take for example this graph showing the high and low temperatures across a week:

While the chart does well to show trends, the true numerical values are locked within the image itself. Including a corresponding data table is particularly helpful in conveying exact figures and ensures the data is accessible to all. 

Temp	Sunday	Monday	Tuesday	Wednesday	Thursday	Friday	Saturday
High	40	32	34	39	42	38	33
Low	32	15	14	22	27	28	16

Doing this also enables users to copy and paste the data. A live example of this practice can be seen on the district’s 2018 Annual Report.

Flow Charts

Another complex image type is a flow chart. Take for example this flow chart from the Capital High School Course Catalog:

Similar to the graph above, a flow chart can be challenging to describe in paragraph form. What can be included to enhance accessibility? In this case, the answer would be to include the flow chart in list form alongside the graphic. This flow chart could be displayed as:

• Algebra 1 (required)
  • Geometry (required)
    • 4-year college path options (Meets 3rd math credit)
      • Algebra 2 (C or better in Geometry)
        • IB Discrete (B or better in Alg2)
          • Pre Calculus (B or better in Discrete)
        • Pre Calculus (B or better in Alg2)
          • IB Calculus SL (B or better in Pre Calc)
            • IB Calculus HL (B or better in Calc)
    • Non 4-year college options (Meets 3rd math credit)
      • Financial Algebra (Alg & Geom)
      • Precision / Bicycle Manufacturing (Alg & Geom)
      • Robotics Math (Alg & Geom)

Similar to the chart and table example, this simplified layout also allows for content to be copied and pasted later on.

By providing alternatives in these ways, we can work not only to enhance the accessibility of our content, but also the general usability.

As always, if you have any questions regarding creating accessible content, please reach out to the Communications Department.

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:

• Google Docs
• Microsoft Word
• Google Slides
• Microsoft PowerPoint
• Excel
• SchoolMessenger pages
• Schoology pages

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 the Communications Department.

As a teacher in the Olympia School District, you will have heard a lot about accessibility. Here is a summary of what accessibility is, how it pertains to you, and how you can ensure greater access for everyone in our community!

What is accessibility?

Accessibility means creating digital content that can be understood by our entire community, including those with visual, auditory, cognitive, or motor disabilities. In general, this means we want to create content that works with assistive technology, such as screen readers or screen magnifiers.

What does this mean for OSD staff?

Put simply, all content posted to the web, be it SchoolMessenger or Schoology, must be accessible. While this may initially sound daunting, the workflow for creating accessible content is relatively straightforward.

Creating Accessible Content

There are many aspects to creating accessible content, but there are two elements that come into play most frequently:

Headings

True headings consist of section titles, which enable users of assistive technology, such as screen readers, to skim through a document. While section titles may be created visually using bolding, larger font sizes or underlining, these do not provide a programmatic accompaniment to the text.

In most software, creating a true heading is as simple as highlighting a piece of text and selecting the appropriate heading style. Guides for each piece of software can be found on the district’s Website Accessibility Resources page.

Alternative Text

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. Good alternative text describes both the content and the function of an image, ensuring the meaning of the image is conveyed to all users.

Alternative text can easily be added in most  software programs – steps can be found on the district’s Website Accessibility Resources page.

Publishing Content

Once content includes true headings and alternative text, the author should consider how they intend to publish their content. There are two options, either posting the content directly to a page, or including the document as an attached PDF.

On-page content

Content published directly onto a webpage, either in Schoology or on a SchoolMessenger teacher page, is natively quite accessible. Content written in Google Docs can easily be copied onto one of these platforms. Content from Microsoft Word will require the images to be added back in and alternative text to be added.

Attached PDFs

If an attachment is preferred, the document should be saved as a PDF and then posted to the web. Accessible PDFs can be created using either Word or Google Docs. Word users can simply go to File > Save As > and change their file format to PDF. Google Docs users will need to use Grackle to create an accessible PDF. Detailed steps for both software suites can be found in the blog post Exporting to PDF, or on the district’s Website Accessibility Resources page.

Multimedia

For video content to be accessible, all meaningful audio must be captioned. By utilizing YouTube’s speech recognition software, staff are able to create captioned video content for our community.

Videos should be uploaded to YouTube, and then the automatic captions should be edited for accuracy, punctuation and timing. More information on increasing the accuracy of automatically generated captions can be found in this captioning guide.

Conclusion

Creating accessible documents not only ensures more of our community can enjoy our content, but it also often results in efficiency increases. If you have questions about creating accessible content, please feel free to reach out to the Communications Department.

The Communications and Community Relations department has put together a new screencast covering how to create accessible content in Google Slides. This ten minute video demonstrates building new slides, including data accessibly and adding captions to a live presentation. It also covers how to use Grackle to scan your documents for accessibility concerns and export a final, ready to post PDF.

Quick-start guides covering these tools, as well as how to create accessible content in other software suites, are available on the Website Accessibility Resources page. If you have questions or tips regarding creating accessible content, please reach out to Robert Hardy, the district’s website accessibility specialist.

The Communications and Community Relations department has put together a new screencast covering how to create accessible content in Google Docs. This ten minute video demonstrates the correct use of headings, alternative text, tables, lists and columns. It also covers how to use Grackle to scan your documents for accessibility concerns and export a final, ready to post PDF.

Quick-start guides covering these tools, as well as how to create accessible content in other software suites, are available on the Website Accessibility Resources page. If you have questions or tips regarding creating accessible content, please reach out to Robert Hardy, the district’s website accessibility specialist.

The Communications and Community Relations department has put together a new screencast covering how to create accessible content in Microsoft Word. This ten minute video demonstrates the correct use of headings, alternative text, tables, lists and columns. It also covers how to scan your document for accessibility issues and export a final PDF.

Quick-start guides covering these tools, as well as how to create accessible content in other software suites, are available on the Website Accessibility Resources page. If you have questions or tips regarding creating accessible content, please reach out to Robert Hardy, the district’s website accessibility specialist.

This week Robert Hardy, our district website accessibility specialist, shares about making documents POUR. Please contact Robert with any accessibility questions. 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? Are data tables included alongside graphs?
• 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.

If you have any questions or tips regarding creating accessible content, please reach out to Robert Hardy, the district’s website accessibility specialist.