Accessibility
· 13 checks — Landmarks, headings, alt text, forms, and link quality rolled into one auditable list.DLink & Button QualityAction18 issue(s) across 243 links and 9 buttonsFIX
| Element | Text | Issue | Suggested Fix |
|---|---|---|---|
| https://www.oxfamamerica.org/explore/eme… | Learn more | generic text | Replace with descriptive text |
Before: Learn more Suggested: Middle East Crisis Appeal | |||
| (empty) | empty | Add link text or aria-label | |
| /about-us/financial-information/ | (empty) | empty | Add link text or aria-label |
| /about-us/leadership/ | (empty) | empty | Add link text or aria-label |
| /about-us/ambassadors/ | (empty) | empty | Add link text or aria-label |
| /about-us/careers/ | (empty) | empty | Add link text or aria-label |
| /about-us/contact-us/ | (empty) | empty | Add link text or aria-label |
| (empty) | empty | Add link text or aria-label | |
| /explore/issues/ | (empty) | empty | Add link text or aria-label |
| /explore/emergencies/ | (empty) | empty | Add link text or aria-label |
| /explore/research-publications/ | (empty) | empty | Add link text or aria-label |
| (empty) | empty | Add link text or aria-label | |
| /take-action/volunteer/ | (empty) | empty | Add link text or aria-label |
| (empty) | empty | Add link text or aria-label | |
| /donate/monthly-giving/ | (empty) | empty | Add link text or aria-label |
| https://politicsofpoverty.oxfamamerica.o… | (empty) | empty | Add link text or aria-label |
| <button> | (empty) | empty | Add button text or aria-label |
| <button> | (empty) | empty | Add button text or aria-label |
Links without text are announced as raw URLs by screen readers.
a.nav__link (#356 on page); /about-us/financial-information/; /about-us/leadership/; /about-us/ambassadors/; /about-us/careers/; /about-us/contact-us/; a.nav__link (#440 on page); /explore/issues/; /explore/emergencies/; /explore/research-publications/ (+5 more)
Links with no accessible text (empty <a></a>, image-only no alt, icon-only no aria-label) are unidentifiable to screen readers.
Source: WCAG 2.1 SC 2.4.4
Generic link text like 'click here' doesn't describe the destination.
https://www.oxfamamerica.org/explore/emergencies/middle-east-crisis-appeal/ ("Learn more")
Generic anchor text ('click here', 'read more', 'learn more') tells screen readers and search engines nothing about the destination.
Learn more ▾ ▴
Out-of-context lists of links read by AT (one navigation pattern) become useless when every link says 'click here'. Use the destination's title or topic as anchor text. Doubles as SEO win — Google passes anchor-text relevance to the destination.
Source: WCAG 2.4.4 / Google Search Central
Icon-only buttons need an aria-label so screen readers can announce them.
button.header__search-submit__xxs (#636 on page); button.hide (#734 on page)
Buttons with no accessible text (icon-only, no aria-label) can't be activated by voice control or understood by screen readers.
Source: WCAG 2.1 SC 4.1.2
DDark Mode SupportActionTheme color onlyFIX
Detection limited to meta tags and inline styles.
DPrint StylesheetActionNo print stylesFIX
CAlt Text QualityAction3 of 23 images have issuesREVIEW
| Issue | Count |
|---|---|
| missing | 2 image(s) |
| filename | 1 image(s) |
| too long | 2 image(s) |
Images without alt text are invisible to screen readers.
Each image without alt text is a WCAG 1.1.1 failure — invisible to screen-reader users, lost from Google Image Search.
Learn more ▾ ▴
WCAG 2.1 Level A requires text alternatives for non-decorative images. Empty alt='' is fine for decorative; meaningful images need descriptive text. Common fixes: CMS audit + bulk add, build-time linter (alt-text-required ESLint rule), CI gate on Lighthouse a11y score.
Source: WCAG 2.1 SC 1.1.1 / WebAIM Million Report
An image inside a link with no alt creates an empty link.
Image-only links with no alt create empty links — screen-reader users hear 'link' with no destination context.
Learn more ▾ ▴
An <a><img></a> with no img alt is the worst-case for accessibility: AT announces the link but can't describe where it goes. Either add alt to the image OR add aria-label to the link.
Source: WCAG 2.1 SC 2.4.4
CForm AccessibilityAction3 of 7 controls have issuesREVIEW
| Control | Type | Label | Method |
|---|---|---|---|
| #search | text | Search this website | for/id |
| #search__xxs | text | Search this website | for/id |
| #cta-form-email-1 | Your email address: | for/id | |
| #cta-form-tel-2 | tel | Your mobile phone number: | for/id |
| #DonateValueCustomInput | number | (Other) | placeholder only |
| #mobile_opt_in | checkbox | (none) | none |
| #email_opt_in | checkbox | (none) | none |
Form controls need a <label>, aria-label, or aria-labelledby for screen readers.
<input type="checkbox" name="email_opt_in" id="email_opt_in">; <input type="checkbox" name="mobile_opt_in" id="mobile_opt_in">
Form controls without labels — assistive tech announces 'edit text' with no context; users can't complete forms.
Source: WCAG 2.1 SC 3.3.2
Placeholder text disappears on focus and is not a reliable label.
<input type="number" name="v" id="DonateValueCustomInput">
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
C404 Error PageActionHTTP 404, custom pageREVIEW
BFavicon & Branding16 icon(s) detectedREVIEW
CWeb ManifestActionValid manifestREVIEW
CColor Contrast (Screenshot)Action20 text elements analyzed, 3 fail WCAG AAREVIEW
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 Make Polluters Pay | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Oxfam Stands for equ… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Join us | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Sign up | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Thank you | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Featured stories & u… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Make a more equal fu… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 How you're helping | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Donate now | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 14.3 MILLION | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 727,000 | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 4.7 million | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| title Oxfam - Fighting Ine… | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Skip to main content | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| p The future | 4.61:1 | 4.5:1 | #000000 | #74776F | Pass |
| p is equal | 1.05:1 | 4.5:1 | #000000 | #0D0704 | Fail |
| a About us | 1.02:1 | 4.5:1 | #000000 | #020300 | Fail |
| a About us | 1.38:1 | 4.5:1 | #000000 | #1D2915 | Fail |
| p Oxfam is a global or… | 7.76:1 | 4.5:1 | #000000 | #38B358 | Pass |
| a Overview | 4.63:1 | 4.5:1 | #000000 | #3C8457 | 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.
ALandmark Structure8 landmarksPASS
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
AHeading Hierarchy26 headings, 1 skip(s)PASS
- H1 Make Polluters Pay
- H2 Oxfam Stands for equality
- H3 What we believe
- H3 Take action
- H3 Donate now
- H2 Join us
- H2 Sign up
- H2 Thank you
- H2 Featured stories & updates
- H3 Is humanitarian aid getting into Gaza?
- H3 Turning food waste into fuel
- H3 Remaining Steadfast in an Era of Destabilization
- H3 What is happening in Lebanon?
- H3 The long hours of winter: Four years of conflict in Ukraine
- H2 Make a more equal future. Take action now.
- H4 Tax the super-rich. skipped
- H4 Stop Trump's illegal war in Iran.
- H4 Prioritize Gaza's recovery.
- H4 Spill the tea on extreme inequality.
- H2 How you're helping
- H3 14.3 MILLION
- H3 727,000
- H3 4.7 million
- H2 Donate now
- H3 Explore
- H3 Take action
Skipping heading levels breaks the document outline. Screen readers may interpret missing levels as structural errors.
Skipping heading levels breaks the document outline — screen-reader users lose track of section nesting.
Learn more ▾ ▴
Screen reader users navigate by jumping between headings (H1 → H2 → H3). Skipping (H1 → H3) breaks the sense of hierarchy. Use sequential levels even if you don't like the default styling — restyle with CSS instead. WCAG 1.3.1 (Info and Relationships) treats this as an A failure.
Source: WCAG 2.1 SC 1.3.1 / W3C WAI
ALighthouse Accessibility AuditsScore 90/100 — 3 failing, 24 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.
Contrast
Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
Is humanitarian aid getting into Gaza? div.column > article.component-article > h3 > a |
April 9, 2026 div.row > div.column > article.component-article > time.component-article-date |
Turning food waste into fuel div.column > article.component-article > h3 > a |
April 16, 2026 div.row > div.column > article.component-article > time.component-article-date |
Remaining Steadfast in an Era of Destabilization div.column > article.component-article > h3 > a |
March 18, 2026 div.row > div.column > article.component-article > time.component-article-date |
What is happening in Lebanon? div.column > article.component-article > h3 > a |
March 9, 2026 div.row > div.column > article.component-article > time.component-article-date |
The long hours of winter: Four years of conflict in Ukraine div.column > article.component-article > h3 > a |
March 6, 2026 div.row > div.column > article.component-article > time.component-article-date |
These are opportunities to improve the legibility of your content.
Navigation
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more about heading order.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
Tax the super-rich. div.component--homepage-advocacy-array > div.component--homepage-advocacy-array-card > div.card-content > h4.title |
These are opportunities to improve keyboard navigation in your application.
Names and labels
Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute. Learn more about the `alt` attribute.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
body.new-nav > img body.new-nav > img |
These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader.