Web Content Accessibility - Name

2
votes

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?

3
htmlaccessibilitywcag2.0
As you quote a way to give a name (→ with a label), do you ask about cases where a label is not appropriate? What’s your case? – unor
Accessible Name Calculation is the document you are looking for: w3.org/TR/2011/WD-html-aapi-20110414 Support matrix: labs.ssbbartgroup.com/index.php/Accessible_Name_Link_Test – aardrian
@unor I guess the reason why I asked this question is because I'm confused as to what this name is. While reading the document I thought it was referring to the name attribute of an input but it turns out I understood the document incorrectly. I was just wondering what this name is so that I would know how to build my pages. An answer below says that labels, text inside buttons, and alt attributes are the names. Is this correct? – Patrick Gregorio

3 Answers

3
votes

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" />
1
votes

See my answer on If an HTML element has role="button" should it also have the attribute "name". Another person was asking about the "name" of an object and I clarified that the name of an object is not the name= property (that property is used for javascript) but rather is the label of the object that assistive technology will surface to the user. More details in my post.

0
votes

The "name" attribute you mean is an attribute of the tag you are using in the web page. Example: Tag Button you can specify the name of the tag to facilitate user. Note 2 is telling you that HTML tag is unrelated to this attribute.