I’m working on the UI of an internal administrative web application which enables you to manage different kinds of data (in our example - people). Some of the screens consist of a header, containing the basic informations of the person, and a form for making changes.
Example markup (without styling):
<header>
<h1>John Doe</h1>
<img src="johndoe.jpg" alt="Profile picture"/>
<div>Group X</div>
<div>London, UK</div>
<div>01.01.1970</div>
<div>some kind of ID (example: X920EDY)</div>
</header>
I want to improve the accessibility of our application by using semantic markup, but can’t figure out which HTML tags should be used in the header area. I’d use an <h1> for the title (“John Doe”) and an <img> for the image, but I’m not sure what to use for the rest of the content.
The text on the right (“Group X”) visually looks like a heading, but it doesn’t feel right to use an <h2> here, as <h> elements should represent headings of sections and there is no grouped content that belongs to that text.
The texts underneath the title are currently defined as <div> — it also doesn’t feel right because <div>s have no meaning on their own. I thought about using a <p> but the texts are not paragraphs. Another options I considered were <span> and <ul> but they also don’t seem right because the first one, like <div>, has no semantic value and the texts don't create a list of semantically similar items.
Does anyone have a better idea?
A list here would be the best solution, imo. It won't convey semantically similar items, but it will gather under one hood, so to say, all the info about John Doe.
You may do a <ul>, but if for some reason you want to keep your divs, you may do so and add appropriate ARIA for the list, shown below.
One more thing: As far as I can see (with sighted help), the ID thing is related to the group X. I.e., the data go like this: John Doe, London, birthdate, group x, ID. If I'm right, you need to change the place of your divs in the code, as most screen readers order the page as it is laid out in the code.
So, the final solution without changing your markup, except for adding an outer div for the list:
<div role="list">
<div role="listitem">London, UK</div>
<div role="listitem">01.01.1970</div>
<div role="listitem">Group X</div>
<div role="listitem">some kind of ID (example: X920EDY)</div>
</div>
Related
I don't think it's the case but I'm still taking the shot: Is there such a thing as a non-hierarchical tag in HTML (for markup independent of content structure).
For instance, something like:
<div class="thingy" id="thing">
blabla<n-htag>bla
</div>
<div class="thingy" id="thing2">
John Dodelidoo</n-htag>
</div>
EDIT: I'm realizing now what you're asking is that you want a tag where you can group multiple tags together but being completely unrelated to the HTML structure (e.x. you could start it in the middle of one element and end it in the middle of another that is completely isolated). Because of the way XML is structured, you cannot; it is completely based on hierarchy (as far as I can tell).
For archival purposes, the original answer is below.
If I understand what you're asking, the closest thing we have to that (as far as I can remember) is <span>: while it doesn't change the visual appearance of the page, it allows you to group elements. (And obviously, while you aren't REQUIRED to indent it, you can).
I'm fixing an old WordPress syntax highlighter plugin (the plugin owner abandoned it), and while fixing the PHP errors was easy, while I'm fixing it, I might as well improve accessibility as well.
My question is regarding the HTML structure for the code. I want to show the number on one side and the code next to it:
I figured the HTML would be something like this:
<section> <!-- Maybe article? -->
<header>
<h1>Sample HTML</h1> <!-- Maybe <h3> would fit my blog posts best -->
<div role="toolbar">toolabar buttons here</div>
</header>
<ol>
<li><span class="sh-r "><div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">></span>
...
</ol>
</section>
But I'm not sure. Should the code be in an <ol> or a <table>? Are the spans for changing the color ok? Is the toolbar role appropriate? Am I missing something? If anyone has an example of an accessible code highlighter, I'd love to see it.
The way it is right now, it's a table with all numbers in one <td> and all the code in another!
Should the code be in an <ol> or a <table>?
I would say that <ol> is more appropriate than <table>.
Using a table here looks a bit like presentational purpose only. I wouldn't call a table with line numbers on the left and code lines on the right exactly a data table.
Are the spans for changing the color ok?
As as default and because you can't do better in HTML anyway, I would say yes, it's fine.
IF HTML has more specific elements to semantically indicate keywords, blocks, numbers, strings, variables, etc. then you would be strongly recommanded to use them instead of spans.
But there aren't really such specific elements, except maybe <var, <kbd> and/or <samp>; but their semantic signification has never been very clear.
However, as a higher level, you should be using <code> or <pre> to enclose the whole code, to mark it as such.
The problem is that, if you use those two elements, you can no longer use <ol> or <table>.
Perhaps the most acceptable compromise would be <ol><li><code>One line of code</code></li>...</ol>.
In any case, for specific things like marking keywords inside the line of code, you don't have another better choice than <span> in what HTML has to offer.
Is the toolbar role appropriate?
Given that you haven't given the code inside the div, it's a bit difficult to answer.
Normally, a toolbar should contain a set of buttons or occasionally other controls like dropdown menus, and in principle nothig else then that.
If the content of that div corresponds to this simple definition, yes, the toolbar is appropriate. Otherwise, no.
Not that it isn't very worth it to use the toolbar role for less than 3 buttons
As I can imagine here, this div contains only a single button to copy the code in clipboard. If it's indeed the case, then by the definition above, it isn't very appropriate.
In a web page that shows a list of tutors, the current HTML codes:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
Now, for some reasons, the word Tutors which is currently wrapped by h1 needs to be removed in the page. I can think of 3 choices:
Use css to hide it.
Simply remove it, and the page will have h2
without h1.
Remove it, and change all h2 to h1.
Which one is more appropriate?
#3: Remove it, and change all h2 to h1.
For SEO, hiding text is frowned upon because it can be considered black-hat SEO. Unless you're going to replace the header with an image that has the text, "Tutors".
Should I include my logo text using 'alt' or CSS?
Hiding Text with CSS for SEO
If you insist on hiding the text, Accessibility/SEO Friendly CSS Hiding
You cannot have <h2> unless there's an <h1> beforehand.
Headings, heading hierarchy, and document outlines
None of these options are good SEO.
This is risky and a bad practice. Search engines have become very good at figuring out when text is hidden and if they find that a heavily weighted tag like <h1> is hidden it will hurt your rank.
You should never skip a step in the hierarchy of headers (don't have <h3>'s without <h2>'s etc.). In addition they should always appear in decreasing order of importance.
Every page should have exactly one <h1> and it should be the first heading tag. They are on the order of <title> in terms of SEO weight.
Why does this headline need to be hidden in the first place? It seems like a good description of the content of the page.
Depending on the use case for the page, any three of those sound like valid options. That said, here are some things I thought about when considering this question:
SEO: it appears there is some opinion out there that the choice of tag content may affect search engine ranking.
Style-less rendering: if for some reason the page might be rendered without the accompanying css sheets, be aware of the effect of default rendering on the page and how you might want it to perform
Be aware that there are new common tags like 'section' in HTML 5, which might fit your page and be a bit clearer semantically than H tags
This is a preference. You should always separate presentation and structure, so I would say just comment it out, and put that it use to be there. If you hide it, this really isn't presentation because it is never seen. So 3 would be the most appropriate.
Doesn't matter.
If you are using jQuery to show and hide things it has no bearing on SEO. Search engines see what you see when you view source in all practical senses. You aren't doing anything sneaky anyway.
Reference my post here on stack overflow If I do everything on my page with Ajax, how can I do Search Engine Optimization?
because what you are doing is AFTER the search engines have looked at it for all practical purposes.
Perhaps you should consider formatting these items as a definition list, e.g:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
becomes:
<dl title="Tutors">
<dt>John</dt>
<dd>...Description here...</dd>
<dt>Mary</dt>
<dd>...Description here...</dd>
<dt>David</dt>
<dd>...Description here...</dd>
</dl>
And then apply CSS classes and styles to the elements to prettify it for sighted users. Just a thought.
I'm looking at the BBC site, and putting together something following a similar overall pattern, and determining how to mark it up appropriately is stumping me somewhat.
The BBC consists of several what could be considered sites in their own right:
http://www.bbc.co.uk
http://www.bbc.co.uk/comedy/
http://www.bbc.co.uk/news/
www.bbc.co.uk/[a-lot-more-stuff]
(these could all be subdomains instead - indeed, this is the case for me - but the URLs are not important)
Each of these is essentially self-contained, with its own content, menu and look and feel. However all of them are tied together by the use of the (slightly variable but mostly) static header bar. This contains the header "BBC" along with links to all of the various sub-sites.
So the question is, how should this be marked up. I see several different options:
The main BBC header is the site's main <header> and <nav>. This is sort of correct, because it is but it ends up essentially de-emphasising the importance of the sub-site's actual content. When it boils down to it (to use the examples above), the title "Comedy" and associated menu is the main content of the page, not the BBC bar.
Make the sub-sites' header and navigation the ones which are marked up within <header> and <nav>. This feels better, but it then opens up the question as to what the BBC bar now is? An option is to use an <aside>, which then contains its own <header> and <nav>. As far as I know, this is fine for the header but having that other <nav> element is still weird. Better option than the above?
Do the same as number 1 (BBC bar has the main <header> and <nav>), but mark up the rest of the page inside an <article> element. The spec indicates that the article element is to be used for items which make sense on their own, which is the case here. And it'll also make sense for it to have its own <header> (and <nav>? Is this pushing it somewhat?) But this seems to be stretching the definition of an 'article' rather further than its dictionary definition allows.
To me, having given it some thought and thrown some ideas back and forth on Twitter, number 2 seems the best of these options. However the idea of essentially putting the contents of an <aside> as the top element on the page (visually and in markup, since it seems to make most logical sense this way) doesn't quite sit right with me.
Am I overlooking an obvious solution or is this an usual enough pattern that it does make itself as difficult as it seems? And surely I can't be the only one to puzzle over this?
Thanks for any thoughts.
The main header should be, as you pointed out, marked up in <header> and <nav>.
I would then mark each additional page content in an <article> containing it's own <header> and <nav>. Ignore the dictionary definition of article, it doesn't really apply here. It's fine to have more than one <nav> element on a page, as long as its contents navigate within the site, that makes sense.
Putting the top header in an <aside> also doesn't seem to be correct to me as the content isn't stand alone.
Just my thoughts on the subject!
i have a set of items (or a list of items, but i don't want to imply the usage of list), they contain an image link, a title, and a description. The image link needs an hover effect (alpha changes when mouse over), and there's a certain way I want to lay out them: image on the left, then title and description on the right. also there is background for the whole block of items.
here's a screenshot of what i want it to look like:
alt text http://img26.imageshack.us/img26/9806/screenshothmr.png
so my question is what is a good semantic html structure for this? i tried to use dl like this:
<dl>
<dt></dt> <!-- using the background of anchor for the hover effect -->
<dd>Title<p>description goes here</p></dd>
<dt>...
</dl>
but i'm having a hard time to get the css working for this. e.g. i need an extra background for each set of a, dt and dd, and i don't wanna use 3 different images to combine the background. so now i'm thinking to use a bunch of divs to do this:
<div>
<!-- image link with background hover -->
<h4>Title</h4> <!-- i also wanted to use h4 inside the dd, but it won't pass validation -->
<p>description goes here</p>
<div>
the problem with this layout is that it doesn't look semantic to me. i could wrap it around in the li with an unordered list, but that seems like extra markup.
maybe i'm just being too picky, but i do wanna find out if there's a good solution for this. it's quite a long question, and thank you for reading it to the end.
I'd say that using <DL> for this purpose is actually less semantic then using <DIV> - you're most certainly not creating a definition list.
Link, header and paragraph wrapped in a div seem perfectly acceptable to me. You can try using unordered list instead; but you'll likely have same (or worse as you won't have dt / dd separation anymore) problems with CSS as you did with <DL>. Plus using header tags won't validate within list item either, so you'll have to resort to another paragraph / div / span - definitely less than ideal.
Update (based on idrumgood's comment below):
Header (and other block-level elements) do validate within unordered list item, so perhaps the following approach would both be semantic and work with your styles:
<ul>
<li>
<!-- image link with background hover -->
<h4>Title</h4>
<p>description goes here</p> <!-- perhaps you won't need the actual paragraph tag -->
</li>
</ul>
I think your latter example is perfectly good. You're using tags that aptly describe the content they contain, and even if you were to turn off your styles, the general idea of the page would still be there (a key to semantic web).
I agree with idrumgood, this isn't a list of projects, it's a set of projects. Use the divs, it is a perfectly valid usage of it. If you were using HTML5, you would use "section" for each item and "figure" for the screenshot.