Semantics and Menu List

[DoubleDee]

On my My Account page, I have a list of things a User can do to his/her Account. I suppose you could call this a menu?!

I am wondering which markup is more semantically correct...

	<div id="boxMyAccount">
		<h2>My Account</h2>
		<ul>
			<li><a href="/members/upload.php">Upload a Photo</a></li>
			<li><a href="/members/change_email.php">Change My E-mail</a></li>
			<li><a href="/members/change_password.php">Change My Password</a></li>
			<li><a href="/members/change_details.php">Change My Details</a></li>
		</ul>
	</div>

versus...

	<div id="boxMyAccount">
		<h2>My Account</h2>
		<a href="/members/upload.php">Upload a Photo</a>
		<br />
		<a href="/members/change_email.php">Change My E-mail</a>
		<br />
		<a href="/members/change_password.php">Change My Password</a>
		<br />
		<a href="/members/change_details.php">Change My Details</a>
		<br />
	</div>

Thanks,


Debbie

[ralph.m]

Definitely go for option 1. It certainly is a list of items, as menus usually are.

[DoubleDee]

Definitely go for option 1. It certainly is a list of items, as menus usually are.

So no fears of being accused of "List-itis"?!


Debbie

[ralph.m]

So no fears of being accused of "List-itis"?!

More likely div-itis, depending on whether or not that <div id="boxMyAccount"> is really needed. But we'd need to see it in context to know.

[TechnoBear]

A series of adjacent links with nothing in between can cause accessibility problems. Using a list helps avoid this. See this article for a brief overview.

[TehYoyo]

Yeah. Definitely go w/ the list.

It's just another menu and is a list/sequence of actions that can be done. Think of it this way.

If I were to say:

You can do these options, what makes more sense, like this:

You can do any of these options:

Upload a Photo
Change My E-mail
Change My Password
Change My Details

or like this:

• Upload a Photo
• Change My E-mail
• Change My Password
• Change My Details

~TehYoyo

[DoubleDee]

Yeah. Definitely go w/ the list.

It's just another menu and is a list/sequence of actions that can be done. Think of it this way.

If I were to say:

You can do these options, what makes more sense, like this:


or like this:


~TehYoyo

Fair enough.


Debbie

[itmitică]

According to the very WebAIM page markup, for breadcrumb, which is a list of links, a menu also, you could do this too:

My account
I can: Upload a Photo | Change My E-mail | Change My Password | Change My Details

where you make

<span class="hidden">I can: </span>

and

.hidden {
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -500px;
    width: 1px;
}

Sounds more like it to me. You can choose to hide the '|' also and apply margin or padding related style to links to better visually distinguish among them.


This way, to your visitors, your page won't look like an endless airport strip made from lists.

[itmitică]

If I were to say:

You can do these options, what makes more sense [...]
~TehYoyo

You mean, since you talk about options, the select element perhaps?

"The select element represents a control for selecting amongst a set of options."

Oh, wait, everyone says lists are what they see there. I say lazy is what they see.

Want something really wild? How about input type="radio". What do I hear? "Meh." I thought so.

[TehYoyo]

According to the very WebAIM page markup, for breadcrumb, which is a list of links, a menu also, you could do this too:

My account
I can: Upload a Photo | Change My E-mail | Change My Password | Change My Details

where you make

<span class="hidden">I can: </span>

and

.hidden {
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -500px;
    width: 1px;
}

Sounds more like it to me. You can choose to hide the '|' also and apply margin or padding related style to links to better visually distinguish among them.


This way, to your visitors, your page won't look like an endless airport strip made from lists.

I think she's going more for something like Sitepoint's Control Panel (on the left).

Edit: Just saw your quote.

You mean, since you talk about options, the select element perhaps?

"The select element represents a control for selecting amongst a set of options."

Oh, wait, everyone says lists are what they see there. I say lazy is what they see.

So then why isn't all navigation a select element? It's a choice amongst a set of options... Should lists only be used for paragraph/body content?
~TehYoyo

[itmitică]

