Accessibility Health Check
https://honolulu.gov
Excellent
https://daylight.sonde.life/usgov/honolulu-gov/
Excellent
Executive Summary
Top Findings
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Class Specification Search"WCAG 1.4.3
<span class="elementor-button-text">Class Specification Search</span>
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: "Prospective Employees"WCAG 1.4.3
<div class="e-n-accordion-item-title-text"> Prospective Employees </div>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
highAll touch targets must be 24px large, or leave sufficient space: Fix any of the following: Target has insufficient size (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
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 (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
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 (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span>
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 (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
Ensure touch targets have sufficient size and space. See: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 1.14 (foreground color: #ffffff, background color: #efefef, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="e-n-accordion-item-title-text"> Current Employees </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 1.14 (foreground color: #ffffff, background color: #efefef, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="e-n-accordion-item-title-text"> Retired Employees </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
highFocus jumps backward from "College Program" to "Trades Program" (visual distance: 392px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a>Trades Program</a>
Reorder elements in the DOM to match the visual layout.
highMissing X-Content-Type-Options header
Add X-Content-Type-Options: nosniff Add X-Frame-Options: DENY or SAMEORIGIN Add a Content-Security-Policy header with appropriate directives Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
highMissing X-Content-Type-Options header
Add X-Content-Type-Options: nosniff Add X-Frame-Options: DENY or SAMEORIGIN Add a Content-Security-Policy header with appropriate directives Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="elementor-element elementor-element-501919f e-con-full e-flex e-con e-child" data-id="501919f" data-element_type="container" data-e-type="container">
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="elementor-element elementor-element-400abe0 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="400abe0" data-...
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="elementor-element elementor-element-3dc0ce6 e-con-full e-flex e-con e-child" data-id="3dc0ce6" data-element_type="container" data-e-type="container" data-settings="{"background_background"...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
<span class="elementor-button-text">Sign up for email alerts</span>
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="elementor-element elementor-element-a5a6ae3 elementor-widget elementor-widget-heading" data-id="a5a6ae3" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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
<span class="elementor-button-text">All Events </span>
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="elementor-element elementor-element-d58b8a8 elementor-widget elementor-widget-heading" data-id="d58b8a8" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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
<span class="elementor-button-text">More Services</span>
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
<span class="elementor-button-text">Meet the Mayor!</span>
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
<span class="elementor-button-text">View More</span>
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="elementor-element elementor-element-d1e3699 elementor-widget elementor-widget-heading" data-id="d1e3699" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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="elementor-element elementor-element-5e586f0 elementor-widget elementor-widget-shortcode" data-id="5e586f0" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.defau...
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="elementor-element elementor-element-e78c464 elementor-widget elementor-widget-heading" data-id="e78c464" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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-US" class="js">
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="elementor-element elementor-element-0f41f8e elementor-widget elementor-widget-image" data-id="0f41f8e" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
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
<span class="elementor-button-text">Find Your Councilmember</span>
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="elementor-element elementor-element-718cd00 e-con-full e-flex e-con e-parent" data-id="718cd00" data-element_type="container" data-e-type="container" data-settings="{"background_background...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="elementor-element elementor-element-a52c7b0 e-con-full e-flex e-con e-child" data-id="a52c7b0" data-element_type="container" data-e-type="container" data-settings="{"background_background"...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="elementor-element elementor-element-96e8e6d e-flex e-con-boxed e-con e-parent e-lazyloaded" data-id="96e8e6d" data-element_type="container" data-e-type="container" data-settings="{"backgro...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-US" class="js">
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
<div class="elementor-element elementor-element-54d7035 e-flex e-con-boxed e-con e-parent" data-id="54d7035" data-element_type="container" data-e-type="container">
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="elementor-element elementor-element-9c0b31b e-con-full e-flex e-con e-child" data-id="9c0b31b" data-element_type="container" data-e-type="container">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAside should not be contained in another landmark: Fix any of the following: The complementary landmark is contained in another landmark.
<aside class="footer-widget-area widget-area site-footer-focus-item footer-widget-area-inner" data-section="sidebar-widgets-footer-widget-1" aria-label="Footer Widget 1">
Ensure the complementary landmark or aside is at top level. 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="elementor-element elementor-element-5c4f698 elementor-widget elementor-widget-heading" data-id="5c4f698" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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(19, 71, 148), 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://www.honolulu.gov" title="City and County of Honolulu" rel="home">City and County of Honolulu</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(51, 55, 61), 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://www.honolulu.gov/news/" class="elementor-item menu-link" tabindex="-1">News</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(19, 71, 148), 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://www.honolulu.gov/dpp/permitting/building-permits-home/"> <span class="elementor-icon-list-text">Apply for a building permit</span> </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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Accounting%20and%20Finance&category%5b1%5d=Audit&category%5b2%5d=Grants%20Administration&category%5b3%5d=Purchasing
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=911%20Telecommunications&category%5b1%5d=Criminology&category%5b2%5d=Dispatch&category%5b3%5d=Emergency%20Managemen
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Audit&category%5b1%5d=Clerical%20%26%20Data%20Entry&category%5b2%5d=Database%20Administration&category%5b3%5d=Elect
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(56, 96, 162), 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://www.honolulu.gov/dhr" title="Department of Human Resources" rel="home">Department of Human Resources</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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Administrative%20Assistant&category%5b1%5d=Clerical%20%26%20Data%20Entry&category%5b2%5d=Customer%20Service&categor
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(56, 96, 162), 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://www.honolulu.gov/apps/tempjobs/" aria-label="check mark icon"> <span class="elementor-icon-list-icon"> <i aria-hidden="true" class="fas fa-check"></i> </span>
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Architecture&category%5b1%5d=Building%20%26%20Safety&category%5b2%5d=Building%20Maintenance&category%5b3%5d=Code%20
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Architecture&category%5b1%5d=Building%20%26%20Safety&category%5b2%5d=Engineering&category%5b3%5d=Project%20Manageme
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu" aria-label="check mark icon"> <span class="elementor-icon-list-icon"> <i aria-hidden="true" class="fas fa-check"></i>
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Arts&category%5b1%5d=Community%20and%20Social%20Services&category%5b2%5d=Community%20Development&category%5b3%5d=Co
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.
mediumClicking "#masthead > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div > a" inserts 1 element(s) without ARIA live region. Screen readers will not announce this dynamic content.WCAG 4.1.3
<a class="elementor-icon" href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE5MDUyIiwidG9nZ2xlIjpmYWxzZX0%3D" aria-label="Open site search" role="button" data-nav="utility"> <i
Wrap dynamically inserted content in an element with aria-live="polite" (or role="status"/"alert") so assistive technologies announce the change.
mediumPage has only one navigation mechanism (navigation). WCAG requires at least two ways to locate a page within a set of pages.WCAG 2.4.5
Add at least two of: site navigation (<nav>), search functionality (input[type="search"] or role="search"), a sitemap link, breadcrumb navigation, or a table of contents.
mediumPage has only one navigation mechanism (navigation). WCAG requires at least two ways to locate a page within a set of pages.WCAG 2.4.5
Add at least two of: site navigation (<nav>), search functionality (input[type="search"] or role="search"), a sitemap link, breadcrumb navigation, or a table of contents.
mediumContent clipped by 23px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<a class="skip-link screen-reader-text" href="#content" title="Skip to content"> Skip to content</a>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumElement overflows viewport by 281px at 320px width.WCAG 1.4.10
<a class="swiper-slide-inner" href="https://www.honolulu.gov/dhr/career/" aria-label="Open career webpage"><div class="swiper-slide-contents"></div></a>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 601px at 320px width.WCAG 1.4.10
<div class="elementor-slide-heading">Stay Informed, Stay Safe!</div>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumContent clipped by 30px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<h3 class="multisite-post-title"><a href="https://www.honolulu.gov/dpr/dpr-news/hawaiian-traditions-inspire-cultural-education-at-the-98th-lei-day-celebration/">Hawaiian traditions inspire cultural ed
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumElement overflows viewport by 281px at 320px width.WCAG 1.4.10
<div class="elementor-repeater-item-542c857 swiper-slide" role="group" aria-roledescription="slide"><div class="swiper-slide-bg" role="img" aria-label="Your City Your Career"></div><a class="swiper-sl
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 601px at 320px width.WCAG 1.4.10
<div class="swiper-slide-contents"><div class="elementor-slide-heading">Stay Informed, Stay Safe!</div><div class="elementor-button elementor-slide-button elementor-size-md">Prepare Yourself</div></di
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 580px at 320px width.WCAG 1.4.10
<div class="elementor-button elementor-slide-button elementor-size-md">Prepare Yourself</div>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 281px at 320px width.WCAG 1.4.10
<div class="swiper-slide-bg" role="img" aria-label="Your City Your Career"></div>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumContent clipped by 82px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<div class="multisite-post-image"><img decoding="async" width="150" height="150" src="https://www.honolulu.gov/wp-content/uploads/sites/34/2023/11/leiday_imgs/Lei_Day_Program_Leis_1-150x150.jpg" class
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumPage requires horizontal scrolling at 320px width (39px 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.
mediumElement overflows viewport by 601px at 320px width.WCAG 1.4.10
<div class="elementor-repeater-item-deb45c4 swiper-slide" role="group" aria-roledescription="slide"><div class="swiper-slide-bg" role="img" aria-label="stay informed, stay safe! Prepare yourself"></di
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 921px at 320px width.WCAG 1.4.10
<div class="elementor-repeater-item-804dda7 swiper-slide" role="group" aria-roledescription="slide"><div class="swiper-slide-bg" role="img" aria-label="beach-foam-waves-2179183"></div><a class="swiper
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
lowDeep focus region: nav "Menu" has 14 tab stops before focus escapes. Consider adding skip navigation or grouping with arrow keys.WCAG 2.4.1
<nav role="nav">Menu</nav>
Add a "skip to content" link or use roving tabindex to reduce the number of Tab stops.
lowLink timeout: https://www.honolulu.gov/events/event/oahu-historic-preservation-commission-meeting-10-29436/ did not respond within 5000ms after 2 attempts
<a href="https://www.honolulu.gov/events/event/oahu-historic-preservation-commission-meeting-10-29436/">Oahu Historic Preservation Commission Meeting</a>
lowLink timeout: https://honolulu.gov/council did not respond within 5000ms after 2 attempts
<a href="https://honolulu.gov/council">Find my council member</a>
lowBroken link: https://x.com/hnlcityjobs/ returned status 403 Forbidden after 1 attempts
<a href="https://x.com/hnlcityjobs/"></a>
lowLink timeout: https://www8.honolulu.gov/dhr/references/ did not respond within 5000ms after 2 attempts
<a href="https://www8.honolulu.gov/dhr/references/">Resources</a>
lowLink timeout: https://www8.honolulu.gov/apps/tempjobs did not respond within 5000ms after 2 attempts
<a href="https://www8.honolulu.gov/apps/tempjobs">Apply for Temporary Jobs</a>
Best Page Fix Opportunities
www.honolulu.gov31findings
highAll touch targets must be 24px large, or leave sufficient space: Fix any of the following: Target has insufficient size (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
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 (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
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 (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span>
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 (10px by 10px, should be at least 24px by 24px) Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 20px instead of at least 24px.WCAG 2.5.8
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
Ensure touch targets have sufficient size and space. See: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
highMissing X-Content-Type-Options header
Add X-Content-Type-Options: nosniff Add X-Frame-Options: DENY or SAMEORIGIN Add a Content-Security-Policy header with appropriate directives Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
mediumAll page content should be contained by landmarks: Fix any of the following: Some page content is not contained by landmarks
<div class="elementor-element elementor-element-501919f e-con-full e-flex e-con e-child" data-id="501919f" data-element_type="container" data-e-type="container">
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="elementor-element elementor-element-400abe0 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="400abe0" data-...
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="elementor-element elementor-element-3dc0ce6 e-con-full e-flex e-con e-child" data-id="3dc0ce6" data-element_type="container" data-e-type="container" data-settings="{"background_background"...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
<span class="elementor-button-text">Sign up for email alerts</span>
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="elementor-element elementor-element-a5a6ae3 elementor-widget elementor-widget-heading" data-id="a5a6ae3" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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
<span class="elementor-button-text">All Events </span>
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="elementor-element elementor-element-d58b8a8 elementor-widget elementor-widget-heading" data-id="d58b8a8" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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
<span class="elementor-button-text">More Services</span>
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
<span class="elementor-button-text">Meet the Mayor!</span>
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
<span class="elementor-button-text">View More</span>
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="elementor-element elementor-element-d1e3699 elementor-widget elementor-widget-heading" data-id="d1e3699" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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="elementor-element elementor-element-5e586f0 elementor-widget elementor-widget-shortcode" data-id="5e586f0" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.defau...
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="elementor-element elementor-element-e78c464 elementor-widget elementor-widget-heading" data-id="e78c464" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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-US" class="js">
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="elementor-element elementor-element-0f41f8e elementor-widget elementor-widget-image" data-id="0f41f8e" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
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
<span class="elementor-button-text">Find Your Councilmember</span>
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="elementor-element elementor-element-718cd00 e-con-full e-flex e-con e-parent" data-id="718cd00" data-element_type="container" data-e-type="container" data-settings="{"background_background...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="elementor-element elementor-element-a52c7b0 e-con-full e-flex e-con e-child" data-id="a52c7b0" data-element_type="container" data-e-type="container" data-settings="{"background_background"...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="elementor-element elementor-element-96e8e6d e-flex e-con-boxed e-con e-parent e-lazyloaded" data-id="96e8e6d" data-element_type="container" data-e-type="container" data-settings="{"backgro...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(19, 71, 148), 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://www.honolulu.gov" title="City and County of Honolulu" rel="home">City and County of Honolulu</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(51, 55, 61), 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://www.honolulu.gov/news/" class="elementor-item menu-link" tabindex="-1">News</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(19, 71, 148), 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://www.honolulu.gov/dpp/permitting/building-permits-home/"> <span class="elementor-icon-list-text">Apply for a building permit</span> </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 has only one navigation mechanism (navigation). WCAG requires at least two ways to locate a page within a set of pages.WCAG 2.4.5
Add at least two of: site navigation (<nav>), search functionality (input[type="search"] or role="search"), a sitemap link, breadcrumb navigation, or a table of contents.
lowDeep focus region: nav "Menu" has 14 tab stops before focus escapes. Consider adding skip navigation or grouping with arrow keys.WCAG 2.4.1
<nav role="nav">Menu</nav>
Add a "skip to content" link or use roving tabindex to reduce the number of Tab stops.
lowLink timeout: https://www.honolulu.gov/events/event/oahu-historic-preservation-commission-meeting-10-29436/ did not respond within 5000ms after 2 attempts
<a href="https://www.honolulu.gov/events/event/oahu-historic-preservation-commission-meeting-10-29436/">Oahu Historic Preservation Commission Meeting</a>
lowLink timeout: https://honolulu.gov/council did not respond within 5000ms after 2 attempts
<a href="https://honolulu.gov/council">Find my council member</a>
/dhr/26findings
criticalInsufficient color contrast: 1.00:1 (required: 4.5:1 for normal text). Foreground: rgb(255, 255, 255), background: rgb(255, 255, 255). Text: "Class Specification Search"WCAG 1.4.3
<span class="elementor-button-text">Class Specification Search</span>
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: "Prospective Employees"WCAG 1.4.3
<div class="e-n-accordion-item-title-text"> Prospective Employees </div>
Current ratio: 1.00:1 (need 4.5:1). Change foreground from #ffffff to #777676 (ratio: 4.5:1).
highElements must meet minimum color contrast ratio thresholds: Fix any of the following: Element has insufficient color contrast of 1.14 (foreground color: #ffffff, background color: #efefef, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="e-n-accordion-item-title-text"> Current Employees </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 1.14 (foreground color: #ffffff, background color: #efefef, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1WCAG 1.4.3
<div class="e-n-accordion-item-title-text"> Retired Employees </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
highFocus jumps backward from "College Program" to "Trades Program" (visual distance: 392px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a>Trades Program</a>
Reorder elements in the DOM to match the visual layout.
highMissing X-Content-Type-Options header
Add X-Content-Type-Options: nosniff Add X-Frame-Options: DENY or SAMEORIGIN Add a Content-Security-Policy header with appropriate directives Add Referrer-Policy: strict-origin-when-cross-origin or no-referrer
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en-US" class="js">
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
<div class="elementor-element elementor-element-54d7035 e-flex e-con-boxed e-con e-parent" data-id="54d7035" data-element_type="container" data-e-type="container">
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="elementor-element elementor-element-9c0b31b e-con-full e-flex e-con e-child" data-id="9c0b31b" data-element_type="container" data-e-type="container">
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumAside should not be contained in another landmark: Fix any of the following: The complementary landmark is contained in another landmark.
<aside class="footer-widget-area widget-area site-footer-focus-item footer-widget-area-inner" data-section="sidebar-widgets-footer-widget-1" aria-label="Footer Widget 1">
Ensure the complementary landmark or aside is at top level. 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="elementor-element elementor-element-5c4f698 elementor-widget elementor-widget-heading" data-id="5c4f698" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Accounting%20and%20Finance&category%5b1%5d=Audit&category%5b2%5d=Grants%20Administration&category%5b3%5d=Purchasing
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=911%20Telecommunications&category%5b1%5d=Criminology&category%5b2%5d=Dispatch&category%5b3%5d=Emergency%20Managemen
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Audit&category%5b1%5d=Clerical%20%26%20Data%20Entry&category%5b2%5d=Database%20Administration&category%5b3%5d=Elect
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(56, 96, 162), 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://www.honolulu.gov/dhr" title="Department of Human Resources" rel="home">Department of Human Resources</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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Administrative%20Assistant&category%5b1%5d=Clerical%20%26%20Data%20Entry&category%5b2%5d=Customer%20Service&categor
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(56, 96, 162), 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://www.honolulu.gov/apps/tempjobs/" aria-label="check mark icon"> <span class="elementor-icon-list-icon"> <i aria-hidden="true" class="fas fa-check"></i> </span>
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Architecture&category%5b1%5d=Building%20%26%20Safety&category%5b2%5d=Building%20Maintenance&category%5b3%5d=Code%20
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Architecture&category%5b1%5d=Building%20%26%20Safety&category%5b2%5d=Engineering&category%5b3%5d=Project%20Manageme
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu" aria-label="check mark icon"> <span class="elementor-icon-list-icon"> <i aria-hidden="true" class="fas fa-check"></i>
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(56, 96, 162), 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://www.governmentjobs.com/careers/honolulu?category%5b0%5d=Arts&category%5b1%5d=Community%20and%20Social%20Services&category%5b2%5d=Community%20Development&category%5b3%5d=Co
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.
mediumClicking "#masthead > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div > a" inserts 1 element(s) without ARIA live region. Screen readers will not announce this dynamic content.WCAG 4.1.3
<a class="elementor-icon" href="#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE5MDUyIiwidG9nZ2xlIjpmYWxzZX0%3D" aria-label="Open site search" role="button" data-nav="utility"> <i
Wrap dynamically inserted content in an element with aria-live="polite" (or role="status"/"alert") so assistive technologies announce the change.
mediumPage has only one navigation mechanism (navigation). WCAG requires at least two ways to locate a page within a set of pages.WCAG 2.4.5
Add at least two of: site navigation (<nav>), search functionality (input[type="search"] or role="search"), a sitemap link, breadcrumb navigation, or a table of contents.
lowBroken link: https://x.com/hnlcityjobs/ returned status 403 Forbidden after 1 attempts
<a href="https://x.com/hnlcityjobs/"></a>
lowLink timeout: https://www8.honolulu.gov/dhr/references/ did not respond within 5000ms after 2 attempts
<a href="https://www8.honolulu.gov/dhr/references/">Resources</a>
lowLink timeout: https://www8.honolulu.gov/apps/tempjobs did not respond within 5000ms after 2 attempts
<a href="https://www8.honolulu.gov/apps/tempjobs">Apply for Temporary Jobs</a>
12findings
mediumContent clipped by 23px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<a class="skip-link screen-reader-text" href="#content" title="Skip to content"> Skip to content</a>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumElement overflows viewport by 281px at 320px width.WCAG 1.4.10
<a class="swiper-slide-inner" href="https://www.honolulu.gov/dhr/career/" aria-label="Open career webpage"><div class="swiper-slide-contents"></div></a>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 601px at 320px width.WCAG 1.4.10
<div class="elementor-slide-heading">Stay Informed, Stay Safe!</div>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumContent clipped by 30px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<h3 class="multisite-post-title"><a href="https://www.honolulu.gov/dpr/dpr-news/hawaiian-traditions-inspire-cultural-education-at-the-98th-lei-day-celebration/">Hawaiian traditions inspire cultural ed
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumElement overflows viewport by 281px at 320px width.WCAG 1.4.10
<div class="elementor-repeater-item-542c857 swiper-slide" role="group" aria-roledescription="slide"><div class="swiper-slide-bg" role="img" aria-label="Your City Your Career"></div><a class="swiper-sl
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 601px at 320px width.WCAG 1.4.10
<div class="swiper-slide-contents"><div class="elementor-slide-heading">Stay Informed, Stay Safe!</div><div class="elementor-button elementor-slide-button elementor-size-md">Prepare Yourself</div></di
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 580px at 320px width.WCAG 1.4.10
<div class="elementor-button elementor-slide-button elementor-size-md">Prepare Yourself</div>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 281px at 320px width.WCAG 1.4.10
<div class="swiper-slide-bg" role="img" aria-label="Your City Your Career"></div>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumContent clipped by 82px when text spacing is applied per WCAG 1.4.12. Text may be hidden when users adjust spacing for readability.WCAG 1.4.12
<div class="multisite-post-image"><img decoding="async" width="150" height="150" src="https://www.honolulu.gov/wp-content/uploads/sites/34/2023/11/leiday_imgs/Lei_Day_Program_Leis_1-150x150.jpg" class
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumPage requires horizontal scrolling at 320px width (39px 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.
mediumElement overflows viewport by 601px at 320px width.WCAG 1.4.10
<div class="elementor-repeater-item-deb45c4 swiper-slide" role="group" aria-roledescription="slide"><div class="swiper-slide-bg" role="img" aria-label="stay informed, stay safe! Prepare yourself"></di
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 921px at 320px width.WCAG 1.4.10
<div class="elementor-repeater-item-804dda7 swiper-slide" role="group" aria-roledescription="slide"><div class="swiper-slide-bg" role="img" aria-label="beach-foam-waves-2179183"></div><a class="swiper
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
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.