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>
  • 相关阅读:
    改不改,这是一个问题
    连载:面向对象的葵花宝典:思考、技巧与实践(39)
    Oracle压缩总结2— 估计表压缩效应
    CSDN markdown 编辑 第五章 UML
    Arcgis for Javascript之featureLayer图和属性互操作性
    bzoj 2437 [Noi2011]兔子和鸡蛋 [二分图匹配]
    “jquery于each方法和选择”学习笔记
    安卓模拟器错误: Could not open
    软路试--就像一棵树活着
    2014第21周二
  • 原文地址:https://www.cnblogs.com/Answer1215/p/11523236.html
Copyright © 2011-2022 走看看