Comments (8)
Hey @scottaohara, thanks for the detailed description! I will look into this, probably next week.
from matter.
While you don't say your project is WCAG compliant, you do state:
Matter is solid. All the components are tested thoroughly to ensure rock-solid quality across all targeted browsers.
I'm just pointing out, concerning tooltips specifically, this is not a rock-solid statement.
I do think, based on the scope you've said you'd like to limit this project to (css-only), it makes sense to not state by omission, but purposefully indicate that "You're going to have to do some extra work to make some of these components fully accessible / WCAG compliant." There's absolutely nothing wrong with stating that, and I think it helps send the right message.
I would not, however, mention:
Users of the library can at least make the component fully compliant by adding the content of the tooltip as
title
to the originating component as well.
As if I'm understanding your intent here, you're saying someone could either double up your pattern with a title
attribute, which would cause duplicate announcements of the information. Or rely on the title
attribute itself, which is not considered a reliable method for promoting accessible information due to it's lack of full support for keyboard and touch devices.
Tooltips aren't easy. Though, again, I appreciate you giving it a shot.
from matter.
Hey @scottaohara, I read the article. Are there any accessible solutions for tooltips based pseudo-elements? One of the goals of this library is to be very easy-to-use. Using aria-describedby
infers adding an id to the tooltip element which has to be unique, thus increasing the complexity. I would prefer implementing something more contained.
from matter.
Not really, no. If you go the CSS content route then you are going to run into situations where content won't be announced properly as being a tooltip for the element it's supposed to be referencing, or announced at all in some older screen readers.
I understand wanting to keep things simple, but autogenerating IDs isn't really that hard though. And sometimes to do things properly you can't take short cuts. :(
from matter.
Please keep in mind that this is a CSS only library meant to be really easy to use. Autogenerating IDs wouldn't be hard with JavaScript, but that's off the table.
Nevertheless, I made some improvements (f410e52). The updated version:
- does not use
aria-label
, instead it usesdata-matter-tooltip
- does not use
::before
pseudo anymore, only::after
pseudo
This results - in my opinion - a better experience, because the tooltip is announced only once, does not overtake the label, and the corresponding element is not promoted to group
. The tooltip is announced, but as if it was part of the control label.
I know this is not the ideal behaviour, but with the given constraints (CSS only-ness) the responsibility of correctly using aria-describedby
would be on the users of the library. I expect that off-loading this complexity on the users would generate more tooltips that are not accessible at all, resulting a less inclusive web.
I wish to use something like aria-description
, or speech
media type if they were implemented.
from matter.
Thanks for making an attempt to make these better, @finnhvman,
With that said, if the intent is to be a CSS-only library, then I think it's worth noting that you'll never have a fully WCAG compliant tooltip solution (specifically relating to this implementation, failure of 1.3.1 and 2.1's addition of criteria 1.4.13), and it'd probably be worth mentioning that in the documentation.
And I don't say that to try and be a downer on the project. I think things like this are pretty cool and show CSS can be used to do some pretty neat things. Where I think this gets into murky territory though is when CSS-only solutions are touted as being an adequate replacement for the necessary functionality that minimal JS would provide.
Anyway, thank you again for giving this a shot, but unfortunately if the scope of this project is limited to CSS only, then again I'd say that there should be a note indicating that at least this particular component should not actually be used in production.
from matter.
Thanks for sharing your concerns. I took some time to think about the problem, I made some further improvements (7081367):
- Made the tooltip hoverable
- Made the tooltip bigger on mobile devices
I understand that this is not the fully accessible solution, however I never stated that it's WCAG compliant. Users of the library can at least make the component fully compliant by adding the content of the tooltip as title
to the originating component as well.
from matter.
I contacted @scottaohara to talk through the issues. The following commits were made to improve accessibility:
As a result the Tooltip is much more accessible now.
from matter.
Related Issues (20)
- Alignment issue with Switch without text HOT 7
- Element Select and scale element as bootstrap .input-lg, .input-sm, .col-lg- *, and .col-sm- * HOT 4
- Question : Change size input
- Checkbox and Radio button styling
- Publishing on npm HOT 1
- Problem with version of browser
- Slider present in codepen but not in bundle file HOT 3
- Is this project alive? HOT 4
- can you give me tabs component? HOT 1
- Add a full demo page
- Can you add card ? HOT 2
- Add cards component HOT 4
- Matter 2
- Not an issue, but there are official Google pages using Matter HOT 2
- a mistake
- matter-progress-circular doesnt seem to work with values HOT 1
- Possible typo in selector HOT 1
- Sizing guidelines HOT 1
- Changing colors HOT 3
- Request for add new component HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matter.