Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Web Accessibility: Checkboxes!
You have completed Practice Web Accessibility: Checkboxes!
Preview
This video introduces the challenge that you'll be working to complete.
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
[MUSIC]
0:00
Hello, awesome coders, Brian here.
0:09
This practice session
revolves around a vital yet
0:12
often overlooked facet
of web accessibility.
0:15
The tab focus states for
checkbox inputs in Internet browsers.
0:18
Unfortunately, most internet browsers
today lack built in tab focus states for
0:22
checkbox inputs.
0:26
This feature enhances navigation and
usage, especially for
0:28
individuals relying on
keyboards to browse the web.
0:31
As developers, we are responsible for
creating an inclusive and accessible web.
0:35
The web content accessibility guidelines
emphasize the necessity of keyboard
0:39
accessibility.
0:43
Check the teacher's notes below to learn
more about the WCAG guidelines and
0:45
how they facilitate
an inclusive web space.
0:49
One option to add focus states to
checkbox inputs is to use the CSS
0:52
pseudo-class focus.
0:56
However, in this practice session,
0:59
we'll explore a JavaScript solution
that leverages the focus and
1:00
blur event listeners to enhance
the accessibility and user experience.
1:04
I've included a focus class in
the CSS that you can add and
1:09
remove from the elements with JavaScript.
1:12
Launch the workspace with
this video to get started or
1:15
download the project files and
use your preferred text editor.
1:18
First peek into the index.html file,
1:22
here you'll see how the form
elements are structured.
1:24
For this practice,
you will target each check box input and
1:28
its parent label element.
1:31
Next, pop into the app.js file,
1:34
here you'll find a few code
comments to guide your progress.
1:36
Let's look at the web page
with the enabled tab focus and
1:40
styles you'll implement.
1:43
Beyond accessibility, having working tab
focus states enhances the user experience,
1:45
offering a visual cue that assists
in navigating web pages smoothly and
1:50
efficiently.
1:54
Good luck, and have fun.
1:55
In the following video, I'll show you
one possible solution to this challenge.
1:58
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