Accessibility
· 13 checks — Landmarks, headings, alt text, forms, and link quality rolled into one auditable list.FFavicon & BrandingAction2 icon(s) detectedFIX
DWeb ManifestActionNot foundFIX
No web manifest found.
DDark Mode SupportActionNo dark mode signalsFIX
Detection limited to meta tags and inline styles.
CLink & Button QualityAction6 issue(s) across 247 links and 8 buttonsREVIEW
| Element | Text | Issue | Suggested Fix |
|---|---|---|---|
| (empty) | empty | Add link text or aria-label | |
| https://www.opm.gov/job-seekers/ | (empty) | empty | Add link text or aria-label |
| https://www.opm.gov/federal-employees-an… | (empty) | empty | Add link text or aria-label |
| https://www.opm.gov/hr-practitioners/ | (empty) | empty | Add link text or aria-label |
| (empty) | empty | Add link 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 (#830 on page); https://www.opm.gov/job-seekers/; https://www.opm.gov/federal-employees-annuitants/; https://www.opm.gov/hr-practitioners/; a (#980 on page)
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
Icon-only buttons need an aria-label so screen readers can announce them.
button.usa-nav__close (#92 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
CColor Contrast (Screenshot)Action20 text elements analyzed, 20 fail WCAG AAREVIEW
Analyzes text contrast against the actual rendered page, including background images, gradients, and overlays that CSS-based tools cannot detect.
8 contrast failures on background images/gradients
These failures are invisible to CSS-based accessibility tools like Lighthouse. The text may be fine on a solid background, but fails when rendered over an image or gradient.
Show all checked elements (20)
| Element | Ratio | Required | FG | BG | Result |
|---|---|---|---|---|---|
| h1 ORA: The Future of F… | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h1 Manage your Retireme… | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h1 How OPM is Preparing… | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h2 Featured Topics | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h3 Our Vision | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h3 Our Mission | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h3 Salaries and Wages | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h3 Schedule A Hiring Au… | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
| h3 FEGLI Handbook | 1.08:1 | 3.0:1 | #000000 | #0B0D0F | Fail |
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 Structure12 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 Hierarchy42 headingsPASS
- H2 Featured Topics
- H3 Our Vision
- H3 Our Mission
- H2 Featured Topics
- H3 Salaries and Wages
- H3 Schedule A Hiring Authority
- H2 Featured Topics
- H3 FEGLI Handbook
- H3 Frequently Asked Questions
- H2 Featured Topics
- H3 Services Online
- H2 Featured Topics
- H3 Suitability Executive Agent (SuitEA)
- H2 Featured Topics
- H3 Telework: Is Your Agency Ready?
- H3 Federal Executive Institute
- H2 Featured Topics
- H3 Our Vision
- H3 Our Mission
- H2 Featured Topics
- H3 Salaries and Wages
- H3 Schedule A Hiring Authority
- H2 Featured Topics
- H3 FEGLI Handbook
- H3 Frequently Asked Questions
- H2 Featured Topics
- H3 Services Online
- H2 Featured Topics
- H3 Suitability Executive Agent (SuitEA)
- H2 Featured Topics
- H3 Telework: Is Your Agency Ready?
- H3 Federal Executive Institute
- H1 ORA: The Future of Federal Retirement Starts Here
- H1 Manage your Retirement Annuity Online duplicate H1
- H1 How OPM is Preparing for the Surge in Retirements duplicate H1
- H2 Job Seekers
- H2 Federal Employees & Annuitants
- H2 HR Professionals
- H2 Recent News
- H2 Frequently Asked Questions
- H3 Trending Topics
- H3 In this section
A page should have only one H1. Multiple H1s dilute the document outline.
Multiple H1s blur the page's primary topic — screen-reader users and Google both prefer one H1.
Learn more ▾ ▴
HTML5's outline algorithm technically allows multiple H1s within sectioning content, but no browser implements it. In practice: one H1 per page. Use H2-H6 for subsections.
Source: WCAG 2.4.6 / Google Search Central
A+Alt Text QualityAll 11 images OKPASS
AForm Accessibility1 of 4 controls have issuesPASS
| Control | Type | Label | Method |
|---|---|---|---|
| #basic-search-field-small | search | Search all of OPM | for/id |
| #SiteSearchString | text | Search for | for/id |
| #TopFAQsSearchText | text | Top FAQs search term | aria-label |
| #GoSearch | button | (none) | none |
Form controls need a <label>, aria-label, or aria-labelledby for screen readers.
<input type="button" name="GoSearch" id="GoSearch">
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
A404 Error PageHTTP 404, custom pagePASS
A+Print StylesheetPrint styles detectedPASS
ALighthouse Accessibility AuditsScore 93/100 — 2 failing, 27 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.
Names and labels
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
div.grid-container > div.grid-row > div.featured-audience > a div.grid-container > div.grid-row > div.featured-audience > a |
div.grid-container > div.grid-row > div.featured-audience > a div.grid-container > div.grid-row > div.featured-audience > a |
div.grid-container > div.grid-row > div.featured-audience > a div.grid-container > div.grid-row > div.featured-audience > a |
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.
Navigation
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies. Learn more about the `tabindex` attribute.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
Skip to main content body#htmBody > a.usa-skipnav |
These are opportunities to improve keyboard navigation in your application.