- 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)
'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',
'jquery.checkboxShiftClick',
'jquery.makeCollapsible',
'jquery.placeholder',
+ 'jquery.mw-jump',
'mediawiki.util',
),
),
--- /dev/null
+/**
+ * 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' });
+ }
+ } );
+
+} );
<?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') ?>
<?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>
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%;
.noprint,
div#jump-to-nav,
+.mw-jump,
div.top,
div#column-one,
#colophon,
#mw-credits a {
unicode-bidi: embed;
}
+
+/* Accessibility */
+.mw-jump {
+ overflow: hidden;
+ height: 0;
+ zoom: 1; /* http://webaim.org/techniques/skipnav/#iequirk */
+}
+