Solution 1 :

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

$('h2').on('click', function(e){
   console.log(e.target);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 style="pointer-events: none">test</h2>
<h2>test</h2>

Solution 3 :

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>&nbsp; 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.

By

Leave a Reply

Your email address will not be published. Required fields are marked *