Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We 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.
Further Reading:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up