SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 81 of 81
  1. #76
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,931
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    No. Accessibility people have wondered ever since the Googles figured out how to find cloaked text. Matt Cutts answered definitively several years ago, hiding structure that you have put there for accessibility is fine. "BBC homepage" isn't exactly a shining example of keyword-stuffing cloaking anyway.
    If I want to make a hidden <H1> tag, how would I go about doing that?

    Is it just text on a same colored background or something more?


    Debbie

  2. #77
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    No, that's too similar to cloaking. Plus if the point is to remove structure from the visual representation because you believe it's visually distracting and unhelpful, then you don't want it showing up when people highlight text and you don't want it taking up space.

    You also don't want to use display: none since most screen readers will honour that.

    The preferred method (I believe, though this might mostly be my opinion) is setting the element to position: absolute (which takes the element out of the document visual flow, so doesn't take up space) and then either a negative left margin or just a negative left value:

    h1 {
    position: absolute;
    left: -999em;
    }

    This leaves the element accessible to screen reader users, text browser users, and the googles.

    You also have the option of showing it (or not) when printing in the print stylesheet.

  3. #78
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an arguably better way of hiding content:

    Code:
    .hidden {
    	position: absolute !important;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0 !important;
        border: 0 !important;
        height: 1px !important;
        width: 1px !important;
        overflow: hidden;
    }
    Jonathan Snook has a discussion of methods of hiding content here: Hiding Content for Accessibility - Snook.ca

  4. #79
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    He says:
    Position Absolute and Offscreen

    Code:
    .element-invisible {
      position: absolute;
      top: -999999em;
      left: auto;
      width: 1px;
      height: 1px;
      overflow:hidden;
    }
    In this case, if you have focusable content within the positioned element, the page will scroll to that element, thus creating an unsettling jump for sighted users.
    If by focusable content he means an anchor (which does not affect Debbie's case at all), we don't pull them up anyway (for example, Window Eyes had a bug where it would announce the content at the top of the page first, and then again when it reached the element in source). Almost all of us pull off to the left (would be off to the right on a RTL page).

    Browser differ on whether they focus on anchors offscreen: some will, some won't.
    It seems Yahoo is using clip instead of off-screen positioning so that all browsers (even Opera) will focus on the skip links (likely this is for skip links... though now I wonder if they are also then undoing all their !importants to undo all those styles on :focus, which they should be doing for sighted keyboarder accessibility).

    I think he was conventiently using top to argue a strange point.
    He also uses !important. I avoid !important because that is a tool for users, not authors. It's purpose was changed between CSS1 and CSS2, from for-authors to for-users. Users with user stylesheets should be able to use !important to override author stylesheets; however when authors use !important, users lose this power.

    I'm not sure why he's using the "correct" clip... last time I used clip, the "incorrect" version that IE requires worked in all browsers. It goes against the spec, but works, and works in IE, so everyone has been ignoring the spec.

    Though last time I used clip I don't believe Chrome existed, so maybe that's what's changed.

    But I'll also mention I have a strong bias against code used at Yahoo. Every time I see something they've coooked up, it always looks like 500 times more code than necessary.

  5. #80
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Users with user stylesheets should be able to use !important to override author stylesheets; however when authors use !important, users lose this power.
    If both the author stylesheet and the user stylesheet use !important, wouldn't the user stylesheet override the author one? Haven't tested, so I may be wrong.

    I generally agree on !important. I never use it. I would assume that you wouldn't actually need it here, either, as long as you were aware of your CSS. If you were looking for a universal drop-in solution, the !important would perhaps be necessary, but that would be bad practice.

    Regarding the correct clip, I would certainly be reluctant to drop even if all browsers currently supported the 'incorrect' clip, because it's far safer for future-compatibility to ensure that correct clip is there as a fall-back. IMO.

  6. #81
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by PatrickSamphire View Post
    If both the author stylesheet and the user stylesheet use !important, wouldn't the user stylesheet override the author one? Haven't tested, so I may be wrong.
    You are correct and as far as !important goes user stylesheeets will win out. This was not the case in CSS1 but was changed in CSS2 to make sure that user stylesheets using !important were more important

    I wrote this section of the reference so I quote myself
    Declarations are sorted in the following order (from lowest to highest priority):

    1. user agent declarations
    2. normal declarations in user style sheets
    3. normal declarations in author style sheets
    4. important declarations in author style sheets
    5. important declarations in user style sheets



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
  •