5 Accessibility Fixes Any City Can Make This Week

Fix 1: Add Alt Text to Every Informative Image

What it is

Alt text is a short text description attached to an image via the alt attribute on the <img> tag. Screen readers read this text aloud so residents who are blind or have low vision understand what the image conveys. Without it, a screen reader either skips the image entirely or reads the file name, something like "IMG_4392.jpg," which tells the resident nothing.

Why it matters for residents

Imagine a blind resident visiting your parks department page. There is a photo of the new splash pad at Memorial Park with summer hours listed below it. Without alt text, the resident does not know the splash pad exists, does not know what it looks like, and has no context for the hours listed beneath it. They are excluded from information that every sighted resident takes for granted.

How to fix it

For every informative image, add an alt attribute that describes what the image communicates. Good alt text is concise and purposeful:

For decorative images that add no information (background patterns, visual dividers, stock photos used for aesthetics), use an empty alt attribute: alt="". This tells screen readers to skip the image entirely, which is the correct behavior for decoration.

Fix 2: Fix Color Contrast Ratios

What it is

Color contrast is the difference in brightness between your text and its background. WCAG requires a minimum contrast ratio of 4.5:1 for normal-sized text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Many government websites use light gray text on white backgrounds, blue text on dark blue headers, or low-contrast color combinations in buttons and navigation elements.

Why it matters for residents

Roughly 12 million Americans over age 40 have some form of vision impairment. Low-contrast text is difficult or impossible for them to read. It also affects anyone reading a screen in direct sunlight, anyone with aging eyes, and anyone experiencing screen glare. When your water bill payment instructions are in light gray text, you are creating a barrier for a significant portion of your residents.

How to fix it

Use a contrast checking tool. The WebAIM Contrast Checker is free and runs in any browser. Enter your text color and background color, and it will tell you the ratio and whether it passes WCAG AA. For most sites, the fix is straightforward: darken your grays, ensure your link colors have sufficient contrast against their backgrounds, and check that any text overlaid on images has enough contrast. Common fixes include changing #999999 text to #595959 or darker.

Fix 3: Add Labels to Every Form Field

What it is

Every input field in a form (text fields, dropdowns, checkboxes, radio buttons) needs a programmatically associated <label> element. Many developers use placeholder text inside the field as the only indicator of what information is expected. Placeholders are not labels. They disappear when a resident starts typing, leaving no indication of what the field is for. They are also not reliably announced by screen readers.

Why it matters for residents

A blind resident filling out your water service application form encounters a text field. Their screen reader says "edit text" and nothing else. They have no way of knowing whether the field expects their name, their address, their account number, or something else. Without labels, every form on your site becomes a guessing game for residents using assistive technology. This is also true for residents with cognitive disabilities who rely on persistent labels as reference points while filling out long forms.

How to fix it

Add a <label> element for every form field and connect them with matching for and id attributes. The label should be visible. Do not hide it. A visible label benefits everyone: sighted residents, screen reader users, residents with cognitive disabilities, and anyone filling out the form on a small mobile screen. You can keep placeholder text as a supplementary hint, but the label must be there and visible.

Fix 4: Add the Lang Attribute to Your HTML Tag

What it is

The lang attribute on your HTML element tells browsers and assistive technologies what language your page content is in. It looks like this: <html lang="en"> for English. Without it, screen readers have to guess the language, which frequently results in garbled pronunciation that makes content unintelligible.

Why it matters for residents

A blind resident using a screen reader configured for English visits your site. Without the lang attribute, the screen reader might apply Spanish pronunciation rules, French pronunciation rules, or its default heuristic, any of which will make your English content sound like gibberish. For municipalities with multilingual content, the lang attribute on specific sections also ensures that Spanish-language pages are read with Spanish pronunciation.

How to fix it

This is a single line of code. Open your site's main template or layout file, find the <html> tag, and add lang="en" (or the appropriate language code). If your CMS generates the HTML tag, look for the language setting in your CMS configuration. Most modern CMS platforms have this option. For pages in other languages, use the appropriate code: es for Spanish, fr for French, and so on. This fix takes 30 seconds and immediately fixes a WCAG Level A violation on every page of your site.