Should a <ul> allow a role="navigation"

[stevefaulkner]

Craig Francis 2015-09-14 10:53:32 UTC

This may have already been discussed (cannot find), but after trying a markup solution by Mike West:

https://mikewest.org/2010/02/an-accessible-pagination-pattern

I received an error that said the

was invalid:

validator/validator#157

Considering that several websites have also used <ul>'s just for navigation, should we support this role on the <ul>?

That said, I realise the <li> inherits a default role of "listitem", and that cannot really be a child of "navigation"... where menubar / menuitem might be more appropriate?

Or adding a wrapping <nav> (which inherits the role="navigation") might be a better solution, as it would allow other lists to be added, and the UA to continue to provide separate landmark and list navigation.

As an aside, I'm going on holiday tomorrow, so might not be able to reply for a couple of weeks.

[tag] [reply] [−] Comment 1 steve faulkner 2015-09-14 11:26:00 UTC

(In reply to Craig Francis from comment #0)

This may have already been discussed (cannot find), but after trying a
markup solution by Mike West:

https://mikewest.org/2010/02/an-accessible-pagination-pattern

I received an error that said the <ul role="navigation"> was invalid:

validator/validator#157

Considering that several websites have also used <ul>'s just for navigation,
should we support this role on the <ul>?

That said, I realise the <li> inherits a default role of "listitem", and
that cannot really be a child of "navigation"... where menubar / menuitem
might be more appropriate?

Or adding a wrapping <nav> (which inherits the role="navigation") might be a
better solution, as it would allow other lists to be added, and the UA to
continue to provide separate landmark and list navigation.

As an aside, I'm going on holiday tomorrow, so might not be able to reply
for a couple of weeks.

Hi Craig,

role=navigation is not allowed (and has never been allowed) on a UL as navigation cannot have listitems as direct children and listitems must have a list or group parent. ARIA roles override the native role semantics. The advice is to wrap a list in <nav> if it is a list of navigation items. It does not work correctly across browsers or AT. In order for this to work interoperably it would require changes to the definitions and implementation requirements of role=navigation and the HTML <nav> element.

[stevefaulkner]

Closing as per explanation above

[jrchamp]

@stevefaulkner Thank you for documenting this, but the formatting is really making this difficult to read. Can it be fixed? Thank you again!

[stevefaulkner]

@jrchamp can you tell me what issues you are having with the format? and how it could be improved?

[jrchamp]

I'm viewing this on GitHub and the <li> and <ul> are being displayed as actual tags and not as text.

[jrchamp]

As far as how to improve it, one option is to enclose the tags with backticks: `

This will cause it to display as <li>