Designing Accessible Web Content

Overview

This article provides best practices for creating accessible content including:

  • Heading Structure
  • Logical Reading Order
  • Readability
  • Color
  • Text in Images
  • Links
  • Alt Text
  • Multimedia
  • Tables and Data
  • Flashing Content
  • Documents

Why Digital Accessibility Matters

Digital accessibility ensures that everyone—regardless of ability—can access, understand, and interact with our web content. It’s not just a technical requirement; it’s a shared responsibility. When we design and write with accessibility in mind, we create content that is:

  • Easier to find (more searchable)
  • Compatible across devices (more mobile-friendly)
  • Usable with assistive technologies

The University is actively working to ensure all digital content—including websites, mobile apps, course platforms, and documents—meets WCAG 2.1 Level AA standards in compliance with Title II of the ADA by April 24, 2026. Minnesota State Mankato, and the entire Minnesota State system are committed to inclusion and usability—and it starts with how we build and write every page.

Heading Structure

Organize your digital content using proper heading tags on web pages. Headings create a clear structure that improves readability and helps all users, especially those using assistive technologies, navigate your content efficiently.

Best Practices:

  • Use headings in order: H1, H2, H3, H4, etc.
  • Avoid skipping heading levels (e.g., don’t jump from H2 to H4).
  • Keep headings descriptive and concise.
  • Use headings to introduce lists, tables, and other structured elements.

Logical Reading Order

Ensure your content flows in a clear, predictable sequence that matches how it appears visually. A logical reading order helps all users, especially those using screen readers, understand and navigate your content without confusion.

Best Practices:

  • Organize content with headings, paragraphs, and lists.
  • Don’t use tables to position content visually unless they’re truly tabular data.
  • Keep the layout consistent across pages so users can easily find what they need and understand how to move through the site.

Readability

Write content that’s easy to understand and quick to scan. Clear language and a clean layout reduce cognitive load and make your content more accessible to all users.

Best Practices:

  • Use plain language. Write in clear, direct sentences.
  • Avoid jargon. Replace technical terms with plain English alternatives.
  • Define acronyms. Spell out acronyms the first time they appear. [Master of Accounting (MAcc)]
  • Keep paragraphs short. Limit each paragraph to one idea.
  • Use lists and tables:
    • Use bulleted or numbered lists to break up complex information.
    • Use tables only for presenting data—not for layout or positioning.
  • Choose easy-to-read fonts such as sans-serif fonts and avoid decorative fonts for body text.
  • Choose high contrast colors: Ensure sufficient contrast between text and background (at least 4.5:1 for normal text and 3:1 for large text). This helps users with visual impairments or color blindness. (More information in the sub section below)
  • Avoid using text within images: Assistive technology cannot read text embedded within images. If images must include text, ensure that the same information is provided as real text on the page. (More information in the subsection below)

Color

Use color thoughtfully to support readability and accessibility. Ensure sufficient contrast between text and background and never rely on color alone to convey meaning.

Low contrast and color-only indicators can make content unreadable for users with visual impairments or color blindness.

Best Practices:

  • Maintain high contrast. Text should have a ratio of at least 4.5:1 against its background (3:1 for large text at least 18- or 14-point bold font).
  • Avoid light text on light backgrounds or dark text on dark backgrounds.
  • Use a contrast checker to verify compliance.

Color Contrast Checkers:

Avoid Images of Text

Don’t use images that contain important text (like flyers). Assistive technology cannot read text embedded in or inside of images, and users cannot copy, resize, or search it.

Best Practices:

  • Use actual text on the page following logical reading order and readability.
  • Ensure all essential information is available in plain text outside the image

Links

Make links easy to identify and understand. Descriptive link text improves accessibility and helps users understand where a link will take them.

Best Practices:

  • Use descriptive link text (“Read the full report”).
  • Avoid ambiguous phrases: Never use phrases like “click here” or “read more.”
  • Keep link text concise.
  • Make links distinct with underline or button.
  • Don’t use a URL as the link text. It must be hyperlinked.
  • Don’t use images as links.
  • Pay attention to color contrast of links and buttons.

Opening Links

Opening links in new windows or tabs can confuse users—especially those using assistive technology or with cognitive disabilities. It disrupts navigation and breaks the browser’s back button.

Best Practices:

  • Avoid opening links in new windows unless absolutely necessary. Potential use cases:
    • When the link goes to an external site.
    • When the link opens help content or a tool that supports filling out a form—like a calendar—it may be better to open it in a new window, so users don’t lose their place.
  • Alert users by adding text like “opens in a new window” within the link.

Alternative Text (alt text)

Provide descriptive text alternatives for all meaningful and informative images. Alt text ensures that users who cannot see images still understand their purpose and context. AIt text is essential for users who are blind, have low vision, or rely on assistive technology.

