Invalid role attribute value for section element?

Asked 29/4, 2013 at 15:32 Answered 7/12, 2013 at 22:17

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 :)

Sewole answered 29/4, 2013 at 15:32 Comment(5)

It might be something to do with the new <main> element, but as far as I can see the specs still allow role="main" on <section>. Might just be a validator bug. – Trigonometry 29/4, 2013 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. – Sewole 29/4, 2013 at 17:40

The only way forward is to ask the people who supply the validator. – Trigonometry 29/4, 2013 at 17:42

role="main" is still valid, just as there are other aria attributes that map to html5 elements. – Dorr 30/4, 2013 at 21:39

Yeah, I guess this is a mistake in the validator. I'll wait to see if it gets fixed. – Sewole 1/5, 2013 at 15:18

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

Dorr answered 29/4, 2013 at 23:56 Comment(8)

Note: The main element is not a sectioning element, so you may still need the section element. – Conrado 30/4, 2013 at 18:4

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. – Sewole 1/5, 2013 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? – Dorr 1/5, 2013 at 18:38

If you use it correctly it does validate. See html5.validator.nu/… – Dorr 1/5, 2013 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. – Sewole 2/5, 2013 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. – Dorr 2/5, 2013 at 19:2

There are certain roles that are recommended for use per element. I’ll edit my answer accordingly. – Dorr 2/5, 2013 at 21:2

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 <ul> element with role="menubar", and the <li> 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... – Sewole 6/5, 2013 at 14: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.

Octavalent answered 7/12, 2013 at 22:17 Comment(0)

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.

Goggle answered 29/4, 2013 at 20:35 Comment(0)

Recommended topics

Hot tags