last year I started an email exchange with an accessibility expert here in Canada. As I pointed out last year, there is a wealth of information on Drupal about strengths/weaknesses of any accessibility enhancements that can be useful for other tools.
The threads of discussion on the CSS display:none; start in April 2006 and was fixed in August 2009 in core:
http://drupal.org/node/58941
http://drupal.org/node/473396
It was then later determined to be broken again VoiceOver, so it was rewritten:
http://drupal.org/node/718922
The end result that was found was:
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}and also:
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
position: static !important;
clip: auto;
}There were noted concerns about an off left (top/up/down) solution as noted in the first series of discussions. There were also a wealth of options described here.
In trying to implementing Drupal 7's solution he ran into some problem:
1) clip: rect(1px 1px 1px 1px) fails CSS validation. I got around this by using conditional comments to load this in separate IE6 and IE7 stylesheets (CSS validators ignore these files when checking a Web page).
2) Content that is supposed to be made visible upon focus while remaining absolutely positioned will become visible upon focus in all browsers except IE6/7. To make it visible in IE6/7 I have to use static or relative positioning which breaks the intended design. I dealt with this by using the off-left solution in the IE6 and IE7 stylesheets so only IE6 and IE7 will have rtl and bidirectional issues.
3) Solution doesn't work for content that needs to become visible upon mouse hover (only works for keyboard focus). I dealt with this instead by using the CSS opacity property (with the IE opacity filter used in IE-specific stylesheets).
Now I hate testing IE as I'm a Linux/Mac guy. But surely this works in default D7 themes. If not, where are the problems with the testing process?
.element-invisible {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
height: 1px !important;
width: 1px !important;
overflow: hidden !important;
}To allow this to become visible when it gains keyboard focus, use the following:
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus
{
position: static;
clip: auto;
height: inherit !important;
width: inherit !important;
overflow: inherit !important;
}clip: rect(1px 1px 1px 1px); was specified in separate IE6 and IE7 CSS files (using conditional comments).
I'm neither a CSS guy or a IE person. Would like some feedback though to see if anyone else has noticed a problem with IE6 or IE7 with D7. Would it be useful to clarify how best to implement this for other themes in Drupal?
Do we need to clarify the module upgrade docs here: http://drupal.org/node/254940#element-hidden
The Skip links documentation doesn't seem to be very clear: http://drupal.org/node/254940#skip-link
I believe that focusable elements need to follow the following format:
<a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>I'd appreciate feedback on this.
Has anyone taken the time to look at some of the new D7 themes to see how they have been applying the accessibility work we started in core?