Accessibility Guardian Report

URL: https://dev.to/
Scanned: 2026-05-15T16:01:02.900Z · Powered by Playwright + axe-core + Gemma4

📋 Logical Audit Summary

Widespread missing alternative text for images and broken interactive control semantics create significant barriers for screen reader users.

The site presents a high accessibility risk due to systemic failures in image descriptions and broken interactive control semantics. Developers should prioritize resolving the image-alt and aria-valid-attr-value violations to restore basic usability for non-visual users.

1. Images Massive volume of images missing alternative text, preventing visual content description. 52 issue(s)
2. Interactive Controls Broken ARIA attributes, empty links, and invalid nested interactive elements. 7 issue(s)
3. Content & Readability Insufficient color contrast and non-sequential heading levels. 4 issue(s)

🧑‍🦯 In the Shoes of a Disabled User

Perspective: Blindness using NVDA 2024 on Windows 11 with Chrome
Goal: Find and read a recent article about web development

I land on the homepage and immediately feel lost because the images that should provide context are just silent voids. As I tab through the navigation, I keep hitting links that have no names, so NVDA just says 'link' without telling me where they lead. I try to use heading navigation to find the main content, but the structure feels broken and jumps around unpredictably. When a promotional popup appears, I try to find the close button, but the screen reader announces an invalid attribute instead of telling me it's a button to exit. I am left clicking blindly, unable to tell if I am interacting with a button or a link.

⛔ I am trapped inside a popup window because the close button provides no usable information, and I cannot navigate back to the article feed.

💬 This technical failure turns a simple search for information into a frustrating struggle for basic digital agency.

critical An ARIA attribute on the close button contains an invalid value, which prevents assistive technologies from correctly communicating the element's purpose or state to the user.✨ Gemma4 aria-valid-attr-value ▾

👥 Who is affected

Screen reader users (such as those using NVDA, JAWS, or VoiceOver) who rely on ARIA attributes to understand the relationship between a trigger and the content it controls.

🧑‍🦯 User experience

I tab to the close button for the sponsorship banner, but my screen reader doesn't tell me that this button controls a specific section of the page because the attribute value is invalid. I'm left guessing what will happen when I click it, and I lose the programmatic connection between the button and the banner it is supposed to close.

⚠️ Why it matters

This is a violation of WCAG 4.1.2 (Name, Role, Value), which requires that the state and role of UI controls be programmatically determinable. Legally, this failure can make a site non-compliant with ADA and Section 508 standards, as it creates a barrier for users with visual impairments.

🔧 How to fix

1. Identify the ARIA attribute on the button that has the invalid value. 2. Consult the WAI-ARIA specification to find the list of accepted values for that specific attribute. 3. Replace the invalid value with a valid one (for example, ensuring boolean attributes use 'true' or 'false' instead of 'yes' or 'no').

💻 Code example

Before

<button id="sponsorship-close-trigger-261441" aria-controls="sponsorship-close-261441" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon">

After

<button id="sponsorship-close-trigger-261441" aria-label="Close" aria-controls="sponsorship-close-261441" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon"> <!-- Added aria-label to provide an accessible name for the icon button -->

P1 - Fix this sprint WCAG 2a, 4.12 ↗ 1 element(s) affected

critical 52 images are missing alternative text, which prevents screen readers from describing the visual content to users who cannot see the screen.✨ Gemma4 image-alt ▾

👥 Who is affected

Blind and low-vision users relying on screen readers (such as NVDA, JAWS, or VoiceOver) are blocked because they receive no meaningful information about the images.

🧑‍🦯 User experience

I am navigating the page with my screen reader when I suddenly hear a long, nonsensical string of characters like 'exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5 dot svg'. I have no way of knowing if this image is a critical alert icon, a navigation button, or just a decorative graphic, which leaves me confused and disconnected from the content.

⚠️ Why it matters

This is a violation of WCAG 1.1.1 (Non-text Content), a Level A requirement. Failing to provide alt text is a fundamental accessibility barrier and poses a high legal risk under the ADA and EAA.

🔧 How to fix

For each image, determine its purpose. If the image conveys information, add a descriptive alt attribute (e.g., alt='Warning icon'). If the image is purely decorative, add an empty alt attribute (alt='') or role='presentation' so screen readers know to skip it.

💻 Code example

Before

<img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18">

After

<img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" alt="Exploding head"> <!-- Added descriptive alt text for accessibility -->

P0 - Fix immediately WCAG 2a, 1.11 ↗ 52 element(s) affected

serious The text and links have insufficient color contrast against their background, making the content difficult or impossible to read for many users.✨ Gemma4 color-contrast ▾

👥 Who is affected

Users with low vision, color blindness, or age-related vision loss. These users cannot distinguish the text from the background, which renders the information invisible or illegible.

🧑‍🦯 User experience

I try to read the site description, but the 'DEV Community' link is so faint it almost blends into the background. I find myself squinting and leaning closer to the screen, but I still can't clearly see where the link ends and the text begins, making me feel like I'm missing a key piece of navigation.

⚠️ Why it matters

This is a violation of WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum). Practically, it blocks access to information; legally, it exposes the organization to accessibility lawsuits under standards like the ADA or EAA.

🔧 How to fix

1. Use a contrast checker tool to identify the current ratio between the foreground text and background color. 2. Adjust the CSS color value for the .c-link--branded class to a shade that meets the minimum contrast ratio of 4.5:1 for normal text. 3. Verify the new color remains accessible across both light and dark themes if applicable.

