Skip to content

Commit 6577b22

Browse files
metageekyphette23
metageeky
authored and
phette23
committed
Multiple accessibility fixes:
- Add landmarks of main and header to all layouts - Adjust skip links to work with new landmarks - Improve color contrast on a few elements git commit -am
1 parent 6c5d0fc commit 6577b22

12 files changed

Lines changed: 78 additions & 29 deletions

File tree

‎_includes/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@
1919
<!--[if lt IE 8]>
2020
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
2121
<![endif]-->
22-
{% include nav.html %}
22+

‎_includes/nav.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
2-
<nav class="navbar navbar-expand-md navbar-dark" role="navigation">
1+
<nav class="navbar navbar-expand-md navbar-dark" role="navigation" aria-labelledby="mainnav-heading">
2+
<h2 class="sr-only" id="mainnav-heading">Site</h2>
33
<!-- <div class="container-fluid"> -->
44
<!-- Brand and toggle get grouped for better mobile display -->
55
<!-- <div class="navbar-header"> -->
6-
<a class="navbar-brand" aria-label="Code4Lib Home" href="{{ site.baseurl }}/"><img src="{{ "/assets/img/theme-images/c4l-logo.svg" | relative_url }}" alt="Code4Lib"></a>
6+
<a class="navbar-brand" aria-label="Code4Lib {{ site.data.conf.year }}" href="{{ site.baseurl }}/"><img src="{{ "/assets/img/theme-images/c4l-logo.svg" | relative_url }}" alt="Code4Lib"></a>
77
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation"> -->
88
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
99
<span class="sr-only">Toggle navigation</span>

‎_layouts/color-test.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{% include header.html %}
2-
{% include search_results.html %}
2+
<header role="banner">
3+
<a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
4+
{% include nav.html %}
5+
</header>
36

4-
<div class="CT-body" id="main">
5-
{{ content }}
6-
</div>
7+
<main class="CT-body" id="main">
8+
{{ content }}
9+
</main>
710

811
{% include footer.html %}

‎_layouts/day-menu.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{% include header.html %}
2-
{% include search_results.html %}
2+
<header role="banner">
3+
<a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
4+
{% include nav.html %}
5+
</header>
36

47
{% assign menu = site.data[page.menu] %}
5-
<div id="main">{% comment %} #main element needed for skip-menu link but we can't add it inside the loop {% endcomment %}</div>
8+
<main id="main">
69
{% for meal in menu %}
710
<section>
811
<div class="container">
@@ -21,5 +24,6 @@ <h1>{{ page.title }}</h1>
2124
</div>
2225
</section>
2326
{% endfor %}
27+
</main>
2428

2529
{% include footer.html %}

‎_layouts/day-schedule.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{% include header.html %}
2-
{% include search_results.html %}
2+
<header role="banner">
3+
<a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
4+
{% include nav.html %}
5+
</header>
36

4-
<div class="container" id="main">
7+
<main class="container" id="main">
58
<div class="row">
69
<div class="col-12">
710
<h1>{% assign day = page.day | slice: -1 %}
@@ -24,6 +27,6 @@ <h1>{% assign day = page.day | slice: -1 %}
2427
{% endif %}
2528
</div>
2629
</div>
27-
</div>
30+
</main>
2831

2932
{% include footer.html %}

‎_layouts/default.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{% include header.html %}
2-
{% include search_results.html %}
3-
<div id="main" class="content">
4-
{{ content }}
5-
</div>
2+
<header role="banner">
3+
<a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
4+
{% include nav.html %}
5+
</header>
6+
<main id="main" class="content">
7+
{{ content }}
8+
</main>
69
{% include footer.html %}

‎_layouts/presentation.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{% include header.html %}
2-
{% include search_results.html %}
2+
<header role="banner">
3+
<a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
4+
{% include nav.html %}
5+
</header>
36

47
{% if page.type == 'workshop' %}
58
{% assign page_date = page.date %}
@@ -17,7 +20,7 @@
1720
{% endif %}
1821

1922
<script src="{{ "/assets/js/placeholder.js" | relative_url }}"></script>
20-
<div class="container presentation" id="main">
23+
<main class="container presentation" id="main">
2124
<div class="row">
2225
<div class="col-12 col-sm-8 col-md-9">
2326

@@ -204,6 +207,6 @@ <h2>Location</h2>
204207
{% endif %}
205208
</div>
206209
</div>
207-
</div>
210+
</main>
208211

209212
{% include footer.html %}

‎_layouts/secondary-nav.html‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
{% include header.html %}
2+
<header role="banner">
3+
<a href="#subnav" class="sr-only sr-only-focusable">Skip site navigation</a>
4+
{% include nav.html %}
5+
</header>
26

3-
<section>
47
<div class="container-fluid">
58
<div class="row">
69
<div class="col-12 col-md-3 col-lg-2">
7-
<nav>
10+
<nav id="subnav" aria-labelledby="subnav-heading">
11+
<h2 class="sr-only" id="subnav-heading">{{ page.title }} Sub-Pages</h2>
12+
<a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
813
{% if page.nav == 'general-info' %}
914
<ul class="nav nav-pills nav-stacked secondarynav flex-md-column">
1015
{% else %}
@@ -33,12 +38,12 @@
3338
</ul>
3439
</nav>
3540
</div>
36-
<div id="main" class="col-12 col-md-9 col-lg-10">
41+
<main id="main" class="col-12 col-md-9 col-lg-10">
3742
{{ content }}
38-
</div>
43+
</main>
3944
</div>
4045
</div>
41-
</section>
46+
4247

4348
{% include footer.html %}
4449

‎assets/_scss/_a11y-fixes.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
/* make navigation toggle button meet contrast (turn off transparency) */
3+
.navbar-dark .navbar-toggler {
4+
color: rgba(255, 255, 255, 1);
5+
border-color: rgba(255, 255, 255, 1);
6+
}
7+
8+
.navbar-dark .navbar-toggler:focus {
9+
outline-offset: -4px;
10+
outline-style: solid;
11+
}
12+
13+
.navbar-dark .navbar-toggler-icon {
14+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
15+
}
16+
17+
/* more visibly distinct skip links */
18+
a.sr-only.sr-only-focusable:focus {
19+
position: absolute;
20+
z-index: 10;
21+
top: 8px;
22+
left: 8px;
23+
background: $accent;
24+
padding: 8px;
25+
border: solid 2px currentColor;
26+
font-weight: bold;
27+
}

‎assets/css/main.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,5 @@
2727
@import 'sponsors';
2828
@import 'color-test';
2929
@import 'forms-pages';
30-
@import 'lanyards';
30+
@import 'lanyards';
31+
@import 'a11y-fixes';

0 commit comments

Comments
 (0)