🔖 Names or Labels 📰

👈 return to the index page

aria-label:

Button

          <button
            aria-label="Click to be even happier"
            onclick="alert('🤗 You are the happiest person 😎')">
            😍
          </button>
        
          <ul aria-label="Category menu">
            <li>
              <a href="http://w3.org" aria-label="The World Wide Web Consortium">W3C</a>
            </li>
            <li>
              <a href="http://w3.org" aria-label="The World Wide Web">WWW</a>
            </li>
          </ul>
        

Form elements

          <form>
            <input type="search" placeholder="Type any" aria-label="Site Search" name="search" />
            <button type="submit">Search 🔎"</button>
          </form>
        

aria-labelledby

Multiple labels

          <div id="billing" class="sr-only">Billing:</div>
          <div id="name">Name</div>
          <input type="text" aria-labelledby="billing name" />
          <div id="address">Address</div>
          <input type="text" aria-labelledby="billing address" />
        
Billing
Name
Address

Definition lists 📝

          <dl>
            <dt id="anathema">anathema</dt>
            <dd aria-labelledby="anathema">
              a ban or curse solemnly pronounced by ecclesiastical authority and
              accompanied by excommunication
            </dd>
            <dd aria-labelledby="anathema">a vigorous denunciation : cursor</dd>
  
            <dt id="homily">homily</dt>
            <dd aria-labelledby="homily">a usually short sermon</dd>
            <dd aria-labelledby="homily">
              a lecture or discourse on or of a moral theme
            </dd>
          </dl>
        
anathema
a ban or curse solemnly pronounced by ecclesiastical authority and accompanied by excommunication
a vigorous denunciation : cursor
homily
a usually short sermon
a lecture or discourse on or of a moral theme

ASCII art

          <figure role="img" aria-labelledby="fish-caption">
            <pre>FIGURE</pre>
            <figcaption id="fish-caption">
            Joan G. Stark, "<cite>fish</cite>".
            October 1997. ASCII on electrons. 28×8.
            </figcaption>
          </figure>
        
          o           .'`/
            '      /  (
          O    .-'` ` `'-._      .')
            _/ (o)        '.  .' /
            )       )))     ><  <
            `\  |_\      _.'  '. \
              '-._  _ .-'       '.)
          jgs     `\__\
          
Joan G. Stark, "fish". October 1997. ASCII on electrons. 28×8.

aria-describedby

A close button ❌

          <button
            aria-label="Close"
            aria-describedby="descriptionClose"
            onclick="close()"
          >
          ❌
          </button>

          <p id="descriptionClose">
            Closing this window will discard any information entered and return
            you back to the main page
          </p>
        

Closing this window will discard any information entered and return you back to the main page

aria-placeholder

Birthday date 🎂

          <label for="bday1">Birth Date</label>
          <input id="bday1" type="text" aria-placeholder="mm/dd/yyyy format">