[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:

• 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>