You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#109808 Change title tag to aria-labelledby?

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by gressj on Monday, 10 January 2022 13:31 GMT

gressj
Hi there! Happy Holidays!

Question for ya. I'm trying to find an accessible solution for clients that want to use "read more" as a hyperlink but that will give screen readers more context.

I found that aria-labelledby will work for this but aside from toggling HTML and adding it manually to the code, I can't find a way this could work out of the box.

I'm wondering if the Title field which gives us title="this is the title" could be changed to aria-labelledby="Read more about whatever the page is about" so basically replacing title with aria-labelledby. Is there any way to do this without hacking up the extension. I do not want to hack up the extension. I want to make it easier for normal users to be able to add the aria-labelledby without going into the HTML of the article/module/etc.

Did that make sense?

Attachments

Ryan
aria-labelledby would be the wrong attribute to use as this is usually added to indicate how this element is labeled by some other element - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

The appropriate aria-* attribute would be aria-label - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

If the title attribute is present and the text is the same as the aria-label, then there is no need to include aria-label, as a screen reader will just read the title attribute.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

gressj
Thanks, Ryan.

My understanding is that the title attribute is not read out via a screen reader. https://www.tpgi.com/using-the-html-title-attribute/.

The aria-label would be different from the text. The text would probably say "Read more." The aria-label would say aria-label="read more about the problems happening with the stupid supply chain."

Does that make better sense?

I'm trying to avoid forcing the client to toggle the editor to add aria-label directly and would rather have them use a field if possible. That's the goal.

Ryan
I have added the option to set custom attributes in the Advanced tab of the Link dialog, so you can now set any aria attributes you want for a link, for example:

https://cdn.joomlacontenteditor.net/tmp/109808-change-title-tag-to-aria-labelledby.jpg

You can test this in JCE Pro 2.9.19 Beta - https://www.joomlacontenteditor.net/downloads/editor/pro/development

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

gressj
Wow, Ryan, thank you! I've tested and this works great! You are wonderful and brilliant. Thank you!!!