Web Accessibility Awareness, Document & Image Accessibility Toolkit for State Employees

Back to State of Missouri Web Accessibility Site

This accessibility toolkit provides information you need to make your web content, documents and images accessible for State of Missouri citizens and employees.

NEW publishing review process for website content submitted to ITSD-Web Team, publishing process summary (11/3/25)

what is web accessibility?

Also called digital accessibility, the practice of creating usable and understandable websites, applications and digital documents for ALL people.

target audience for this toolkit

State employees who create documents or web content posted to State of Missouri websites, intranet sites or social media sites.

agency digital accessibility coordinators

State Accessibility Law

Federal Accessibility Law

Accessibility Guidelines

Guides & checklists to Make accessibility Work Easier

EFFECTIVE CONTENT PLANNING/CREATION

Should my content be a document or a webpage?

The first question to ask as you create content: Should it be a document or a webpage?

Fillable Forms: Web Form vs. Fillable Word Document vs. Fillable PDF Form

When it comes to fillable forms, a web form will be fundamentally the easiest format to make accessible. This would be followed by a fillable PDF form (see  WebAIM article on PDF Accessibility).
The order from most to least accessible:

  1. Web form
  2. Fillable PDF Form
  3. Fillable Word Form

PDF Document/Form from State Printing?

If a PDF Document or fillable form was designed by state printing and needs accessibility fixes, contact your state printing representative.

Your guide to text and non-text ContrasT

Contrast requirements are part of the state and federal accessibility law.

Contrast is a measure of the difference in perceived “luminance” or brightness between two colors.

  • This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white).
  • Improper contrast can affect those with low vision, color blindness, the aging population or those in bright environments.
Normal-Sized Text Contrast Large-Sized Text Contrast Non-Text Contrast

This relates to both document text and image text

This relates to both document text and image text.

Non-text examples: Print icon image button and bars or lines in a chart.

Tools to check color contrast:

There are handy free tools to check color contrast by inputting colors, which gives you a “pass/fail” grade. These tools also include “lightness” sliders to adjust colors in order to provide you a “passing” color for contrast fixes.

effective image alternative text

Alternative text conveys the purpose of an image

  • Represents the image function
  • Provides an equivalent user experience
  • Image alternative text is used by
  • The blind or those with low vision
  • Those with cognitive/attention issues
  • Search engines 
  • The alt text property of your image should be no more than 150 characters or approximately 30 words. See “Complex Images” below for more information on handlng long alternative text.
Informative Images Images of Text Decorative Images Functional Images Complex Images

Informative images convey information that is not available elsewhere. Examples include a photo gallery of images for a Missouri state park, a cartoon illustration or a pdf icon adjacent to a PDF document link.

Informative alternative text can be summarized in a short phrase or a few sentences. In the below image gallery example, we ahave a series of Conservation nature areas. The alternative text is set to the conservation area location.

Sample of a series of informative images. Thisis an image gallery of State Park locations with brief but descriptive alternative text.

Images of text include logos, math expressions, or complex images.

Context is important. Here are a few examples of how the alternative text could look for this image:

  • Alt=”Missouri Assistive Technology” (example – on the first slide of a presentation, where the presenter is representing MO AT)
  • Alt=”Missouri Assistive Technology Homepage” (example – image was being used as a link to the MO Assistive Technology homepage)
  • Alt=”Missouri Assistive Technology Logo (Color)” (example – where the image is a link to a downloadable file of the MO AT Logo for reuse)

Missouri Assistive Technology

Decorative images do not convey meaningful information (like a horizontal line) or are not used to further understand the surrounding content (like a generic stock photo). Many tools include options to mark images as decorative, include Microsoft Office.

Screenshot of incorporating a decorative image into a document

Functional images are used to initiate actions rather than to convey information. The text alternative for the image should convey that action. Examples include a linked agency logo taking you to the agency homepage, or a magnifying lens icon used to perform a search. 

In the below example, we have an email icon image, when clicked links you to a specific email address. The link is “mailto:john.smith@mo.gov” and the alt could be alt=”Email John Smith”

A screenshot of a functional image (email icon) and the imae is linked to a specific email address

Complex images are graphical representation of information and data, also known as “data visualizations”. Examples include:

  • Charts
  • Graphs
  • Maps
  • Flow charts
  • Infographics
  • Dashboards

To the right, we have an example line chart, infographic and static regional map.

Please refer to the Complex Images Accessibility Guide for more information about: 

  • Data visualization examples
  • Use of color
  • Text and non-text color contrast
  • Alternative text examples
  • Keep visualizations understandable
  • Additional tips on charts and graphsļ»æ





Example of a three-line line chart
Example of a multi image infographic

Training to Grow Your Accessibility Skills

Looking for beginner training on various document creation tools (separate from accessibility)?

Web Accessibility questions? 

Contact: State Digital Accessibility Coordinator or your Agency Digital Accessibility Coordinator
573-751-1570