Accessibility baseline of the current live site, graded against WCAG 2.2 Level AA. The reference the rebuild improves on.
How to read this. Contrast thresholds: 4.5:1 for normal text, 3:1 for large text (24px or larger, or 18.66px or larger when bold) and for state indication. Interactive-state colours are read from the current theme's CSS; the palette rebuild is handled separately. Content fixes (alt text, images of text) are Darden-led.
axe-core against the WCAG 2.0 / 2.1 / 2.2 A + AA rules. Every representative page fails at Critical and Serious. Counts are axe rule counts; the bar is total elements flagged on that page.
| Page | Critical | Serious | Elements flagged | Needs review |
|---|
The rules that appear "on every page" are almost all the one shared header and footer — single fixes in the build, not fifteen separate problems.
| axe rule | Impact | Root cause (how many elements) | Who fixes it |
|---|---|---|---|
aria-allowed-attr | Critical | The 4 desktop megamenu toggles in the shared header; recurs per page only because the header is shared. One component.What's wrong, and the fixEach toggle renders as <a class="nav-link dropdown-toggle" aria-expanded="false">Our Company</a> with no href. An anchor with no href has no button role, so it is not allowed to carry aria-expanded. A screen reader may drop that attribute, so a blind user is never told the menu is expandable or whether it is open or closed, and because it is a role-less anchor it is not keyboard-focusable either (the same root cause as the megamenu keyboard finding). Fix: rebuild each toggle as a real <button aria-expanded aria-controls>. A button has the right role, announces its state, and is keyboard-operable by default, so one change clears both this and the keyboard failure. | Build |
color-contrast | Serious | Resting text: shared chrome + teal links / bio-card names. Node counts 13–59 track how much text is on a page, not distinct defects. | Build |
image-alt | Critical | 1–4 content images per page with no alt (4 on /search). Editorial images, not chrome. | Darden content |
link-name | Serious | 1–6 links per page with no accessible name (icon-only / empty). | Build |
list | Serious | 1 — the broken /search results markup. | Build |
Note: automated rules catch about a third of WCAG issues, and axe tests only the resting state (it does honour each element's real size and weight). Hover, focus, and active contrast, and the keyboard and screen-reader failures, are the findings below.
Each card shows the real colour pairing as it renders, text on its actual background, so the failures are visible directly. Values are read from the current theme's CSS. Every card carries a link to see it live and our proposed fix, tagged by whether it is already decided, a straightforward build fix, or a call for the Darden team. Separated by where the element lives, because desktop and mobile navigation use different backgrounds.
#4B0500 is identical on desktop and mobile, but the panel behind it differs — so it fails on desktop and passes on mobile. Same rule, different background.#4B0500 on #BF2E38 · 2.77:1 · view on siteFail#4B0500 on light · ~13:1PassFooter links are 16px Montserrat Medium, so they are normal text and must clear 4.5:1. Both fall short (the 3:1 large-text allowance does not apply).
#BF2E38, salmon on dark-red #8B1109, dark grey and dark red on white). Many states already add a bold-weight cue as well as colour, which helps. Focus, though, has to be designed — the current theme shows nothing at all when an element is focused.Grouped by how it gets fixed: a convention we set once in the build, per-item content work Darden owns, or a rebuild beyond the agreed scope. Counts are elements, not pages.
| # | Issue | Context | WCAG | Severity |
|---|---|---|---|---|
| 1 | Focus indicators invisible site-wide (outline:0) | Global: nav, forms, search | 2.4.7 | High |
| 2 | Megamenu toggles not keyboard-focusable | 4 desktop toggles, shared header | 2.1.1 | High |
| 3 | Desktop submenu hover contrast (#4B0500 on red) | Desktop megamenu | 1.4.3 | High |
| 4 | Teal links + bio-card name contrast | Global links; bio grids | 1.4.3 | High |
| 5 | Footer link + cyan-highlight contrast | Footer (both breakpoints) | 1.4.3 | Low |
| 6 | Search placeholder contrast | Header search | 1.4.3 | Low |
| 7 | New-tab links without indication | Footer brand links | 2.4.4, 4.1.2 | Low |
| 8 | Interactive map not keyboard-operable, no names | /map | 1.4.10, 2.1.1, 2.5.8 | Med |
| 9 | Careers expander keyboard + ARIA | /careers/corporate-careers | 2.1.1, 4.1.2 | Med |
| 10 | Broken search results (list semantics, chrome missing) | /search | 1.3.1 | Med |
The mobile submenu hover is the same #4B0500 token but passes on the light mobile panel, so it is not a defect — only the desktop panel (item 3) is.
| # | Issue | Context | WCAG | Severity |
|---|---|---|---|---|
| 12 | Images missing alt text | 1–4 content images per page | 1.1.1 | High |
| 13 | Infographics are flat images of text | Impact stories | 1.1.1, 1.4.4, 1.4.5 | High |
A Darden-team call: who backfills alt text, and whether infographics become real text/charts or stay as images with proper alt.
| # | Issue | Context | WCAG | Severity |
|---|---|---|---|---|
| 14 | Footer "Our Brands" hover flyout (hover-only, greyscale, overflow, new-tab) | Footer, all pages | 2.1.1, 1.4.13, 1.4.10, 2.4.4 | High |
One URL per template family, the pages this audit worked through.
| Template family | Page |
|---|