Digital Accessibility Tips

Start Creating

Before you start building your content, pause for a moment and think about what you’re trying to accomplish. What does your audience need? How can you organize the information so it’s clear and easy to follow? Taking a little extra time up front to set clear goals and structure your material will make the creation process smoother—and your final product more effective.

Below are some of the tips and tricks we share in our in-person trainings. These are common features you likely already use when creating materials, and they’re often the easiest places to make quick improvements as you build your skills in creating accessible documents.

If there’s something you’d like to see added here—or a helpful resource you’ve found—please reach out to Bob Brenzing in the Communications Department. We’d love your input.

Use accessibility checkers and tools provided in the platform.
Use a readable, good-sized font.
Use high contrast colors.
Use built-in headings and subheadings to create structure.
Use built-in bullets and numbered lists.
Use descriptive text when including links.
Use real text to convey your information, rather than images.
Include "alt text" descriptions for images, or mark them as decorative.
Use tables for data, not layout.
Use the provided tools when converting your document to a PDF.

Font Styles and Size

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.

Fonts should also be a minimum of 12pt. in size and users should be able to zoom in or resize the text by 200%.

Note: Our website programmers are aware of the accessibility standards and don't even have these "funky" fonts available for me to show.

Colors

Don't Rely on Colors Alone

Color Vision Deficiency (CVD) is the inability to distinguish between certain colors. It 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 vision deficient.
Red/Green color-deficiency is the most common. In addition, yellow/blue and red/black color-deficiency 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.

Headings

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.

Bullets and Lists

Use Built-in List Tools

When using the bullet or number list formatting built into your editing platform, assistive technology, like screen readers, announces lists to users, including the number of items in the list.

Lists created by manually by entering a symbol or a hard return between items are not recognized by assistive technology. This means content may not be grouped or read as you intend, meaning can get lost, and viewers may get confused.

Find the built-in bullet and number list control in the text style option ribbon in Microsoft and Google products.

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:

Meets Guidelines: Review our closure guidelines, so you know when and how decisions are made and where notifications are posted.
Does Not Meet Guidelines: Read more about how decisions are made and where notifications are posted.
Does Not Meet Guidelines: Learn how decisions are made and where notifications are posted - https://www.kentisd.org/administrative-services/about-kent-isd/school-closure-guidelines/

Using Text Instead of Images

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

Challenges that arise when using an image as text include:

The text cannot be read by screen readers
The information may get distorted or pixelated when zoomed in
Colors and contrast can't be adjusted
The text cannot be translated

Image Alt Text

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.

Tables

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. That isn't necessary anymore and there are now tools built into 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.

Underlines

Reserve underlines for links only, not emphasis. Underlines have become commonplace to signify links online or in electronic documents. Most readers assume that underlined text means that there is a link to another source. Most screen readers do not recognize underlines and read the text as plain text without the emphasis you're trying to convey.

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!

Audio and Video

Audio and video content distributed electronically also need to be accessible. Avoid accessibility barriers when planning, scripting, storyboarding and recording your content.

The main factors for accessible AV content are: