Account Options

  1. Sign in
The old Google Groups will be going away soon.
Switch to the new Google Groups.
Google Groups Home
« Groups Home
Hide Element visually, keep it for screen readers.
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
  7 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Capi Etheriel  
View profile  
 More options Jan 31, 6:58 pm
From: Capi Etheriel <barrapo...@gmail.com>
Date: Tue, 31 Jan 2012 15:58:54 -0800 (PST)
Local: Tues, Jan 31 2012 6:58 pm
Subject: Hide Element visually, keep it for screen readers.

So, Drupal solves it like this

https://github.com/drupal/drupal/blob/7.x/modules/system/system.base....

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);

}

it works fine, but as you might imagine, focusable elements will confuse
users (particularly keyboard usesr who like to tab around as a crazy
rabbit). Drupal solves it like this:

https://github.com/drupal/drupal/blob/7.x/modules/system/system.base....

.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;

}

I like the solution, although i don't like non-semantic classes and I
definitely *hate* !important declarations. I thought this would be nice to
port to Compass. Feedback?

 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
John Albin Wilkins  
View profile  
 More options Feb 3, 6:25 am
From: John Albin Wilkins <johnalbinwilk...@gmail.com>
Date: Fri, 3 Feb 2012 19:25:36 +0800
Local: Fri, Feb 3 2012 6:25 am
Subject: Re: [compass] Hide Element visually, keep it for screen readers.

Hi Capi!

I dislike !important too. However, in this case, it is being used correctly. We want an "invisible" element to have absolute positioning no matter what CSS is applied to that same element in different rules. Since ".element-invisible" has a very low specificity, almost any CSS rule setting position on that element will break the invisibility.

Also, "element-invisible" _is_ semantic. We're trying to make an HTML element invisible to sighted users, but not make it inaccessible. What would you suggest as a better name?

Also +1 for suggesting this as a feature to Compass. I believe the HTML5 Boilerplate already copied this method into its CSS. (Though they renamed it to ".visuallyhidden".) https://github.com/h5bp/html5-boilerplate/blob/master/css/style.css

 - John

On Feb 1, 2012, at 7:58 AM, Capi Etheriel wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Roy Tomeij  
View profile  
 More options Feb 10, 2:34 am
From: Roy Tomeij <r...@tomeij.net>
Date: Thu, 9 Feb 2012 23:34:10 -0800 (PST)
Local: Fri, Feb 10 2012 2:34 am
Subject: Re: Hide Element visually, keep it for screen readers.
I agree this should be in Compass; I keep ending up copy/pasting the
same mixin to all our projects.

!important would definitely be wise to include, specially for those
who have to "fix" legacy projects in which they have little control
over other selectors used. It isn't pretty, but it gets the job done
in a way that "just works". We don't have to care about semantics for
class names: if the mixin is called "hide" (like we have "hide-text")
that's within Compass' naming pattern and you can include it in any
class name you want.

On Feb 3, 12:25 pm, John Albin Wilkins <johnalbinwilk...@gmail.com>
wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Chris Eppstein  
View profile  
 More options Feb 10, 2:55 am
From: Chris Eppstein <ch...@eppsteins.net>
Date: Thu, 9 Feb 2012 23:55:28 -0800
Local: Fri, Feb 10 2012 2:55 am
Subject: Re: [compass] Re: Hide Element visually, keep it for screen readers.

Can someone make up a pull request with tests and docs?

http://compass-style.org/help/tutorials/contributing/

chris


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Mario Kuroir Ricalde  
View profile  
 More options Feb 10, 4:17 am
From: "Mario \"Kuroir\" Ricalde" <ma...@kuroir.com>
Date: Fri, 10 Feb 2012 03:17:44 -0600
Local: Fri, Feb 10 2012 4:17 am
Subject: Re: [compass] Hide Element visually, keep it for screen readers.
Please if you're working on the pull request post it here to avoid
duplicated effort.

2012/2/10, Chris Eppstein <ch...@eppsteins.net>:

--
Enviado desde mi dispositivo móvil

*
*
*█  Mario "Kuroir" Ricalde*
*█  **Front-end Engineer *
*█  **kuroir@twitter*
*█  *+1 ‪(415) 800-415-4‬


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Capi Etheriel  
View profile  
 More options Feb 15, 7:29 am
From: Capi Etheriel <barrapo...@gmail.com>
Date: Wed, 15 Feb 2012 04:29:10 -0800 (PST)
Local: Wed, Feb 15 2012 7:29 am
Subject: Re: [compass] Hide Element visually, keep it for screen readers.

The point, John, is not whether it is a semantic classes, but if it is
semantic to use a class at all.
I can use a dummy selector to hold my 'hide-element' properties:

.-drupal-hide-element {

}

And then whenever I need to hide an element, I'd just extend that class:

nav .title {
  @extend .-drupal-hide-element;

}

Of course, there is a reason Drupal uses a class: to allow PHP developers
to hide elements.
It is handy, although non semantic. And Compass users shouldn't deal with
the class, just with the mixins :)

 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Capi Etheriel  
View profile  
 More options Feb 15, 7:30 am
From: Capi Etheriel <barrapo...@gmail.com>
Date: Wed, 15 Feb 2012 04:30:27 -0800 (PST)
Local: Wed, Feb 15 2012 7:30 am
Subject: Re: [compass] Hide Element visually, keep it for screen readers.

silly me, forgot to copy the .-drupal-hide-element class properties:

.-drupal-element-invisible {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

.-drupal-element-focusable {
  @extend .-drupal-element-invisible;
  &:active, &:focus {
    position: static;
    clip: auto; } }


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »