1
00:00:00,000 --> 00:00:09,389
[MUSIC]

2
00:00:09,389 --> 00:00:12,105
Hello, awesome coders, Brian here.

3
00:00:12,105 --> 00:00:15,022
This practice session
revolves around a vital yet

4
00:00:15,022 --> 00:00:18,310
often overlooked facet
of web accessibility.

5
00:00:18,310 --> 00:00:22,670
The tab focus states for
checkbox inputs in Internet browsers.

6
00:00:22,670 --> 00:00:26,962
Unfortunately, most internet browsers
today lack built in tab focus states for

7
00:00:26,962 --> 00:00:28,350
checkbox inputs.

8
00:00:28,350 --> 00:00:31,409
This feature enhances navigation and
usage, especially for

9
00:00:31,409 --> 00:00:34,070
individuals relying on
keyboards to browse the web.

10
00:00:35,160 --> 00:00:39,682
As developers, we are responsible for
creating an inclusive and accessible web.

11
00:00:39,682 --> 00:00:43,933
The web content accessibility guidelines
emphasize the necessity of keyboard

12
00:00:43,933 --> 00:00:45,450
accessibility.

13
00:00:45,450 --> 00:00:49,178
Check the teacher's notes below to learn
more about the WCAG guidelines and

14
00:00:49,178 --> 00:00:51,400
how they facilitate
an inclusive web space.

15
00:00:52,580 --> 00:00:56,739
One option to add focus states to
checkbox inputs is to use the CSS

16
00:00:56,739 --> 00:00:59,020
pseudo-class focus.

17
00:00:59,020 --> 00:01:00,962
However, in this practice session,

18
00:01:00,962 --> 00:01:04,363
we'll explore a JavaScript solution
that leverages the focus and

19
00:01:04,363 --> 00:01:09,110
blur event listeners to enhance
the accessibility and user experience.

20
00:01:09,110 --> 00:01:12,182
I've included a focus class in
the CSS that you can add and

21
00:01:12,182 --> 00:01:15,350
remove from the elements with JavaScript.

22
00:01:15,350 --> 00:01:18,085
Launch the workspace with
this video to get started or

23
00:01:18,085 --> 00:01:21,380
download the project files and
use your preferred text editor.

24
00:01:22,490 --> 00:01:24,891
First peek into the index.html file,

25
00:01:24,891 --> 00:01:28,690
here you'll see how the form
elements are structured.

26
00:01:28,690 --> 00:01:31,778
For this practice,
you will target each check box input and

27
00:01:31,778 --> 00:01:33,210
its parent label element.

28
00:01:34,370 --> 00:01:36,465
Next, pop into the app.js file,

29
00:01:36,465 --> 00:01:40,990
here you'll find a few code
comments to guide your progress.

30
00:01:40,990 --> 00:01:43,575
Let's look at the web page
with the enabled tab focus and

31
00:01:43,575 --> 00:01:45,480
styles you'll implement.

32
00:01:45,480 --> 00:01:50,380
Beyond accessibility, having working tab
focus states enhances the user experience,

33
00:01:50,380 --> 00:01:54,300
offering a visual cue that assists
in navigating web pages smoothly and

34
00:01:54,300 --> 00:01:55,990
efficiently.

35
00:01:55,990 --> 00:01:58,170
Good luck, and have fun.

36
00:01:58,170 --> 00:02:01,890
In the following video, I'll show you
one possible solution to this challenge.