fancyapps
Aria-labels for buttons in fancybox-overlay
Hi,
we are currently working on a project which is regularly tested for accessibility. I have noticed that Fancybox already adds a title-attribute for each button of the fancybox overlay, which can be adjusted using the "l10n" option - which is a very nice feature.
I was wondering if this approach can be adjusted to additionally add aria-labels which hold the same "l10n"-values as the title attributes. The title-attribute is more used for giving visual guidance, while the aria-labels can be used to improve the user experience for vision impaired users.
What do you think about this?
EDIT: I have actually tested fancybox now using the Chrome-Screenreader and NVDA and it actually works fine for that specific cases. Although it might still be better to add dedicated aria-labels for screenreader support, since some Browser/Screenreader setups do not support the title-attribute by default.
see https://www.mediacurrent.com/blog/dont-rely-title-attribute-accessibility-seo/ see https://dev.opera.com/articles/ux-accessibility-aria-label/#accessible-name-calculation
I fixed this already in my own local build, by duplicating the lines of code responsible for adding the title-attribute and simply changing it for the aria-label. I would also be happy to provide a PR for this.
Hi,
Unfortunately, it is not so simple.
First, your sources are quite outdated. The first one is 5 years old and it states "Some screen readers don’t support the title attribute" without specifying who these readers are or where the statement comes from. I think it refers to IE11, see https://www.aditus.io/aria/aria-label/#aria-label-vs-title
Think about - if software supports aria-label attribute, how hard it would be to map title attribute, too? There are interesting things in this (4-year-old) NVDA issue - https://github.com/nvaccess/nvda/issues/7841 For example:
The W3C spec prohibits the usage of the title attribute when there is an aria-label
So, I am not sure if adding both attributes is a good idea. It would create problems for those who use newer software.
Perhaps it would be best to switch from title to aria-label attributes and create tooltip functionality using JS.
Thank you for sharing your thoughts. I have read through the links you gave me, and I agree with you - adding both aria-label and title attributes is not a good solution to the problem. As a result, I will close my PR #111.
Your suggestion of replacing the title with aria-label attributes and handling the tooltip functionality via JS is also a very nice idea. Is it possible that this can be added to a future release of Fancybox?
Yes, I have added it in my todo list for v5 (I can't provide any ETA for v5, my goal is to release it this year, but you know, I have to consider many details and it's not that simple).
That is understandable, i am glad this finds it way into Fancybox. Thank you.
I'm not familiar with this project, I saw this issue through a Github reference. I just want to note that there is a way to use both aria-label (for reliability) and title (for visual tooltip) while avoiding double speak, of course depending on the use case:
<button aria-label="This is the accessible name of the button">
<span aria-hidden="true" title="This is a tooltip that is hidden from ATs, no double speak!">
<!-- icon -->
</span>
</button>
@Malvoz This is exactly what I'm doing for Tooltips in my CMS only, i'm also using data-tooltip="top|right|bottom|left" for directional tooltips, and if not present I can still use aria-label="" so elements are aria compliant. Also, without any Javascript, only using CSS. I've also implemented it into the Skunkworks repository of Summernote. The public version of Summernote still uses the older Bootstrap way of using Tooltips.
Hi @fancyapps
Why not get rid of titles at all or at least make them optional?
@Pixelous Because it's a good thing for Visually Impaired people, so their Screen Readers can tell them what action, or information the Highlighted Element is for. BTW, some countries require Websites to be ARIA Compliant.
@DiemenDesign but aria-label shoud do the same but without showing as a tooltip text when the mouse moves over the element which I do not want.
The way I implement Tooltips as described above, means to disable it, just don't add the data-tooltip="" attribute, then the tooltip isn't displayed, but leaves the aria-label for screen readers.
@DiemenDesign we can not just don't add the title="" attribute that is showing the native tooltip because it is hardcoded in a js file.
Yes you can, you can use styling so it doesn't appear. Explore pointer-events: none, and remove the js logic that implements the tooltips.
@DiemenDesign if I add pointer-events: none to buttons then they will not work at all, close, prev/next, etc. buttons, does not make sence.
Looks we mean different types of tooltips. I mean the native browser tooltips that go by default when title attribute is added and looks you mean some custom tooltips added by some your JavaScript code.
sigh You are not understanding at all, it seems. You target the title attribute explicitly, and style it to not appear on the :after and :before, and use your own styling to override it. I am NOT using any Javascript to implement my Tooltips. First result in Google: http://ameyraut.com/display-tooltip-without-javascript-or-jquery-pure-css/
@DiemenDesign you sure?
Here is the close button:
<button class="carousel__button fancybox__button--close" tabindex="0" title="Close"><svg viewBox="0 0 24 24" role="img" tabindex="-1" xmlns="http://www.w3.org/2000/svg"><path d="M20 20L4 4m16 0L4 20"></path></svg></button>
How do you remove the tooltip 'Close' text when the mouse moves over the close button?
I've already answered as such: Remove the Javascript logic for Tooltips, as in remove the part of the script that controls Tooltips, as it will override anything set in the Styling.
[title]:after,
[title]:before {
content: '' !important;
pointer-events: none !important;
}
The CSS alone stops the native Title Tooltip from appearing.
Without removing Javascript, you could add a function when the script is intialised or open that removes the title attribute from specified elements. But your smart, I'm sure you could work that out.
@DiemenDesign it does not work.
Please see the example with your code https://jsfiddle.net/j417z2mh/
What Javascript logic for Tooltips do you mean? What part of the script that controls Tooltips do you mean?
It is the default browser behaviour, no js is envolved.
You haven't implemented it correctly, what I commented was an example to get you started. And you obviously didn't understand what was in the link, as it has all the code necessary to do it in pure CSS. The Javascript I'm talking about is the logic used in Fancybox for tooltips, maybe look around here for the title of Close button: https://github.com/fancyapps/ui/blob/2248bf676317b0a30b2d4a388cee519444fbc89f/src/Fancybox/Fancybox.js#L882
@DiemenDesign ok thanks, thinking of replacing titles by area-labels via js.
As the script is implicitly adding the title attribute, you could just make the script set aria-label rather than title. It would be better than reading the title, then setting the aria-label with another script. Only thing is, when updating the Fancybox script, those would have to be edited again. It would be better to do a PR to set the aria-label as standard, and add an option to disable tooltips that would be checked, and if set to disable, doesn't set the title attribute.
Seems like this thread has been quiet for some time now. This isn't exactly about the title in these toolbar buttons but more about the svg icon inside the buttons. If we have a title (or aria-label) attribute surely the svg should be aria-hidden="true"? Am I overlooking something?
