What is Focus? -- A11ycasts #03
Focus is one of the main pillars of accessibility, but it's also an area that many developers are a little fuzzy on.
Here's a good quote from Web AIM to help explain it: ""When an item has keyboard 'focus', it can be activated or manipulated with the keyboard."" In other words, if an element is currently focused, and you press a key on your keyboard, that keyboard event will be directed at that element. http://webaim.org/techniques/keyboard/#intro
Users can change the currently focused element by pressing either the Tab or Shift-Tab keys. The order that elements receive focus is known as the ""Tab Order"". Making sure you have a consistent, logical tab order is extremely important, especially for users who rely on the keyboard as their primary means of navigating a page.
In this episode we'll show off what it means for elements to be implicitly focusable, and correct some common mistakes relating to mixed up tab orders.
Watch all A11ycasts episodes: https://goo.gl/06qEUW
Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
Видео What is Focus? -- A11ycasts #03 канала Google Chrome Developers
Here's a good quote from Web AIM to help explain it: ""When an item has keyboard 'focus', it can be activated or manipulated with the keyboard."" In other words, if an element is currently focused, and you press a key on your keyboard, that keyboard event will be directed at that element. http://webaim.org/techniques/keyboard/#intro
Users can change the currently focused element by pressing either the Tab or Shift-Tab keys. The order that elements receive focus is known as the ""Tab Order"". Making sure you have a consistent, logical tab order is extremely important, especially for users who rely on the keyboard as their primary means of navigating a page.
In this episode we'll show off what it means for elements to be implicitly focusable, and correct some common mistakes relating to mixed up tab orders.
Watch all A11ycasts episodes: https://goo.gl/06qEUW
Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: http://goo.gl/LLLNvf
Видео What is Focus? -- A11ycasts #03 канала Google Chrome Developers
Показать
Комментарии отсутствуют
Информация о видео
19 августа 2016 г. 22:21:32
00:07:58
Другие видео канала
![Building an accessible dialog using React Aria](https://i.ytimg.com/vi/osmCsB9DCNI/default.jpg)
![Is reduce() bad? - HTTP 203](https://i.ytimg.com/vi/qaGjS7-qWzg/default.jpg)
![Controlling focus with tabindex -- A11ycasts #04](https://i.ytimg.com/vi/Pe0Ce1WtnUM/default.jpg)
![Inert Polyfill -- A11ycasts #02](https://i.ytimg.com/vi/fGLp_gfMMGU/default.jpg)
![Learn JavaScript Event Listeners In 18 Minutes](https://i.ytimg.com/vi/XF1_MlZ5l6M/default.jpg)
![Accessibility Fundamentals with Rob Dodson](https://i.ytimg.com/vi/z8xUCzToff8/default.jpg)
![How to Get Your Brain to Focus | Chris Bailey | TEDxManchester](https://i.ytimg.com/vi/Hu4Yvq-g7_Y/default.jpg)
![You are doing :focus wrong (and I was too)](https://i.ytimg.com/vi/Mvu5OMGcdVA/default.jpg)
![IT career paths - the best for beginners](https://i.ytimg.com/vi/uibHDPDaUjo/default.jpg)
![CSS Outline vs Border - differences, advantages, and disadvantages](https://i.ytimg.com/vi/xx_pJ2ouGnc/default.jpg)
![Accessible Modal Dialogs -- A11ycasts #19](https://i.ytimg.com/vi/JS68faEUduk/default.jpg)
![Alerts! -- A11ycasts #10](https://i.ytimg.com/vi/5lzAj1ahRSI/default.jpg)
![](https://i.ytimg.com/vi/-C3ejWuH0_s/default.jpg)
![Just use button -- A11ycasts #05](https://i.ytimg.com/vi/CZGqnp06DnI/default.jpg)
![What is DOM](https://i.ytimg.com/vi/GkXAGe7SLm0/default.jpg)
![Accessibility Testing - Totally Tooling Tips](https://i.ytimg.com/vi/56zCnwj58e4/default.jpg)
![The art of focus – a crucial ability | Christina Bengtsson | TEDxGöteborg](https://i.ytimg.com/vi/xF80HzqvAoA/default.jpg)
![Block, Inline, and Inline-Block explained | CSS Tutorial](https://i.ytimg.com/vi/x_i2gga-sYg/default.jpg)
![Focus Ring! -- A11ycasts #16](https://i.ytimg.com/vi/ilj2P5-5CjI/default.jpg)
![Deno - HTTP 203](https://i.ytimg.com/vi/SYkzk_j3yb0/default.jpg)