css Question posted in
Some basic documentation can be found here.

Css – Is `cursor: not-allowed` required for accessible disabled buttons?

During an accessibility review of a website based on WCAG 2.1 level AA, the implementation of inactive buttons was criticized. The attribute aria-disabled="true" has been applied, and the appearance of the inactive button is appropriate for contrast. Despite this, I was also required to use the cursor: not-allowed style, but I don’t like this from a design point of view. I read it and did not find an item in the WCAG 2.1 guidelines that would require the use of the mentioned cursor style.

Is it necessary to style disabled buttons with cursor: not-allowed in order to be compliant with the WCAG 2.1 AA level?

Tags:

2

Answers


  1. 0

    no its not required. aria-disabled is enough.

    However, it might be useful to apply cursor: not-allowed —if it aligns with your design guidelines— as it provides clear visual feedback for your users.

    visual feedback helps users, especially those who might not be very good with the internet, to easily recognize that the button is not interactive.

    Login or Signup to reply.
  2. 0

    Probably, yes, you have to.

    Using the aria-disalbed attribute makes it accessible for screen reader users.
    If you are using a native form element (input, textarea, select, button), it would be better and sufficient to use the disabled attribute instead, but aria-disabled is fine.
    So far, so good.

    Now, you say that appearance of the inactive button is appropriate for contrast.
    This isn’t enough to definitively answer you yes or no.

    There is a point in WCAG telling that colors are insufficient to convey information alone, or that that colors shouldn’t be used alone to convey an information.
    Knowing that a button is available or disabled is a bit of information, and therefore:

    • If you only change colors but nothing else to show that the button is disabled, including with sufficient contrast, you are failing that point.
      You have to show that the button is disabled by another mean than just different colors, hence the suggestion of also changing the shape of the cursor.
    • If you also change something else than just colors, for example font style, size, show a different icon, etc.
      then that point is succeeded, and so you don’t need to change the shape of the cursor additionally to what you have already done.

    By default without any code, I imagine (maybe incorrectly) that you have only changed the colors of the disabled button but nothing else, as it is most often the case.
    So you have to add another mean to distinguish if the button is enabled or disabled, so to make sure that people with color blindness can see it.
    Changing the shape of the cursor is probably the simplest and the most common way to do it, but as you have just understood, you can do something else if you wish.

    At the end, you must be able to see if the button is disabled or not on a black and white screen. This constitutes a good test for that point.

    In any case, beyond strict conformance, it’s always useful. So even if you might not be required to do it, you should still do it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search