Skip to content

Commit 9dcbaeb

Browse files
philwarehamphilwareham
committed
Add 'Go to content' link for better accessibility
1 parent 2f605aa commit 9dcbaeb

File tree

13 files changed

+80
-12
lines changed

13 files changed

+80
-12
lines changed

‎dist/four-point-eight/forms/misc/body_header.txp‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
<a class="skip-link" href="#main"><txp:text item="go_content" /></a>
2+
13
<header class="site-header">
24
<h2><txp:link_to_home><txp:site_name /></txp:link_to_home></h2>
35
<txp:evaluate>
46
<h3><txp:site_slogan /></h3>
57
</txp:evaluate>
68
</header>
79

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

‎dist/four-point-eight/pages/archive.txp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
<div class="container">
9292

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

9696
<!-- is this the search result page? also omits the pagination links below (uses pagination format within search_display.txp instead) -->
9797
<txp:if_search>

‎dist/four-point-eight/pages/default.txp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
<div class="container">
6565

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

6969
<!-- is this the search result page? also omits the pagination links below (uses pagination format within search_display.txp instead) -->
7070
<txp:if_search>

‎dist/four-point-eight/pages/error_default.txp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<div class="container">
2727

2828
<!-- Main content -->
29-
<main aria-label="<txp:text item="main_content" />">
29+
<main id="main" aria-label="<txp:text item="main_content" />">
3030
<h1 class="error-status"><txp:error_status /></h1>
3131
<p class="error-msg"><txp:error_message /></p>
3232
</main>

‎dist/four-point-eight/styles/default.css‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@charset "UTF-8";
12
/* ==========================================================================
23
Styling and layout for all media
34
========================================================================== */
@@ -325,6 +326,34 @@ h6 a:active {
325326
float: right;
326327
}
327328

329+
/**
330+
* Visually hide unfocussed/inactive ‘skip links’.
331+
*
332+
* Example HTML:
333+
*
334+
* <a class="skip-link">
335+
*/
336+
.skip-link {
337+
position: absolute;
338+
z-index: 2;
339+
top: 1px;
340+
left: 1px;
341+
padding: 0.25em 0.5em;
342+
transform: translateY(-5em);
343+
transition: transform 0.25s ease-in-out;
344+
background-color: white;
345+
color: #333333;
346+
font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
347+
}
348+
.skip-link:focus, .skip-link:active {
349+
transform: translateY(0);
350+
}
351+
352+
[dir=rtl] .skip-link {
353+
right: 1px;
354+
left: auto;
355+
}
356+
328357
/* Typography
329358
========================================================================== */
330359
/**
@@ -1530,7 +1559,8 @@ form,
15301559
#comments-form,
15311560
.comments h4 a:last-child,
15321561
.complementary-content,
1533-
.paginator {
1562+
.paginator,
1563+
.skip-link {
15341564
display: none;
15351565
}
15361566

‎src/dev-docs/mockup-rtl.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
99
</head>
1010
<body class="articles-page" itemscope itemtype="https://schema.org/WebPage">
11+
<a class="skip-link" href="#main">Go to content</a>
1112

1213
<header class="site-header">
1314
<h2>
@@ -40,7 +41,7 @@ <h3>My site slogan</h3>
4041

4142
<div class="wrapper">
4243
<div class="container">
43-
<main aria-label="Main content" itemscope itemtype="https://schema.org/Blog">
44+
<main id="main" aria-label="Main content" itemscope itemtype="https://schema.org/Blog">
4445

4546
<article class="article" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
4647
<h1 itemprop="headline">Welcome to your site</h1>

‎src/dev-docs/mockup.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
99
</head>
1010
<body class="articles-page" itemscope itemtype="https://schema.org/WebPage">
11+
<a class="skip-link" href="#main">Go to content</a>
1112

1213
<header class="site-header">
1314
<h2>
@@ -40,7 +41,7 @@ <h3>My site slogan</h3>
4041

4142
<div class="wrapper">
4243
<div class="container">
43-
<main aria-label="Main content" itemscope itemtype="https://schema.org/Blog">
44+
<main id="main" aria-label="Main content" itemscope itemtype="https://schema.org/Blog">
4445

4546
<article class="article" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
4647
<h1 itemprop="headline">Welcome to your site</h1>

‎src/scss/modules/_links.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,34 @@ h6 {
7474
float: right;
7575
}
7676
}
77+
78+
/**
79+
* Visually hide unfocussed/inactive ‘skip links’.
80+
*
81+
* Example HTML:
82+
*
83+
* <a class="skip-link">
84+
*/
85+
86+
.skip-link {
87+
position: absolute;
88+
z-index: 2;
89+
top: 1px;
90+
left: 1px;
91+
padding: 0.25em 0.5em;
92+
transform: translateY(-5em);
93+
transition: transform 0.25s ease-in-out;
94+
background-color: lighten($color-gradient-from, 8%);
95+
color: $color-text;
96+
font-family: $font-sans-serif;
97+
98+
&:focus,
99+
&:active {
100+
transform: translateY(0);
101+
}
102+
}
103+
104+
[dir="rtl"] .skip-link {
105+
right: 1px;
106+
left: auto;
107+
}

‎src/scss/modules/_print.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@ form,
6666
#comments-form,
6767
.comments h4 a:last-child,
6868
.complementary-content,
69-
.paginator {
69+
.paginator,
70+
.skip-link {
7071
display: none;
7172
}
7273

‎src/templates/forms/misc/body_header.txp‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
<a class="skip-link" href="#main"><txp:text item="go_content" /></a>
2+
13
<header class="site-header">
24
<h2><txp:link_to_home><txp:site_name /></txp:link_to_home></h2>
35
<txp:evaluate>
46
<h3><txp:site_slogan /></h3>
57
</txp:evaluate>
68
</header>
79

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

0 commit comments

Comments
 (0)