Accessibility Health Check
https://americanexpress.com
Excellent
https://daylight.sonde.life/usfin/americanexpress-com/
Excellent
Executive Summary
Top Findings
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.
highARIA progressbar nodes must have an accessible name: Fix any of the following: aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attributeWCAG 1.1.1
<div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" class="css-17ov6kb"></div>
Ensure every ARIA progressbar node has an accessible name. See: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content
highFocus jumps backward from "Skip to main" to "#amex-logo-small" (visual distance: 565px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout. Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
highFocus jumps backward from "Site Map" to "Skip to main" (visual distance: 1838px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a>Skip to main</a>
Reorder elements in the DOM to match the visual layout. Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
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
mediumFocusable element has generic role. Keyboard users can reach it but screen readers provide no context about its purpose.WCAG 4.1.2
<!-- a11y: role="generic" -->
Add an explicit ARIA role (e.g., role="button") and an accessible name. WCAG 4.1.2 requires interactive elements to expose their role.
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en-US" country="US">
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 style="display:flex;justify-content:center;height:100vh" data-msg="page template data is loading"><div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" clas...
Ensure all page content is contained by landmarks. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumHeading levels should only increase by one: Fix any of the following: Heading order invalid
<h4 class="heading-4 offer-header margin-b" style="height: 28px;"><p>Use your American Express Card<br> </p> </h4>
Ensure the order of headings is semantically correct. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumThe skip-link target should exist and be focusable: Fix any of the following: No skip link target
<a href="#main">Skip to main content</a>
Ensure all skip links have a focusable target. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumLink is distinguished from surrounding text only by color (link: rgb(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/newsroom/?inav=en_us_footer_About_Newsroom" class="_standaloneLink_10m5c_213" data-icon="false" label="Newsroom" rel=" " title="Newsroom" tracking="en_us
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://network.americanexpress.com/globalnetwork/v4/?inav=en_us_footer_about_global_network" class="_standaloneLink_10m5c_213" data-icon="false" label="Global Network" rel=" " title="Global
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/careers/?inav=en_us_footer_About_Careers" class="_standaloneLink_10m5c_213" data-icon="false" label="Careers" rel=" " title="Careers" tracking="en_us_foo
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/us/credit-cards/?inav=en_us_footer_products_services_credit_cards" class="_standaloneLink_10m5c_213" data-icon="false" label="Credit Cards" rel=" " title="Cred
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/us/credit-cards/business/business-credit-cards/?inav=en_us_footer_products_services_business_credit_cards" class="_standaloneLink_10m5c_213" data-icon="false"
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://ir.americanexpress.com/investor-relations/default.aspx?inav=en_us_footer_about_investor_relations" class="_standaloneLink_10m5c_213" data-icon="false" label="Investor Relations" rel="
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/support/contacts/?inav=en_us_footer_about_contact_us" class="_standaloneLink_10m5c_213" data-icon="false" label="Contact Us" rel=" " title="Contact Us" t
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/us/credit-cards/business/corporate-credit-cards/?inav=en_us_footer_products_services_corporate_programs" class="_standaloneLink_10m5c_213" data-icon="false" la
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(0, 111, 207), 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.americanexpress.com/us/customer-service/?inav=en_us_menu_help" class="_standaloneLink_jcgeo_208 _hiddenSmDown_14p6k_5086 _helpLink_t7ahx_105 _tabsOutline_t7ahx_439" data-icon="fa
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/company/?inav=en_us_footer_about_about_american_express" class="_standaloneLink_10m5c_213" data-icon="false" label="About American Express" rel=" " title
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(0, 111, 207), text: rgb(51, 51, 51)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-label="Home">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(0, 111, 207), text: rgb(51, 51, 51)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-zw/network/merchant.html" class="nav-link" aria-label="Merchant">Merchant</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.
mediumNavigation region "Customer Service" (present on www.americanexpress.com) is missing on this page. Navigation should appear consistently across pages.WCAG 3.2.3
<!-- missing: nav[aria-label="Customer Service"] -->
Ensure the "Customer Service" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "About" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "Products & Services" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "Links You May Like" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "Additional Information" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "nav" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "legal-links" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content.
medium"Download the App" is visually at position 16 but receives focus at position 6 (drift: 10).WCAG 2.4.3
<a>Download the App</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Search Button" is visually at position 6 but receives focus at position 14 (drift: 8).WCAG 2.4.3
<button>Search Button</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Contact Us" is visually at position 15 but receives focus at position 3 (drift: 12).WCAG 2.4.3
<a>Contact Us</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Banking" is visually at position 4 but receives focus at position 12 (drift: 8).WCAG 2.4.3
<button>Banking</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"My Account" is visually at position 3 but receives focus at position 11 (drift: 8).WCAG 2.4.3
<button>My Account</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Careers" is visually at position 11 but receives focus at position 2 (drift: 9).WCAG 2.4.3
<a>Careers</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"View All Gift Cards" is visually at position 12 but receives focus at position 5 (drift: 7).WCAG 2.4.3
<a>View All Gift Cards</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Rewards & Benefits" is visually at position 5 but receives focus at position 13 (drift: 8).WCAG 2.4.3
<button>Rewards & Benefits</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
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.
mediumElement overflows viewport by 26px at 320px width.WCAG 1.4.10
<ul class="nav-menu">
<li class="nav-item">
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-labSet max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 26px at 320px width.WCAG 1.4.10
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-label="Home">Home</a>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumContent clipped by 89px 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 id="skip-main"> <a href="#main">Skip to main content</a> </div>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumElement overflows viewport by 26px at 320px width.WCAG 1.4.10
<li class="nav-item">
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-label="Home">Home</a>
</li>Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumContent clipped by 22px 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="_srOnly_jfnet_1">Search Button</span>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumx-content-type-options header has invalid or weak value: nosniff nosniff
Add X-Content-Type-Options: nosniff
mediumStuck loading state: aria-busy="true" on <div> persists after page readiness
<div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" class="css-17ov6kb"></div>
lowBroken link: https://x.com/americanexpress returned status 403 Forbidden after 1 attempts
<a href="https://x.com/americanexpress"></a>
lowPossible stuck loading animation: "spinner-indeterminate" still running after page readiness
<div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" class="css-17ov6kb"></div>
Best Page Fix Opportunities
www.americanexpress.com29findings
highARIA progressbar nodes must have an accessible name: Fix any of the following: aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attributeWCAG 1.1.1
<div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" class="css-17ov6kb"></div>
Ensure every ARIA progressbar node has an accessible name. See: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content
highFocus jumps backward from "Skip to main" to "#amex-logo-small" (visual distance: 565px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a></a>
Reorder elements in the DOM to match the visual layout. Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
highFocus jumps backward from "Site Map" to "Skip to main" (visual distance: 1838px). No explicit tabIndex — likely a DOM order issue.WCAG 2.4.3
<a>Skip to main</a>
Reorder elements in the DOM to match the visual layout. Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
mediumFocusable element has generic role. Keyboard users can reach it but screen readers provide no context about its purpose.WCAG 4.1.2
<!-- a11y: role="generic" -->
Add an explicit ARIA role (e.g., role="button") and an accessible name. WCAG 4.1.2 requires interactive elements to expose their role.
mediumDocument should have one main landmark: Fix all of the following: Document does not have a main landmark
<html lang="en-US" country="US">
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 style="display:flex;justify-content:center;height:100vh" data-msg="page template data is loading"><div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" clas...
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, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/newsroom/?inav=en_us_footer_About_Newsroom" class="_standaloneLink_10m5c_213" data-icon="false" label="Newsroom" rel=" " title="Newsroom" tracking="en_us
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://network.americanexpress.com/globalnetwork/v4/?inav=en_us_footer_about_global_network" class="_standaloneLink_10m5c_213" data-icon="false" label="Global Network" rel=" " title="Global
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/careers/?inav=en_us_footer_About_Careers" class="_standaloneLink_10m5c_213" data-icon="false" label="Careers" rel=" " title="Careers" tracking="en_us_foo
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/us/credit-cards/?inav=en_us_footer_products_services_credit_cards" class="_standaloneLink_10m5c_213" data-icon="false" label="Credit Cards" rel=" " title="Cred
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/us/credit-cards/business/business-credit-cards/?inav=en_us_footer_products_services_business_credit_cards" class="_standaloneLink_10m5c_213" data-icon="false"
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://ir.americanexpress.com/investor-relations/default.aspx?inav=en_us_footer_about_investor_relations" class="_standaloneLink_10m5c_213" data-icon="false" label="Investor Relations" rel="
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/support/contacts/?inav=en_us_footer_about_contact_us" class="_standaloneLink_10m5c_213" data-icon="false" label="Contact Us" rel=" " title="Contact Us" t
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/us/credit-cards/business/corporate-credit-cards/?inav=en_us_footer_products_services_corporate_programs" class="_standaloneLink_10m5c_213" data-icon="false" la
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(0, 111, 207), 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.americanexpress.com/us/customer-service/?inav=en_us_menu_help" class="_standaloneLink_jcgeo_208 _hiddenSmDown_14p6k_5086 _helpLink_t7ahx_105 _tabsOutline_t7ahx_439" data-icon="fa
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(0, 111, 207), text: rgb(61, 61, 61)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-us/company/?inav=en_us_footer_about_about_american_express" class="_standaloneLink_10m5c_213" data-icon="false" label="About American Express" rel=" " title
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.
medium"Download the App" is visually at position 16 but receives focus at position 6 (drift: 10).WCAG 2.4.3
<a>Download the App</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Search Button" is visually at position 6 but receives focus at position 14 (drift: 8).WCAG 2.4.3
<button>Search Button</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Contact Us" is visually at position 15 but receives focus at position 3 (drift: 12).WCAG 2.4.3
<a>Contact Us</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Banking" is visually at position 4 but receives focus at position 12 (drift: 8).WCAG 2.4.3
<button>Banking</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"My Account" is visually at position 3 but receives focus at position 11 (drift: 8).WCAG 2.4.3
<button>My Account</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Careers" is visually at position 11 but receives focus at position 2 (drift: 9).WCAG 2.4.3
<a>Careers</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"View All Gift Cards" is visually at position 12 but receives focus at position 5 (drift: 7).WCAG 2.4.3
<a>View All Gift Cards</a>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
medium"Rewards & Benefits" is visually at position 5 but receives focus at position 13 (drift: 8).WCAG 2.4.3
<button>Rewards & Benefits</button>
Align DOM order with visual presentation, or use tabIndex to match the visual sequence.
mediumContent clipped by 22px 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="_srOnly_jfnet_1">Search Button</span>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumx-content-type-options header has invalid or weak value: nosniff nosniff
Add X-Content-Type-Options: nosniff
mediumStuck loading state: aria-busy="true" on <div> persists after page readiness
<div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" class="css-17ov6kb"></div>
lowBroken link: https://x.com/americanexpress returned status 403 Forbidden after 1 attempts
<a href="https://x.com/americanexpress"></a>
lowPossible stuck loading animation: "spinner-indeterminate" still running after page readiness
<div role="progressbar" aria-label="" aria-valuemin="0" aria-valuemax="100" aria-busy="true" class="css-17ov6kb"></div>
/en-zw/network/8findings
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.
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
mediumHeading levels should only increase by one: Fix any of the following: Heading order invalid
<h4 class="heading-4 offer-header margin-b" style="height: 28px;"><p>Use your American Express Card<br> </p> </h4>
Ensure the order of headings is semantically correct. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumThe skip-link target should exist and be focusable: Fix any of the following: No skip link target
<a href="#main">Skip to main content</a>
Ensure all skip links have a focusable target. See: https://www.w3.org/WAI/WCAG22/quickref/
mediumLink is distinguished from surrounding text only by color (link: rgb(0, 111, 207), text: rgb(51, 51, 51)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-label="Home">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(0, 111, 207), text: rgb(51, 51, 51)). Users who cannot perceive color differences may not identify this as a link.WCAG 1.4.1
<a href="https://www.americanexpress.com/en-zw/network/merchant.html" class="nav-link" aria-label="Merchant">Merchant</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.
mediumNavigation region "Customer Service" (present on www.americanexpress.com) is missing on this page. Navigation should appear consistently across pages.WCAG 3.2.3
<!-- missing: nav[aria-label="Customer Service"] -->
Ensure the "Customer Service" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "About" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "Products & Services" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "Links You May Like" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "Additional Information" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "nav" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content. Ensure the "legal-links" navigation region appears on all pages in the site. Consistent navigation helps users predict where to find content.
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.
4findings
mediumElement overflows viewport by 26px at 320px width.WCAG 1.4.10
<ul class="nav-menu">
<li class="nav-item">
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-labSet max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumElement overflows viewport by 26px at 320px width.WCAG 1.4.10
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-label="Home">Home</a>
Set max-width: 100% or use overflow-wrap to prevent horizontal overflow.
mediumContent clipped by 89px 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 id="skip-main"> <a href="#main">Skip to main content</a> </div>
Avoid fixed-height containers with overflow: hidden for text content. Use min-height or allow containers to grow.
mediumElement overflows viewport by 26px at 320px width.WCAG 1.4.10
<li class="nav-item">
<a href="https://www.americanexpress.com/en-zw/network/" class="nav-link" aria-label="Home">Home</a>
</li>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.