@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:
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.
@weirdwriter
Is this specific to Be My Eyes service coordinated by Massachusetts Association for the Blind and Visually Impaired (MABVI) and not relevant to Be My Eyes overall?
@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
@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\>butaria-labeldoes 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-labelmakes it treat each <time> element as if it hadrole="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
roleis 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.
@weirdwriter
Is this specific to Be My Eyes service coordinated by Massachusetts Association for the Blind and Visually Impaired (MABVI) and not relevant to Be My Eyes overall?
https://www.bemyeyes.com/
@main @mastoblind