Semantics and Menu List

DoubleDee · March 25, 2012, 4:16am

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

ralphm · March 25, 2012, 4:34am

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

DoubleDee · March 25, 2012, 4:39am

So no fears of being accused of “List-itis”?!

Debbie

ralphm · March 25, 2012, 4:46am

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 · March 25, 2012, 5:39pm

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 · March 26, 2012, 1:10am

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 · March 26, 2012, 6:47am

Fair enough.

Debbie

system · March 26, 2012, 1:54pm

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 | [URL=“#”]Change My E-mail | [URL=“#”]Change My Password | [URL=“#”]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.

system · March 26, 2012, 2:16pm

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 · March 26, 2012, 2:19pm

[QUOTE=itmitică;5091358]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 | [URL=“#”]Change My E-mail | [URL=“#”]Change My Password | [URL=“#”]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.[/QUOTE]

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

system · March 26, 2012, 2:26pm

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.

system · March 26, 2012, 6:23pm

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>

TehYoyo · March 26, 2012, 10:48pm

[QUOTE=itmitică;5091486]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>

[/QUOTE]

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

ralphm · March 26, 2012, 10:57pm

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.

system · March 27, 2012, 4:36am

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:

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 · March 27, 2012, 2:03pm

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

system · March 27, 2012, 2:18pm

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 · March 27, 2012, 2:19pm

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 · March 27, 2012, 2:30pm

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.

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 · March 27, 2012, 5:13pm

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

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?