Hmmm ... lazy?!

select was used for menus first. But CSS and JavaScript couldn't do much then, so developers turned on easier paths. The question is, those easier paths developed bad habits?

Lists should be used where they actually fit in the content of a page. They need proper introduction, much like you choose from a "list" of headings before putting down a "list" of paragraphs. Which are "lists" of words. All in a "list" of html markup elements. It's very easy to give up and call "a list" every other couple of things in your sight. How about "set". Or "group". But I guess "list set" and "list group" sounds even better.

[itmitică]

It occurred to me that I haven't been so clear about the markup WebAIM uses:

<p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> &gt; <a href="/articles/">Articles</a> &gt; <a href="./">Links and Hypertext</a> &gt; Page 3: Hypertext Links</p>

and of my proposal:

<h3>My Account</h3>
<p id="accountOptions"><span class="hidden">I can: </span><a href="#">Upload a Photo</a> | <a href="#">Change My E-mail</a> | <a href="#">Change My Password</a> | <a href="#">Change My Details</a></p>

[TehYoyo]

It occurred to me that I haven't been so clear about the markup WebAIM uses:

<p id="breadcrumbs"><span class="hidden">You are here: </span><a href="/">Home</a> > <a href="/articles/">Articles</a> > <a href="./">Links and Hypertext</a> > Page 3: Hypertext Links</p>

and of my proposal:

<h3>My Account</h3>
<p id="accountOptions"><span class="hidden">I can: </span><a href="#">Upload a Photo</a> | <a href="#">Change My E-mail</a> | <a href="#">Change My Password</a> | <a href="#">Change My Details</a></p>

First, don't use those classes (that specify aesthetics when they should specify content).

I don't get what you're doing...what CSS would you use?

~TehYoyo

[ralph.m]

First, don't use those classes (that specify aesthetics when they should specify content).

I would give the <p> the class "accountOptions" and target the span with p.accountOptions span {}.

The point here is to hide text that sighted users don't need to see.

[itmitică]

That's right ralph.

There's nothing wrong with that class name. Also, even though it would work with your descendant selector as well, it appears WebAIM has a lot of content like that one, for accessibility, and as such they used a "hidden" class.

It makes sense to use a class only if there are more accounts to be managed on a page. This is usually not the case, you first log in on a single account and then you manage that one.


TehYoyo,
You already quoted the CSS in #10. Pay more attention. Go over to the WebAIM page, first.

Here it is, if you missed it:

A series of adjacent links with nothing in between can cause accessibility problems. Using a list helps avoid this. See this article for a brief overview.

With a little bit of help from Firebug, Dragonfly, Developer Tool, Inspector, depending on the UA you use, look for the "breadcrumb" id. It's all there. Even the "hidden" class. That span doesn't have a semantic role, being a span and all, it has a structural and presentational role.

[TehYoyo]

There's nothing wrong with that class name. Also, even though it would work with your descendant selector as well, it appears WebAIM has a lot of content like that one, for accessibility, and as such they used a "hidden" class.

The class is based on how it appears - in best practices of separating structure from appearance, it's best to make classes based on what it is not how it looks.


~TehYoyo

[itmitică]

The class is based on how it appears - in best practices of separating structure from appearance, it's best to make classes based on what it is not how it looks.


~TehYoyo

Yes, everybody seems to know the best practices. Are they? I'm really puzzled by "separating structure from appearance" as a best practice on your part. What that even means? If you wanted to throw something in there, it should have been semantics. Which doesn't apply to span. What would you call a "column" div? A "byte"? A "piece"? A "lot"?

Anyhow, span is a hook for style. The style is hidden. It's not red. Nor green. It's hidden. That's what it is. Maybe you know how hidden looks like?! I've never seen a hidden text before so I guess I can't really describe it to you. If I really think about it, I'm usually not able to describe to you pretty much any hidden object in my sight. LOL

[DaveMaxwell]

The class is based on how it appears - in best practices of separating structure from appearance, it's best to make classes based on what it is not how it looks.

