Something important to consider when coding a Web application is managing the user ' s focus. For keyboard and Screens reader users, we must ensure their focus is not dropped as content are deleted or shown in New cont Exts. Skip links also provide a-on-the-users-get past a lot of content. In this lesson, you'll learn HTML, CSS and JavaScript techniques for focus management so can be applied to many Situatio Ns.
For example, you had a list of items, when you want to delete an item, and want auto Foucs on next item ' s Delete Butt On.
All the need to do are to find next item, and send focus onto it.
$ ('. Btn-delete'). On ('click', function () { $ ( This ). Parent (). remove (); Listitems.find ('. Btn-delete'). First (). focus (); });
Next thing if you want the items which is out of Foucs managmenet don't to has the outline when you nav around the page.
{ outline: 0;}
To build a skip links:it hidden by default and when we use Tab keyboard, It'll shows up.
<ulclass= "Skip-links"> <Li><ahref= "#main">Main Content</a></Li> <Li><ahref= "#footer">Global Footer</a></Li> </ul>
ul.skip-links { List-style : none ; position : absolute ;} ul.skip-links a { Background-color : #fff ; display : block ; left : -999999px ; padding : 1em ; position : absolute ; } Ul.skip-links a:focus { left : 0 ; }
[HTML5] Focus Management Using CSS, HTML, and JavaScript