Best Practices:

  • Describe the image in context. Explain why it’s there and what it conveys.
  • Keep the alt text concise and relevant.
  • Avoid “image of.”
    • Example: Student working in the science lab using a microscope” vs “image of a student.”
  • Use alt text only for informative images. For purely decorative images (link to decorative image meaning below), use an empty alt attribute (alt="").

What is a decorative image: Decorative images are purely visual and do not convey information, meaning or context that is important to understand the content. They are used for visual appeal or layout.

  • Example of decorative images: background textures, borders, abstract shapes or photos used only for aesthetic design.
  • In HTML, an empty alt attribute can be used for decorative images (alt=””)

What is a meaningful or informative image: These images convey information, meaning, tell a story or provide context that contributes to the understanding of the page.

  • Example of an informative image: photos representing the page's topic and goal, infographics and charts.
  • A descriptive alt text must be used for informative images to communicate its meaning.

Multimedia (Video and Audio)

Make multimedia content accessible by providing text-based alternatives. This ensures that all users—including those who are deaf, hard of hearing, blind, or using assistive technology—can access the information.

Best Practices:

  • Provide transcripts: Include full, accurate transcripts for audio-only content like podcasts or interviews.
  • Caption videos: Ensure captions match spoken content and identify speakers when not visually obvious.
  • Include audio descriptions: If your video contains important visual elements not conveyed by audio, add a descriptive audio track or provide a separate version with narration. For an audio description example, visit WebAim audio descriptions.
  • Review your media:
    • Are captions complete and accurate?
    • Are speaker changes labeled?
    • Is all essential visual information conveyed in audio or text?

Tables and Data

Use tables to present data—not for layout—and format them so they’re easy to understand and accessible to assistive technology users.

Sighted users can scan rows and columns to understand relationships between data points. Screen readers, however, read tables linearly, cell by cell. Without proper structure, users may lose context and meaning.

Best Practices:

  • Use a heading to introduce the table.
  • Include headers: Use clearly tagged row and column headers to provide context for each cell.
  • Add a summary: Use a caption or surrounding text to explain what the table shows.
  • Avoid layout tables: Don’t use tables to position content on the page.
  • Minimize empty cells.
  • Keep it simple: Use straightforward formatting and avoid merging cells.

Avoid Flashing or Rapidly Moving Content

Flashing content can trigger seizures in individuals with photosensitive epilepsy. Rapid movement can also distract or overwhelm users.

Best Practices:

  • Do not use flashing elements that blink more than three times per second.
  • Keep animations minimal and avoid autoplay unless essential.
  • Review slideshows and hero banners:
    • Use slow, smooth transitions.
    • Allow users to pause or control movement.

Documents

If you have a document that must be available on the website—for compliance, printing, or downloading—it must be an accessible PDF. This means it passes digital accessibility checks and is usable by screen readers and other assistive technologies.

First, Ask Yourself:

Can the content be built as a webpage instead? HTML is the preferred format for web content—it’s more accessible, easier to maintain, and adapts better across devices.

Best Practices:

  • Use PDFs only when necessary:
    • The document is intended for printing.
    • The layout must remain fixed.
    • Ensure the PDF is accessible prior to submitting to the web team:
    • Include a document title and properly tagged headings in a logical reading order.
    • Add descriptive alt text for all meaningful images.
    • Verify that all links are descriptive and active.
    • Run an accessibility check and fix all errors or warnings.

Fillable PDF Forms Best Practices:

  • Tag and label each form field clearly so screen readers can identify them.
  • Ensure the tab order follows a logical reading sequence.
  • Provide clear instructions for completing the form.
  • Avoid using visual cues alone (like color or placement) to indicate required fields.
  • Test the form using both keyboard navigation and a screen reader.

Accessibility Checkers:

  • Adobe Acrobat: Checks for PDF/UA and WCAG 2.0 compliance. However, Adobe’s checker does not fully support WCAG 2.1, which is the current standard. For full coverage, pair Adobe with a secondary checker and a manual human review.
  • Yuja
  • PDF4WCAG: Evaluates WCAG 2.2 requirements as applicable to PDFs. Human verification is required to ensure full compliance.
  • Axes: axesCheck makes it possible to quickly and easily check all machine-verifiable success criteria of the WCAG (Web Content Accessibility Guidelines) Level A and AA for a PDF.
  • PAC Checker for PC Users
  • PDF Fix for Mac Users
  • Manual/Human Review

If a document doesn’t meet accessibility standards, it will not be published or linked on the website.

Word, Excel, and PowerPoint files will not be linked on the website. Links to Canva documents are also not permitted. All downloadable content must be in an accessible PDF format.

More Resources

Print Article