http://www.mediawiki.org/wiki/Special:Code/MediaWiki/98045
Revision: 98045
Author: dantman
Date: 2011-09-25 00:49:39 +0000 (Sun, 25 Sep 2011)
Log Message:
-----------
Improve the accessibility of our jump-to functionality
- Stop hiding with display: none;, this hides our jump links from modern screen
readers and users with motor disabilities (ie: nowadays, pratically everyone
they are intended to help).
- Instead hide with an overflow that will make the links viable <tab> targets.
This alone is enough to help screen reader users.
- Add in a script that will show the jump-links area on-focus for motor-impared
users who can still see who have js enabled (this can't be done with css
unfortunately)
Modified Paths:
--------------
trunk/phase3/resources/Resources.php
trunk/phase3/skins/MonoBook.php
trunk/phase3/skins/Vector.php
trunk/phase3/skins/common/commonInterface.css
trunk/phase3/skins/common/commonPrint.css
trunk/phase3/skins/common/shared.css
Added Paths:
-----------
trunk/phase3/resources/jquery/jquery.mw-jump.js
Modified: trunk/phase3/resources/Resources.php
===================================================================
--- trunk/phase3/resources/Resources.php 2011-09-25 00:28:26 UTC (rev
98044)
+++ trunk/phase3/resources/Resources.php 2011-09-25 00:49:39 UTC (rev
98045)
@@ -158,6 +158,9 @@
'jquery.mwExtension' => array(
'scripts' => 'resources/jquery/jquery.mwExtension.js',
),
+ 'jquery.mw-jump' => array(
+ 'scripts' => 'resources/jquery/jquery.mw-jump.js',
+ ),
'jquery.qunit' => array(
'scripts' => 'resources/jquery/jquery.qunit.js',
'styles' => 'resources/jquery/jquery.qunit.css',
@@ -610,6 +613,7 @@
'jquery.checkboxShiftClick',
'jquery.makeCollapsible',
'jquery.placeholder',
+ 'jquery.mw-jump',
'mediawiki.util',
),
),
Added: trunk/phase3/resources/jquery/jquery.mw-jump.js
===================================================================
--- trunk/phase3/resources/jquery/jquery.mw-jump.js
(rev 0)
+++ trunk/phase3/resources/jquery/jquery.mw-jump.js 2011-09-25 00:49:39 UTC
(rev 98045)
@@ -0,0 +1,15 @@
+/**
+ * JavaScript to show jump links to motor-impaired users when they are focused.
+ */
+jQuery( function( $ ) {
+
+ $('.mw-jump').delegate( 'a', 'focus blur', function( e ) {
+ // Confusingly jQuery leaves e.type as "focusout" for delegated
blur events
+ if ( e.type === "blur" || e.type === "focusout" ) {
+ $( this ).closest( '.mw-jump' ).css({ height: '0' });
+ } else {
+ $( this ).closest( '.mw-jump' ).css({ height: 'auto' });
+ }
+ } );
+
+} );
Property changes on: trunk/phase3/resources/jquery/jquery.mw-jump.js
___________________________________________________________________
Added: svn:eol-style
+ native
Modified: trunk/phase3/skins/MonoBook.php
===================================================================
--- trunk/phase3/skins/MonoBook.php 2011-09-25 00:28:26 UTC (rev 98044)
+++ trunk/phase3/skins/MonoBook.php 2011-09-25 00:49:39 UTC (rev 98045)
@@ -80,7 +80,7 @@
<?php } ?><?php if($this->data['newtalk'] ) { ?>
<div class="usermessage"><?php $this->html('newtalk') ?></div>
<?php } ?><?php if($this->data['showjumplinks']) { ?>
- <div id="jump-to-nav"><?php $this->msg('jumpto') ?> <a
href="#column-one"><?php $this->msg('jumptonavigation') ?></a>, <a
href="#searchInput"><?php $this->msg('jumptosearch') ?></a></div>
+ <div id="jump-to-nav" class="mw-jump"><?php
$this->msg('jumpto') ?> <a href="#column-one"><?php
$this->msg('jumptonavigation') ?></a>, <a href="#searchInput"><?php
$this->msg('jumptosearch') ?></a></div>
<?php } ?>
<!-- start content -->
<?php $this->html('bodytext') ?>
Modified: trunk/phase3/skins/Vector.php
===================================================================
--- trunk/phase3/skins/Vector.php 2011-09-25 00:28:26 UTC (rev 98044)
+++ trunk/phase3/skins/Vector.php 2011-09-25 00:49:39 UTC (rev 98045)
@@ -158,7 +158,7 @@
<?php endif; ?>
<?php if ( $this->data['showjumplinks'] ): ?>
<!-- jumpto -->
- <div id="jump-to-nav">
+ <div id="jump-to-nav" class="mw-jump">
<?php $this->msg( 'jumpto' ) ?> <a
href="#mw-head"><?php $this->msg( 'jumptonavigation' ) ?></a>,
<a href="#p-search"><?php $this->msg(
'jumptosearch' ) ?></a>
</div>
Modified: trunk/phase3/skins/common/commonInterface.css
===================================================================
--- trunk/phase3/skins/common/commonInterface.css 2011-09-25 00:28:26 UTC
(rev 98044)
+++ trunk/phase3/skins/common/commonInterface.css 2011-09-25 00:49:39 UTC
(rev 98045)
@@ -46,7 +46,9 @@
display: none;
}
#jump-to-nav {
- display: none;
+ /* Negate #contentSub's margin and replicate it so that the jump to
links don't affect the spacing */
+ margin-top: -1.4em;
+ margin-bottom: 1.4em
}
#contentSub, #contentSub2 {
font-size: 84%;
Modified: trunk/phase3/skins/common/commonPrint.css
===================================================================
--- trunk/phase3/skins/common/commonPrint.css 2011-09-25 00:28:26 UTC (rev
98044)
+++ trunk/phase3/skins/common/commonPrint.css 2011-09-25 00:49:39 UTC (rev
98045)
@@ -114,6 +114,7 @@
.noprint,
div#jump-to-nav,
+.mw-jump,
div.top,
div#column-one,
#colophon,
Modified: trunk/phase3/skins/common/shared.css
===================================================================
--- trunk/phase3/skins/common/shared.css 2011-09-25 00:28:26 UTC (rev
98044)
+++ trunk/phase3/skins/common/shared.css 2011-09-25 00:49:39 UTC (rev
98045)
@@ -1006,3 +1006,11 @@
#mw-credits a {
unicode-bidi: embed;
}
+
+/* Accessibility */
+.mw-jump {
+ overflow: hidden;
+ height: 0;
+ zoom: 1; /* http://webaim.org/techniques/skipnav/#iequirk */
+}
+
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
