Accessibility Health Check
https://fargond.gov
Strong
https://daylight.sonde.life/usgov/fargond-gov/
Strong
Executive Summary
Top Findings
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Skip Nav"WCAG 1.4.3
<a id="skip-navigation" href="#skip-nav">Skip Nav</a>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "225 4th Street N.Fargo, ND 58102"WCAG 1.4.3
<address>225 4th Street N.<br>Fargo, ND 58102</address>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "FARGO CITY HALL"WCAG 1.4.3
<h3>FARGO CITY HALL</h3>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Apr"WCAG 1.4.3
<p class="month">Apr</p>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Live"WCAG 1.4.3
<a href="/live">Live</a>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1). Current ratio: 3.99:1 (need 4.5:1). Change foreground from #ffffff to #171616 (ratio: 4.5:1). Current ratio: 2.81:1 (need 4.5:1). Change foreground from #ffffff to #333333 (ratio: 4.5:1).
criticalInsufficient color contrast: 3.84:1 (required: 4.5:1 for normal text). Foreground: rgb(51, 51, 51), background: rgb(18, 163, 83). Text: "Online Payments"WCAG 1.4.3
<div class="icon">Online Payments</div>
Current ratio: 3.84:1 (need 4.5:1). Change foreground from #333333 to #282727 (ratio: 4.5:1). Current ratio: 1.08:1 (need 4.5:1). Change foreground from #333333 to #a1a1a0 (ratio: 4.5:1). Or change background from #0d3c56 to #000000. Current ratio: 2.92:1 (need 4.5:1). Change foreground from #333333 to #0d0c0c (ratio: 4.5:1). Current ratio: 2.78:1 (need 4.5:1). Change foreground from #333333 to #040404 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "225 4th Street N.Fargo, ND 58102"WCAG 1.4.3
<address>225 4th Street N.<br>Fargo, ND 58102</address>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "FARGO CITY HALL"WCAG 1.4.3
<h3>FARGO CITY HALL</h3>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
highImage has no accessible name in the accessibility tree. Screen readers will skip or announce it generically.WCAG 1.1.1
<!-- a11y: role="image" -->
Add alt text to the image. If decorative, mark with role="presentation" or alt="". WCAG 1.1.1 requires text alternatives for non-text content.
highImage has no accessible name in the accessibility tree. Screen readers will skip or announce it generically.WCAG 1.1.1
<!-- a11y: role="image" -->
Add alt text to the image. If decorative, mark with role="presentation" or alt="". WCAG 1.1.1 requires text alternatives for non-text content.
highImage has no accessible name in the accessibility tree. Screen readers will skip or announce it generically.WCAG 1.1.1
<!-- a11y: role="image" -->
Add alt text to the image. If decorative, mark with role="presentation" or alt="". WCAG 1.1.1 requires text alternatives for non-text content.
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 3.63 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #d16753, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<a href="/news-events/calendar" data-key="2">City Calendar</a>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
highForm elements should have a visible label: Fix all of the following: Only title used to generate label for form element
<input type="search" name="search" placeholder="Search..." autocomplete="off" title="Search" value="">
Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes. See: https://www.w3.org/WAI/WCAG22/quickref/
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 3.27 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #cf7916, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<h2>Visitors</h2>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 4.18 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #188e4d, font size: 15.8pt (21px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="icontext">Online <br>Payments</div>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum Current ratio: 3.29:1 (need 4.5:1). Change foreground from #ffffff to #282727 (ratio: 4.5:1). Current ratio: 2.50:1 (need 4.5:1). Change foreground from #ffffff to #3b3a3a (ratio: 4.5:1). Current ratio: 4.32:1 (need 4.5:1). Change foreground from #ffffff to #0d0c0c (ratio: 4.5:1).
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 3.28 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #cf7917, font size: 15.8pt (21px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="icontext">Land <br>Parcels</div>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 4.17 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #188e4d, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<h2>Residents</h2>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum Current ratio: 3.29:1 (need 4.5:1). Change foreground from #ffffff to #282727 (ratio: 4.5:1). Current ratio: 2.50:1 (need 4.5:1). Change foreground from #ffffff to #3b3a3a (ratio: 4.5:1). Current ratio: 3.99:1 (need 4.5:1). Change foreground from #ffffff to #171616 (ratio: 4.5:1).
highAll touch targets must be 24px large, or leave sufficient space: Fix any of the following: Target has insufficient size (101.5px by 20.8px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17.6px instead of at least 24px.WCAG 2.5.8
<a class="read-more" href="/news-events/city-news-releases/post-detail?id=69ebabbbc1a97ba6155903f8">Read Story ›</a>
Ensure touch targets have sufficient size and space. See: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
highAll touch targets must be 24px large, or leave sufficient space: Fix any of the following: Target has insufficient size (102.7px by 20.8px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17.6px instead of at least 24px.WCAG 2.5.8
<a class="read-more" href="https://youtu.be/LgaK7m90Suk?si=ghfwh3WSZjiI193R">View Video ›</a>
Ensure touch targets have sufficient size and space. See: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
highForm elements should have a visible label: Fix all of the following: Only title used to generate label for form element
<input type="search" name="search" placeholder="Search..." autocomplete="off" title="Search" value="">
Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes. See: https://www.w3.org/WAI/WCAG22/quickref/
highForm elements should have a visible label: Fix all of the following: Only title used to generate label for form element
<input type="search" name="search" placeholder="Search..." autocomplete="off" title="Search" value="">
Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes. See: https://www.w3.org/WAI/WCAG22/quickref/
highFocus jumps backward from "Contact Your" to "#slider > ul > li:nth-of-type(1) > a" (visual distance: 448px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(7) > a" (visual distance: 404px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(8) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(4) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "#searchForm > input:nth-of-type(1)" to "#searchForm > input:nth-of-type(2)" (visual distance: 5001px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<input></input>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(5) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(3) > a" (visual distance: 404px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(2) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(6) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "#searchForm > input:nth-of-type(1)" to "#searchForm > input:nth-of-type(2)" (visual distance: 5001px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<input></input>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "#searchForm > input:nth-of-type(1)" to "#searchForm > input:nth-of-type(2)" (visual distance: 5001px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<input></input>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "701.476.5999." to "Get Directions ›" (visual distance: 528px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a>Get Directions ›</a>
Reorder elements in the DOM to match the visual layout.
mediumPage has 2 "complementary" landmarks but only 0 have distinct labels. Screen reader users cannot distinguish between them.WCAG 1.3.1
<!-- 2 complementary landmarks, 0 labeled -->
Add unique aria-label or aria-labelledby to each "complementary" landmark so screen readers can differentiate them. Example: <nav aria-label="Primary">, <nav aria-label="Footer">.
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="green-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="caption"><a class="heading" id="youtubetitle" href="https://youtu.be/M93M--abI8c?si=FNlGNIX19QMM_Xun">Featured Video ›</a><p id="youtubedesc"></p><hr><a class="read-more" href="https:...
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<section class="homepage" id="home-hero">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="darkblue-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en" style="height: 100%;">
Ensure the document has a main landmark. See: https://www.w3.org/WAI/WCAG22/quickref/ Ensure that the page, or at least one of its frames contains a level-one heading. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="blue-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="orange-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumLandmarks should have a unique role or role/label/title (i.e. accessible name) combination: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
<aside class="home-news-events" id="news-events">
Ensure landmarks are unique. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<ul id="breadcrumbs"><li><a href="/">Home</a><span>›</span></li><li>Live</li></ul>
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en" style="height: 100%;">
Ensure the document has a main landmark. See: https://www.w3.org/WAI/WCAG22/quickref/ Ensure that the page, or at least one of its frames contains a level-one heading. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="blue-transparent-bg" id="hero"><h2>Live</h2><img id="hero-image" src="https://download.fargond.gov/resize/878/200/0/live.jpg" alt="Live Hero Image"></div>
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="row">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<ul id="breadcrumbs"><li><a href="/">Home</a><span>›</span></li><li><a href="/live">Live</a><span>›</span></li><li>Access Television</li></ul>
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en" style="height: 100%;">
Ensure the document has a main landmark. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<section class="threeColumn" id="content">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<section id="right-sidebar">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="blue-transparent-bg" id="hero">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumLink is distinguished from surrounding text only by color (link: rgb(0, 108, 158), text: rgb(51, 51, 51)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/">Home</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(255, 255, 255), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live">Live</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/flooding">Flooding ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/health">Health ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/cass-clay-alerts">Cass Clay Alerts ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/emergency-preparedness">Emergency Preparedness ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/housing">Housing ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/access-tv">Access TV ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/homelessness">Homelessness ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://fargo-nd.civilspace.io/en">FargoStreets ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/garbage-recycling">Garbage & Recycling ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumPage requires horizontal scrolling at 320px width (5px overflow). Content should reflow without horizontal scrolling at this width.WCAG 1.4.10
<html>
Use responsive CSS (max-width, flex-wrap, media queries) to ensure content reflows at narrow widths.
mediumContent clipped by 65px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<span class="sr-only">Access Television</span>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumMissing X-Frame-Options header
Add X-Frame-Options: DENY or SAMEORIGIN Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
mediumMissing X-Frame-Options header
Add X-Frame-Options: DENY or SAMEORIGIN Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
mediumMissing X-Frame-Options header
Add X-Frame-Options: DENY or SAMEORIGIN Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
lowLink timeout: https://fargond.gov/live/library did not respond within 5000ms after 5 attempts
<a href="https://fargond.gov/live/library">Library ›</a>
lowLink timeout: http://www.fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://www.fargoone.com/">FargoOne(3-1-1)</a>
lowBroken link: https://twitter.com/thecityoffargo returned status 403 Forbidden after 1 attempts
<a href="https://twitter.com/thecityoffargo">X IconConnecton X ›</a>
lowLink timeout: http://fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://fargoone.com/">FargoOne (3-1-1)</a>
lowBroken link: https://twitter.com/thecityoffargo returned status 403 Forbidden after 1 attempts
<a href="https://twitter.com/thecityoffargo">Twitter</a>
lowLink timeout: https://fargond.gov/live/library did not respond within 5000ms after 5 attempts
<a href="https://fargond.gov/live/library">Library ›</a>
lowLink timeout: http://fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://fargoone.com/">FargoOne (3-1-1)</a>
lowBroken link: https://twitter.com/thecityoffargo returned status 403 Forbidden after 1 attempts
<a href="https://twitter.com/thecityoffargo">Twitter</a>
lowLink timeout: http://fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://fargoone.com/">FargoOne (3-1-1)</a>
lowLink timeout: https://fargond.gov/live/library did not respond within 5000ms after 5 attempts
<a href="https://fargond.gov/live/library">Library ›</a>
lowPossible stuck loading animation: "spinner-dash" still running after page readiness
<circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
lowPossible stuck loading animation: "spinner-rotator" still running after page readiness
<svg xmlns="http://www.w3.org/2000/svg" class="VIpgJd-ZVi9od-aZ2wEe" width="96px" height="96px" viewBox="0 0 66 66"><circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linec
lowPossible stuck loading animation: "spinner-dash" still running after page readiness
<circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
lowPossible stuck loading animation: "spinner-rotator" still running after page readiness
<svg xmlns="http://www.w3.org/2000/svg" class="VIpgJd-ZVi9od-aZ2wEe" width="96px" height="96px" viewBox="0 0 66 66"><circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linec
lowPossible stuck loading animation: "spinner-dash" still running after page readiness
<circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
lowPossible stuck loading animation: "spinner-rotator" still running after page readiness
<svg xmlns="http://www.w3.org/2000/svg" class="VIpgJd-ZVi9od-aZ2wEe" width="96px" height="96px" viewBox="0 0 66 66"><circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linec
Best Page Fix Opportunities
fargond.gov45findings
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInteractive element with role="link" has no accessible name. Screen readers cannot identify this control.WCAG 4.1.2
<!-- a11y: role="link" -->
Add an accessible name using aria-label, aria-labelledby, or visible text content. WCAG 4.1.2 requires all interactive elements to have a programmatically determinable name.
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Skip Nav"WCAG 1.4.3
<a id="skip-navigation" href="#skip-nav">Skip Nav</a>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "225 4th Street N.Fargo, ND 58102"WCAG 1.4.3
<address>225 4th Street N.<br>Fargo, ND 58102</address>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "FARGO CITY HALL"WCAG 1.4.3
<h3>FARGO CITY HALL</h3>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Apr"WCAG 1.4.3
<p class="month">Apr</p>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Live"WCAG 1.4.3
<a href="/live">Live</a>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1). Current ratio: 3.99:1 (need 4.5:1). Change foreground from #ffffff to #171616 (ratio: 4.5:1). Current ratio: 2.81:1 (need 4.5:1). Change foreground from #ffffff to #333333 (ratio: 4.5:1).
criticalInsufficient color contrast: 3.84:1 (required: 4.5:1 for normal text). Foreground: rgb(51, 51, 51), background: rgb(18, 163, 83). Text: "Online Payments"WCAG 1.4.3
<div class="icon">Online Payments</div>
Current ratio: 3.84:1 (need 4.5:1). Change foreground from #333333 to #282727 (ratio: 4.5:1). Current ratio: 1.08:1 (need 4.5:1). Change foreground from #333333 to #a1a1a0 (ratio: 4.5:1). Or change background from #0d3c56 to #000000. Current ratio: 2.92:1 (need 4.5:1). Change foreground from #333333 to #0d0c0c (ratio: 4.5:1). Current ratio: 2.78:1 (need 4.5:1). Change foreground from #333333 to #040404 (ratio: 4.5:1).
highImage has no accessible name in the accessibility tree. Screen readers will skip or announce it generically.WCAG 1.1.1
<!-- a11y: role="image" -->
Add alt text to the image. If decorative, mark with role="presentation" or alt="". WCAG 1.1.1 requires text alternatives for non-text content.
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 3.63 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #d16753, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<a href="/news-events/calendar" data-key="2">City Calendar</a>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
highForm elements should have a visible label: Fix all of the following: Only title used to generate label for form element
<input type="search" name="search" placeholder="Search..." autocomplete="off" title="Search" value="">
Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes. See: https://www.w3.org/WAI/WCAG22/quickref/
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 3.27 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #cf7916, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<h2>Visitors</h2>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 4.18 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #188e4d, font size: 15.8pt (21px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="icontext">Online <br>Payments</div>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum Current ratio: 3.29:1 (need 4.5:1). Change foreground from #ffffff to #282727 (ratio: 4.5:1). Current ratio: 2.50:1 (need 4.5:1). Change foreground from #ffffff to #3b3a3a (ratio: 4.5:1). Current ratio: 4.32:1 (need 4.5:1). Change foreground from #ffffff to #0d0c0c (ratio: 4.5:1).
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 3.28 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #cf7917, font size: 15.8pt (21px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="icontext">Land <br>Parcels</div>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 4.17 between the foreground and shadow color (foreground color: #ffffff, text-shadow color: #188e4d, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<h2>Residents</h2>
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds. See: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum Current ratio: 3.29:1 (need 4.5:1). Change foreground from #ffffff to #282727 (ratio: 4.5:1). Current ratio: 2.50:1 (need 4.5:1). Change foreground from #ffffff to #3b3a3a (ratio: 4.5:1). Current ratio: 3.99:1 (need 4.5:1). Change foreground from #ffffff to #171616 (ratio: 4.5:1).
highAll touch targets must be 24px large, or leave sufficient space: Fix any of the following: Target has insufficient size (101.5px by 20.8px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17.6px instead of at least 24px.WCAG 2.5.8
<a class="read-more" href="/news-events/city-news-releases/post-detail?id=69ebabbbc1a97ba6155903f8">Read Story ›</a>
Ensure touch targets have sufficient size and space. See: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
highAll touch targets must be 24px large, or leave sufficient space: Fix any of the following: Target has insufficient size (102.7px by 20.8px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 17.6px instead of at least 24px.WCAG 2.5.8
<a class="read-more" href="https://youtu.be/LgaK7m90Suk?si=ghfwh3WSZjiI193R">View Video ›</a>
Ensure touch targets have sufficient size and space. See: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
highFocus jumps backward from "Contact Your" to "#slider > ul > li:nth-of-type(1) > a" (visual distance: 448px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(7) > a" (visual distance: 404px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(8) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(4) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "#searchForm > input:nth-of-type(1)" to "#searchForm > input:nth-of-type(2)" (visual distance: 5001px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<input></input>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(5) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(3) > a" (visual distance: 404px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(2) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "View More ›" to "#slider > ul > li:nth-of-type(6) > a" (visual distance: 415px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout.
mediumPage has 2 "complementary" landmarks but only 0 have distinct labels. Screen reader users cannot distinguish between them.WCAG 1.3.1
<!-- 2 complementary landmarks, 0 labeled -->
Add unique aria-label or aria-labelledby to each "complementary" landmark so screen readers can differentiate them. Example: <nav aria-label="Primary">, <nav aria-label="Footer">.
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="green-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="caption"><a class="heading" id="youtubetitle" href="https://youtu.be/M93M--abI8c?si=FNlGNIX19QMM_Xun">Featured Video ›</a><p id="youtubedesc"></p><hr><a class="read-more" href="https:...
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<section class="homepage" id="home-hero">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="darkblue-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en" style="height: 100%;">
Ensure the document has a main landmark. See: https://www.w3.org/WAI/WCAG22/quickref/ Ensure that the page, or at least one of its frames contains a level-one heading. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="blue-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<article class="orange-heading">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumLandmarks should have a unique role or role/label/title (i.e. accessible name) combination: Fix any of the following: The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable
<aside class="home-news-events" id="news-events">
Ensure landmarks are unique. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumMissing X-Frame-Options header
Add X-Frame-Options: DENY or SAMEORIGIN Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
lowLink timeout: https://fargond.gov/live/library did not respond within 5000ms after 5 attempts
<a href="https://fargond.gov/live/library">Library ›</a>
lowLink timeout: http://www.fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://www.fargoone.com/">FargoOne(3-1-1)</a>
lowBroken link: https://twitter.com/thecityoffargo returned status 403 Forbidden after 1 attempts
<a href="https://twitter.com/thecityoffargo">X IconConnecton X ›</a>
lowLink timeout: http://fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://fargoone.com/">FargoOne (3-1-1)</a>
lowPossible stuck loading animation: "spinner-dash" still running after page readiness
<circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
lowPossible stuck loading animation: "spinner-rotator" still running after page readiness
<svg xmlns="http://www.w3.org/2000/svg" class="VIpgJd-ZVi9od-aZ2wEe" width="96px" height="96px" viewBox="0 0 66 66"><circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linec
/live/access-tv26findings
highImage has no accessible name in the accessibility tree. Screen readers will skip or announce it generically.WCAG 1.1.1
<!-- a11y: role="image" -->
Add alt text to the image. If decorative, mark with role="presentation" or alt="". WCAG 1.1.1 requires text alternatives for non-text content.
highForm elements should have a visible label: Fix all of the following: Only title used to generate label for form element
<input type="search" name="search" placeholder="Search..." autocomplete="off" title="Search" value="">
Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes. See: https://www.w3.org/WAI/WCAG22/quickref/
highFocus jumps backward from "#searchForm > input:nth-of-type(1)" to "#searchForm > input:nth-of-type(2)" (visual distance: 5001px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<input></input>
Reorder elements in the DOM to match the visual layout.
highFocus jumps backward from "701.476.5999." to "Get Directions ›" (visual distance: 528px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a>Get Directions ›</a>
Reorder elements in the DOM to match the visual layout.
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<ul id="breadcrumbs"><li><a href="/">Home</a><span>›</span></li><li><a href="/live">Live</a><span>›</span></li><li>Access Television</li></ul>
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en" style="height: 100%;">
Ensure the document has a main landmark. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<section class="threeColumn" id="content">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<section id="right-sidebar">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="blue-transparent-bg" id="hero">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumLink is distinguished from surrounding text only by color (link: rgb(255, 255, 255), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live">Live</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/flooding">Flooding ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/health">Health ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/cass-clay-alerts">Cass Clay Alerts ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/emergency-preparedness">Emergency Preparedness ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/housing">Housing ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/access-tv">Access TV ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/homelessness">Homelessness ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://fargo-nd.civilspace.io/en">FargoStreets ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumLink is distinguished from surrounding text only by color (link: rgb(13, 60, 86), text: rgb(0, 0, 0)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/live/garbage-recycling">Garbage & Recycling ›</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumContent clipped by 65px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<span class="sr-only">Access Television</span>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumMissing X-Frame-Options header
Add X-Frame-Options: DENY or SAMEORIGIN Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
lowBroken link: https://twitter.com/thecityoffargo returned status 403 Forbidden after 1 attempts
<a href="https://twitter.com/thecityoffargo">Twitter</a>
lowLink timeout: http://fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://fargoone.com/">FargoOne (3-1-1)</a>
lowLink timeout: https://fargond.gov/live/library did not respond within 5000ms after 5 attempts
<a href="https://fargond.gov/live/library">Library ›</a>
lowPossible stuck loading animation: "spinner-dash" still running after page readiness
<circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
lowPossible stuck loading animation: "spinner-rotator" still running after page readiness
<svg xmlns="http://www.w3.org/2000/svg" class="VIpgJd-ZVi9od-aZ2wEe" width="96px" height="96px" viewBox="0 0 66 66"><circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linec
/live17findings
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "225 4th Street N.Fargo, ND 58102"WCAG 1.4.3
<address>225 4th Street N.<br>Fargo, ND 58102</address>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "FARGO CITY HALL"WCAG 1.4.3
<h3>FARGO CITY HALL</h3>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
highImage has no accessible name in the accessibility tree. Screen readers will skip or announce it generically.WCAG 1.1.1
<!-- a11y: role="image" -->
Add alt text to the image. If decorative, mark with role="presentation" or alt="". WCAG 1.1.1 requires text alternatives for non-text content.
highForm elements should have a visible label: Fix all of the following: Only title used to generate label for form element
<input type="search" name="search" placeholder="Search..." autocomplete="off" title="Search" value="">
Ensure that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes. See: https://www.w3.org/WAI/WCAG22/quickref/
highFocus jumps backward from "#searchForm > input:nth-of-type(1)" to "#searchForm > input:nth-of-type(2)" (visual distance: 5001px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<input></input>
Reorder elements in the DOM to match the visual layout.
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<ul id="breadcrumbs"><li><a href="/">Home</a><span>›</span></li><li>Live</li></ul>
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en" style="height: 100%;">
Ensure the document has a main landmark. See: https://www.w3.org/WAI/WCAG22/quickref/ Ensure that the page, or at least one of its frames contains a level-one heading. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="blue-transparent-bg" id="hero"><h2>Live</h2><img id="hero-image" src="https://download.fargond.gov/resize/878/200/0/live.jpg" alt="Live Hero Image"></div>
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="row">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumLink is distinguished from surrounding text only by color (link: rgb(0, 108, 158), text: rgb(51, 51, 51)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="/">Home</a>
Add a non-color visual indicator to links: underline (text-decoration: underline), border-bottom, increased font-weight, or a visible icon. The indicator must be present in the default state, not just on hover.
mediumPage requires horizontal scrolling at 320px width (5px overflow). Content should reflow without horizontal scrolling at this width.WCAG 1.4.10
<html>
Use responsive CSS (max-width, flex-wrap, media queries) to ensure content reflows at narrow widths.
mediumMissing X-Frame-Options header
Add X-Frame-Options: DENY or SAMEORIGIN Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
lowBroken link: https://twitter.com/thecityoffargo returned status 403 Forbidden after 1 attempts
<a href="https://twitter.com/thecityoffargo">Twitter</a>
lowLink timeout: https://fargond.gov/live/library did not respond within 5000ms after 5 attempts
<a href="https://fargond.gov/live/library">Library ›</a>
lowLink timeout: http://fargoone.com/ did not respond within 5000ms after 8 attempts
<a href="http://fargoone.com/">FargoOne (3-1-1)</a>
lowPossible stuck loading animation: "spinner-dash" still running after page readiness
<circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
lowPossible stuck loading animation: "spinner-rotator" still running after page readiness
<svg xmlns="http://www.w3.org/2000/svg" class="VIpgJd-ZVi9od-aZ2wEe" width="96px" height="96px" viewBox="0 0 66 66"><circle class="VIpgJd-ZVi9od-aZ2wEe-Jt5cK" fill="none" stroke-width="6" stroke-linec
Methodology
The Sonde Score is a universal 0–1000 compliance index — think of it like a credit score for accessibility. Each finding is weighted by its impact on human access: a keyboard trap (critical) counts far more than a best-practice suggestion (low). The raw penalty is normalized per page so scores are comparable across sites of any size. A harmonic curve ensures every site gets a meaningful score — no zeros, no false perfection.
where S = sensitivity (750), P = Σ(weight × count), N = pages scanned
| Tier | Weight | Examples |
|---|---|---|
| Critical | 10 | Keyboard traps, missing page language |
| High | 3 | Missing alt text, insufficient contrast |
| Medium | 1 | Heading hierarchy, unclear link purpose |
| Low | 0.25 | Best-practice suggestions |
The Sonde Score is a living standard (v0.1). We’re building it in the open because accessibility is too important for closed-door decisions. Your expertise makes it better.
Enter Mission Control
Review raw findings data, track changes between scans, and contribute to Sonde’s open methodology.
Nominate a Site for the Daylight Index
Know a public website that should be on the accessibility leaderboard? Nominate it — we’ll scan it and publish the results.