Commit 94ed2ae0 authored by Jono Mingard's avatar Jono Mingard
Browse files

Add "Skip to main content" link (Bug #1259741)



Added a hidden link to the beginning of all pages which becomes visible on
focus and allows keyboard users to bypass the navigation and move focus to
the main content of the page.

Change-Id: I70b1f7a352904d3a350b848ab3779a2136de4e76
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent 584de240
......@@ -783,6 +783,15 @@ function is_FF() {
return false;
}
// Fix for Chrome and IE, which don't change focus when going to a fragment identifier link
// Manually focuses the main content when the "skip to main content" link is activated
jQuery(document).ready(function() {
$j('a.skiplink').click(function() {
var id = $j(this).attr('href');
$j(id).attr('tabIndex', -1).focus();
});
});
/**
* Allow the js / no-js toggle on all pages for theme styling
*/
......
......@@ -554,6 +554,7 @@ $string['processing'] = 'Processing';
$string['unknownerror'] = 'An unknown error occurred (0x20f91a0)';
// menu
$string['skipmenu'] = 'Skip to main content';
$string['dropdownmenu'] = 'menu';
$string['overview'] = 'Overview';
$string['home'] = 'Home';
......
......@@ -6,6 +6,7 @@
<!--[if (gt IE 9)|!(IE)]><!--><html{if $LANGDIRECTION == 'rtl'} dir="rtl"{/if}><!--<![endif]-->
{include file="header/head.tpl"}
<body class="no-js">
<div class="center"><a class="skiplink" href="#mainmiddle">{str tag=skipmenu}</a></div>
{if $ADDITIONALHTMLTOPOFBODY}{$ADDITIONALHTMLTOPOFBODY|safe}{/if}
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}<div class="sitemessages">{/if}
{if $USERMASQUERADING}<div class="sitemessage"><img src="{theme_url filename='images/failure.png'}" alt="">{$masqueradedetails} {$becomeyouagain|safe}</div>{/if}
......
......@@ -6,6 +6,7 @@
<!--[if (gt IE 9)|!(IE)]><!--> <html{if $LANGDIRECTION == 'rtl'} dir="rtl"{/if}><!--<![endif]-->
{include file="header/head.tpl"}
<body id="micro" class="no-js">
<div class="center"><a class="skiplink" href="#mainmiddle">{str tag=skipmenu}</a></div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}<div class="sitemessages">{/if}
{if $USERMASQUERADING}<div class="sitemessage"><img src="{theme_url filename='images/failure.png'}" alt="">{$masqueradedetails} {$becomeyouagain|safe}</div>{/if}
{if !$PRODUCTIONMODE}<div class="sitemessage center">{str tag=notproductionsite section=error}</div>{/if}
......
......@@ -7,6 +7,7 @@
<html{if $LANGDIRECTION == 'rtl'} dir="rtl"{/if}>
{include file="header/head.tpl"}
<body id="micro" class="no-js">
<div class="center"><a class="skiplink" href="#viewheader">{str tag=skipmenu}</a></div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}<div class="sitemessages">{/if}
{if $USERMASQUERADING}<div class="sitemessage"><img src="{theme_url filename='images/failure.png'}" alt="">{$masqueradedetails} {$becomeyouagain|safe}</div>{/if}
{if !$PRODUCTIONMODE}<div class="sitemessage center">{str tag=notproductionsite section=error}</div>{/if}
......@@ -49,7 +50,7 @@
</div>
{/if}
</div>
<div class="viewheader">
<div id="viewheader" class="viewheader">
{if $collection}
<div id="collection"><h1 class="collection-title">{$microheadertitle|safe}<span class="rd-coltab"></span></h1>{include file=collectionnav.tpl}<div class="cb"></div></div>
......
......@@ -33,6 +33,7 @@ button {
font-family: Arial, "Nimbus Sans L", Helvetica, sans-serif;
}
#container,
.skiplink,
.sitemessage,
#switchwrap { /* Use a 12px base font size with a 16px line height */
font-size: 0.75em; /* 16px x .75 = 12px */
......@@ -1304,6 +1305,20 @@ div.rel {
min-height: 0; /* IE layout hack */
}
/******************** Header ********************/
/* skip to content link */
.skiplink {
background-color: #f3f7ec;
display: block;
padding: 5px 10px;
position: absolute;
top: -999px;
left: 47%;
-webkit-box-shadow: 0px 0px 5px 0px #333333;
box-shadow: 0px 0px 5px 0px #333333;
}
.skiplink:focus {
top: 0;
}
/* top bar / site message */
.sitemessage {
background-color: #FEE7E7;
......
......@@ -6,6 +6,7 @@
<!--[if (gt IE 9)|!(IE)]><!--><html{if $LANGDIRECTION == 'rtl'} dir="rtl"{/if}><!--<![endif]-->
{include file="header/head.tpl"}
<body class="no-js">
<div class="center"><a class="skiplink" href="#mainmiddle">{str tag=skipmenu}</a></div>
{if $ADDITIONALHTMLTOPOFBODY}{$ADDITIONALHTMLTOPOFBODY|safe}{/if}
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}<div class="sitemessages">{/if}
{if $USERMASQUERADING}<div class="sitemessage"><img src="{theme_url filename='images/failure.png'}" alt="">{$masqueradedetails} {$becomeyouagain|safe}</div>{/if}
......
......@@ -6,6 +6,7 @@
<!--[if (gt IE 9)|!(IE)]><!--><html{if $LANGDIRECTION == 'rtl'} dir="rtl"{/if}><!--<![endif]-->
{include file="header/head.tpl"}
<body id="micro" class="no-js">
<div class="center"><a class="skiplink" href="#mainmiddle">{str tag=skipmenu}</a></div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}<div class="sitemessages">{/if}
{if $USERMASQUERADING}<div class="sitemessage"><img src="{theme_url filename='images/failure.png'}" alt="">{$masqueradedetails} {$becomeyouagain|safe}</div>{/if}
{if !$PRODUCTIONMODE}<div class="sitemessage center">{str tag=notproductionsite section=error}</div>{/if}
......
......@@ -7,6 +7,7 @@
<html{if $LANGDIRECTION == 'rtl'} dir="rtl"{/if}>
{include file="header/head.tpl"}
<body id="micro">
<div class="center"><a class="skiplink" href="#viewheader">{str tag=skipmenu}</a></div>
{if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}<div class="sitemessages">{/if}
{if $USERMASQUERADING}<div class="sitemessage"><img src="{theme_url filename='images/failure.png'}" alt="">{$masqueradedetails} {$becomeyouagain|safe}</div>{/if}
{if !$PRODUCTIONMODE}<div class="sitemessage center">{str tag=notproductionsite section=error}</div>{/if}
......@@ -50,7 +51,7 @@
</div>
{/if}
</div>
<div class="viewheader">
<div id="viewheader" class="viewheader">
{if $collection}
<div id="collection"><h1 class="collection-title">{$microheadertitle|safe}</h1>{include file=collectionnav.tpl}</div>
{else}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment