pointer-events: none prevent events from emitting. This could cause an issue if you want to make use of those at a later point. If you ever want to listen to an event emitted in your JavaScript code you will be in the somewhat curious situation of them being blocked by your css. So I wouldn’t recommend using it without a very good reason.
pointer-events: none will disallow events on the child elements. So if there is e.g. a link inside the header end-users will not be able to interact with that link. That would be an accessibility issue.
So there are no accessibility issues using pointer-events: none as long as end users won’t expect anything to happen when they interact with the element or its descendants.
PS: Since you mentioned it in the comments: disallowing users to select text is an accessibility issue/restriction by itself.
Solution 2 :
Short Answer
Remove it, it adds no benefit at all on a heading and may cause accessibility issues.
Long Answer
The question you should be asking is why is it there in the first place?
A heading shouldn’t really have any JavaScript event handlers attached to it and if it does why would you then add pointer-events: none to cancel them? If that is why it exists then fix the script.
Obviously I can’t see the site but having pointer-events: none; on a heading is like adding role="presentation" to a <div>….it serves no purpose….assuming the site doesn’t have underlying issues that necessitate its use.
The only reason I could see someone adding this is if either there is a problem with the site and they brute forced their way around it (so events are bubbling up incorrectly due to a poor selector for example) or you have some strange function operating (maybe a clipboard copy function that for some reason you wouldn’t want to work on Headings?).
While it shouldn’t cause accessibility issues, as the items shouldn’t be interactive, I would encourage you to remove it if you can, it serves no real purpose.
With regards to your comment about “my purpose is to disable text selection if a user were to click on the headers on the site.”…pointer-events wont do that as you can see in the fiddle at the end of this answer…you can still select the text but it doesn’t register events (click on top heading nothing happens, bottom heading will log to console).
As you also pointed out, user-select can cause usability issues for people who might select text to have it read out to them (learning difficulty, second language etc.) or to help them focus on a sentence at a time (dyslexia for example) etc. etc.
If someone wants to select the text to make it easier to read then let them!
pointer-events: none should only really be used to allow people to click through an item to an item beneath that is interactive.
fiddle to illustrate text selection is still possible with pointer-events: none
Here is how I would prevent users to select text, instead of using pointer-events: none on designated HTML elements:
prevent all user selection on the entire page
allow selection only where selection of content is applicable
Like this:
/* prohibit user from selecting text (put in <body>), esp. convenient for 'click-happy' users... */
[no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
[do-select] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: auto }
/* enable user to select text (put in specific elements) */
<body no-select>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
<p>Cu vel debet nobis, repudiare deseruisse reprehendunt usu ad. Ex elit idque nam. Omnis munere detraxit mei te, eu labore appareat verterem
est. Mel ex oporteat consectetuer.</p>
<p><b do-select>THIS IS SELECTABLE, DO TRY WITH mouse or [Ctrl-A]</b> THE REST OF THE ENTIRE TEXT, HOWEVER, NOT!!! Pro ea nonumy integre, mel at solum corpora. Id viris audiam repudiare cum, pri dolore appareat ex, per propriae detracto tacimates ex.
Elitr sapientem quo et, usu suas porro tibique cu. Iusto causae eos et, tota principes interesset et eos. Similique intellegam cum ei, unum
qualisque mel et, regione verterem delicatissimi qui ut. Aliquam incorrupte ea pro, vel veritus consequat id.</p>
<p>Pri te amet electram. Tation commodo minimum cu pri, utamur minimum id pri. No legimus atomorum vim. Vix id putent iuvaret salutandi, mel
phaedrum conceptam ut.</p>
</body>
Problem :
I am updating a site to be more accessible. The former site has pointer-events: none; set on all <h1> and <h2> elements.
Making the transition, is this setting an accessibility issue?
Comments
Comment posted by dev.to/alvaromontoro/…
this might answer your question
Comment posted by Rene van der Lende
As with anything else disabling
Comment posted by arctic
@RenevanderLende my purpose is to disable text selection if a user were to click on the headers on the site.
Comment posted by developer.mozilla.org/en-US/docs/Web/CSS/user-select
I think you want to use the
Comment posted by sol
“my purpose is to disable text selection if a user were to click on the headers on the site” – Can you explain more about why you want/need to do this? The second answer in that link explains why doing that might hinder accessibility
Comment posted by Rene van der Lende
If someone wants to select the text to make it easier to read then let them!
Comment posted by Graham Ritchie
I cannot tell if you are saying you should prevent people from copying content or that allowing them to select text is a good thing so they can copy text.
Comment posted by Rene van der Lende
Oh, but I never meant to use it for protection, but more for mouse-click-happy users. Esp. with a lot of clickable items on the page to prevent them from inadvertedly selecting text all the time.
Comment posted by Rene van der Lende
And…to add to my comment: I would even want to have a W3C specified default button in the corner of EACH site that triggers some ‘I-cannot-read-your-darned-site’ configuration. Not just the browser settings. Mandatory. FYI2: 64% of
Comment posted by Rene van der Lende
Oh and I was being serious, people should be able to select anything on a site, whatever the reason. I often do. And site protection? Who are they kidding, we’ve got Dev.Tools.
