Preview
Video Player
00:00
00:00
Tab Order
3:02We have covered how the relationship between elements should be clearly communicated through the markup. In this video, we’ll focus on the order in which elements are presented.
We've touched a little on the way
assistive technology sees elements.
0:00
But not really delved
into how that happens.
0:04
In this video,
we'll explore a little more of that,
0:08
specifically focusing on tab order.
0:10
To be honest,
a lot of this is taken care of for
0:13
us when we're thoughtful
about the way we use HTML.
0:16
By default, elements like links,
buttons and inputs can have focus.
0:19
Having focus allows the user to
interact with that particular element.
0:24
Many of us use a mouse to switch focus.
0:29
But all anyone should need to do is
0:31
tab through focusable elements on
the page using their keyboard.
0:34
This type of navigation goes beyond forms.
0:38
By default, I can navigate all through
my browser window and every interactive
0:41
element on the page by simply continuing
to hit the Tab button on my keyboard.
0:47
Things start to get a little
more difficult when we want
0:53
other types of elements to be focusable.
0:56
In that case, we need to make
use of the tabindex attribute,
0:59
which can accept a few
different types of values.
1:03
Giving it a negative value removes the
affected element from the normal flow of
1:05
navigation but
allow us to receive programmatic focus.
1:09
Allowing programmatic focus means that
we can give a particular element focus
1:14
via scripting.
1:19
This is good for things that you only want
to have focus under certain conditions.
1:20
Have you ever created a modal window,
1:24
perhaps with the help of
a tool like Bootstrap?
1:26
That modal was probably a div,
which can't normally receive focus.
1:29
However, giving that modal a negative
tabindex value and writing or
1:34
using pre-written JavaScript to assign
focus to the modal window once it's
1:39
triggered can be a handy way to make sure
that content is navigable via keyboard.
1:43
A tabindex of zero makes the element
focusable and keyboard navigable.
1:49
It will be listed in the logical
order based on the markup.
1:54
A positive value however allows us to
change the order in which elements
1:58
receive focus.
2:02
If any elements on a page
have a positive tabindex,
2:03
the tab order will start with the lowest
and move up through the numbers.
2:07
This last scenario can be
extremely confusing for users, and
2:11
it's usually best avoided.
2:16
Imagine trying to read along while
listening to your screen reader jump
2:17
around the page.
2:21
But you should be familiar
with the possibilities.
2:22
WebAIM has a helpful article on
the use of the tabindex attribute,
2:25
which you'll find linked
in the teacher's notes.
2:29
I've also included a downloadable demo for
you to experiment with.
2:31
We've come so far in such a short time.
2:36
The best way to commit these things to
memory is to start applying what you're
2:39
learning to everything you build.
2:43
Just like with anything else, you'll need
to look certain things up less and less.
2:46
All of these accessibility concerns
will start to feel more and
2:50
more familiar until a lot of
it becomes second nature.
2:54
Just a part of your regular work flow,
as it should be.
2:57
Keep up the great work.
3:01