zoukankan      html  css  js  c++  java
  • [HTML5] Focus management using CSS, HTML, and JavaScript

    Something important to consider when coding a web application is managing the user's focus. For keyboard and screen reader users, we must ensure their focus is not dropped as content is deleted or shown in new contexts. Skip links also provide a way for users to get past a lot of content. In this lesson, you'll learn HTML, CSS and JavaScript techniques for focus management that can be applied to many situations.

    For example, you have a list of items, when you want to delete an item, you and want auto foucs on next item's delete button.

    All what you need to do is 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 are out of foucs managmenet not to have the outline when you nav around the page.

    [tabindex="-1"] {
        outline: 0;
    }

    To build a skip links: It hidden by default, but when we use Tab keyboard, it will shows up.

      <ul class="skip-links">
        <li><a href="#main">Main content</a></li>
        <li><a href="#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;
        }
  • 相关阅读:
    自增主键强制修改
    网页速度优化
    JS 获取字符串长度, 区别中英文
    SQL时间相关 SQL日期,时间比较
    关于document.cookie的使用
    php文件头部空白影响CSS布局 2
    FlvPlayer 播放器代码
    JAVA——继承、多态、重载和重写转
    JS星级评分,带提示(转)
    web 启动 本地应用程序 Activity
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6435155.html
Copyright © 2011-2022 走看看