Accessibility
· 13 checks — Landmarks, headings, alt text, forms, and link quality rolled into one auditable list.DDark Mode SupportActionTheme color onlyFIX
Detection limited to meta tags and inline styles.
DPrint StylesheetActionNo print stylesFIX
BForm Accessibility2 of 3 controls have issuesREVIEW
| Control | Type | Label | Method |
|---|---|---|---|
| input | text | Enter your Mastodon instance URL (optional) | none |
| #gsc-i-id1 | text | (Search UNC.edu) | placeholder only |
| input | submit | (none) | none |
Form controls need a <label>, aria-label, or aria-labelledby for screen readers.
<input type="submit">
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="text" name="term" id="gsc-i-id1">
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
CLink & Button QualityAction122 links, 18 buttons — all OKREVIEW
| Element | Text | Issue | Suggested Fix |
|---|---|---|---|
| https://alertcarolina.unc.edu/ | Alert Carolina!NormalThe Unive… | new tab | Add '(opens in new tab)' to text |
| https://www.unc.edu/posts/2026/04/21/for… | Former cancer patient will gra… | img no alt | Add alt attribute to the image |
| https://www.unc.edu/posts/2026/04/21/tar… | Tar Heels, now read this | img no alt | Add alt attribute to the image |
| https://www.facebook.com/uncchapelhill/ | new tab | Add '(opens in new tab)' to text | |
| https://twitter.com/unc | new tab | Add '(opens in new tab)' to text | |
| https://www.youtube.com/user/UNCChapelHi… | YouTube | new tab | Add '(opens in new tab)' to text |
| https://www.instagram.com/uncchapelhill/ | new tab | Add '(opens in new tab)' to text | |
| https://pinterest.com/uncchapelhill/ | new tab | Add '(opens in new tab)' to text | |
| https://www.facebook.com/uncchapelhill/ | new tab | Add '(opens in new tab)' to text | |
| https://twitter.com/unc | new tab | Add '(opens in new tab)' to text | |
| https://www.youtube.com/user/UNCChapelHi… | YouTube | new tab | Add '(opens in new tab)' to text |
| https://www.instagram.com/uncchapelhill/ | new tab | Add '(opens in new tab)' to text | |
| https://pinterest.com/uncchapelhill/ | new tab | Add '(opens in new tab)' to text | |
| https://x.com/intent/tweet?via=%username… | Share This | new tab | Add '(opens in new tab)' to text |
| https://www.facebook.com/sharer/sharer.p… | new tab | Add '(opens in new tab)' to text | |
| https://www.linkedin.com/sharing/share-o… | new tab | Add '(opens in new tab)' to text |
Image-only links need alt text on the image (or aria-label on the link) so screen readers can announce them.
a[href="https://www.unc.edu/posts/2026/04/21/former-cancer-patient-will-graduate-from…"]; a[href="https://www.unc.edu/posts/2026/04/21/tar-heels-now-read-this/"]
Image-only links with no alt are unidentifiable to screen-reader users — link's destination is invisible.
Source: WCAG 2.1 SC 2.4.4
Add '(opens in new tab)' to link text or aria-label.
https://alertcarolina.unc.edu/; https://www.facebook.com/uncchapelhill/; https://twitter.com/unc; https://www.youtube.com/user/UNCChapelHill; https://www.instagram.com/uncchapelhill/; https://pinterest.com/uncchapelhill/; https://www.facebook.com/uncchapelhill/; https://twitter.com/unc; https://www.youtube.com/user/UNCChapelHill; https://www.instagram.com/uncchapelhill/ (+4 more)
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
B404 Error PageHTTP 404, custom pageREVIEW
BFavicon & Branding10 icon(s) detectedREVIEW
BWeb ManifestValid manifestREVIEW
CColor Contrast (Screenshot)Action20 text elements analyzed, 14 fail WCAG AAREVIEW
Analyzes text contrast against the actual rendered page, including background images, gradients, and overlays that CSS-based tools cannot detect.
1 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 Home | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h2 Normal | 6.08:1 | 3.0:1 | #000000 | #898A8D | Pass |
| h2 Top Level Navigation | 1.15:1 | 3.0:1 | #000000 | #151515 | Fail |
| h2 232 years of public … | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h2 University Within Re… | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h2 Engine of Opportunit… | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h2 Research With Impact | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h2 University News | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h2 Key information | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h3 Featured | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h3 2026 Chancellor's Aw… | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h3 Energy at a Crossroa… | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h3 UNC Jazz Band | MFE … | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h3 American Indian Cent… | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| h3 Share on Mastodon | 2.06:1 | 3.0:1 | #000000 | #414141 | Fail |
| title The University of No… | 7.00:1 | 4.5:1 | #000000 | #4B9CD3 | Pass |
| div This website uses co… | 7.00:1 | 4.5:1 | #000000 | #4B9CD3 | Pass |
| a Privacy Notice | 9.35:1 | 4.5:1 | #000000 | #A6AEB6 | Pass |
| button I Accept | 15.27:1 | 4.5:1 | #000000 | #DADCDE | Pass |
| button Close Alert Message | 10.58:1 | 4.5:1 | #000000 | #B8B8B7 | 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 Structure17 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
A+Heading Hierarchy20 headingsPASS
- H2 Normal
- H2 Top Level Navigation
- H3 Featured
- H2 First. AndFor All.
- H1 Home
- H2 232 years of public service
- H2 University Within Reach
- H2 Engine of Opportunity
- H2 Research With Impact
- H3 Carolina springs into action
- H2 University News
- H3 Carolina makes ‘new Ivies’ list for third straight year
- H3 Welcome to vibe coding and pumping the brakes
- H3 Take a closer look at South’s new copper roof
- H2 Key information
- H3 2026 Chancellor's Awards
- H3 Energy at a Crossroads: North Carolina’s Electric Grid Transition
- H3 UNC Jazz Band | MFE 25-26
- H3 American Indian Center 20th Anniversary Celebration
- H3 Share on Mastodon
A+Alt Text QualityAll 16 images OKPASS
| Issue | Count |
|---|---|
| too long | 1 image(s) |
ALighthouse Accessibility AuditsScore 93/100 — 2 failing, 25 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. Link text that is discernible improves the experience for users with low vision. Learn how to make links distinguishable.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
Carolina research div.statistic > div.statistic-inner > span.text > a |
These are opportunities to improve the legibility of your content.
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 |
|---|
The University of North Carolina at Chapel Hill div.container > div.header > div.container > a.custom-logo-link |
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.