[ARIA] What is Accessible Name Calculation?

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>

[ARIA] What is Accessible Name Calculation?

标签：hidden   round   mat   Once   tom   scribe   ons   int   scree