Digital Accessibility Tips for Staff

Using accessible, easy-to-read fonts ensures everyone, including people with visual imparements or learning differences like dyslexia, can clearly understand written content. Simple typefaces reduce eye strain, improve reading speed, and make digital and print materials inclusive and user-friendly for all audiences. 

WHY SIMPLE FONTS MATTER

• Helps Readers with Low Vision: Clear shapes prevent letters from blending together.

• Supports Neurodiversity: Clean spacing assists people with dyslexia or reading difficulties.

• Improves Comprehension: Readers focus on the message instead of struggling to decode words.

• Reaches Everyone: Inclusive design creates a better experience on all screens and paper. 

TOP ACCESSIBLE SANS-SERIF FONTS TO USE

• Verdana: Features wide letter spacing and a large x-height, making it exceptionally legible on screens even at small sizes.

• Arial: A universally available, clean typeface with simple letter shapes that prevent text from blending together.

• Tahoma: Offers crisp, clean lines with tight, distinct character spacing ideal for digital interfaces.

• Open Sans: Designed with open apertures (the negative space inside letters) to easily distinguish similar characters.

• Roboto: A modern, clean geometric typeface that maintains strong clarity across mobile and desktop screens.

• Lexend: Specifically designed to reduce visual stress and boost reading fluency for readers with dyslexia or ADHD

Need other ideas for font’s, ask Nicole!

SPECIALIZED. FONTS

• OpenDyslexic: Features heavy, weighted bottoms on letters to prevent character rotation and line-skipping.

• Atkinson Hyperlegible: Created by the Braille Institute to maximize character distinction (reducing confusion between letters like l, 1, and I).

• Georgia: A reliable serif alternative if a serif style is required, offering distinct letterforms and strong screen legibility. 

TYPOGRAPHY BEST PRACTICES

• Size: Use a minimum body text size of 16px (or 12pt).

• Line Height: Set line spacing to at least 1.5 times the font size.

• Contrast: Maintain a color contrast ratio of at least 4.5:1 for normal text against its background.

• Avoid: Decorative, cursive, script, or heavily condensed/narrow fonts for body text. 

Alt text is a short description that explains what an image shows or communicates. It allows people who are blind or have low vision to use a screen reader to understand information they cannot see. Good alt text focuses on the important information or purpose of the image, rather than describing every small detail. Adding meaningful alt text helps ensure that everyone has equal access to the information being shared.

When posting photos on social media all photos will require alternative text and a caption inside the post. It is recommended that you not post more than 10 photos per post at this time until the district has selected a tool for photo sharing that is accessible as part of its accessibility planning process.

Not every image needs a written description. Alt text should be provided when an image gives the reader important information or adds meaning to the content. A decorative image is used only for visual appearance and does not provide information the reader needs to understand. Decorative images should be marked as decorative so a screen reader can skip them. A simple question to ask is: “Would someone miss important information if they could not see this image?” If the answer is yes, the image needs alt text.

Adding a caption along with alt text makes social media posts more accessible to everyone. Alt text describes the image for people using screen readers, while a caption provides the important message, details, or context from the image where everyone can read it. This is especially important when an image contains text, such as an announcement, flyer, or event graphic. Important information should never be available only inside an image.

RESOURCES:

• Video: Decorative Images vs. Alternate Text

Images made with AI are not always accessible to everyone. For example, text placed inside an AI image cannot be read by a screen reader. This is similar to Canva graphics that include important text as part of the image.

One of the most important lessons is that AI lowers the cost of creating content, but lowering the cost of creation does not automatically increase the value of communication. In fact, the opposite can happen. When content becomes effortless to create, organizations may begin producing more content without first asking:

• Who is this for?

• Why does it matter?

• Does it support our goals?

• Does it reflect our community?

That often leads to a flood of content that looks good but lacks strategy and connection. Communication effectiveness isn't measured by volume, but by whether the right people receive, understand, trust, and act upon the information being shared.

When using AI to create content, always think about accessibility. Make sure everyone can understand the information, including people who use screen readers or other tools.

Also remember to follow the district’s branding and style guidelines. When faculty and staff create or share content for a school or the district, it should follow district colors, logos, fonts, and other communication guidelines.

