htmlcssreactjsaccessibilitywai-aria

Is setting `pointer-events: none;` on header elements an accsssibility issue?


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?


Solution

  • 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.