Tip:
Highlight text to annotate it
X
Hi, I'm Kate from Nomensa
and today I'll be talking about the focus indicator -
why it's important,
and how to make it accessible.
All major browsers provide a default visible focus
when certain elements on the page, such as anchor and input elements,
active or focussed on.
However, a lot of websites overwrite this in order to show no visible focus
often because people don't like the look at the default indicator surrounding
focused on elements.
This can make navigating a page extremely difficult
for anyone using a keyboard to browse pages.
Let's take a look at a sample web page
on which the focus indicators have been removed.
To a person able to use a mouse,
navigating the page is no problem
and they can easily see whereabouts they are on the page.
However, many people such as those with motor disabilities,
are unable to use a mouse, and instead use a keyboard to navigate web pages.
I am now tabbing through the page,
but it is impossible to see which elements is being focused on.
Any person could find navigating a site with focus indicators removed extremely difficult,
or even impossible and so may be put off using the site altogether.
Now let's try tabbing through a web page which still has the focus indicator intact.
As I tab through the page,
it is now quite easy to see the location of the element currently receiving focus.
However for people with mild visual impairments,
or when some form fields such as checkboxes are highlighted,
This is why it is important to create a focus indicator
that has a high contrast against the background colour.
This can be done by removing the default focus indicator in the CSS file
by setting the outline to none, and then adding on focus styles.
Finally, let's have a look at a web page that implements a highly visible focus indicator.
In this case, we have changed the colour of the link text,
and added a 2 pixel border to the checkboxes and button when they are receiving focus,
using a colour which provides a large amount of contrast with the background colour.
Implementing this technique will ensure that all users
will be able to determine their location on a page when using a keyboard,
and also that your site complies with the WCAG success criterion 2.4.7:
Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
It is also important to note that form controls
must be implemented according to HTML specifications in order to ensure that they will actually receive focus.
according to HTML Specifications
in order to ensure that they will actually receive focus