Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The main navigation elements should also be in a list #16

Open
codepo8 opened this issue Oct 30, 2015 · 9 comments
Open

The main navigation elements should also be in a list #16

codepo8 opened this issue Oct 30, 2015 · 9 comments

Comments

@codepo8
Copy link

codepo8 commented Oct 30, 2015

This helps with accessibility and also when CSS is not available for some reason. If the main CSS gets a special class on the UL of the extra items and it becomes a nested list inside a main one of the .paradeiser one this should be easy to do.

@lucidlemon
Copy link
Owner

In theory it would be easy, but nesting the <a> tags inside the <li> and making them 100% of the size for better usability is quite a pain for css. I generally don't like this that much to be honest.
Sadly we can't link <li> elements (or any other than the inline <a> in general) without using JavaScript,.

Currently we have it like this:

<nav class="paradeiser">
    <a href="#">
        <img src="http://danielwinter.at/apple-touch-icon_76x76.png" alt="Logo of Daniel Winter" class="logo">
    </a>
    <a href="#">
        <icon class="paradeiser_icon_canvas">
            <img src="img/menu_home.svg" alt="Navigate to Home" class="icon">
        </icon>
        <span>Home</span>
    </a>
</nav>

with a <ul> it would look like this:

<nav class="paradeiser">
    <ul>
        <li>
            <a href="#">
                <img src="http://danielwinter.at/apple-touch-icon_76x76.png" alt="Logo of Daniel Winter" class="logo">
            </a>
        </li>
        <li>
            <a href="#">
                <icon class="paradeiser_icon_canvas">
                    <img src="img/menu_home.svg" alt="Navigate to Home" class="icon">
                </icon>
                <span>Home</span>
            </a>
        </li>
    </ul>
</nav>

Which is a whole lot of additional code for the rare case of a missloading css.
I wouldn't drop the <nav> tag as it would make a significant decrease of accesibility. I know that these tools use <ul> a lot, but in terms of semantics the <nav> beats the <ul> by far.

So I'm not quite sure if someone would benefit from that change

@codepo8
Copy link
Author

codepo8 commented Nov 2, 2015

When accessibility is your concern: nav is hardly supported in assistive technology, a list very much is. A screen reader for example will tell you "list of 6 items - first item - link foo, second item, link bar…" and so on. That's why it is good to have lists. You also have two elements to style for each entry, that's a lot of good hooks for styling you don't need to use :before or :after for.

@Heydon
Copy link

Heydon commented Nov 2, 2015

@codepo8 @lucidlemon

Yes, the list semantics are really important. The <nav> is also important for landmark navigation, and should have role="navigation" applied for better compatibility in assistive technologies.

Stripping out important semantics to reduce verbosity is like removing wheels from a car to reduce weight.

@lucidlemon
Copy link
Owner

So basically both of you would like to have a nav > ul > li > a structure instead of nav > a?
This would mean 3 flexbox layouts nested into each other which will be quite stressful for older machines. mhm.

@LJWatson
Copy link

LJWatson commented Nov 2, 2015

To add to the points made by @codepo8 and @Heydon...

the <nav> and <ul> elements fulfill two distinct semantic purposes:

The <nav> indicates that the region of the page is for the purposes of navigation. This fact will be evident visually, but it's the <nav> that provides the equivalent information to screen reader users.

A <nav> element may contain different forms of navigation, so the <ul> and <li> elements indicate what form the navigation takes. It will be evident visually that the <nav> contains n links, but without the <ul> and <li> elements, this information is not conveyed to screen reader users.

@Heydon
Copy link

Heydon commented Nov 2, 2015

So basically both of you would like to have a nav > ul > li > a structure instead of nav > a?
This would mean 3 flexbox layouts nested into each other which will be quite stressful for older machines. mhm.

Stressful for older machines? You mean there would be a performance issue? If there is it will be barely measurable. Getting the markup right is paramount; CSS rendering performance perfection not so much.

@lucidlemon
Copy link
Owner

Well CSS Performance on Flexbox is still a bit critical, but I'm not saying that I won't implement this. Instead this idea might work out well with another idea I had yesterday. I'm gonna look into that whole topic.

@codepo8
Copy link
Author

codepo8 commented Nov 2, 2015

Thanks for that. The point about performance on older machines is important but you can also pretty much assume that very old and slow machines also have the newest browsers or be able to even run the last evergreen one. Therefore flexbox will just be skipped in the CSS. Which is another reason to use a list - at least this one will be displayed as a sensible structure instead of links smushed together.

@Heydon
Copy link

Heydon commented Nov 2, 2015

+1 Progressive enhancement!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants