Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
"The new developers who made the final changes were not aware that by adding a <span> for a dot actually broke semantics for lists."
I think perhaps the example isn't right as a <span> within a role="listitem" is fine as far as I am aware?
I am assuming that the <span> for the dots is not going to interfere with a screen reader due to some weird CSS choices however.
What is broken is that the first listitem doesn't have a space between two attributes class="li"role="listitem" so that will break the list.
I mean, none of it actually matters as you are 100% right that the first example is a steaming pile of XXXXX and the second example is elegant and accessible, but I was just trying to understand what the problem was with the <span>?
Anyway, ignore my ramblings, I love the article and the message, that bit just jumped out at me so I thought I would ask 🤣!
Director, Software Engineer - Mobile Accessibility. I am a major JS Framework, Automation and Mobile #a11y advocate. Just livin the dream! #a11y #accessibility
Location
United States
Education
Illinois State University
Work
Director, Software Engineer - Mobile Accessibility At Fidelity Investments
You are 100% correct! I meant to put it outside the listitem and into the containing div with the role of list. That then causes the semantic problems. Great catch! Thank you!
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
I think perhaps the example isn't right as a
<span>within arole="listitem"is fine as far as I am aware?I am assuming that the
<span>for the dots is not going to interfere with a screen reader due to some weird CSS choices however.What is broken is that the first
listitemdoesn't have a space between two attributesclass="li"role="listitem"so that will break the list.I mean, none of it actually matters as you are 100% right that the first example is a steaming pile of XXXXX and the second example is elegant and accessible, but I was just trying to understand what the problem was with the
<span>?Anyway, ignore my ramblings, I love the article and the message, that bit just jumped out at me so I thought I would ask 🤣!
Have a much deserved ❤🦄!
You are 100% correct! I meant to put it outside the listitem and into the containing div with the role of list. That then causes the semantic problems. Great catch! Thank you!
That makes sense!
No problem, I am glad it was that as I was seriously questioning myself! 🤣
As I said, great article, I hope at least one person listens and avoids ARIA spaghetti!