bedrock
bedrock copied to clipboard
Published
20 hours ago •
mozilla
mozilla
[a11y] VPN download page accessibility improvements
Axe-core® Accessibility Results for /en-US/products/vpn/download/
Page URL: https://www-dev.allizom.org/en-US/products/vpn/download/
axe-core found 16 violations
| # | Description | Axe rule ID | WCAG | Impact | Count |
|---|---|---|---|---|---|
| 1 | Elements must meet minimum color contrast ratio thresholds | color-contrast | WCAG 2 Level AA, WCAG 1.4.3 | serious | 5 |
| 2 | Document should not have more than one contentinfo landmark | landmark-no-duplicate-contentinfo | Best practice | moderate | 1 |
| 3 | Document should have one main landmark | landmark-one-main | Best practice | moderate | 1 |
| 4 | All page content should be contained by landmarks | region | Best practice | moderate | 9 |
Failed
- Elements must meet minimum color contrast ratio thresholds
color-contrast
WCAG 2 Level AA, WCAG 1.4.3
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
serious
Issue Tags: cat.color wcag2aa wcag143 TTv5 TT13.c EN-301-549 EN-9.1.4.3 ACT
| # | Issue Description | To solve this violation, you need to... |
|---|---|---|
| 1 | Element location<br>.windows.primary-platform > .platform-body > p:nth-child(3)<br>Element source <br><p>Windows 10/11 (64-bit only)</p><br> |
Fix any of the following: * Element has insufficient color contrast of 4 (foreground color: #7a7a8b, background color: #f9f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 Related node: <br>.vpn-downloads<br> |
| 2 | Element location<br>.macos.secondary-platform > .platform-body > p<br>Element source <br><p>Version 11.0 and up</p><br> |
Fix any of the following: * Element has insufficient color contrast of 4 (foreground color: #7a7a8b, background color: #f9f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 Related node: <br>.vpn-downloads<br> |
| 3 | Element location<br>.linux.secondary-platform > .platform-body > p<br>Element source <br><p>Ubuntu 20.04 and up</p><br> |
Fix any of the following: * Element has insufficient color contrast of 4 (foreground color: #7a7a8b, background color: #f9f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 Related node: <br>.vpn-downloads<br> |
| 4 | Element location<br>.ios.secondary-platform > .platform-body > p<br>Element source <br><p>Version 14.0 and up</p><br> |
Fix any of the following: * Element has insufficient color contrast of 4 (foreground color: #7a7a8b, background color: #f9f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 Related node: <br>.vpn-downloads<br> |
| 5 | Element location<br>.android.secondary-platform > .platform-body > p<br>Element source <br><p>Version 8.0 and up</p><br> |
Fix any of the following: * Element has insufficient color contrast of 4 (foreground color: #7a7a8b, background color: #f9f9fa, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1 Related node: <br>.vpn-downloads<br> |
- Document should not have more than one contentinfo landmark
landmark-no-duplicate-contentinfo
Best practice
Ensure the document has at most one contentinfo landmark
moderate
Issue Tags: cat.semantics best-practice
| # | Issue Description | To solve this violation, you need to... |
|---|---|---|
| 1 | Element location<br>.vpn-footer<br>Element source <br><footer class="vpn-footer"><br> |
Fix any of the following: * Document has more than one contentinfo landmark Related node: <br>#colophon<br> |
- Document should have one main landmark
landmark-one-main
Best practice
Ensure the document has a main landmark
moderate
Issue Tags: cat.semantics best-practice
| # | Issue Description | To solve this violation, you need to... |
|---|---|---|
| 1 | Element location<br>html<br>Element source <br><html class="windows js windows-10-plus x64 is-modern-browser mzp-has-sticky-navigation loaded" lang="en" dir="ltr" data-country-code="US" data-needs-consent="False" data-latest-firefox="131.0.3" data-esr-versions="128.3.1" data-gtm-container-id="GTM-MW3R8V" data-stub-attribution-rate="1.0" data-sentry-dsn="https://[email protected]/6260211"><br> |
Fix all of the following: * Document does not have a main landmark |
- All page content should be contained by landmarks
region
Best practice
Ensure all page content is contained by landmarks
moderate
Issue Tags: cat.keyboard best-practice
| # | Issue Description | To solve this violation, you need to... |
|---|---|---|
| 1 | Element location<br>header<br>Element source <br><header class="vpn-download-header"><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 2 | Element location<br>.windows.primary-platform<br>Element source <br><div class="primary-platform windows"><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 3 | Element location<br>h3<br>Element source <br><h3>Also available for:</h3><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 4 | Element location<br>.macos.secondary-platform<br>Element source <br><li class="secondary-platform macos"><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 5 | Element location<br>.linux.secondary-platform<br>Element source <br><li class="secondary-platform linux"><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 6 | Element location<br>.ios.secondary-platform<br>Element source <br><li class="secondary-platform ios"><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 7 | Element location<br>.android.secondary-platform<br>Element source <br><li class="secondary-platform android"><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 8 | Element location<br>.vpn-download-previous-versions<br>Element source <br><div class="vpn-download-previous-versions mzp-l-content "><br> <p><br> <a href="https://archive.mozilla.org/pub/vpn/releases/" data-cta-text="VPN Download Previous Versions">Download previous versions for Windows and Mac</a><br> </p><br> </div><br> |
Fix any of the following: * Some page content is not contained by landmarks |
| 9 | Element location<br>.vpn-privacy<br>Element source <br><section class="vpn-privacy"><br> |
Fix any of the following: * Some page content is not contained by landmarks |
