Digital Accessibility Tips

Fonts and Size

Funky fonts can seem fun, but can create barriers.

• Use simple, clean fonts
• Decorative or funky fonts should be avoided or used minimally
• Ensure they are large enough and thick enough to see clearly
• Never use as body text

If you have trouble reading it, so will others.

Examples to use sparingly:

Don't Rely on Colors Alone

Color-blindness is the inability to distinguish between certain colors. Color blindness also affects a person's ability to see certain colors.

• 1 in 12 men and 1 in 200 women in the United States are color-blind. 
• Red/Green color-blindness is the most common. In addition, yellow/blue and red/black color-blindness can occur.

Colors can support meaning, but can't stand alone. Use asterisks or text to highlight importance. Not only do screen readers not pick up color, users who have difficulty distinguishing colors may have problems too.

Color Contrast

Make sure your text and backgrounds don't blend.

• Dark text on a light background works best. Black on white in the highest contrast.
• White text can be used on a dark background sparingly.
• Size and boldness of the text can impact contrast and readability.
• Use an online tool like the WebAIM contrast checker to make sure your content meets the AA requirement.

We often scan pages with our eyes to see the important parts first. People who are visually impaired may use screen readers and want to be able to do the same thing. Screen readers need to be able to read a code that tells it when a heading is being used.

But you don't have to know anything about coding to make your headings accessible to a screen reader. Whether you are using Microsoft products or Google tools, there are built-in settings that will code your document or presentation for you.

• Create your materials with structure and hierarchy in mind: Title, H1, H2, H3, H4
• Use Title only once. Use the rest in order.
• Don't use headings for blocks of texts, just headers.

Where to find the headings in Google docs:

Where to find the headings in Word:

Use Built-in List Tools

Assistive technology, like screen readers, indicates lists to users, including numbers or bullet points. This coding is available in the drop-down settings of Microsoft and Google products.

Screen readers don't pick up the use of symbols like asterisks when you try to highlight important points. The settings provided in your Microsoft or Google platform provides that coding for you.

Find the List tool in Google in the menu bar, showing the dots or the number lists:

Find the list tool in Word by right-clicking on your text and selecting the bullet you wish to use:

Making Links Meaningful

We all like to know where we are going, even online. When you come across a link on a webpage or in a document, you like to know what website or file you'll see when you click on it. Making a link "descriptive", helps everyone and makes your directions or guidance clearer.

• Do not show the URL
• Describe the location/content 
• Make the description understandable out of context
• Avoid vague text like "Click Here" or "Read More"

Examples:

Best: Review our closure guidelines, so you know when and how decisions are made and where notifications are posted.

Not Good: Read more about how decisions are made and where notifications are posted.

Worse: Learn how decisions are made and where notifications are posted - https://www.kentisd.org/administrative-services/about-kent-isd/school-closure-guidelines/

Avoid using images of text or putting extensive text on an image. Here's why:

• Real text can be read by screen readers or other assistive technology
• Real text can be resized, searched and translated
• Real text works with high-contrast settings and dark modes

If you use an image as text, you'll have these issues:

• The information won't be picked up by screen readers
• The information may get distorted or pixelated if someone tries to zoom in on it
• Colors and contrast can't be adjusted
• Translators won't be able to assist the user

Screen readers don't see images unless alternative text is added. The "alt text" should provide information as to what is in the image. It shouldn't be a label or a title of the image. 

If the image is simply a decoration on a page, then you can mark the image as "decorative" and screen readers will pass it. If you have a complex image like a graph or flow chart, consider describing the content of the image in the text around the image and marking the image as "decorative."

• If you are adding an image in a Google product, right-click on the image and select "Alt Text" or click on Image and then Image  Options > Alt Text.
• In Word or Microsoft products, right-click on the image and select Edit alt text or select Review in the toolbar> Check Accessibility > Alt Text.

Example 1:

In a flyer describing the Kent ISD Conference Center as a wedding venue, it included this photo:

Good "alt text": The Conference Center's outdoor patio feels secluded and has a pond with a fountain."

Bad "alt text": "Exterior building photo" or "Back of Conference Center."

Example 2:

In an SNN story about Superintendent Jerry Hopkins, the reporter tells how Hopkins likes to visit with students during the school day and includes this photo:

Good "alt text": "Superintendent Jerry Hopkins with students Olivianna, Kourtney and Segen." 

Also good: Marked as "decorative". The story tells about Hopkins and students, so the reader can assume a photo would be included.

Bad "alt text": "Group of people smiling."

Tables are tricky to make accessible, so try and keep them simple.

In earlier days of website design, tables were often used to design the layout of a webpage.  Those days are over and there are now tools built in to Google and Microsoft products that can set up tables for you and better design tools to make your materials look great. 

Some things to remember:

• Use tables for data only - not to layout a page.
• Create tables using the Table tool. Don't draw tables on your own.
• Don't merge cells. This throws off the screen readers.

For those who want to go deep into the accessibility of tables, Michigan State University has two full webpages on creating tables and what to avoid when creating tables.

Reserve underlines for links only, not emphasis. Underlines have become commonplace to signify links online or in electronic documents. Most readers now assume that underlined text means that there is a link to another source. Screen readers also may just read the text as plain and not convey the emphasis.

To create the emphasis that you want, you use these tools instead:

• Headings and subheadings (H1, H2, H3, H4)
• Use the "strong" or "emphasis" text format option which is often available using the "bold" button
• Preface your text with info like "Note" or "Important"

Note: Our web content management system doesn't even give us the option of underlining text without it being a link!