Accessibility
· 13 checks — Landmarks, headings, alt text, forms, and link quality rolled into one auditable list.F404 Error PageActionHTTP 403, custom pageFIX
DPrint StylesheetActionNo print stylesFIX
BLandmark Structure9 landmarksREVIEW
A page should have only one <main> landmark.
Multiple <main> elements violate the spec — there must be exactly one per page.
Learn more ▾ ▴
HTML5 spec: 'authors must not include more than one main element' visible to AT at the same time. Multiple <main>s confuse AT and break the 'jump to main content' shortcut. Refactor to a single <main> with nested <section>/<article>.
Source: HTML5 spec
Multiple navigations need aria-label to distinguish them for screen readers.
Some <nav> elements lack aria-label — screen-reader users hear 'navigation' multiple times with no way to distinguish them.
Learn more ▾ ▴
When a page has multiple <nav> regions (primary, footer, breadcrumb), each needs aria-label or aria-labelledby. AT users navigate by landmark; identical 'navigation' announcements force them to enter each one to discover purpose.
Source: WAI-ARIA Authoring Practices
BFavicon & Branding15 icon(s) detectedREVIEW
BDark Mode SupportDark mode detectedREVIEW
Detection limited to meta tags and inline styles.
A+Heading Hierarchy18 headingsPASS
- H1 Find your next adventure
- H2 Record your activities
- H2 Explore even without service
- H2 Create your own route
- H2 Trail collections presented by our partners
- H2 Gear up and get out there
- H2 Adventure anywhere
- H2 Explore
- H2 Custom routes & maps
- H2 Company
- H2 Community
- H2 Explore
- H2 Custom routes & maps
- H2 Company
- H2 Community
- H2 An app for the outdoors
- H2 Members for the planet
- H2 Connect with us
AAlt Text QualityAll 32 images OKPASS
| Issue | Count |
|---|---|
| too long | 3 image(s) |
AForm Accessibility1 of 2 controls have issuesPASS
| Control | Type | Label | Method |
|---|---|---|---|
| select | select | none | |
| input | input | (Search for anything) | placeholder only |
Placeholder text disappears on focus and is not a reliable label.
<input>
Placeholder-only labels disappear when the user starts typing — they must remember what the field was for.
Learn more ▾ ▴
Placeholders are NOT labels. They vanish on input, fail color contrast checks (most are gray), and don't satisfy WCAG SC 3.3.2. Always use a real <label> alongside (or aria-labelledby).
Source: WCAG 2.1 SC 3.3.2 / Nielsen Norman
ALink & Button Quality115 links, 13 buttons — all OKPASS
| Element | Text | Issue | Suggested Fix |
|---|---|---|---|
| https://alltrails.io/ujRkr9MGmgb | App Store - Trail Guides & Map… | new tab | Add '(opens in new tab)' to text |
| https://alltrails.io/pW7o6i6Lmgb | Google Play - Trail Guides & M… | new tab | Add '(opens in new tab)' to text |
| https://alltrails.io/ujRkr9MGmgb | App Store - Trail Guides & Map… | new tab | Add '(opens in new tab)' to text |
| https://alltrails.io/pW7o6i6Lmgb | Google Play - Trail Guides & M… | new tab | Add '(opens in new tab)' to text |
| https://alltrails.io/ujRkr9MGmgb | App Store - Trail Guides & Map… | new tab | Add '(opens in new tab)' to text |
| https://alltrails.io/pW7o6i6Lmgb | Google Play - Trail Guides & M… | new tab | Add '(opens in new tab)' to text |
| https://shop.alltrails.com/ | AllTrails Gear | new tab | Add '(opens in new tab)' to text |
| https://alltrails.io/ujRkr9MGmgb | Download the AllTrails applica… | new tab | Add '(opens in new tab)' to text |
| https://alltrails.io/pW7o6i6Lmgb | Download the AllTrails applica… | new tab | Add '(opens in new tab)' to text |
Add '(opens in new tab)' to link text or aria-label.
https://alltrails.io/ujRkr9MGmgb; https://alltrails.io/pW7o6i6Lmgb; https://alltrails.io/ujRkr9MGmgb; https://alltrails.io/pW7o6i6Lmgb; https://alltrails.io/ujRkr9MGmgb; https://alltrails.io/pW7o6i6Lmgb; https://shop.alltrails.com/; https://alltrails.io/ujRkr9MGmgb; https://alltrails.io/pW7o6i6Lmgb
Links with target="_blank" without rel="noopener" leak the originating page's window context — security and UX issue.
Learn more ▾ ▴
Without rel="noopener", the new tab can navigate the original tab via window.opener (tab-nabbing attack). Modern browsers default to noopener for target=_blank but only since recent versions. Always set rel="noopener noreferrer" explicitly.
Source: MDN target / OWASP
A+Web ManifestPWA-readyPASS
A+Color Contrast (Screenshot)20 text elements analyzed, 0 fail WCAG AAPASS
Analyzes text contrast against the actual rendered page, including background images, gradients, and overlays that CSS-based tools cannot detect.
Show all checked elements (20)
| Element | Ratio | Required | FG | BG | Result |
|---|---|---|---|---|---|
| h1 Find your next adven… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Record your activiti… | 19.95:1 | 3.0:1 | #000000 | #F9F9F9 | Pass |
| h2 Explore even without… | 19.95:1 | 3.0:1 | #000000 | #F9F9F9 | Pass |
| h2 Create your own rout… | 19.95:1 | 3.0:1 | #000000 | #F9F9F9 | Pass |
| h2 Trail collections pr… | 19.95:1 | 3.0:1 | #000000 | #F9F9F9 | Pass |
| h2 Gear up and get out … | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Adventure anywhere | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Explore | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Custom routes & maps | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Company | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Community | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Explore | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Custom routes & maps | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Company | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Community | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 An app for the outdo… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Members for the plan… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Connect with us | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| title AllTrails: Trail Gui… | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| span Skip to main content | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
Methodology: The top 20 text elements by font size were checked. Background color was sampled from the desktop screenshot using a 5-point pattern. WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text.
A+Lighthouse Accessibility AuditsScore 95/100 — 1 failing, 28 passedPASS
Accessibility
These checks highlight opportunities to improve the accessibility of your web app. Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so manual testing is also encouraged.
ARIA
Each ARIA `role` supports a specific subset of `aria-*` attributes. Mismatching these invalidates the `aria-*` attributes. Learn how to match ARIA attributes to their roles.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
div.styles_container__MDy_J > div.FullscreenSearchBox_container__bndNh > div.styles_container__Yg5H9 > input.styles_input__ZiQpI div.styles_container__MDy_J > div.FullscreenSearchBox_container__bndNh > div.styles_container__Yg5H9 > input.styles_input__ZiQpI |
These are opportunities to improve the usage of ARIA in your application which may enhance the experience for users of assistive technology, like a screen reader.