Are you balking at the hidden class? If you are, it could be argued that it defines both what it is and what it looks like. Using it in this situation would be perfectly valid. It's not like he's using a class="columnLeft" or class="colorRed". Hidden objects are just that - hidden. They aren't need for processing or interpretation of pages on a normal basis.

[TehYoyo]

Yes, everybody seems to know the best practices. Are they? I'm really puzzled by "separating structure from appearance" as a best practice on your part. What that even means? If you wanted to throw something in there, it should have been semantics. Which doesn't apply to span.

How cynical What I mean is keeping your HTML and CSS separate. That's why we use external stylesheets (one reason), why I (and I think most people) shy away form inline style, etc.

Are you balking at the hidden class? If you are, it could be argued that it defines both what it is and what it looks like. Using it in this situation would be perfectly valid. It's not like he's using a class="columnLeft" or class="colorRed". Hidden objects are just that - hidden. They aren't need for processing or interpretation of pages on a normal basis.

Well then maybe I'm wrong. At first glance, it seems like an appearance class, but looking back on it, it seems more of a comment than anything in the context of the code and of the entire thread.

~TehYoyo

[TechnoBear]

How cynical What I mean is keeping your HTML and CSS separate. That's why we use external stylesheets (one reason), why I (and I think most people) shy away form inline style, etc.

It isn't an inline style - just a class applied to an inline item. The style is declared elsewhere.

At first glance, it seems like an appearance class, but looking back on it, it seems more of a comment than anything in the context of the code and of the entire thread.

I can see why you think it's an appearance class; as DaveMaxwell says, in one way it is. You could use a class based clearly on what it is: e.g. <span class="phrase-that-does-not-need-to-be-visible-to-sighted-visitors"> but <span class="hidden"> is much easier to type and means the same thing.

Does that help?

[TehYoyo]

It isn't an inline style - just a class applied to an inline item. The style is declared elsewhere.

I was just giving inline as an example.

I can see why you think it's an appearance class; as DaveMaxwell says, in one way it is. You could use a class based clearly on what it is: e.g. <span class="phrase-that-does-not-need-to-be-visible-to-sighted-visitors"> but <span class="hidden"> is much easier to type and means the same thing.

Does that help?

To me, it seems like a comment in the code than an actual text that needs to be styled (in context of the discussion).

~TehYoyo

[TechnoBear]

To me, it seems like a comment in the code than an actual text that needs to be styled (in context of the discussion).

It's text that needs to be there to give context for a visually impaired user, rather than a comment. In the second example (for Debbie's menu) it's perhaps a little less clearly so, as the <h3>My Account</h3> provides some context.

In the first example, the WebAIM breadcrumb navigation, a visually impaired user hearing just the list of links read out might not realise that it's a breadcrumb trail to the current page and be confused by it. Adding the "You are here" text solves the problem. It's not needed for sighted users, so is hidden from view. (The only styling applied is to hide it.)

[TehYoyo]

It's text that needs to be there to give context for a visually impaired user, rather than a comment. In the second example (for Debbie's menu) it's perhaps a little less clearly so, as the <h3>My Account</h3> provides some context.

In the first example, the WebAIM breadcrumb navigation, a visually impaired user hearing just the list of links read out might not realise that it's a breadcrumb trail to the current page and be confused by it. Adding the "You are here" text solves the problem. It's not needed for sighted users, so is hidden from view. (The only styling applied is to hide it.)

Ahhh. Gotcha. Didn't realize that. I've actually never heard of that - should I be doing that for most things? Should I include a hidden "navigation" for my NavBar?

~TehYoyo

[ralph.m]

should I be doing that for most things? Should I include a hidden "navigation" for my NavBar?

It's not uncommon to add things like hidden headings to aid page navigation, but it's up to you, really. You aren't expected to do it.

[TehYoyo]

It's not uncommon to add things like hidden headings to aid page navigation, but it's up to you, really. You aren't expected to do it.

I think it'd be kind of excessive...help for every single option of action on my entire site?

~TehYoyo