[ARIA] What is Accessible Name Calculation?

发布时间：2020-12-15 07:45:22 所属栏目：Java 来源：网络整理

导读：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 Accessibili

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:

https://www.w3.org/TR/wai-aria-1.1/#namecalculation
https://www.w3.org/TR/accname-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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!