"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
—
2012-03-26T14:26:13Z —
#11

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
—
2012-03-26T18:23:51Z —
#12

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

My Account

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
—
2012-03-26T22:57:59Z —
#14

TehYoyo said:

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.

system
—
2012-03-27T04:36:55Z —
#15

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:

TechnoBear said:

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
—
2012-03-27T14:03:31Z —
#16

itmitică;5091712 said:

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

system
—
2012-03-27T14:18:53Z —
#17

TehYoyo said:

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
—
2012-03-27T14:19:56Z —
#18

TehYoyo said:

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
—
2012-03-27T14:30:49Z —
#19

itmitică;5092039 said:

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.

DaveMaxwell said:

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
—
2012-03-27T17:13:15Z —
#20

TehYoyo said:

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.

TehYoyo said:

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.