search

tachyons-css / tachyons

Functional css for humans
https://tachyons.io
MIT License
11.63k stars 677 forks source link

'Title link list' markup semantics #414

Open JulianNorton opened 7 years ago

JulianNorton commented 7 years ago

Current

http://tachyons.io/components/nav/title-link-list/index.html It has a list of navigation links inside a <nav>, without being a list.

<nav>
    <a></a>
    …
</nav>

Purposed

W3C recommends a list of links be inside an <ul>.

Follow w3c convention:

<nav>
  <ul>
    <li><a></a></li>
    …
  </ul>
</nav>

Although it adds more markup, it would be more accessible.

The list of links provides additional semantics and accessibility (eg. screen readers will announce 'List of three items' when you enter the navigation) – robertc

mrmrs commented 7 years ago

I did used to wrap all my link lists in ul elements. After watching this talk and doing some testing with screen readers myself I don't find them to be as optimal as just using anchors inside a nav element. I believe there are pros and cons both ways but you might find the talk interesting:

http://jimdoran.art/webdesign/refresh-web-accessibility

JulianNorton commented 7 years ago

@mrmrs That's an interesting article, user testing trumps all. The <nav> element was released in html5, 2014. 3 years after this article was written. I'm curious if this is still true.