“I’m not all there myself.”
Approaching Online Accessibility
Annette Mills
Full-Time Math Instructor
What’s the big deal with accessibility?
In general, accessibility is about making resources for ALL.
In short, accessible materials should be...
Color Contrast
High Color-Contrast
Color contrast is the color difference between you text, links, icons, images, etc. and the background of your resource.
Think about your classroom slides. Do your slides have a high color-contrast?
How does this affect your students?
High Color-Contrast Ratio
Color-Contrast is assessed using the brightness of colors compared in a ratio.
A white text on a white background has a contrast ratio of 1:1.
A black text on a white background has a contrast ratio of 21:1.
Aim for a contrast of 4.5:1 or greater.
High Color-Contrast Checker
Many sites and resource builders provide templates and themes with color contrast in mind.
But when in doubt (or when creating your own theme), use the WebAim Color Contrast Checker.
Speak the Language…
Colors are named using a RGB hexadecimal format.
Find your current colors using Colorzilla (a Google Chrome Add-on).
Or find new colors using the Color Picker by Dixon and Moe.
Check the contrast...
Check the contrast of the text versus the background. Does it meet the requirements?
Does the color contrast of this image meet the requirements?
Poor Contrast
Both images do not meet the minimum requirements of color contrast for text versus background.
Even though you can read these images, it may be difficult for others or cause strain on the eyes.
2.04:1
3.12:1
Make a Theme
Making a theme is a lot easier than you would think. Take a look at the following articles to see how. It will save you so much time!
Make a Theme - Google Docs
To make a theme in Google Docs, you will use the style selector in the formatting toolbar. When you scroll over the format you would like to set, a side menu will appear with the option to “Update ‘_____’ to match”. After you have changed all of your styles, at the bottom of the style selector, within options, will provide you with the option to “save as my default styles”.
Make a Theme - Word
To make a theme in Word, under the Design tab, select the Colors dropdown to set a custom color theme. Then once you have created you sizes for headers and body text (by changing the style one the page for headers and body text), select the Themes dropdown and select “Save Current Theme”.
Navigation
Easy to Navigate
Easy to navigate resources can help students to interact and learn with ease. Visible navigation allows students to locate important information: title, headers, links, etc.
Document with formatting
Document without formatting
Behind the Scenes Formatting
While it may be easy to apply a format that is visible to users to a resource, there is also a format that goes unseen that must be considered.
This background format is especially important for anyone using a screen reader.
Background formatting helps with identifying different sections of a resource, alternative text, and most importantly reading order.
Headings
It is best to think of document headings as a table contents. Every document should have at least a title, and first level heading. The following are the different heading levels:
Title
Heading 1
Heading 2 (multiple allowed)
Heading 3 (multiple allowed)
Heading 4 (multiple allowed)
Normal Text
On the document, the Heading 1 heading is the title that is visible to the readers. The Title heading is hidden and used by screen readers.
Microsoft Word Headings
A Title heading can be added in Microsoft Word by going to the “File” tab. Under properties, you will find the option to “Add a title”.
All other heading levels can be selected using the “Styles” table from the toolbar under the “Home” tab.
Google Doc Headings
A Title can be added in Google Docs by placing the cursor above the toolbar where it says “Untitled Document” and replacing the text.
All other heading levels can be selected using the “Styles” drop down to the left of the font styles on the toolbar.
Pages Headings
A Title can be added in Pages by by placing the cursor at the top of the window where it says “Untitled” and replacing the text.
All other heading levels can be selected by using the format tool and selecting the drop down menu at the top of the format toolbar.
Reading Order
Reading Order is important when it comes to screen readers! Reading Order is another unseen formatting element. This is especially important when your resource contains elements other than text.
You may be most familiar with the “Bring to _____” options, but there are helpful tools that can make the organization easier.
Google Reading Order
Microsoft Reading Order
In PowerPoint and Word, reading order can be accessed with a selection tool that allows you to drag and drop the reading order of elements.
In Word, the selection tool is found under the “Layout” tab. In PPT, the selection tool is found under the “Picture Format” tab once you select a picture.
Word’s Selection Pane will not show text--only objects.
Apple Reading Order
Unfortunately, Pages does not have a tool that allows you to view reading order. To move objects around the reading order, you will need to right-click on the object and select from the “Bring to ___” and “Sent to ___” options.
On the brightside, Keynote does have the ability to view the reading order of elements. This can be accessed by selecting “View” then “Object List” from the dropdown menu.
Readable
Alternative Text
Making resources readable means making your images, graphs, tables, and other objects talk! All students should be able to get the same information no matter how they are interacting with your resource.
The goal of any alternative text you write is for readers to understand the purpose and context of image or object.
Excellent Alt Text
Writing alt text can be intimidating! Don’t let it be. Use the following tips as a guide.
Example Alt Text
Good Alt Text
Bad Alt Text
In a game of croquet with the queen, Alice uses a flamingo as a mallet and a porcupine as a ball.
A girl holding a flamingo and stepping on a porcupine.
You Try!
Select the image below to add your alt text.
NULL Alt Text
When an image is decorative it does not need alt text, but is it okay to just leave the alternative text blank.
Unfortunately, there is no single single answer. For HTML objects, you would use a NULL tag (alt=””), but this does not work the same for images within resource tools (Word, Slides, Docs, etc.).
Some programs may offer the option to mark an image as decorative (e.g. Google Sites). When available use this!
NULL Alt Text
For programs and tools that do not offer a “decorative” alt text option for decorative images, there is no hard and fast rule alt text.
Different screen readers will handle blank alt text in different ways!
NVDA will skip over images without alt text, while ChromeVox will simple state “picture”.
Best practice is to pick an approach and stick with it.
Just keep in mind, a blank alt text may be flagged as an error in accessibility checks.
Adding Alt Text - Google and Office
For Google tools, by right clicking on an image, you can select “Alt Text” to add alt text.
For Office tools, by right clicking on the image, you can select “Format Picture” to open the format toolbar. Then selecting the third icon (Layout and Properties), you can add alt text.
Adding Alt Text - Apple
For Apple tools, by selecting on the image, you will open a formatting sidebar. Select the image tab, then add text to the “Description” box to create alt text.
Web Links
When creating linkable objects in your resources, do not use the URL (https://www.sitename.com/badaccessibility).
Instead, link add the link to text that informs users where the link will take them.
Videos and Captions
Videos are fantastic tools to use in class, but do your videos have captions?
Believe it or not, captions are not just for the hearing impaired.
YouTube now features an auto-caption tool when you upload videos, so there is no excuse for your own videos not to have captions.
But be careful to review the transcript before sharing the link with your students.
How to Create/Edit Captions on YouTube
Transcripts
Showing a video to the whole class?
Consider providing students with a transcript.
Transcripts for YouTube videos can be found by selecting the ●●● (three dots) below the video by the share option. Here you will select “Transcript”.
After you toggle the timestamps off, you can copy the transcript into a document. Don’t forget to give credit!
Accessibility Resources
Creating resources with accessibility in mind can be a daunting task to start, but the more you create with accessibility in mind the easier it becomes!
Here are some sites that can help you along the way!
Questions?
Thanks for listening!
Email me at amills@michiganvirtual.org