The main navigation elements should also be in a list

[codepo8]

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]

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]

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]

@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]

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]

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]

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]

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]

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]

+1 Progressive enhancement!