Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[a11y] VPN download page accessibility improvements #15344

Open
Tracked by #14773
alexgibson opened this issue Oct 21, 2024 · 0 comments
Open
Tracked by #14773

[a11y] VPN download page accessibility improvements #15344

alexgibson opened this issue Oct 21, 2024 · 0 comments
Labels
a11y Issues related to accessibility Bug 🐛 Something's not working the way it should Help wanted 👋 Community contributions welcome

Comments

@alexgibson
Copy link
Member

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

  1. Elements must meet minimum color contrast ratio thresholds

Learn more

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>
  1. Document should not have more than one contentinfo landmark

Learn more

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>
  1. Document should have one main landmark

Learn more

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
  1. All page content should be contained by landmarks

Learn more

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
@alexgibson alexgibson added Bug 🐛 Something's not working the way it should a11y Issues related to accessibility labels Oct 21, 2024
@alexgibson alexgibson mentioned this issue Oct 21, 2024
Open
@alexgibson alexgibson added the Help wanted 👋 Community contributions welcome label Oct 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Issues related to accessibility Bug 🐛 Something's not working the way it should Help wanted 👋 Community contributions welcome
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@alexgibson