Hacker News new | ask | show | jobs
by hpaavola 4667 days ago
I think that CSS is the biggest failure here. Let's say I have a blog, so for article page markup should be something like this:

    <html><head></head><body>
        <article>lorem ipsum</article>
        <nav></nav>
        <form>search</form>
        <footer></footer>
    </body></html>
That way screen readers, search engines, etc will get the important stuff first and less important stuff afterwards.

But since the common way of presenting blog is more like this:

    <nav></nav>        <form>search</form>
    <article></article>
    <footer></footer>
I either have to do some hacky position:absolute things, crazy floats with negative everything, or just reorder the markup. Crazy and hacky is not fun to maintain, so I have to reorder the markup. That's because CSS is made for changing fonts and colors, and not for layouts.
6 comments
jbri 4667 days ago
Flexbox[1] addresses the issue you're talking about - of course, browser support is still a little lacking (No support for IE9 or below, and IE10 doesn't conform to the current spec).

[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...

link
nyrina 4667 days ago
In other words, it's useless for now, and for a few more years.

God, I wish IE 8 wasn't the latest thing on XP (Still a lot of users on windows XP) and that new features weren't added only in major releases that happens rarely for Microsoft.

Rarely, that is, compared to other vendors on the market.

link
eli 4666 days ago
I give Google a lot of credit with how they set up Chrome. The first thing they built out was a really nice auto-update function.
link
terabytest 4667 days ago
I think you should try using WAI-ARIA standards[0] instead. That way you can keep your structure the same and give screen readers and such a better description of what's going on in your page.

[0]: http://www.w3.org/WAI/intro/aria

link
guyguyguyguy 4667 days ago
WAI-ARIA support is abysmal, not only does it vary between screen readers but also between various browsers using the same screen reader.
link
tuxracer 4666 days ago
Does anyone know of any specific screen readers that actually take semantic HTML tags into account? Or is this just a theoretical thing? It would seem to me if screen reader software relied on authors of every random site to properly use semantic markup they wouldn't be in for a good time.
link
eksith 4667 days ago
Actually, you can have nav inside article and still get the important stuff.

  <html>
  	<head></head>
  	<body>
  		<article>
  			<nav></nav>
  			<form></form>
  			<main></main>
  			<aside></aside>
  			<footer></footer>
  		</article>
  	</body>
  </html>
You can additionally include a "skip to content" link up top.
link
hpaavola 4666 days ago
But that is not was I was looking for. In your example navigation is the first thing in the markup, when content should be the first thing. Also, navigation does not belong to article, it belongs to site. And the same goes for footer.

And those skip to content -links just the kind of hack we should not have to do. There should not be anyhting before the content, markup-wise.

link
eksith 4666 days ago
Not necessarily. Nav inside article functions the same as the contents list in a Wikipedia article so if you don't want that, you can remove it from the article. If you want secondary links to other related content, those should go in a different nav in aside. If you want site-wide links, you can create a separate nav outside the article.

Also of note, footer can be for the article or the whole page. If you like, you can put footer outside the article and put the site-wide navigation there in addition to any forms.

Skip to content links aren't hacks, but are in fact part of standard procedure for web accessibility and do solve a problem with fewer steps. Try not to look at things that don't necessarily conform to arbitrary standards of elegance as hacks.

link
hpaavola 4666 days ago
In my example there was a site navigation, not article navigation. And with article navigation, the same problem exists. The article should be before the navigation. But it's not practical at all to implement.

And what comes to skip to content -links, those definetly are hacks. What they mean is "Dear user, we would have put the content first in the source, but since CSS is not a layout definition language, it was not possible, take this link instead."

link
jwdunne 4666 days ago
Actually, you can use absolute positioning to achieve what you want, in a fixed-width layout. You use CSS to add padding to the top of the content which is equal to the height of your navbar/header and give the navbar/header position absolute and top 0.

I haven't figured out how to do this with responsive layouts. It's never worked well for me but I will come up with a solution one day.

link
unfletch 4666 days ago
"I either have to do some hacky position:absolute things…"

Why do you think this is "hacky"? This is precisely what absolute positioning is for.

link
laumars 4667 days ago
Excuse my ignorance, but can you not use div layers to position your data as well as the header / footer tags?
link
hpaavola 4667 days ago
Depends on the meaning of "can" and "div layers". Technically speaking I can do many things, it's just that CSS (before flexbox, as mentioned in the comments) does not have any nice way to say that this element should be displayed before that element and so on.

Not sure what you ment with the layer thing.

link
laumars 4667 days ago
In the testing I've done with the aforementioned tags, the display ordering happens correctly on all the desktop and mobile browsers I had to hand, when I wrapped the content in div tags as well as the article et al tags. So I'm wondering if what I've done is: 1) "valid" syntax, 2) would still break in the clients being discussed earlier and thus I was testing the wrong clients or 3) missing the point entirely.

I'm still learning my way through HTML5 (I have had some experience with the markups that proceeded it though), so I just wanted to be clear on the issue :)

re "div layers", that was a foobar on my part. I meant "div tags". Sorry for the confusion.

link
nilliams 4667 days ago
Unfortunately I think it's 3), you've missed parent's point :) They are not saying that HTML5 tags do not order correctly. They are saying that it's difficult to create a semantic document, where the order of the tags suits screen-readers (i.e. article before nav, as the article is the important part) but the resulting webpage (when styled with CSS) suits viewers (nav at left of article).
link
laumars 4667 days ago
Ahhh I see. Thank you for the clarification.
link
nyrina 4667 days ago
You can, and that is how it's mostly done now.

But that isn't semantically correct. A div tag is just a div tag - like all other div tags.

An article tag is "a div tag", unlike all other div tags. It tells that this is the main part of the webpage.

link
laumars 4667 days ago
I see. Thank you :)
link