Reading through a design systems docs and trying not to crash out LOL!
"...and role="button" on tags for accessibility."
This team should listen to my talk about building accessible components.
#a11y #WebDev #RightBadCode
"...and role="button" on tags for accessibility."
This team should listen to my talk about building accessible components.
#a11y #WebDev #RightBadCode
August 19, 2025 at 1:04 PM
Reading through a design systems docs and trying not to crash out LOL!
"...and role="button" on tags for accessibility."
This team should listen to my talk about building accessible components.
#a11y #WebDev #RightBadCode
"...and role="button" on 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
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
August 14, 2025 at 2:12 PM
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
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
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
#a11y #frontEnd #DontDoThis #rightBadCode
August 4, 2025 at 2:13 PM
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
#a11y #frontEnd #DontDoThis #rightBadCode
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
#accessibility #a11y #ux #ui #rightBadCode
Right Bad Code
Right Bad Code is an accessibility-focused blog where you will find information and resources to help build inclusive products.
rightBadCode.com
July 21, 2025 at 9:51 PM
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
#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
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
June 9, 2025 at 8:01 PM
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
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
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 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
May 16, 2025 at 4:17 PM
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 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, , 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 tags receive focus natively
3. JS is being relied on more than it should
#a11y #frontEnd #rightBadCode
1. The dev is trying to do what assistive tech already does.
2. The dev doesn't know that tags receive focus natively
3. JS is being relied on more than it should
#a11y #frontEnd #rightBadCode
May 8, 2025 at 7:22 PM
Heading to an event downtown where I'll speak with various company leaders about building accessible design systems.
#a11y #designSystems #rightBadCode
#a11y #designSystems #rightBadCode
January 30, 2025 at 3:04 PM
Heading to an event downtown where I'll speak with various company leaders about building accessible design systems.
#a11y #designSystems #rightBadCode
#a11y #designSystems #rightBadCode
January 29, 2025 at 2:09 PM
January 22, 2025 at 11:09 PM
I had an ugly Christmas sweater made for the meetup in a few days. What do you think?
#a11y #accessibility #RightBadCode #UglyChristmasSweater
#a11y #accessibility #RightBadCode #UglyChristmasSweater
December 8, 2024 at 5:06 PM
I had an ugly Christmas sweater made for the meetup in a few days. What do you think?
#a11y #accessibility #RightBadCode #UglyChristmasSweater
#a11y #accessibility #RightBadCode #UglyChristmasSweater
Here's something I see that trips developers up. The landmark by default is equal to role="banner". I know... naming is hard.
So if you have a
So if you have a
or with role="banner" and a landmark on the same page, it causes a conflict.
#a11y #webDev #rightBadCode
#a11y #webDev #rightBadCode
December 4, 2024 at 9:49 PM
Here's something I see that trips developers up. The landmark by default is equal to role="banner". I know... naming is hard.
So if you have a
So if you have a
or with role="banner" and a landmark on the same page, it causes a conflict.
#a11y #webDev #rightBadCode
#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
#a11y #webDev #rightBadCode
November 27, 2024 at 3:39 PM
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
#a11y #webDev #rightBadCode
I saw someone recommend the incorrect way today and it bugged me so...
❌ The incorrect way to label an input:
Age
✅ The correct way:
#a11y #html #rightBadCode
❌ The incorrect way to label an input:
Age
✅ The correct way:
#a11y #html #rightBadCode
November 19, 2024 at 10:08 PM
I saw someone recommend the incorrect way today and it bugged me so...
❌ The incorrect way to label an input:
Age
✅ The correct way:
#a11y #html #rightBadCode
❌ The incorrect way to label an input:
Age
✅ The correct way:
#a11y #html #rightBadCode
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
rightbadcode.com/tips-for-wri...
#a11y #accessibility #rightBadCode
Tips for Writing Alt Text
html + accessibility
rightbadcode.com
November 16, 2024 at 1:10 PM
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
rightbadcode.com/tips-for-wri...
#a11y #accessibility #rightBadCode
It doesn't matter if you use React, Angular, Vue, Svelte, or any other javascript framework. Accessibility errors are framework agnostic.
#a11y #rightBadCode
#a11y #rightBadCode
May 12, 2023 at 1:41 AM
It doesn't matter if you use React, Angular, Vue, Svelte, or any other javascript framework. Accessibility errors are framework agnostic.
#a11y #rightBadCode
#a11y #rightBadCode
English
300
Connect Bluesky
Enter your Bluesky handle and app password to unlock posting, likes, and your Following feed.
Need an app password? Open Bluesky, go to Settings > App passwords, and create a new one.
Connect with Bluesky
Sign in with your Bluesky account to unlock posting, likes, and your Following feed.