An issue with the use of WAI-ARIA in HTML documents is that they don’t validate. When you run a HTML document containing ARIA attributes through the W3C Validator it shows errors in the results for any ARIA attributes. More importantly it does not inform me of errors in the ARIA code, for example, if the role value used is incorrect in reference to the WAI ARIA specification.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
When a validator’s results contains errors related to the use ARIA attributes in a document with the DOCTYPE quoted above, it is quite correct. The HTML 4.01 specification and its DOCTYPE declarations (DTD) Strict, Transitional, Frameset, do not include any information about the WAI ARIA attributes and you cannot have a valid HTML 4.01 document which includes, elements, attributes, and attribute values, not detailed in its DTD’s.
This situation will not change unless the W3C decide to provide updated DTD’s which include ARIA attributes. My understanding is that this is unlikely, I don’t undesrtand the reasons so will leave it to others , more knowledgeable, to explain.
Why do I Want To Validate (X)HTML + ARIA?
I write HTML documents that include ARIA attributes, I want to know if the ARIA attributes and attribute values I have used are correct in reference to the ARIA specification, at the same time as checking the rest of my HTML code is correct. I don’t want to be told that the use of ARIA attributes are incorrect in HTML.
Example of result error from the W3C validitor which is of no use to me when testing a simple page with the HTML4 DOCTYPE that includes the ARIA role attribute:
Line 30, Column 22: there is no attribute “ROLE” .
<DIV id="banner" role="spanner">role="banner"</DIV>You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element.
The above result tells me that role is not a valid attribute, (I already know this), but does not tell me that “spanner” is not a valid ARIA role attribute value.
Example of a useful result error from the W3C validitor:
Line 25, Column 30: value of attribute “ROLE” cannot be “SPANNER”; must be one of “ALERT”, “ALERTDIALOG”, “APPLICATION”, “ARTICLE”, “BANNER”, “BUTTON”, “CHECKBOX”, “COLUMNHEADER”, “COMBOBOX”, “COMPLEMENTARY”, “CONTENTINFO”, “DEFINITION”, “DIALOG”, “DIRECTORY”, “DOCUMENT”, “GRID”, “GRIDCELL”, “GROUP”, “HEADING”, “IMG”, “LANDMARK”, “LINK”, “LIST”, “LISTBOX”, “LISTITEM”, “LOG”, “MAIN”, “MARQUEE”, “MATH”, “MENU”, “MENUBAR”, “MENUITEM”, “MENUITEMCHECKBOX”, “MENUITEMRADIO”, “NAVIGATION”, “NOTE”, “OPTION”, “PRESENTATION”, “PROGRESSBAR”, “RADIO”, “RADIOGROUP”, “REGION”, “ROW”, “ROWHEADER”, “SEARCH”, “SEPARATOR”, “SLIDER”, “SPINBUTTON”, “STATUS”, “TAB”, “TABLIST”, “TABPANEL”, “TEXTBOX”, “TIMER”, “TOOLBAR”, “TOOLTIP”, “TREE”, “TREEGRID”, “TREEITEM”.
<DIV id="banner" role="spanner">role="banner"</DIV>The value of the attribute is defined to be one of a list of possible values but in the document it contained something that is not allowed for that type of attribute.
The result above tells me that the role attribute value I have used is incorrect, I have used the value “spanner” instead of “banner”, and lists the possible correct ARIA role values.
What about the HTML5+ARIA conformance checker?
The W3C Validator now includes an expiremental HTML5 checker which also includes ARIA checking based on rules devised by Henri Sivonen, a problem with this is these rules do not allow ARIA landmark roles. So when testing a simple HTML5 test page with landmark roles it returns results like these:
- Line 30, Column 31: Bad value spanner for attribute role on element div. .
<div id="banner" role="spanner">role="banner"</div>- Line 31, Column 38: Bad value navigation for attribute role on element div.
<div id="navigation" role="navigation">role="navigation"</div>
Again, these results are not useful, because they tell me that certain roles are not allowed in HTML5 (as determined by Henri), but not whether I have any incorrect attributes and values in reference to WAI ARIA.
Checking not Choking: Using A Custom DTD
In order to get the W3C validator to check the role attribute, but not choke on it, I have used a custom DTD. The DTD I have used is the HTML 4.01 loose DTD with ARIA attributes added (HTML4-ARIA.DTD). I took the HTML 4.01 loose.dtd and added all the ARIA attributes and attribute values to the core attributes section. I have also added the tabindex attribute to the core attributes, removing it from individual elements, and provided it with a value property which allows negative values. I then uploaded the DTD file to the TPG web server. (Note: This is really a quick and dirty edit for the purposes of testing the concept only).
So when I use a custom DOCTYPE in a simple test page that references the HTML4-ARIA.DTD
and run it through the W3C HTML validator, the validator uses the DTD
to check my document. What I get as as a result is the ability to check
the correctness of my use of ARIA attributes and attribute values, also i
don’t get nagged about the use of tabindex="-1" or the tabindex on elements that traditionally do not support its use.
Problems
Let me state clearly at this stage. I am not advocating the publishing of documents using this or any other custom DTD. I am no expert, but do get the idea that this is bad news.
Currently the W3C validator does not like the custom DTD because it has too many additional attributes and attribute values. Thus before any error results in the actual code it returns this about 20 times:
Line xxx, Column 2: number of attribute names and name tokens (167) exceeds ATTCNT (60)
This does not appear to affect the correct reporting of results against the custom DTD, it’s is just really annoying. I have emailed the W3C validator team to see if they can suppress this error. (Note: this has since been fixed by the W3C validator team on the Development version of the validator, so I have modified the bookmarklets to point to the dve validator)
As I mentioned previously I am not advocating the use of a custom DTD in published documents, but would like to be able to check my ARIA code. A way I have developed to do this is by creating a bookmarklet that takes the innerHTML of a document (without the DOCTYPE) and adds the custom DOCTYPE to it and then sends it to the W3C validator:
- HTML4.01-loose+ARIA Checker (add as a favorite to try it out)
- HTML4.01-strict+ARIA Checker
Notes:
The (X)THML + ARIA validation is based on attributes and attribute values as defined in the WAI-ARIA (draft) specification 1.0. The DTD’s are not official versions and have not been endorsed by anyone.
Validation of HTML 4.01 documents using the experimental DTD’s, will detect errors in WAI-ARIA attribute names and values only. The DTD’s allow ARIA attributes to be placed on any element. It will not provide any indication of the correctness of the use of a WAI-ARIA attribute on any given element.
Next Steps
I have undertaken this exercise, because people have asked about ARIA validation and I myself wanted to be able to check documents containing ARIA. What I hope is that The W3C validator adds support for (X)HTML +ARIA documents so I when check a document and it contains no errors in the HTML (except for the use of ARIA) and ARIA code, I see a message like this:
HTML%20+%20ARIA_files/success.gif)
If this does not happen and there is sufficient interest, I will look at hosting a version of the W3C validator which provides HTML+ARIA checking without the reams of unhelpful error results.