💻 Code example

Before

<p>
    <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a>
    A space to discuss and keep up software development and manage your software career
</p>

After

<p>
    <a class="c-link c-link--branded fw-medium" style="color: #000000;" aria-label="DEV Community Home" href="/">DEV Community</a> <!-- Increased color contrast to meet WCAG AA standards (min 4.5:1) -->
    A space to discuss and keep up software development and manage your software career
</p>

P1 - Fix this sprint WCAG 2aa, 1.43 ↗ 3 element(s) affected

serious Several links on the page are empty and contain no text, meaning they have no name for assistive technology to announce.✨ Gemma4 link-name ▾

👥 Who is affected

Blind and low-vision users using screen readers (like NVDA or JAWS) and users of voice control software. Screen readers cannot announce the purpose of the link, and voice control users cannot trigger the link by speaking its name.

🧑‍🦯 User experience

I am navigating the page by jumping from link to link using my screen reader. Suddenly, I hear the word 'link' but no description follows. I have no idea where this link leads or what it does, leaving me guessing whether to click it or ignore it.

⚠️ Why it matters

Without discernible text, a link is functionally invisible to non-visual users. This is a direct violation of WCAG 2.4.4 and 4.1.2, creating a significant accessibility barrier that increases legal risk under the ADA and EAA.

🔧 How to fix

Add descriptive, meaningful text between the opening and closing anchor tags. If the link is intended to be an icon, add an aria-label attribute to the link element to provide a text alternative.

💻 Code example

Before

<a name="add-a-new-badge-to-your-dev-profile" href="#add-a-new-badge-to-your-dev-profile">  </a>

After

<a name="add-a-new-badge-to-your-dev-profile" href="#add-a-new-badge-to-your-dev-profile">Add a new badge to your dev profile</a> <!-- Added descriptive text to provide an accessible name -->

P1 - Fix this sprint WCAG 2a, 2.44, 4.12 ↗ 4 element(s) affected

serious Interactive elements, such as buttons or links, are nested inside one another, which is invalid HTML and confuses assistive technologies.✨ Gemma4 nested-interactive ▾

👥 Who is affected

Screen reader users (NVDA, JAWS, VoiceOver) and keyboard-only users. Screen readers often ignore the inner interactive element or fail to announce its role, and keyboard focus may skip the inner element entirely.

🧑‍🦯 User experience

I Tab to the 'Jess Lee profile details' button, but I cannot reach the specific link or button hidden inside it. When I press Enter, the outer button triggers, but I have no way to activate the inner control, leaving me unable to access the specific action I need.

⚠️ Why it matters

This is a violation of WCAG 4.1.2 (Name, Role, Value) and 2.1.1 (Keyboard). Legally, it creates a significant accessibility barrier; practically, it renders nested functionality unreachable for anyone not using a mouse.

🔧 How to fix

1. Remove the inner interactive element from inside the outer button. 2. Restructure the HTML so that the interactive elements are siblings (placed next to each other) rather than nested. 3. Use CSS positioning or a wrapper div to maintain the desired visual layout without nesting interactive roles.

💻 Code example

Before

<a href="/profile/jess-lee">
<button id="story-author-preview..." aria-controls="story-author-preview..." class="profile-preview-card..." aria-label="Jess Lee profile det..." aria-expanded="false" aria-haspopup="true" data-dropdown-initia...="true" data-initialized="true">Jess Lee</button>
</a>

After

<div class="profile-preview-container">
<button id="story-author-preview..." aria-controls="story-author-preview..." class="profile-preview-card..." aria-label="Jess Lee profile det..." aria-expanded="false" aria-haspopup="true" data-dropdown-initia...="true" data-initialized="true">Jess Lee</button>
</div> <!-- Removed wrapping anchor tag to resolve nested-interactive violation -->

P1 - Fix this sprint WCAG 2a, 4.12 ↗ 2 element(s) affected

moderate The heading levels are not in a sequential order, skipping a level (e.g., jumping from H1 to H3).✨ Gemma4 heading-order ▾

👥 Who is affected

Screen reader users (blind or low-vision) who use heading navigation shortcuts to map out the page structure.

🧑‍🦯 User experience

I am pressing the 'H' key to skim the page and find the section on adding badges. I jump from the main page title straight to a level 3 heading, which makes me pause and wonder if I've accidentally skipped a major section of instructions or a prerequisite step.

⚠️ Why it matters

Consistent heading hierarchy is critical for WCAG 1.3.1 (Info and Relationships). When levels are skipped, the structural relationship between content is lost, creating confusion and increasing cognitive load for users who cannot see the visual layout.

🔧 How to fix

Review the heading hierarchy of the entire page. Ensure there is one H1 for the main title and that subsequent sections use H2, then H3, without skipping levels. Change this H3 to an H2 if it represents a primary section of the page.

💻 Code example

Before

<h3>  <a name="add-a-new-badge-to-your-dev-profile" href="#add-a-new-badge-to-your-dev-profile">  </a>  Add a new badge to your DEV profile</h3>

After

<h2>  <a name="add-a-new-badge-to-your-dev-profile" href="#add-a-new-badge-to-your-dev-profile">  </a>  Add a new badge to your DEV profile</h2> <!-- Changed h3 to h2 to maintain sequential heading order and avoid skipping levels -->

P2 - Fix soon 1 element(s) affected

♿ Accessibility Guardian Report

📋 Logical Audit Summary

🧑‍🦯 In the Shoes of a Disabled User