help with aria-label? (lemmy.dbzer0.com)

submitted 6 months ago* (last edited 6 months ago) by PiraHxCx@lemmy.dbzer0.com to c/a11y@programming.dev

0 comments fedilink hide all child comments

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.

no comments (yet)

sorted by: hot top new old

there doesn't seem to be anything here

this post was submitted on 07 Apr 2026

1 points (100.0% liked)

Accessibility

1577 readers

7 users here now

!a11y@programming.dev is a community for discussing digital accessibility, sharing techniques and best practices, and talking about accessibility experiences; both good and bad.

Lemmy

Guidelines

Please keep submissions on topic and try to share high quality content.
Follow all instance-wide rules, which can be found on the sidebar here: programming.dev
Don't be a jerk. Just because something you post doesn't explicitly break a rule does not entitle you to post whatever you want, and mods will remove any posts or comments we consider to have been made in bad faith.
Don't editorialize titles. When sharing something, try to keep the title of whatever article you are sharing, unless it is clearly a clickbait title, and you wish to substitute a simple matter-of-fact title. Please do remove website and author names from the title.

What is Digital Accessibility?

Digital accessibility is the practice of removing barriers that prevent interaction with, or access to, digital systems by people with disabilities. This involves designing and developing websites, mobile applications, software, hardware, and other digital platforms in a way that they can be used by individuals with a range of abilities, including those with visual, auditory, physical, speech, cognitive, and neurological disabilities.

Digital accessibility not only benefits those with disabilities but also enhances the overall user experience, making digital content more usable and understandable for all. In many jurisdictions, it's a legal requirement under disability discrimination laws.

How does one improve digital accessibility in their products?

Key components of digital accessibility include accessible website design, multimedia with features like captions or transcripts, properly formatted digital documents, and accessible software and apps. It also extends to hardware design.

Other Accessibility Related communities:

!transcribing@programming.dev

Useful Resources

founded 2 years ago

MODERATORS

bugsmith@programming.dev

pylapp@programming.dev

Toda@programming.dev