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"
"https://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 TPGi 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:
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.
Comments
Nice! I was thinking about doing something similar myself but from the command line. The extended DTD and example URL https://www.tpgi.com/tag/aria/ does not seem to work (404)?
Oh, and another idea could be to extend the HTML Validator extension with a setting that does the same thing. With that, you could have a local installation for testing when you are offline (and it checks the page all the time).
Hi Peter, fixed the links, thanks for the heads up. Hans Hillen (TPG) and Sand Foltz Uni of illinois are working on a tool(s) that integrate with firebug one of the features is to provide on the fly checking of ARIA syntax. I still think that some form of online service would be useful as well.
The HTML validator extension extension is also a good idea, I have also been looking at the MAC installable version of the W3C validator to see if DTD’s can be added to it.
Thanks, Steve! I was under the impression that the W3C HTML Validator would not except non-W3C DTD URIs. I guess you just proved that wrong (except for the error). This DTD is helpful!
For the Mac standalone W3C validator (Validator-SAC), You should be able to replace the original DTD with your modified version. For example, the HTML 4.01 loose DTD is found at:
Validator-SAC.app/Contents/Resources/validator/htdocs/sgml-lib/REC-html401-19991224/loose.dtdOnce you’ve modified the app, you might want to rename it (e.g. Validator-SAC-ARIA.app) to avoid confusion. Let me know if you have any problems.
Hi Becky, note that the DTD I developed is rather crude, it’s only meant for demonstration purposes. For example it allows ARIA attributes on any elements, which does not make a lot of sense.
Thanks Chuck, I had a quick look through the SAC files last night, but couldn’t find where the DTD’s were. I am not a MAC person although I do have a MAC, but messing with the innards of applications on a MAC is new territory for me. Will try it out, thanks again!
FWIW, my current timetable is to add the ARIA stuff to HTML5 in April, assuming the ARIA group has finished defining how it all works by then.
Thanks for this, I was wondering the other day on this issue. Just assumed it was classic case of miscommunication at best, and moved on ignoring various W3C validation aspects in favour of ARIA implementation.
HTML4plus by Toby Inkster last summer (2008) has a DTD that incorporates ARIA support, amongst other things.
Hi Steve,
first of, nice writup!
I ran into a similar problem trying to validate TAL pages and ended up with the same solution, using a custom DTD.
I was looking at your HTML4-ARIA.dtd and I was wondering if it wouldn’t be easier to import the HTML DTD as an entity
> %HTML;
and then just add the lines needed for ARIA?
Another thing that might work nicely as well, beside the brilliant solution of a favlet, would be to expand the auto-complete functionality of your favorite editor/IDE with a (sub?)set of rules for ARIA.
I’m curious what your thoughts are on this?
p.
No preview… lemme try that again…
> %HTML;
WAI-ARIA now contains a DTD for HTML 4.01:
https://www.w3.org/TR/wai-aria/complete#html_dtd
To paraphrase yourself, “ARIA attributes are incorrect in HTML”
hi Joseph,
Not “incorrect” just not valid according to the HTML 4.01 DTD. They are valid in HTML5. The ARIA specification has been specifically designed by the W3C to provide additional semantics for all flavours of XHTML and HTML. The process of updating the DTD’s to accomodate ARIA is taking some time.