Ottawa County, MI

Accessibility

  1. Home
  2. User Guide Article
  3. Accessibility

Introduction

Ensuring our website is accessible to everyone is not just a best practice—it’s a legal requirement. In April 2024, the Department of Justice issued a final rule under Title II of the Americans with Disabilities Act, mandating that all state and local government websites and mobile applications comply with the Web Content Accessibility Guidelines 2.1 Level AA standards by April 2026. Non-compliance could result in legal consequences and hinder our community members from accessing essential services.

Most accessibility requirements are already built into the website, like keyboard navigation, skippable menus, and sufficient color contrast for design elements. However, there are still some guidelines you need to follow as a content editor to make sure the site stays compliant and accessible.

Proper Heading Structure

Headings aren’t just for style; they provide structure to a webpage and help visitors, especially those using screen readers, navigate the content. Every page should have a single Heading 1 (H1), which serves as the main title. This is already included on all pages if you use a Saved Page Layout from the Divi Library. Subsections should follow in order with H2s, and if you need to break those down further, use H3s, H4s, and so on. Never skip heading levels (for example, jumping from an H2 to an H4) because it confuses users and assistive technology. Also, make sure that headings follow a hierarchical structure. For example:

H1: Healthy Foods

H2: Vegetables

H3: Leafy Greens

H4: Spinach

Improper use of headings not only violates accessibility guidelines and best practices, it also adversely affects the user experience of individuals using screen readers. Watch the video below for a demonstration.

Accessible Link Text

When adding links, be specific about where they lead. Instead of generic phrases like “click here” or “read more,” write something descriptive, such as “View the 2024 Event Schedule” or “Learn more about park reservations.” This helps users using screen readers understand the link’s purpose without needing additional context. 

Accessible Images

Alt Text

Alternative (alt) text is essential for making images accessible. It provides a description that screen readers can read aloud, allowing visually impaired users to understand the image content. When writing alt text, be concise but descriptive. Instead of saying “image of a beach,” describe what is important about the image, like “sunset over Lake Michigan with waves crashing on the shore.” Avoid unnecessary phrases like “picture of” or “graphic of.” If an image is purely decorative and doesn’t add meaningful content, alt text may not be necessary. Use the alt Decision Tree (W3C) to help decide if alt text is needed.

Alt text can be added to an image when you upload it to the Media Library. For the most part, if you add an image with an alt tag to a Divi module, the alt text from the Media Library will automatically be used.

Screenshot 2025-02-26 092206

Accessible Graphics

Whenever possible, avoid using graphics (infographics, images with text, etc.) to convey important information.  Graphics with text are less accessible for a few reasons. One of the primary reasons is that graphics with text cannot be translated into other languages with the site’s translation tool. Additionally, graphics with text are more difficult to resize for users who need larger text and can be difficult to read on mobile devices in most cases.

If you do choose to use graphics with text, follow these guidelines.

  • Use sufficient contrast for text (4.5:1 for normal text and 3:1 for large text). WebAIM’s Contrast Checker is a great tool to verify contrast.
  • Add descriptive alt text to the image.
  • If the graphic conveys important information, include the information on the page in plain text in addition to the graphic (e.g. application process, important dates, etc.).
  • Test the graphics on different screen sizes to ensure readability.
  • Follow the brand guidelines and use fonts and colors that integrate well with the website.
contrast-graphic-example

Other Tips for Accessible & Inclusive Design

  • Avoid all caps. Some assistive technologies may read capitalized words as individual letters.
  • Reserve underlining for links. Avoid underlining non-link text to prevent confusion.
  • Be mindful of assumptive language. Words like just, simply, easily, and obviously can assume a level of familiarity that not all readers share.
  • Use bold and italics sparingly. Excessive use of these styles can be a trigger for Dyslexia and may reduce readability.
  • Keep language simple. Use clear, straightforward wording and minimize jargon.
  • Be cautious with figurative language. Avoid analogies, similes, and metaphors that rely heavily on specific demographics, locations, religions, or cultural references.
  • Use short sentences and paragraphs. Long text can be challenging to read for many users.

Helpful Links