WCAG 2.1 AA Accessibility Audit
City of Florida City

The homepage renders four identical "Read More" links in the News & Updates section. All carry no aria-label, aria-labelledby, or title attribute:

<a href="/news/notice-of-public-hearing-cdbg-first-public-hearing">Read More</a>
<a href="/news/joint-commission-agenda-review-meeting-may-7-2026">Read More</a>
<a href="/news/city-of-florida-city-joint-commission-agenda-review-meeting">Read More</a>

Additionally, 55 links on the Community Development Documents page are all labeled "View" with no distinguishing text.

Screen reader users commonly use their reader's Links List feature (NVDA: Insert+F7) to scan all links on a page. When all links in a section read identically ("Read More" / "View"), users must navigate to each link and listen to surrounding context — a process 3–5× slower than sighted scanning.

Remediation

<!-- Option A: aria-label -->
<a href="/news/notice-of-public-hearing-cdbg-first-public-hearing"
   aria-label="Read more about CDBG First Public Hearing Notice">
  Read More
</a>

<!-- Option B: visually hidden text -->
<a href="/news/...">
  Read More
  <span class="sr-only">about CDBG First Public Hearing</span>
</a>

Estimated effort: 4 hours (CMS template modification + QA).

Three distinct failure patterns were identified:

Pattern A — File name used as alt text:

<img alt="marketing.png" src="/uploads/...">  <!-- describes filename, not content -->
<img alt="megaphone" src="/uploads/...">     <!-- generic object, not informative -->

Pattern B — Functional logo missing alt text entirely (dark mode variant):

<!-- Dark logo linked to homepage — no alt attribute: -->
<a href="/">
  <img src="/uploads/1771694582914-logo-dark.png">
</a>

<!-- Light logo correctly labeled: -->
<a href="/">
  <img alt="City of Florida City logo — return to homepage"
       src="/uploads/logo-light.png">
</a>

Dark-mode users receive no announcement when their screen reader encounters the logo link — only the raw URL / is read aloud.

Recommended Alt Text

Estimated effort: 2 hours (content editor review).

Every page contains two identical <nav> elements (desktop and mobile) plus two repeated footer link groups ("Useful Links" and "More Links"), none of which carry distinguishing aria-label attributes:

<nav>           <!-- desktop navigation — no aria-label -->
  <ul>...</ul>
</nav>

<nav>           <!-- mobile navigation — identical content, no aria-label -->
  <ul>...</ul>
</nav>

NVDA's landmark navigation (D key) presents both as "navigation" with no way to distinguish them. Keyboard-only users must Tab through all navigation links twice before reaching main content. The skip navigation link (Skip to main content) is present and mitigates this on initial load — but not when returning to the top of the page.

Remediation

<nav aria-label="Primary navigation">...</nav>

<nav aria-label="Mobile navigation" aria-hidden="true">
  <!-- Hidden from accessibility tree when desktop nav is active -->
</nav>

Toggle aria-hidden on the inactive navigation via JavaScript as viewport changes.

Estimated effort: 2 hours.