[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">Searchspan>
        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 morespan>
    <span id="readMoreLabel1" class="visuallyhidden"> articles about cute animalsspan>
a>

aria-labelledby can accpet multi ids.

 

DIalog:

<dialog open role="dialog" aria-label="Newsletter sign up">
        
        <custom-button role="button" tabindex="0" aria-label="Cancel" aria-describedby="cancelNote">
            X
        custom-button>
        <fieldset>
             
            <legend>
                <h2>Sign up your favorite friends for our newsletter!h2>
            legend>
            <div>
                
                <label for="dogs">Doglabel>
                <input type="text" id="dogs" name="dogs" />
            div>

            <div>
                 
                <label for="cats">
                    Cat
                    <input type="text" id="cats" name="cats" />
                label>
            div>

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