zoukankan      html  css  js  c++  java
  • [ARIA] What is Accessible Name Calculation?

    What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links. You'll learn how to debug accessible names and descriptions using the Chrome Accessibility Developer Tools (previously a Canary experiment, now in Chrome), using multiple labeling techniques. We'll also listen to the effects of proper accessible names and descriptions in Voiceover and Safari.

    For more information and the nitty-gritty browser implementation algorithm, refer to WAI-ARIA 1.1:

    Search box:

        <form class="search">
            <input aria-labelledby="search-button" />
            <button id="search-button">
                <span aria-hidden="true" class="icon icon-search"></span>
                <span class="visuallyhidden">Search</span>
            </button>
        </form>

    Input field is labelled by the button, button is labelled by the text content.

    Read more link:

    <a href="#" aria-labelledby="readmore1 readMoreLabel1">
        <span id="readmore1">Read more</span>
        <span id="readMoreLabel1" class="visuallyhidden"> articles about cute animals</span>
    </a>

    aria-labelledby can accpet multi ids.

    DIalog:

    <dialog open role="dialog" aria-label="Newsletter sign up">
            <!-- For custom button, we can use aria-label & aria-describedby-->
            <custom-button role="button" tabindex="0" aria-label="Cancel" aria-describedby="cancelNote">
                X
            </custom-button>
            <fieldset>
                 <!-- it is good to use legend to tell users what this form is all about-->
                <legend>
                    <h2>Sign up your favorite friends for our newsletter!</h2>
                </legend>
                <div>
                    <!-- label for-->
                    <label for="dogs">Dog</label>
                    <input type="text" id="dogs" name="dogs" />
                </div>
    
                <div>
                     <!-- best: using both for & label wrapping-->
                    <label for="cats">
                        Cat
                        <input type="text" id="cats" name="cats" />
                    </label>
                </div>
    
                <div>
                    <!-- who else will be the label -->
                    <label>
                        Who else?
                        <input type="text" placeholder="e.g. Frank the Lizard" name="superfriends" />
                    </label>
                </div>
                <div>
                    <input type="submit" value="Submit" />
                </div>
            </fieldset>
            <p id="cancelNote">Closing this dialog will cancel your submission.</p>
        </dialog>
  • 相关阅读:
    python中关于操作时间的方法(一):使用time模块
    size_t类型
    批量下载网络图片并zip打包
    遇到的java面试题
    jsp中button与submit的用法
    springmvc json字符串转化成json对象
    Cas 介绍及使用
    java中post时中文乱码
    mybatis使用generator生成对应的model、mapping配置文件、dao
    移动端接口:java写get方式访问数据(springmvc+spring。。。)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11523236.html
Copyright © 2011-2022 走看看