This was a fun Codepen to put together (no documentation) for coding a shipping status indicator. I don’t get my hands on code often, so this was a neat opportunity to do nesting and media query short syntax, and combine it with the currentcolor keyword and do some pseudo elements shenanigans.
This also demonstrates how hard it is to have color separation between the past and the current state – current is #333 a color which I find having not extreme contrast to the white background. The past ones are #767676, the minimum contrast to white for text. But the difference between #333 and #767676 is less than 3:1 which would be the minimum if there were no other indicators for the current item (but there are, bold + filled circles)
@yatil It would be useful if HTML had an element for list caption or heading (like how <table> has <caption>). If I were a screen reader user, I would want this list to be announced with a label, e.g., “parcel tracking, list, 4 items”, before it starts speaking the items.
@yatil The developer may not want to add a heading to the document structure just for such a list. It would be better if there was a standard way to add a local heading or caption only for the purposes of labelling the list.
> If I were a screen reader user, I would want this list to be announced with a label, e.g., “parcel tracking, list, 4 items”, before it starts speaking the items.
I encourage you to be careful asserting what would be useful to screen reader users by speculating what you, a not-daily-SR user, might want — without the benefit of the lived experience or their explicit feedback.
This is less about your post and more about my experience seeing this happen regularly.
@aardrian@yatil Well, the web is a very open platform where anyone can publish, so naturally there’s going to be a lot of content that doesn’t receive feedback from SR users. That’s just reality. That’s why it’s important to make creating accessible web content as easy as possible. ARIA is good, but standard HTML is better. I think a standard element for labelling lists would be useful.
@aardrian I don’t like states on non-interactive elements. If this was navigable, I certainly would put it on the button/link, but just on an <li>, I’m not a big fan. (Possibly irrational.) Plus I wanted to make past steps clear as well, and there is nothing in ARIA for that, so I like to err on the side of consistency.
Add comment