search

frend / frend.co

Frend — A collection of accessible, modern front-end components.
http://frend.co
MIT License
633 stars 25 forks source link

Tabs - Change ul to nav element #57

Closed NigelOToole closed 8 years ago

NigelOToole commented 8 years ago

I think this is a great set of plugins, thanks. Looking at the tabs I thought changing the ul used for the tablist to a nav element would make sense. Navigation elements which dont have a hierarchy dont really require the structure a ul gives. Replacing it would simplify the markup, styling and javascript. From my research it would have no impact on accessibility either, let me know what you think.

Example markup below.

Before:

<ul role="tablist" class="fr-tabs__tablist js-fr-tabs__tablist">
    <li role="presentation" class="fr-tabs__tablist-item">
        <a aria-selected="true" tabindex="0" aria-controls="tab1" role="tab" class="fr-tabs__tab" href="#tab1">Tab 1</a>
    </li>
    <li role="presentation" class="fr-tabs__tablist-item">
        <a tabindex="-1" aria-controls="tab2" role="tab" class="fr-tabs__tab" href="#tab2">Tab 2</a>
    </li>
    <li role="presentation" class="fr-tabs__tablist-item">
        <a tabindex="-1" aria-controls="tab3" role="tab" class="fr-tabs__tab" href="#tab3">Tab 3</a>
    </li>
</ul>

After:

<nav role="tablist" class="fr-tabs__tablist js-fr-tabs__tablist">
    <a aria-selected="true" tabindex="0" aria-controls="tab1" role="tab" class="fr-tabs__tab" href="#tab1">Tab 1</a>

    <a tabindex="-1" aria-controls="tab2" role="tab" class="fr-tabs__tab" href="#tab2">Tab 2</a>

    <a tabindex="-1" aria-controls="tab3" role="tab" class="fr-tabs__tab" href="#tab3">Tab 3</a>
</nav>
adamduncan commented 8 years ago

Thanks very much for the feedback @NigelOToole! Good point you've raised.

As the links serve as a basic list of anchors to <section>s before the component is enhanced with JavaScript, I wonder whether it makes sense to retain the list semantics? It could be worth wrapping the list in a <nav> element. Will have a little hunt around and get back to you.

NigelOToole commented 8 years ago

Thanks, CSS Tricks published an article about this https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/ which I think makes valid points. When I looked up possible accessibility problems I couldn't find a reason why a <ul> should be used even though all the examples seemed to use it. Let me know how you get on.

Heydon commented 8 years ago

Hi! Good to see a good shot at an accessible tab interface design. Very close.

There is a problem: You are using a role of "tablist" on a <nav> element. The explicit role of "tablist" will override the implicit role offered by the <nav> element. In other words, there's no point converting to <nav> because you are effectively converting back to tablist again using the role. The <nav> semantics will therefore no longer be available.

If the result was a <nav> I would highly recommend using a list. The CSS Tricks article cites just one screen reader user with an unusual opinion. Most who I've met benefit from the structural information a list provides.

The main reason a list is used for a tab interface is progressive enhancement ie. it degrades to a semantic list. I would leave it in, placing the ARIA semantics onto the elements with javascript.

Hope that helps!

adamduncan commented 8 years ago

That helps to clarify things, thanks @Heydon.

It does seem sensible to retain the list semantics for the anchors. They also help to annonce how many tabs are in the list as you enter ("tablist with 3 items, tab 1 of 3"), instead of only when navigating through each tab individually ("tab 1 of 3"). https://jsbin.com/biwubipopu/edit?html,output

Would love more feedback on matters like this, so open to feedback on this or any of the other components! Cheers