freeCodeCamp's Use tabindex to Add Keyboard Focus to an Element, Accessible Web Apps 2020

Channel:
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=c9UjBOE1qVA



Duration: 3:38
122 views
2


In this video, we take a look at a great aid to keyboard-only users. Keyboard only users benefit a lot from the ability to tab through elements with focus. This is using tabindex. Tabindex allows us to add keyboard focus to an element. There are certain elements which have this functionality by default such as form controls and links. But let us say that, for example, you want to add some instructions to your form. Let us say we use a paragraph element to write out some instructions for our users. That paragraph element will not have keyboard focus by default, so our keyboard-only users will tab and simply get to the form, but the paragraph will never receive focus, and therefore would make the instructions inaccessible to our keyboard-only users. Therefore, when designing such steps in your site, it is important to consider and apply correct accessibility functionality so a wide audience may utilize your site. Tabindex allows us to do this. Using tabindex will allow you to focus on important sections of your web site.




Other Videos By We Will Code


2019-11-17Set Default Parameters for Your Functions, ES6 Courses on
2019-11-16Write Arrow Functions with Parameters, freeCodeCamp's ES6 Course, ES6 Challenges FreeCodeCamp
2019-11-15Use Arrow Functions to Write Concise Anonymous Functions, freeCodeCamp's ES6 Challenges, Javascript
2019-11-14Prevent Object Mutation, ES6 freeCodeCamp Introduction, Learn Javascript in 2020, ES6 Syntax
2019-11-13Mutate an Array Declared with const, 2020 ES6 Tutorials, freeCodeCamp ES6 Challenges 2020
2019-11-12Declare a Read-Only Variable with the const Keyword, A freeCodeCamp ES6 Syntax Introduction
2019-11-11Compare Scopes of the var and let Keywords, ES6 Intro FreeCodeCamp, Learn ES6 on FreeCodeCamp
2019-11-10Explore Differences Between the var and let Keywords, Learn ES6, Intro to ES6, free Coding Tutorials
2019-11-10Introduction to the ES6 Challenges, freeCodeCamp Intro to ES6 Challenges on FreeCodeCamp
2019-08-28freeCodeCamp's Use tabindex to Specify the Order of Keyboard Focus for Several Elements
2019-08-24freeCodeCamp's Use tabindex to Add Keyboard Focus to an Element, Accessible Web Apps 2020
2019-08-14freeCodeCamp's Make Links Navigatable with HTML Access Keys, Learn Web Accessibility
2019-08-12freeCodeCamp, Give Links Meaning by Using Descriptive Link Text, Learn to Code 2020
2019-08-10freeCodeCamp, Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
2019-08-08freeCodeCamp's, Avoid Colorblindness Issues by Using Sufficient Contrast, Accessible Websites
2019-08-07freeCodeCamp, Improve Readability with High Contrast Text, Applied Accessibility Website
2019-08-05freeCodeCamp, Make Elements Only Visible to a Screen Reader by Using Custom CSS, Accessible Website
2019-08-04freeCodeCamp, Standardize Times with the HTML5 datetime Attribute, 2020 Web Development
2019-08-01freeCodeCamp's Add an Accessible Date Picker, Accessibility App 2020, We Will Code
2019-07-31freeCodeCamp, Wrap Radio Buttons in a fieldset Element for Better Accessibility, 2020 Web App Help
2019-07-30freeCodeCamp, Improve Form Field Accessibility with the label Element, 2020 Web Accessibility



Tags:
using tabindex
focus tabindex
define tabindex
html tabindex
what is tabindex
programming tutorial