In this scenario we have an inline navigation for a web page that contains four links: "about",
"specification", "reviews" and "Q&A" and when these links are activated the browser scrolls to
the relevant information in the same page. For example, activating the "about" link scrolls
to the "about" section of information. One technical aspect to note about this example is that
it is not using the `tabindex` attribute on the linked content. So looking at the behaviour
of the links here it seems that the navigation is working as intended because when you click
on a "about" link it scrolls to the "about" section. Additionally if you were to navigate to the
"about" link and activate it using a keyboard you can then press the TAB key and reach content
in the section you've just scrolled to, so it looks all fine. What's the problem here? While
it may seem that focus is being managed it really isn't being managed at all and when
focus is not managed some assistive technology users like screen reader users and screen magnifier
users have a difficult time finding where they are on a page. So what's happening behind
the scenes? When you activate the "about" link in this example focus is actually being reset
to the body element and that means that focus is being reset to the top of the page. This
can be demonstrated by watching the activeElement in the console of your preferred browser.
So I'll just demonstrate that quickly using Chrome writing an expression called document.activeElement
and when I focus on the "about" link you can see the activeElement is "a", the anchor
tag, and I press ENTER and now the activeElement is "body". That means focus has been reset to
the body element and it's not being managed. So what this means for some assistive technology
users is: JAWS, for example, people using the JAWS screen reader will unexpectedly hear the
page `title` being announced when they press a link like the "about" link. Windows screen
magnifier, that has focus management turned on, will result in the user moving to a sometimes
unexpected, uninformed section of their view for example being moved into white space
and I can demonstrate the example of a screen reader screen magnifier user. So here I've
turned on Windows screen magnifier, 600% zoom and I have turned on focus tracking. Now when
I activate the "about" link with the ENTER key, I move to white space and essentially I've
moved to the top left corner of the page. Let's turn this off. So your not using the `tabindex`
attribute results in a problem with focus management. Focus is not being managed
and to resolve this all you need to do is add `tabindex` to the containing element of the
target. So if you're clicking on the about link you're going to the about section of
information you just add the `tabindex` to the container of that section of information.