Cooking up Quality with Chef Claude

Welcome to the Codegarden Cooking Institute

Now let me analyze the accessibility of jtw.blog.

Now let me run an accessibility audit using the browser's JavaScript console:

I now have enough data to compile a thorough report. Let me also scroll down to check more of the page:I have a comprehensive picture of the accessibility issues. Here's the full report:

Accessibility Report: jtw.blog Homepage

Issue 1 — Missing Alt Text on Images (WCAG 1.1.1 — Critical)

Five <img> elements have no alt attribute at all, including the profile photo and multiple event/community photos. Screen reader users will hear the raw filename read aloud instead of a meaningful description (or nothing at all, depending on the reader). Every <img> needs either a descriptive alt value or alt="" if it is purely decorative.

Issue 2 — Skipped Heading Level: H2 → H4 (WCAG 1.3.1 — Serious)

The heading hierarchy jumps from <h2> directly to <h4> ("ONE OF 100 UMBRACO MVPS WORLDWIDE.") with no <h3> in between. Screen reader users navigating by headings will encounter a confusing gap in the document outline. The <h4> should be changed to <h3>, or restructured so the hierarchy is logically sequential.

Issue 3 — Icon Buttons Without Accessible Labels (WCAG 4.1.2 — Critical)

Two buttons in the header have no visible text, no aria-label, no title, and no aria-describedby. The mobile hamburger menu button and the search icon button will be announced by screen readers simply as "button" with no indication of purpose. Each needs an aria-label such as aria-label="Open menu" and aria-label="Open search".

(Note: the search button does have a <span class="hideVisually">search</span> child, which is a partial fix — but its CSS visibility must actually hide it visually while keeping it accessible, which should be verified.)

Issue 4 — Generic Link Text: "READ MORE" / "FIND OUT WHY" (WCAG 2.4.6 — Moderate)

Links labeled "READ MORE" and "FIND OUT WHY" are meaningless out of context. Screen reader users who browse links as a list will hear these with no clue about the destination. Each should either have a visually hidden supplement (e.g. aria-label="Read more about CodeCabin") or the visible link text should be made descriptive.

Issue 5 — Focus Outline Suppressed (WCAG 2.4.7 — Serious)

The site's CSS contains outline: none on :focus rules, removing the visible keyboard focus indicator for interactive elements. Keyboard-only users — including those who cannot use a mouse — will have no visual cue showing which element is currently active. The :focus style should be replaced with a clearly visible custom focus ring (e.g. using outline or box-shadow), or at minimum :focus-visible should be used to preserve it for keyboard users only.

Issue 6 — SVGs Have No Accessible Title or Role (WCAG 1.1.1 — Moderate)

There are 2 SVG elements on the page, neither with a role="img" nor a <title> element inside. Depending on how they are used, SVGs either need role="img" plus a <title> (for meaningful graphics), or aria-hidden="true" (for decorative ones). Currently they are ambiguous to assistive technology.

Issue 7 — Navigation Landmark Has No Label (WCAG 1.3.6 — Moderate)

There is one <nav> element but it has no aria-label or aria-labelledby. On pages with multiple navigation regions this causes confusion, but even with one <nav> it's best practice to label it (e.g. aria-label="Main navigation") so screen reader users know what they're entering before they explore it.

Issue 8 — Hero Banner Image Is Not Described (WCAG 1.1.1 — Moderate)

The large hero section uses a background image (CSS background-image) which is invisible to screen readers by design — background images cannot carry alt text. If this image carries meaningful visual context (which community/event photos often do), the content it depicts should be described in nearby text or via an aria-label on the containing element. Currently there is no text equivalent.

Issue 9 — Potential Color Contrast Concerns on Article Cards (WCAG 1.4.3 — Needs Verification)

The "Some Thoughts" article cards display light-coloured text (white or near-white) over a dark navy/teal background image. While this may pass at first glance, text overlaid on photographs can dip below the WCAG AA minimum contrast ratio of 4.5:1 depending on what portion of the image appears behind a given word. Each card's text contrast should be verified with a tool like axe or Colour Contrast Analyser, and a solid semi-transparent overlay or text background should be added if needed.

Issue 10 — Skip Navigation Link May Not Be Visually Exposed on Focus (WCAG 2.4.1 — Moderate)

The site does have a skip link (<a class="nav-skip" href="#content" aria-label="skip to content">), which is a positive sign. However, skip links must become visible when focused via keyboard — they are typically hidden off-screen by default and revealed on focus. This should be verified: if the link's CSS keeps it hidden even on :focus (e.g. using display:none or visibility:hidden rather than a clip/offscreen technique), it provides no usable benefit to keyboard users navigating the page.

Summary Table

The highest priority fixes are the missing alt text, the unlabeled icon buttons, and restoring visible focus indicators — these three together would eliminate the most severe barriers for screen reader and keyboard users.

Thank you for attending the Codegarden Cooking Institute, Bon Appétit!