Patrick Gregorio Patrick Gregorio - 1 month ago 7
HTML Question

Web Content Accessibility - Name

I'm just starting to learn about Web Content Accessibility and I was reading this document regarding non-text contents.

According to it:


For non-text content that is a control or accepts user input, such as
images used as submit buttons, image maps or complex animations, a
name is provided to describe the purpose of the non-text content so
that the person at least knows what the non-text content is and why it
is there.


So I double checked if what was meant here as
name
is the same as the HTML name attribute and found out that it isn't.

Near the bottom of the document here's what the definition of
name
is:

name




text by which software can identify a component within Web content to
the user

Note 1: The name may be hidden and only exposed by assistive
technology, whereas a label is presented to all users. In many (but
not all) cases, the label and the name are the same.

Note 2: This is unrelated to the name attribute in HTML.


So my question is how do I incorporate this
name
in my website if it's not the HTML attribute?

Answer

It depends on the control you are using. Some examples:

  • Input controls, textarea:

    Use the label element with the for attribute, matching the id attribute of the element.

    <label for="input1">My label</label><input type="text" id="input1" />
    
  • Buttons

    If you use the button element include the description inside the content

    <button>My label</button>
    

    For input[type=submit], you can use the value attribute:

    <input type="submit" value="My label" />
    
  • If you want to describe an image, use the alt attribute

    Ex:

    <img src="..." alt="My label" />
    
Comments