1. FOCUS

Question 1

¿What is focus? (theoric explanation)

Answer 1

Focus refers to the control on the computer screen that receives input from the keyboard and from the clipboard when you paste.

Example: in order to type in a text field you first have to go over with your mouse and click on it. Well that act of clicking on the text field, that’s actually what focuses it. You may also know that if you then press the tab key it will then move focus to the next text field or available control.

Question 2

¿Why all the page functionality should be available using the keyboard?

Answer 2

Unless it’s something you couldn’t normally do with a keyboard like free hand drawing or something like that, all page functionality should be available using the keyboard because some users drive the computer entirely with the keyboard or some other type of discrete input device.

(For those users, focus is absolutely critical. It’s their primary means of reaching everything on the screen)

Question 3

¿What is focus? (Technical explanation)

Answer 3

Focus determines where keyboard events go in the page.

Question 4

¿How does focus is indicated?

Answer 4

The currently focused item is often indicated by a focus ring, where the actual styling of that ring depends on the browser and any additional styling that the page author may have applied.

Question 5

Working with native elements

Answer 5

Working with native elements is great for focus behavior, because they’re automatically inserted into the tab order based on their position in the DOM.

Question 6

Tip por TAB ORDER

Answer 6

To tab through my page every so often just to make sure I haven’t accidentally messed up the tab order.

Question 7

¿Where can tabindex be used?

Answer 7

Tabindex attribute can be used when there are instances and you want to modify their tab order.

(Like if you’re building a component without a native analog (like a drop down), or if you need to have something off screen that should only be focusable when it appears, like perhaps a modal window)

Question 8

¿Where can tabindex be applied?

Answer 8

Tabindex can be applied to any HTML element, and it takes a range of numeric values.

Question 9

Tabindex of -1

Answer 9

A tabindex of -1 means that the element will not be in the tab order, but it can be programmatically focused via JavaScript, by calling the element’s focus method.

(This can be especially useful for off screen content which appears on screen in response to a user event.

When the new content is displayed, you may wish to call its focus method which will then direct future keyboard events to it.)

Question 10

Tabindex of 0

Answer 10

A tabindex of 0 will add the element to the natural tab order, plus, that element will also be focus full by calling its focus method.

(For example, here I’ve got a fancy button that I’ve created out of just a div. Now, without a tabindex attribute, if I press the Tab key, this element will not receive focus. By adding a tabindex of zero, now when I press the Tab key, this element gets focused, and future keyboard events get directed to it)

Question 11

A tabindex of greater than zero

Answer 11

A tabindex of greater than zero, for instance something like tab index of 5 will jump the element to the front of the tab order regardless of where it is in the DOM.

(If there are multiple elements with a tabindex greater than zero, the order will start from the lowest value that is greater than zero and then work its way up.

In general, using a tabindex greater than zero is discouraged and considered a bit of an anti-pattern)

Question 12

About tab order

Answer 12

If you need to put something earlier in the tab order, the best bet is to move it up in the DOM.

Question 13

¿What may I add focus behavior to?

Answer 13

Normally, you only want to add focus behavior to interactive controls like buttons, tabs, drop downs, or anything that the user might provide input to, not our site content.

So when you’re adding a tab index attribute, stop and ask yourself, is this something the user is going to interact with?

Question 14

¿Which Elements Should Have Focus?

Answer 14

The following elements should have focus.

1. Header links
2. Search fields
3. Form input fields
4. Submit button
5. Large Call to Action button,
6. Footer links.

Question 15

About tabindex and the Site Content

Answer 15

I mentioned previously that you shouldn’t add tab index to site content as a general rule.

But there is one exception to this and that’s when you’re manipulating the page, in response to a user action.

Question 16

¿Whats is managing focus?

Answer 16

Managing Focus, and it’s an extremely important technique that keeps the user’s interactive context in sync with the visual representation of the site. We change the focus as the page changes, with the tabindex.

Question 17

¿What is a hidden link?

Answer 17

Is a hidden link that allows keyboard and switch device users the ability to jump straight to our page content. These links are often referred to as skip links.

Question 18

Steps to creat a skip link

Answer 18

1. I’ll start by creating a named anchor.
2. The href of this anchor refers to the ID of another element that I’ll have on the page.
3. I’m also going to give this element a class of skip-link so I can refer to it in CSS later.
4. I want the skip link to appear early in the DOM, so I’m going to put it before my navigation.
5. To connect my skip-link to my main content, I’ll give my main element an ID of maincontent, which matches the href value up here. So these two are now connected.

Question 19

¿How does Roving Focus works?

Answer 19

1. Roving focus works by setting tab index to -1 for all of the children and then zero on the currently active item.
2. Our component then uses a keyboard event listener to determine which key the user has pressed. At which point we set tab index on the next item to zero,
3. We set to have a next of the previously focused item to negative one.
4. We call the focus method of this new soon to be focused item, this now moves our focus ring.
5. And lastly I’m going to just move this checked attribute down to this element using SET attribute In this case I’m using the CSS in my element based on that checked attribute just style the state of the radio button.
6. Now when I reach the bottom of this list and this last radio is focused and the user presses the down arrow, then we’re going to wrap back around.
7. So we’ll set tab index to zero on this top item.
8. We’ll move checked over there or call focus
9. we’ll set tab index to negative one on the previously focused item.

Question 20

What to do when focus disappear?

Answer 20

Go down in my console and type the command document.activeelement or to use the chrome accessibility Dev tools extension (specifically inspector).

Question 21

¿Whats a keyboard trap?

Answer 21

A “keyboard trap” occurs when a person who uses a keyboard cannot move focus away from an interactive element or control using the keyboard alone.