Keyboard Focus Criteria

KhoaKhoa Member
I'm currently running accessibility tests on a web applications and was wondering if there are criteria for keyboard focus. Some applications provides a clear and pronounced keyboard focus. On other apps I either see no visual focus or a dotted box encasing the focused area which I believe is provided by the browser. I would like to know how visible does a keyboard focus needs to be on a browser or web application to be considered acceptable for accessibility. I really don't believe the dotted box encase a focused area is sufficient, especially for those who have low vision. Thank you in advance for any help on this.

Answers

  • GianGian Member
    edited January 2018
    Hi Paul

    Yes, there is a Level AA requirement that keyboard focus is visible. It is important to note that the keyboard focus indicator must contrast sufficiently with the background color (often white). For more information, see the WCAG success criterion on sufficient contrast. In some cases the dotted border is grey and does not contrast sufficiently.

    You can determine if the color contrast is sufficient by using the Paciello Group's Colour Contrast Analyser. Alternatively, please feel free to post a screenshot or provide a URL so we can test the color contrast for you. You can respond to this message, or email us at [email protected].

    Cheers
    Gian
  • KhoaKhoa Member
    edited February 2018
    Hi Gian,

    Thank you so much for replying. I have been using the mentioned color contrast analyzer to test the web applications and have really made things a lot easier. Below are screen shots of what I mentioned regarding keyboard focus. The first one is just an underlining of the menu text but doesn't show up any where else. The other two are, what I presumed, are provided by the browser.
    imageimageimage

    Thank you,
    Paul
  • GianGian Member
    edited February 2018
    Hi Paul

    Surprisingly, the first and the third pass color contrast. The green one does not. However, I think that you could argue that they all need a stronger keyboard focus indicator.

    Another requirement of accessibility is that the keyboard focus indicator matches what occurs when the mouse hovers over an item. In the examples, what happens when the mouse hovers over the link? If it is different then the keyboard focus indicator should be changed to match what occurs on mouse hover. Most of the time this mouse hover indicator is much stronger visually.

    Cheers
    Gian
  • KhoaKhoa Member
    edited February 2018
    Gian,

    Thank you so much for your response. In your experience would you consider these current focus indication as a fail or should it be given pass with a suggestion to make it stronger with the requirements you mentioned above?

    Thanks,
    Paul
  • GianGian Member
    edited February 2018
    Hi Paul

    In my opinion the keyboard focus indicator should be stronger. The following is what we use in our web site (OzART has keyboard focus)

    image

    As one of them fails I would mark it as a fail.

    Cheers
    Gian
Sign In or Register to comment.