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)

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',
 		),
 	),

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' });
+		}
+	} );
+
+} );

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') ?>

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>

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%;

skins/common/commonPrint.css

@@ -114,6 +114,7 @@ body {
 
 .noprint,
 div#jump-to-nav,
+.mw-jump,
 div.top,
 div#column-one,
 #colophon,

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 */
+}
+