help with aria-label?
2mon 11d ago by lemmy.dbzer0.com/u/PiraHxCx in a11y@programming.dev
I have a creepy site I'm using just to learn better HTML and CSS practices, and now I'm trying to learn and apply accessibility to it (just practicing, I'm not really expecting any person with a visual impairment to visit it), but using online screenreaders... well, I thought I was following the guides correctly but nothing is working as I expected...
The site is designed to look like entry logs on a terminal, all starting with // and I have a typing animation changing stuff written on the first line. I created a generic inline element called sr just for screenreader-related stuff, and in here: <h3 class="msg1"><sr aria-hidden="true">//</sr> You are the first here.</h3><h3 class="msg2"><sr aria-hidden="true">//</sr> Have you been kind to yourself?</h3> where I tested it seemed to work to remove the "slash slash" from every sentence, since the // is merely a visual element, however... well...
main content are entries following this pattern: "// 202603221035 : text text", and these are time stamps, I tried to add aria-label so it doesn't read as "slash slash two zero two six ... colon", so first I tried:
<p><time datetime="2026-03-22T10:35-03:00" aria-label="March 22, 2026 at 10:35">// 202603221035 :</time> text text </p>
Didn't work, aria-label was ignored and it read the "slash slash two zero two...". I asked an LLM and it suggested because it was a semantic element it would have tried to read datetime but it also didn't, but I tried removing it from the semantic element anyway:
<p><time datetime="2026-03-22T10:35-03:00"><sr aria-label="March 22, 2026 at 10:35">// 202603221035 :</sr></time> text text </p>
<p><sr aria-label="March 22, 2026 at 10:35"><time datetime="2026-03-22T10:35-03:00" aria-label="March 22, 2026 at 10:35">// 202603221035 :</time></sr> text text </p>
also got ignored, and LLM suggested it was because it was a custom/non-semantic generic element, but same reader (from https://www.screenreadersimulator.com/)respected the aria-hidden before on the same element so it wasn't the case... anyway, what would be the best accessibility practice for this case? Thanks.
@PiraHxCx
Don't trust a simulator, use a real screen reader.
<time datetime> does do something but only with some screen reader+browser combinations.
https://w3c.social/@tink/115736870816175354
I understand what you're attempting with \<time aria-label\> but aria-label does not always replace the contents of an element and what it does on static elements (as opposed interactive ones like inputs, buttons, links) varies.
When I try macOS VoiceOver+Safari, the aria-label makes it treat each <time> element as if it had role="group" so it says the aria-label contents as the group's name and then it reads the textNode contents.
Elements given names should always also have a role but a custom element has no role unless a role is added.
BTW, when you invent your own HTML tags, *always* include a hyphen: <s-r>, not <sr>; you never know what elements will be added to the spec but will never contain a hyphen so custom elements always should.
@PiraHxCx
For this content, my inclination is to just add separators within the timestamps so they're more readable, both visually and with a screen reader.
// 202603312310 : Time to take a step back.
\<p\>\<span aria-hidden=true\>//\</span\> 2026-03-31 23:10 : Time to take a step back.\</p\>
(If you want to use <s-r> instead of <span>, that's fine.)
If that's not feasible, an alternative is to hide the visible text from screen readers and include a visually hidden, more screen reader friendly, version:
\<p\>\<span class="visually-hidden"\>March 31, 2026 at 23:10\</span\> \<span aria-hidden=true\>// 202603312310\</span\> : Time to take a step back.\</p\>
Explanation of what .visually-hidden should include:
https://vispero.com/resources/the-anatomy-of-visually-hidden/#where-we-came-in
Thank you for all the tips!
In this particular page <span> has an specific use that's why I was using <sr> - now properly renamed to <s-r> (when reading about correct element semantics and trying to rewrite that site I've read that recommendation but totally forgot about it hehe).
So as many screenreaders may try to read datetime, I guess I can keep wrapping that text inside <time> then use aria-hidden for it all to be ignored (I mean, if <time datetime="2026-04-06T17:08-03:00" aria-hidden="true">// 202604061708 :</time> datetime gets ignored too, right?) and then have a .visually-hidden text for screen readers.
There is specific information I wasn't finding and I asked LLM and sometimes it contradicted itself, also simulators don't seem reliable... my site is full of visual features, I had all inputs hidden, LLMs told me that because of that their labels would be treated as plaintext so instead of display: none I put absolute and placed them outside of the screen, and then used aria-hidden on all inputs that were visual features (color and ASCII art switches), LLMs said it would automatically hide the labels as well, but screenreader simulators tried to read it as plaintext so I put aria-hidden of all the labels too, but now checking on the validator it says "The aria-hidden attribute must not be used on any label element that is associated with a labelable element." but those labels are just the buttons for the inputs for visual effects... so, not sure what to do, I'm going to have to install a screenreader anyway to see how it really behaves though.
@PiraHxCx The aria-label attribute isn’t allowed on \<time\>, nor many other elements.
The HTML validator should catch that for you: https://validator.w3.org/nu/
if anyone feels like inspecting the code https://pxhc.neocities.org/just-test-dont-visit-me-i-am-broken