• Keep It Simple or Keep the Main Thing the Main Thing: Do not create AI images that are complex, are busy, have a lot of text, with lots of decoration. 
• Text on Images cannot be read by screen readers: So, be sure to include every portion of pertinent text in the post. 
• District Branding: Be as specific as you can about colors (black, white, yellow gold (district hex code #e5c122).
• District Logo: Be careful when using district logo as it must follow district branding and style guidelines. Follow district branding and style guide or do not use. 

POSTING ON SOCIAL MEDIA

Always include in your post all of the pertinent text provided as part of the graphic. This includes any and all text included on the graphic (e.g., descriptions, dates, times, locations, etc.). Be sure to also add alt-text to the image(s) and a caption in your post for the image(s).

SAMPLE PROMPT:

“Create a square Facebook and Instagram graphic for [EVENT].

Make it look professionally designed for a public school district, not like an AI-generated flyer. Use a clean editorial layout, strong hierarchy, generous whitespace, consistent alignment and a restrained color palette of black, white, and yellow gold (specifically use hex code #e5c122) on a light neutral background.

Use one cohesive, realistic photo composition featuring diverse students naturally participating in [ACTIVITIES]. Keep expressions candid and warm, with consistent lighting and photographic style.

Include only:

“[HEADLINE]”

“[DATE]”

“[TIME]”

“[SUPPORTING LINE]”

Do not add any other text.

Avoid clutter, excessive text, icons, doodles, stars, hearts, paint splashes, badges, ribbons, extra slogans, text on objects, exaggerated smiles, heavy shadows, glowing effects or mixed illustration styles.

Use no more than two font styles and only one or two subtle graphic accents. The headline should be dominant, the date and time secondary and the supporting line smaller.

The finished graphic should feel realistic, restrained, polished and intentionally designed by an experienced school communications designer.

**OR JUST SAY**

“Use professional editorial restraint. Do not fill every empty space.”

All videos (live or recorded) must include audio descriptions (also known as closed captioning) so people who are hard-of-hearing or who have a hearing disability, 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 (e.g., on your LMS, social media, website, etc.). YouTube also supports captions in multiple languages. If automatic captions don’t generate due to formatting issues, you’ll need to add them manually. Please note that transcripts may also be required for videos. 

RESOURCES:

• Video: How To Add Captions To YouTube Shorts (new window)
• Video: How to Add A Descriptive Audio Track To YouTube Videos (new window)
• ???????Video: How To Add Captions To Videos In Canva (new window)

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:

• Web AIM Contrast Checker (new window)
• Vispero Color Contract Analyser (CCA) (new window)
• Siegemedia Contrast Ratio (new window)
• Use Grackle Docs to find contrast errors (see Grackle information below). 

Color Blindness:

Don’t be afraid of color. Use it only for design purposes and not to indicate importance or action to be taken. Low contrast between your text and its background can also make things difficult to read. Stay away from a light grey text on a white background or yellow text on a grey background for example. Stay away from using green or red for text whenever possible, however realize that there are different kinds of color blindness. 

The colors of the rainbow as viewed by someone with no color or vision issues. 

The colors of the rainbow as viewed by someone with deuteranopia. 

The colors of the rainbow as viewed by someone with protanopia.

The colors of the rainbow as viewed by someone with tritanopia.

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
5. Avoid using images as your email signature (your signature should meet district branding/style guidelines and with the district and your email, phone number, and links should be clickable so it works with mobile devices and readers)

Check out our district approved Email Signature Generator. 

These guidelines will be put in place for faculty, 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.

Things you should know:

• Most flyers and/or digital graphics that contain text as an image are NEVER compliant. 
• Scanned flyers and/or digital graphics that contain text are NEVER compliant.
• Flyers are meant to be printed on paper, not used as a substitute for placing text on a post or website. 
• Create calendar events using ParentSquare or via a school district social media account you may have access to.

Why?

• A screenreader has to audibly read text in a logical/chronological order
• Words as images can’t be read by a screen reader (logos, etc.)
• Images don’t often have alt-text

EXAMPLES:

Example 1:

1. Create a simple graphic: This graphic might be for an event schedule.

An example of a simplified graphic for posting with an electronic communication. 

2. Determine information to share:  Dates, times, locations, other important details of upcoming events for the district, a building, group, sport, or class.
3. Send information and graphic to building secretary and building principal (or Nicole Whitfield if it’s to be shared beyond your building, your ParentSquare account, or the activities/athletics page). 

Example 2:

1. If you were given a flyer for an event. You could screenshot the main graphic and text if possible, or locate an image that focuses on the same topic or subject matter of the event. 
2. Create an event in Facebook with all of the event’s details: name of the event, date, location, any costs/requirements, etc., in the body. Add the screenshot or image at the top of the event. 
3. A screenreader should be able to read all of the event details you provided when setting up the event. 

A graphic demonstrating to post and not post a flyer for an event on social media. 

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

RESOURCE:

Please note: While Canva provides accessibility tools, it is not fully accessible. 

• Video: Canva Accessibility 2026 (new window)

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.
3. Include a Header: Include a header at the top of your document. This should be the title of your document. 

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.
• Don’t print from a Chromebook or Mac, print from your PC: When you print from a Chromebook or Mac it can change the styles and other important settings of the document and it could be rendered inaccessible. 
• 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."
• We will be pushing out Grackle Workspace which is a program that will assist teachers and staff in the process of making sure their Google Doc, Google Slide presentation, or Google Spreadsheet is accessible. To learn more about Grackle Workspace view the video provided by Grackle or see the next tab. 

Alt-Text:

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

Add alt-text to any image within a Google document:

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

Examples of alt-text:

alt-text = Little Tigers Early Learning Center little tiger mascot logo

alt-text = Two children lean over a fence to pet a fluffy white animal.

A screen reader reads text boxes in the order they were created for Google Slides. Simply moving the boxes around doesn't change the reading order. 

Grackle Hack: In the Grackle Slides sidebar, click Document Structure. You can drag-and-drop the boxes in the sidebar to re-order them without moving them on the slide!

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. Grackle will automatically scan your document and group issues into categories: Document, Images, Headings, Tables, and Content. Errors are found in red. Common errors are headings, no alt-text, tables, etc.
2. Fix errors:
   • Red X: Must be fixed. Click the error, then click Locate. Grackle will highlight exactly where the problem is.
     Alt-Text: If an image is missing a description, click +TAG in the Grackle sidebar and type your 1-sentence description.
     Headings: Use the Google "Styles" menu (Heading 1, Heading 2). Grackle will warn you if you skip a level (e.g., going from H1 to H3).
3. Rerun and fix until there are no errors.
4. If you must download the file as a PDF:
   • Never use File - Download - PDF. This strips away all of the accessibility features.
   • Always click the Export to PDF button at the top of the Grackle sidebar. This "bakes" the accessibility tags into the final file.

Headings are more than larger or bold text. They give documents and webpages and documents structure and help everyone quickly find and understand information. They are especially important for people who use screen readers.

USE BUILT-IN HEADING STYLES

When creating a document, webpage, or other digital content:

• Use the program’s built-in Heading 1, Heading 2, Heading 3, etc. styles.
• Use Heading 1 for the main title or primary heading.
• Use Heading 2 for major sections.
• Use Heading 3 for sections within a Heading 2
• Keep headings in logical order
• Use Normal/Body Text for regular paragraphs

It is important to note, that when creating a Google Doc is it currently recommended to not start with a title, but start with H1.

Michigan State University is an excellent resource to learn more about heading styles and other accessibility topics. 

Using clear and simple language makes information easier for everyone to understand. Avoid jargon, technical terms, and complex words when simpler words will work. This helps people with different reading levels, learning needs, disabilities, or language backgrounds understand important information. Accessible communication means making your message clear to as many people as possible.

EXAMPLE QUOTE USING JARGON & COMPLEX LANGUAGE

“Before EOD, all staff should leverage the LMS to facilitate the dissemination of supplemental instructional materials to students.”

EXAMPLE QUOTE USING SIMPLE LANGUAGE

“By the end of the day, all staff should use the online learning system to share extra learning materials with students.”

Can all interactive elements be selected and activated using the keyboard?

HOW TO TEST WITH A KEYBOARD:

• Tab: Navigate to links and form controls.
• Shift + Tab: Navigate backwards.
• Spacebar: Activate checkboxes and buttons.
• Enter: Activate links and buttons.
• Arrow keys: Radio buttons, select/drop-down menus, sliders, tab panels, auto-complete, tree menus, etc.
• Escape: Dismisses browser dialog or menu.

If testing with Safari, enable tabbing: Under "Settings", go to "Advanced", then check “Press Tab to highlight each item on a webpage.”

CHECK FOR THE FOLLOWING:

• Is anything mouse-only, such as rollover menus?
• Is a "skip navigation" link available? Activate the skip link and hit Tab again to ensure it functions correctly.
• Is the navigation order logical and intuitive?
• Is a visible keyboard focus indicator present?
• Test dialogs that 'pop' open. Can you navigate and close the dialog? Does focus return to a logical place?
• Esc should also close all dialogs.

To create accessible lists, you must use built-in formatting tools, choose the correct list type, and avoid manual styling. Always rely on the native bullet or numbering buttons in your software rather than typing symbols or spacing by hand, ensuring assistive technologies correctly announce the content structure.

Best Practices

• Use bulleted lists for related items where order does not matter.

• Use numbered lists for sequential steps or ranked items.

• Avoid typing dashes, asterisks, or manual numbers.

• Keep list items concise and grammatically parallel.

ParentSquare is our district-approved mass communication tool for classrooms, activity/athletic groups, buildings, and district-level communications. To make posts accessible in ParentSquare, staff must type all important text directly into the body of the post and add clear image descriptions and alt-text. Avoid posting raw PDF attachments or image-only flyers, which screen readers cannot parse. All videos that are linked within a post or attached should include closed captions and transcripts (which can be added using YouTube). 

Accessibility Tools In ParentSquare:

• Automatic Translation: Translates messages into a family's preferred language automatically.
• Smart Edit AI: Assists staff in checking spelling, consistency, and readability grade levels to make posts easier to translate and understand.
• AI Alt-Text: Assists staff in checking images to ensure they include alt-text. Be sure to check all AI alt-text before saving. 

Creating Accessible Posts:

• Transcribe text: Type all peritenent information from flyers directly into the post body so screen readers can read it. All pertinent information from the flyer must be included in order for the post to be considered compliant. 
• Add alt text: Write short, clear descriptions for every image or banner you upload. If you post a copy of the flyer you must include alt-text describing the flyer, especially important images. If it is a newsletter, you should pull out any important images to be included with pertinent text individually. These should have alt-text. 
• Avoid PDFs: Skip uploading scanned documents or PDF files for core messages.
• Avoid using acroynms: First type the entire name out (e.g. MO DESE, Missouri Department of Elementary and Secondary Education).

• Use formatting tools: Use built-in bullet points and headers rather than manually spacing text.

• Language translation: Rely on the platform's auto-translate feature to reach non-native speakers.

• PDFs in and of themselves may or may not be compliant, depending on whether or not the content was formatted correctly, depending on the device and software in which they were created, and how they were saved or printed as a PDF. Usually they are not.  
• PDFs should not be shared electronically, as they are often not ADA compliant or easily translatable. Using our approved formats* ensures accessibility for assistive technology and automatic translation, helping us reach all families. Please expect that time will be required to transfer your PDFs to an html format prior to posting on the website or electronically, otherwise they may not be shared (e.g., website, social media, ParentSquare, Smore, etc.).
• PDFs saved in a Google Drive will not be shared electronically, see note above. 
• A PDF that is scanned is not ADA compliant. It is essentially a photo, and a screen reader cannot read the text at all (e.g., flyers). 
• Most reports in PDF form are not compliant because they are not formatted properly. If a PDF document, such as a letter or a report, must be posted on the website, it should be formatted properly so it can be read with a screen reader. Apply Headings, alt text, and correct table formatting.
• Adobe Acrobat Pro can be used to make a PDF digitally compliant (this is called a "remediated" PDF). View instructions on how to remediate a PDF using Adobe Acrobat Pro.

*current approved formats include: information shared on our webpages, or as an accessible file in its native format (such as Google Doc, Microsoft Word, etc.)

RESOURCES:

• Video: How To Check A PDF For Basic Accessibility

Smore is the newsletter tool our school building offices will use to share updates and information with families in connection with ParentSquare. Following our guidelines will help ensure that everyone has equal access to communication being sent home. 

Headers

• Building Newsletters: Please make a header that reflects the district colors and logos and meets accessibility requirements. Reach out to Nicole Whitfield at whitfieldn@versaillestigers.org if you would like one created for you. Please have the Communications Department review your header to ensure accessibility standards and branding/style guidelines are met (view district branding guidelines). 

Templates 

• Building newsletters: templates will be provided for building level use.

Colors

• Buildings newsletters: use colors that are consistent with our branding (gray, black, yellow gold, etc). Our exact branding colors are not available in Smore, which is why we are going to move toward 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 must adhere to branding guidelines with district created wallpaper or you can create your own that fall within the district color scheme. If you’d like a custom wallpaper or header, reach out to Nicole Whitfield at whitfieldn@versaillestigers.org.

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.

Guidelines for tables that are shared digitally:

• No merged cells — screen readers read left-to-right/top-to-bottom and merged cells break that order.
• No blank cells — every cell should contain meaningful data or a placeholder like “N/A.”
• Always include column headers and/or row headers so screen readers can announce context.
• Ensure headers are properly tagged (e.g., <th> in HTML or header row settings in Word/Docs).
• Provide descriptive table titles or captions to explain the purpose of the table.
• Don’t use tables for layout — use them only for true data.
• Use simple, consistent structure — avoid nested tables or complex layouts.

Transcripts can provide equal access and effective communication for Deaf and hard of hearing people, which means that transcripts are essential in allowing full participation. But transcripts can also enhance the experience for non-native language speakers, people with learning disabilities, and anyone in a noisy environment.

Transcripts are also searchable, which can boost the Search Engine Optimization (SEO) of your content, and make it easier for listeners to find and return to relevant pieces of the audio.

Transcripts generated by Artificial Intelligence (AI) provide variable degrees of accuracy. This approach works best when the multimedia is of a single person speaking clearly, and with limited noise interference in the background. Accuracy rates drop if there are multiple people with overlapping dialog, if there is background noise, or if specialized terminology is used.