I'm fairly certain that CSS content and by extension attr() is not read by most screen readers + browser combination, being part of presentation rather than real content. I'd reconsider the recommendation unless I'm wrong then find tell me to pipe down. 😁
From accessibility point of view I meant that when we add such content like tooltip on hover, what we can do is add the content in aria-label which will be read by the screen reader and then make use of the samearia-label through are CSS with attr() for the normal flow. In that way we can have consistent content throughout.
Probably should've explained better 🙂
Hi Anya, thanks for the post, do you mean like this?
<p>hello a11y text, important info</p>
<p aria-label="hello a11y text"><!--hello a11y text-->important info</p>
Case 1 reads "paragraph, hello a11y text, important info"
Case 2 reads "paragraph, hello a11y text" only but displays the same as case 1.
If what you're doing is purely decorative or there is accompanying text, etc., then no, it's not a, "You can't use it because it's inaccessible." There's certainly use cases for CSS content, for example, that are perfectly fine. It just depends on their use.
Not what I'm saying. And I quote "This method could be really helpful with accessibility purposes." This is not true.
In the codepen example the tooltip will never be explained to blind users, so in affect, sighted users will get the context but not the blind user. So I stand by what I said. CSS content should be used with care.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.