11

In a website I'm working on right now, I have a section element which type is set to "main". According to WAI-ARIA, the section element can use main as role attribute (role="main").

However, when I run my site through the W3C validator, I get a "Bad value main for attribute role on element section." error. I used the main value in another website previously, and it did pass the validation, but now it's no longer valid, reporting the same error.

Has the HTML5 specification changed recently and took out the main value? Should I believe the WAI-ARIA or the W3C validator? Is the WAI-ARIA page out of date? Should I just keep the section element without any role attribute (which will revert to the "region" default value)?

Any thoughts and tips on this would be appreciated :)

Volker E.
  • 5,911
  • 11
  • 47
  • 64
HCkev
  • 123
  • 1
  • 1
  • 7
  • It might be something to do with the new `
    ` element, but as far as I can see the specs still allow `role="main"` on `
    `. Might just be a validator bug.
     – robertc Apr 29 '13 at 16:32
  • Yes, that's what I'm wondering, if it's a mistake from the validator or if I should stop using role="main". I couldn't find anything about this on the web. – HCkev Apr 29 '13 at 17:40
  • The only way forward is to ask the people who supply the validator. – robertc Apr 29 '13 at 17:42
  • 1
    role="main" is still valid, just as there are other aria attributes that map to html5 elements. – David Storey Apr 30 '13 at 21:39
  • Yeah, I guess this is a mistake in the validator. I'll wait to see if it gets fixed. – HCkev May 01 '13 at 15:18

3 Answers3

4

The main role is valid or not depending on the doctype you are using. If you’re using the HTML5 doctype: <!DOCTYPE html> it should validate. If you are using an earlier doctype like XHMTL or html4 it will not. See https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ#What_about_validation.3F for details.

If you need to use a doctype where it is not valid and you must validate, you could add them via JavaScript. This will avoid the validation issues.

However, the main role will only validate if used on certain elements. For the section element the valid roles are alert, alertdialog, application, contentinfo, dialog, document, log, marquee, search, and status.

The latest version of HTML; HTML5.1 includes native support for main via the main element. You could use this element instead of <section role="main">. See http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

The other elements that could be used with role="main" include article, div, figure, canvas, p, pre, blockquote, output, span, table, td, tr, em, strong , small, s, cite, q , dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, br, and wbr, and perhaps some others. Obviously, many of these are specialist elements with implied semantics and can only be used in certain context to be valid themselves. Most likely, either main, div, or article will be the most suitable element to use. For more information see https://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html#recommendations-table

David Storey
  • 29,166
  • 6
  • 50
  • 60
  • 1
    Note: The `main` element is not a sectioning element, so you may still need the `section` element. – unor Apr 30 '13 at 18:04
  • I am actually using the HTML 5 doctype, but it no longer validate. I guess this is a mistake of the validator, maybe I'll wait a little and see what happens. I don't think the `main` element will work in my case. On the homepage, I have a `section` element with `role="marquee"` (a jQuery slide) followed by a `section` that displays a list of services, then finally the `section` element with `role="main"` that doesn't validate. – HCkev May 01 '13 at 15:16
  • role main is designed to only be included once in the document, and to wrap all of the main content (not the header, navigation etc.) Are you using it like this? – David Storey May 01 '13 at 18:38
  • If you use it correctly it does validate. See http://html5.validator.nu/?doc=http%3A%2F%2Fjsfiddle.net%2FVE4QP%2Fshow%2F – David Storey May 01 '13 at 18:42
  • Except the `role` attribute has been used on a `div`, not a `section`. If you change the `div` for a `section`, it gives the same validation error. – HCkev May 02 '13 at 18:29
  • So it seems main is not valid on section any longer. It makes sense as there should only be one main, and a section is usually one of many in a document, otherwise it isn't really a section. – David Storey May 02 '13 at 19:02
  • There are certain roles that are recommended for use per element. I’ll edit my answer accordingly. – David Storey May 02 '13 at 21:02
  • Thanks a lot. There were definitely changes that has been made. I'm facing a weird validator error too. For a menu, I have a `
      ` element with `role="menubar"`, and the `
    • ` has the `role="menuitem"`. This passed the validation last week, but now I get a **"Bad value menuitem for attribute role on element li"** error; If I remove the `role="menuitem"`, it shows another error, **"Only elements with role=menuitem or role=menuitemradio or role=menuitemcheckbox or role=presentation are allowed as children of an element with role=menubar"**. Quite inconsistent...
     – HCkev May 06 '13 at 14:02
2

Now that the dust has settled it is pretty obvious that the code <section role="main"></section> is fine and passes in the validator.

It does state right here in this table that the main role is a valid one for the section element and so it should.

If you think about it, it would be ridiculous to make this syntax invalid, people who want to create their document outline a specific way should be able to do so without being forced to do something like <main role="main"><section></section></main> to get around the problem, that would just be absurd.

Matt Kieran
  • 4,174
  • 1
  • 17
  • 17
1

Switch the Validator's HTML Doctype option to HTML5 and it should work, at least with a <div>. I just ran the validator against the markup below and it validated:

<!DOCTYPE html>
<head><title>Foo</title></head>
<body>
<div role='main'>
<p>foo</p>
</div>
</body>

HTML5 validation is marked as experimental, which may explain why it has unexpected behavior with <section>.

Note also that validation is not a prerequisite to accessibility. Better to include the role attribute and fail validation that withhold that feature from screen reader users.

ckundo
  • 1,551
  • 10
  • 12