Skip to content

Commit 258d690

Browse files
pusewiczpusewicz
committed
Touch up accessibility
1 parent 9bc6453 commit 258d690

19 files changed

Lines changed: 143 additions & 15 deletions

‎_includes/_latest_news.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ <h2>Latest News</h2>
55
</div>
66
<div class="row">
77
<div class="col-md-12">
8-
<ul class="posts">
8+
<ul class="posts" role="list">
99
{% for post in site.posts %}
1010
<li>
1111
<p class="lead">

‎_includes/redesign_nav.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<a class="skip-link" href="#main-content">Skip to main content</a>
12
<nav class="site-nav" role="navigation" aria-label="Main navigation">
23
<div class="site-nav__inner">
34
<a href="/" class="site-nav__brand" aria-label="mruby home">

‎_layouts/default.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
{% include header.html %}
55
</head>
66
<body>
77

88
{% include navigation.html %}
99

10-
<div class="container">
10+
<main id="main-content" class="container">
1111

1212
<div class="row clearfix">
1313
<div class="col-md-12 column">
@@ -16,7 +16,7 @@
1616

1717
</div>
1818
</div>
19-
</div>
19+
</main>
2020

2121
{% include footer.html %}
2222

‎_layouts/post.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</head>
66
<body>
77
{% include redesign_nav.html %}
8-
<main>
8+
<main id="main-content">
99
<header class="page-header page-header--article">
1010
<div class="page-header__inner">
1111
{% assign first_cat = page.categories | first %}
@@ -53,6 +53,11 @@ <h1 class="page-header__heading">{{ page.title }}</h1>
5353
}
5454

5555
// TOC generation
56+
// Add role="list" to article lists (VoiceOver Safari removes list semantics with list-style:none)
57+
document.querySelectorAll('.article-content ul, .article-content ol').forEach(function (el) {
58+
el.setAttribute('role', 'list');
59+
});
60+
5661
var content = document.querySelector('.article-content');
5762
var tocNav = document.getElementById('article-toc-nav');
5863
var tocAside = document.getElementById('article-toc');
@@ -66,6 +71,7 @@ <h1 class="page-header__heading">{{ page.title }}</h1>
6671

6772
var list = document.createElement('ul');
6873
list.className = 'article-toc__list';
74+
list.setAttribute('role', 'list');
6975
headings.forEach(function (h) {
7076
if (!h.id) return;
7177
var li = document.createElement('li');

‎_layouts/redesign.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</head>
66
<body>
77
{% include redesign_nav.html %}
8-
<main>
8+
<main id="main-content">
99
{{ content }}
1010
</main>
1111
{% include redesign_footer.html %}

‎_sass/_article.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,13 +132,26 @@
132132

133133
.article-content a {
134134
color: var(--color-red);
135+
text-decoration: underline;
136+
text-decoration-color: currentColor;
137+
text-underline-offset: 2px;
135138
transition: opacity 0.15s ease;
136139
}
137140

138141
.article-content a:hover {
139142
opacity: 0.75;
140143
}
141144

145+
.article-content a:focus-visible {
146+
outline: 2px solid var(--color-red);
147+
outline-offset: 2px;
148+
}
149+
150+
.article-toc__link:focus-visible {
151+
outline: 2px solid var(--color-red);
152+
outline-offset: 2px;
153+
}
154+
142155
.article-content ul,
143156
.article-content ol {
144157
list-style: none;

‎_sass/_buttons.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,8 @@
3838
background: var(--color-hover-overlay);
3939
color: var(--color-black);
4040
}
41+
42+
.btn:focus-visible {
43+
outline: 2px solid var(--color-red);
44+
outline-offset: 2px;
45+
}

‎_sass/_documentation.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,12 @@
128128
background: var(--color-bg-warm);
129129
}
130130

131+
.docs-article-row:focus-visible {
132+
outline: 2px solid var(--color-red);
133+
outline-offset: -2px;
134+
background: var(--color-bg-warm);
135+
}
136+
131137
.docs-article-row__info {
132138
display: flex;
133139
flex-direction: column;
@@ -177,6 +183,16 @@
177183
opacity: 0.88;
178184
}
179185

186+
.docs-component-card:focus-visible {
187+
outline: 2px solid var(--color-red);
188+
outline-offset: -2px;
189+
}
190+
191+
.docs-source-note__link:focus-visible {
192+
outline: 2px solid var(--color-red);
193+
outline-offset: 2px;
194+
}
195+
180196
.docs-component-card--warm {
181197
background: var(--color-bg-warm);
182198
}

‎_sass/_downloads.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,11 @@
121121
color: var(--color-white);
122122
}
123123

124+
.download-btn:focus-visible {
125+
outline: 2px solid var(--color-red);
126+
outline-offset: 2px;
127+
}
128+
124129
.download-more {
125130
display: flex;
126131
align-items: center;
@@ -279,6 +284,11 @@
279284
opacity: 0.75;
280285
}
281286

287+
.release-row__link:focus-visible {
288+
outline: 2px solid var(--color-red);
289+
outline-offset: 2px;
290+
}
291+
282292
@media (max-width: 1024px) {
283293
.release-card {
284294
gap: 48px;

‎_sass/_footer.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@
4545
color: var(--color-footer-muted-hover);
4646
}
4747

48+
.site-footer__attribution a:focus-visible,
49+
.site-footer__feeds a:focus-visible {
50+
outline: 2px solid var(--color-red);
51+
outline-offset: 2px;
52+
}
53+
4854
@media (max-width: 768px) {
4955
.site-footer__inner {
5056
flex-direction: column;

0 commit comments

Comments
 (0)