Luke Skywalker saying "I feel the good in you."

When someone who once scoffed at accessibility starts to see the error in their ways

#Accessibility #A11y #RightBadCode

An ugly Christmas sweater with text that reads "<span onclick="fail()">A11y</span> is as ugly as this sweater"

Rocked my Accessibility fail ugly sweater tonight at the Holiday party. It was a big hit with everyone who knew HTML. Even one person who is learning HTML was giddy that she understood why this is bad.

#Accessibility #A11y #UglySweater #RightBadCode

When a company chooses to use an overlay or widget to "fix" accessibility issues. They don't fix issues, they cover them up.

#Accessibility #A11y #RightBadCode

Reading through a design systems docs and trying not to crash out LOL!

"...and role="button" on <a> tags for accessibility."

This team should listen to my talk about building accessible components.

#a11y #WebDev #RightBadCode

role="text" on a paragraph tag is wild!

First off, role="text" is not a valid attribute, so why is it even in the code? And second, the paragraph tag does not need help conveying its semantic meaning.

#A11y #FrontEnd #RightBadCode

a level 3 heading with a title attribute that matches the heading copy

Because I saw it, you get to. What's really bad is that this is code from the site of an accessibility company.

#a11y #frontEnd #DontDoThis #rightBadCode

Right Bad Code Right Bad Code is an accessibility-focused blog where you will find information and resources to help build inclusive products.

Inspired by products I've reviewed and designers I have spoken with, I have a new blog post coming this week on rightbadcode.com that touches on perception and why icon buttons need labels.

#accessibility #a11y #ux #ui #rightBadCode

Garbage in, Garbage out.
When your design system components are not accessible. For example, when your Text Input component lacks a label entirely or a label that's not programmatically associated with the text Input, it's not accessible.

#a11y #designSystem #rightBadCode

example code showing how to correctly associate a label with an input: <label for="name-input" aria-label="user name">User name</lable> <input type="text" id="name-input" name="userName" />

Quick accessibility code hygiene tip:
When your label and aria-label contain the same text, you don't need the aria-label. Also, be sure to associate the label with the input by providing the same text in the "for" and "id" attributes.

#a11y #frontEndDev #html #rightBadCode

When I see overengineered code like this, <a role="link" tabindex="0">, it tells me a few things:

1. The dev is trying to do what assistive tech already does.
2. The dev doesn't know that <a> tags receive focus natively
3. JS is being relied on more than it should

#a11y #frontEnd #rightBadCode

Do Not Publish Your Designs on the Web with Figma Sites… …Unless you want to fail all the WCAGs, create litigation risk, close off opportunities in Europe, engage in reputational harm, and oh yeah, throw up barriers to your customers and users. What am I ta...

adrianroselli.com/2025/05/do-n...

@aardrian.bsky.social

#a11y #webDev #noCode #rightBadCode

Heading to an event downtown where I'll speak with various company leaders about building accessible design systems.

#a11y #designSystems #rightBadCode

At a hotel or apartment complex pool area. There are two pools, but they are not connecting nevertheless there is a concrete bridge going over the gap. On the left side of the bridge is an open tag for an HTML anchor. On the right side is a close stage for an HTML anchor. In the middle are the attributes role="button" and tabindex="0"

Just gonna leave this here

#a11y #webDev #rightBadCode

In spite of the nonsense going on, I had several accessibility wins today.

#a11y #rightBadCode

An ugly Christmas sweater with text that reads "<span onclick="fail()">A11y</span> is as ugly as this sweater"

I had an ugly Christmas sweater made for the meetup in a few days. What do you think?

#a11y #accessibility #RightBadCode #UglyChristmasSweater

Here's something I see that trips developers up. The <header> landmark by default is equal to role="banner". I know... naming is hard.

So if you have a <div> or <span> with role="banner" and a <heading> landmark on the same page, it causes a conflict.

#a11y #webDev #rightBadCode

Improving A11y is not always a heavy lift. For example, reducing the noise is one thing I focus on because bad code is loud. This stems from the incorrect use of or overuse of ARIA attributes and HTML that isn't semantic.

#a11y #webDev #rightBadCode

I saw someone recommend the incorrect way today and it bugged me so...

❌ The incorrect way to label an input:
<strong>Age</strong>
<input type="text" id="age" name="age">

✅ The correct way:
<label for="age">Age</label>
<input type="text" id="age" name="age">

#a11y #html #rightBadCode

Tips for Writing Alt Text html + accessibility

In an effort to help improve accessibility on this app, we can start by providing alt text for our images. Here are some general tips on how to write alt text.

rightbadcode.com/tips-for-wri...

#a11y #accessibility #rightBadCode