CODEWITHSUNDEEP
htmlcssdomaccessibilitywcag
AbhishekJoshi
AbhishekJoshi

Reputation: 63

Simple DOM/CSS Clarification? [WCAG F17 1.3.1]

http://www.w3.org/TR/WCAG-TECHS/F17.html

I have some issues understanding the criteria of this and what makes a website fail BASED on the series of tests involved.

  1. Check for id and accesskey values which are not unique within the document.

  2. Check that attribute values that have an idref value have a corresponding id value.

  3. For tables that use the axis attribute, check that all values listed in the axis attribute have a corresponding id value in a table header cell in the same table.

  4. For client-side image maps, check that the value of the usemap attribute has a corresponding id value if the usemap attribute is not a URI.

If step #1, step #3 or step #4 is true or step #2 is false, then this failure condition applies and the content fails the success criterion.

Upvotes: 0

Views: 141

Answers (1)

Dan Prince
Dan Prince

Reputation: 30009

These are a series of requirements that make the HTML you have written valid.

1 is straightforward. There can't be more than one element on your page with the same ID. If you have multiple elements with the same ID on your page then when you call the Javascript function 

document.getElementById("idnamehere")

then you will have trouble selecting all of them. If you want multiple items to have the same style, then you should be using the class attribute rather than ID. The ID must be unique!

2 If you have given an element the idref attribute, then it must correspond to an existing element with the id you have specified in the idref attribute. For example, if you wanted to use the following idref:

<p idref="data"></p>

Then there must be an existing id somewhere in your document, that looks something like:

<span id="data"></span>

You can't reference an id that doesn't exist!

3 I have never used the axis attribute before, but what I understand from reading that document and a small amount of Googling; if you want use the axis attribute then every cell must have a corresponding axis attribute supplied in the table header of the column it is in. Someone else may be able to expand on this.

4 Again, I have never used an ImageMap, but the W3C document has categorized this set of rules under the general theme of non-unique identities and mismatched references, so I can only assume that it is similar to 2 whereby, the imagemap has a corresponding usemap, which is referenced by its ID (unless, it has been specified as a URI).

I think the gist of this document is to enforce the concept that there should always be a corresponding attribute for the elements that require them, and your element ID's should always be kept unique.

If you are trying to fix something on your website, then http://validator.w3.org/ can be a very handy resource for pinpointing errors on your page and describing them. Hope this helps!

Upvotes: 1

Related Questions