Skip to content
Permalink
Browse files

Add 'Go to content' link to default theme for better accessibility

  • Loading branch information
philwareham committed Feb 13, 2020
1 parent 256f1b4 commit 79c32bd89707bb44574d0a3b3d6fcc7ad78a91e2
@@ -1,11 +1,13 @@
<a class="skip-link" href="#main"><txp:text item="go_content" /></a>

<header class="site-header">
<h2><txp:link_to_home><txp:site_name /></txp:link_to_home></h2>
<txp:evaluate>
<h3><txp:site_slogan /></h3>
</txp:evaluate>
</header>

<nav class="site-navigation" aria-label="<txp:text item="site_nav" />" itemscope itemtype="https://schema.org/SiteNavigationElement">
<nav id="navigation" class="site-navigation" aria-label="<txp:text item="site_nav" />" itemscope itemtype="https://schema.org/SiteNavigationElement">
<div>
<txp:section_list default_title='<txp:text item="home" />' include_default wraptag="ul" break="">
<li<txp:if_section name='<txp:section />'> class="active"</txp:if_section>>
@@ -91,7 +91,7 @@
<div class="container">

<!-- Main content -->
<main aria-label="<txp:text item="main_content" />" itemscope itemtype="https://schema.org/Blog">
<main id="main" aria-label="<txp:text item="main_content" />" itemscope itemtype="https://schema.org/Blog">

<!-- is this the search result page? also omits the pagination links below (uses pagination format within search_display.txp instead) -->
<txp:if_search>
@@ -64,7 +64,7 @@
<div class="container">

<!-- Main content -->
<main aria-label="<txp:text item="main_content" />" itemscope itemtype="https://schema.org/Blog">
<main id="main" aria-label="<txp:text item="main_content" />" itemscope itemtype="https://schema.org/Blog">

<!-- is this the search result page? also omits the pagination links below (uses pagination format within search_display.txp instead) -->
<txp:if_search>
@@ -26,7 +26,7 @@
<div class="container">

<!-- Main content -->
<main aria-label="<txp:text item="main_content" />">
<main id="main" aria-label="<txp:text item="main_content" />">
<h1 class="error-status"><txp:error_status /></h1>
<p class="error-msg"><txp:error_message /></p>
</main>
@@ -1,3 +1,4 @@
@charset "UTF-8";
/* ==========================================================================
Styling and layout for all media
========================================================================== */
@@ -325,6 +326,34 @@ h6 a:active {
float: right;
}

/**
* Visually hide unfocussed/inactive ‘skip links’.
*
* Example HTML:
*
* <a class="skip-link">
*/
.skip-link {
position: absolute;
z-index: 2;
top: 1px;
left: 1px;
padding: 0.25em 0.5em;
transform: translateY(-5em);
transition: transform 0.25s ease-in-out;
background-color: white;
color: #333333;
font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.skip-link:focus, .skip-link:active {
transform: translateY(0);
}

[dir=rtl] .skip-link {
right: 1px;
left: auto;
}

/* Typography
========================================================================== */
/**
@@ -1530,7 +1559,8 @@ form,
#comments-form,
.comments h4 a:last-child,
.complementary-content,
.paginator {
.paginator,
.skip-link {
display: none;
}

0 comments on commit 79c32bd

Please sign in to comment.
You can’t perform that action at this time.