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)

diff --git a/resources/Resources.php b/resources/Resources.php
index 1d0a5a4..c6ffee8 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -158,6 +158,9 @@ return array(
        '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 @@ return array(
                        'jquery.checkboxShiftClick',
                        'jquery.makeCollapsible',
                        'jquery.placeholder',
+                       'jquery.mw-jump',
                        'mediawiki.util',
                ),
        ),

diff --git a/resources/jquery/jquery.mw-jump.js b/resources/jquery/jquery.mw-jump.js
new file mode 100644 (file)
index 0000000..36b6690
--- /dev/null
+++ b/resources/jquery/jquery.mw-jump.js
@@ -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' });
+               }
+       } );
+
+} );

diff --git a/skins/MonoBook.php b/skins/MonoBook.php
index 1e7988c..bd8a525 100644 (file)
--- a/skins/MonoBook.php
+++ b/skins/MonoBook.php
@@ -80,7 +80,7 @@ class MonoBookTemplate extends BaseTemplate {
 <?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') ?>

diff --git a/skins/Vector.php b/skins/Vector.php
index 9b09ca3..f0b14eb 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -158,7 +158,7 @@ class VectorTemplate extends BaseTemplate {
                                <?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>

diff --git a/skins/common/commonInterface.css b/skins/common/commonInterface.css
index 8dde5d2..aedb471 100644 (file)
--- a/skins/common/commonInterface.css
+++ b/skins/common/commonInterface.css
@@ -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%;

diff --git a/skins/common/commonPrint.css b/skins/common/commonPrint.css
index 4cad47b..014788f 100644 (file)
--- a/skins/common/commonPrint.css
+++ b/skins/common/commonPrint.css
@@ -114,6 +114,7 @@ body {
 
 .noprint,
 div#jump-to-nav,
+.mw-jump,
 div.top,
 div#column-one,
 #colophon,

diff --git a/skins/common/shared.css b/skins/common/shared.css
index f19a127..f80f8ad 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -1006,3 +1006,11 @@ table.floatleft {
 #mw-credits a {
        unicode-bidi: embed;
 }
+
+/* Accessibility */
+.mw-jump {
+       overflow: hidden;
+       height: 0;
+       zoom: 1; /* http://webaim.org/techniques/skipnav/#iequirk */
+}
+