Digital Accessibility Tips for Staff

These guidelines are in place for staff and approved partners to ensure that information shared with families and the community aligns with district policies and values. Our digital standards are designed to make information accessible, translatable, scalable, and available to all. The district reserves the right to determine if and how information is shared with families.

Example

1. Create simple graphic: This graphic is for a parent-teacher meeting.
2. Determine information to share:  Date, time, location, other important details of the meeting.
3. Send information and graphic to building secretary (or Jenny Ames if it's to be shared beyond your building).

Potential sharing methods include school newsletter, district eNewsletter, website announcement, and/or social media. 

All website videos must include closed captioning so people who are hard-of-hearing, as well as those using screen readers, can access the information. Captions should cover the entire video, including any on-screen text that isn’t spoken.

The easiest method is to upload your video to YouTube and enable automatic captions, then embed the video on your site. YouTube also supports captions in multiple languages. If automatic captions don’t generate due to formatting issues, you’ll need to add them manually.

Use descriptive link text: Instead of generic phrases such as "click here," write meaningful link text that describes the destination. 

1. Use concise and meaningful text for links (avoid these words: click here, more, read more, find out more, click for details)
2. Do not capitalize all letters in links
3. Avoid using URLs for link text
4. Do not use the word "link" as part of the link text

Approximately 1 in 12 men and approximately 1 in 200 women experience color blindness, unable to perceive or distinguish between certain colors. Checking color contrast ensures that the contrast between text and background colors is high enough for readability. Avoid using color as the only way to convey meaning. There must be a 4.5:1 ratio between text and its background.

Ways to check color contrast:

A fool-proof way to ensure compliance is to use black text on a white background.

Here are a couple of tools that can be used to check color contrast:

• Use the Web AIM Contrast Checker.
• Use Grackle Docs to find contrast errors (see Grackle information below). 

Headings (known as Styles in Google Docs) provide behind-the-scenes coding that allows a screen reader to navigate to different sections of the document. Do not use bolding, increasing font size, or other manual formatting to create the appearance of a header. This is a visual cue only and will not be identified as a heading by a screen reader.

To apply a heading:

1. Apply the style: Select the text, then click the Format menu > Paragraph styles. You can also find the Styles dropdown menu in the main toolbar.
2. Follow a logical order: Structure your headings like a document outline. Headings should be properly nested, and you should not skip heading levels.

Heading 1: Use once per document for the main title.
Heading 2: Use for the major sections of your document.
Heading 3, 4, etc.: Use for subsections within a Heading 2, and so on.

• Don't use the "Title" style: The "Title" and "Subtitle" styles can be inconsistent and may not be recognized reliably by assistive technologies. Instead, always use Heading 1 for the main title.
• Test your document structure: Use the Document Outline to verify your heading structure. Click the "Show Document Outline" icon on the left side of the toolbar (it looks like a bulleted list with indentations). This will show a nested view of your headings.
• Customize styles: If you prefer a different look for your headings, modify the existing style instead of manually reformatting. After changing the font, size, or color of a heading, re-open the Styles menu, hover over the heading level you want to change, and select "Update 'Heading' to match".

Alt-text

Alt-text provides concise, meaningful descriptions for all informative images.

Add alt text to image:

1. Right-click the image and select Alt-text.
2. Leave the "Title" field blank, and enter the description in the "Description" field.

Grackle is an add-on for google products. It provides an automated way to check a digital file for ADA compliance.  Note, a software cannot find every error, so it's important to understand the requirements of compliance to ensure all steps are taken to make a document accessible.

You must have editing access in a google file in order to run the compliance check. Grackle can be used in Google Docs, Google Slides, and Google Sheets.

Installing & RUNNING Grackle

The first time you use Grackle, you will need to install the grackle extension. This needs to be done for EACH application (i.e. Google Docs, Slides and Sheets). This documentation pertains to Google Docs.

1. Open a Google Doc
2. Click Extensions - Add ons - Grackle
3. If Grackle is not listed as an Add on, choose Get Add ons, type Grackle in the search box and choose Grackle to install

If asked for permission to run this, choose OK, choose your work email, and sign in to grackle docs. Click continue. If asked to allow Grackle to access your Google Account, choose select all and click continue.

How to Check for Errors

1. Click Extensions - Grackle Docs - Launch
   The Grackle Docs window appears on the right. Errors are found in red. Common errors are headings, no alt-text, tables, etc.)
2. Fix errors.
3. Rerun and fix until there are no errors.

Smore is the newsletter tool each of our schools uses to share updates and information with families. Following our guidelines will help ensure that everyone has equal access to communication being sent home. 

HEADERS

• Building Newsletters: Headers for building newsletters must be approved by Communications Dept (view district branding guidelines). View current headers.
• Department Newsletters: please make a header that reflects the district colors and logos. Reach out to Jenny Ames at jennifer.ames@rfsd.k12.wi.us if you would like one created for you.
• Classroom Newsletters: if possible, incorporate your school’s logo into the newsletter (could be in header or footer).  You can create your own unique header to reflect your classroom vision. 

TEMPLATES 

• Building newsletters: use minimalist or modern template. No restrictions for other groups.

COLORS

• Buildings newsletters and departments: use colors that are consistent with our branding (gray, black, etc). Our exact branding colors are not available in Smore, which is why we are using custom headers and wallpaper.

COLOR CONTRAST 

Ensures that there is sufficient contrast between the text and background colors to enable those with low vision or color vision deficiencies to read content easily. There must be a 4.5:1 ratio between text and its background. Example: Yellow text on a blue background likely doesn’t meet this standard. Smore limits its color combinations to ensure contrast is met, but any graphics you include should adhere to this standard.

WALLPAPER

Building newsletters and departments must adhere to branding guidelines with wallpaper. View the current wallpaper options, and you can create your own that fall within the district color scheme. If you’d like a custom wallpaper or header, reach out to jennifer.ames@rfsd.k12.wi.us.

Graphics

• Do not share PDFs, and avoid linking to PDFs unless absolutely necessary. If you must link to a PDF, be sure to include a link to any translations needed for your school.
• Flyers that are saved in a graphic format (png, jpeg, etc.) should not be included in Smore, unless they are very limited in words.

How to share information from a flyer:

1. Create a simple graphic image in a square format (1080x1080 pixels) with an image from the flyer. See Canva branding info.
2. Take the text from the original flyer, and include it in a text box next to the image.
3. All graphics must have alt-text. Here are examples of alt-text.

How to add Alt Text

1. Hover over the image where you would like to include the Alt Text, or click in the text box that contains the image.
2. Click Edit. The Alt Text box will be located under the paragraph box.
3. Add the Alt Text
4. Click Done

Readability is reduced with all caps (all capital letters) because all words have a uniform rectangular shape, meaning readers can't identify words by their shape.The use of all caps is also considered yelling.