SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Semantics and Menu List

    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...

    HTML Code:
    	<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...

    HTML Code:
    	<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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Definitely go for option 1. It certainly is a list of items, as menus usually are.

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    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.

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <span class="hidden">I can: </span>
    and
    Code:
    .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.

  9. #9
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.

  10. #10
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by itmitică View Post
    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
    Code:
    <span class="hidden">I can: </span>
    and
    Code:
    .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

  11. #11
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    It occurred to me that I haven't been so clear about the markup WebAIM uses:

    Code:
    <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:

    Code:
    <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>

  13. #13
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by itmitică View Post
    It occurred to me that I haven't been so clear about the markup WebAIM uses:

    Code:
    <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:

    Code:
    <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

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.

  15. #15
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    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:
    Quote Originally Posted by TechnoBear View Post
    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.

  16. #16
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by itmitică View Post
    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

  17. #17
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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

  18. #18
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  19. #19
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by itmitică View Post
    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.

    Quote Originally Posted by DaveMaxwell View Post
    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

  20. #20
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.

    Quote Originally Posted by TehYoyo View Post
    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?

  21. #21
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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

  22. #22
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,163
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.)

  23. #23
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,170
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    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.

  25. #25
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •