Skip to content

Commit f7e0523

Browse files
fstrrpatrickhlaukedependabot[bot]kfranqueiro
authored
Standardize working examples (#4980)
Closes #4978 1. All pages have HTML5 `doctype` 2. Added `viewport` tag with the same attribute values as the WCAG 2 site 3. Added CSS body tag styling so the font is the same on each page 4. Standardized the `charset` tag 5. Removed old attrs on the `html` element 6. Removed unneeded attrs on `script` and `style` tags 7. Fixed a couple of reflow bugs 8. Fixed an issue with an `input` not having an accessible name 9. Removed some deprecated HTML attrs on some `table` elements --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Kenneth G. Franqueiro <kfranqueiro@users.noreply.github.com>
1 parent 6cb5a43 commit f7e0523

File tree

86 files changed

+709
-431
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+709
-431
lines changed

‎working-examples/aria-alert-identify-errors/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Using ARIA live regions or role=alert to identify errors</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<title>Using ARIA live regions or role=alert to identify errors | WCAG 2</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<style>
88
body{
99
background:#fff;
1010
color:#000;
11-
font-family:system-ui;
11+
font:100% / 1.5 sans-serif;
1212
}
1313

1414
input{

‎working-examples/aria-alertdialog-identify-errors/index.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Using aria-alertdialog to Identify Errors</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Using aria-alertdialog to Identify Errors | WCAG 2</title>
67
<script src="http://code.jquery.com/jquery.js"></script>
78
<script>
89
$(document).ready(function(e) {
@@ -33,7 +34,12 @@
3334

3435
});
3536
</script>
36-
<style type="text/css">
37+
<style>
38+
body{
39+
background:#fff;
40+
color:#000;
41+
font:100% / 1.5 sans-serif;
42+
}
3743
#modalOverlay {
3844
width:100%;
3945
height:100%;
@@ -65,7 +71,7 @@
6571
<main>
6672
<h1>Using aria-alertdialog to Identify Errors</h1>
6773
<p>This example shows how role=&quot;alertdialog&quot; can be used to notify someone they have entered invalid information.</p>
68-
<button id="trigger-alertdialog">Trigger Alertdialog</button>
74+
<button id="trigger-alertdialog" type="button">Trigger Alertdialog</button>
6975
</main>
7076
</body>
7177
</html>

‎working-examples/aria-current/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Using aria-current to identify the current item in a set examples</title>
5+
<title>Using aria-current to identify the current item in a set examples | WCAG 2</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
67
<style>
78

89
:root {
@@ -24,10 +25,10 @@
2425
box-sizing: inherit;
2526
}
2627

27-
body {
28+
body {
2829
background: var(--white);
2930
color: var(--black);
30-
font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
31+
font: 1rem/1.5 sans-serif;
3132
}
3233

3334
[hidden]{

‎working-examples/aria-grouping-multipart-fields-ssn/index.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<title>Marking up multi-part groups of form fields</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Marking up multi-part groups of form fields | WCAG 2</title>
77
<style>
8-
:root {
9-
box-sizing: border-box;
10-
}
11-
12-
body{
13-
font:100% / 1.5 system-ui;
14-
}
8+
:root {
9+
box-sizing: border-box;
10+
}
11+
12+
body{
13+
background:#fff;
14+
color:#000;
15+
font:100% / 1.5 sans-serif;
16+
}
1517

1618
#ssn1{
1719
margin-block-end: 0.5rem;

‎working-examples/aria-grouping-related-fields/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Using grouping roles to identify related form controls</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4+
<meta charset="UTF-8">
5+
<title>Using grouping roles to identify related form controls | WCAG 2</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<style>
88

99
:root{
1010
box-sizing: border-box;
1111
}
1212

1313
body{
14-
font:100% / 1.5 system-ui;
14+
background:#fff;
15+
color:#000;
16+
font:100% / 1.5 sans-serif;
1517
}
1618

1719
div[role=group], div[role=radiogroup] {

‎working-examples/aria-icon-font-img-role/index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Semantically identifying a font icon with role="img" examples</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Semantically identifying a font icon with role="img" examples | WCAG 2</title>
67
<style>
8+
body{
9+
background:#fff;
10+
color:#000;
11+
font:100% / 1.5 sans-serif;
12+
margin: 2rem 2rem 4rem 2rem;
13+
}
714

815
/* Icon Fonts Styling */
916

10-
body {
11-
background-color: #fafafc;
12-
font-family: "Times New Roman", Times, serif;
13-
margin: 2rem 2rem 4rem 2rem;
14-
}
15-
1617
@font-face {
1718
font-family: 'IconFontRoleImg';
1819
src: url('fonts/icon-font-role-img.eot?i66rw8');

‎working-examples/aria-invalid-data-format/index.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
<!DOCTYPE html>
2-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2+
<html lang="en">
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5-
<title>Forms: Using aria-invalid </title>
6-
<style type="text/css">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Forms: Using aria-invalid | WCAG 2</title>
7+
<style>
8+
body{
9+
background:#fff;
10+
color:#000;
11+
font:100% / 1.5 sans-serif;
12+
}
713
div.control label {
814
margin: 0;
915
padding: 0;
@@ -35,7 +41,7 @@
3541
}
3642
</style>
3743
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
38-
<script type="text/JavaScript" src="valcheck.js"></script>
44+
<script src="valcheck.js"></script>
3945
</head>
4046
<body>
4147
<h2>Forms: Using aria-invalid to identify failed fields </h2>

‎working-examples/aria-invalid-required-fields/index.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
<!DOCTYPE HTML>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head> <title>Input Error Notification with aria-live=assertive and aria-invalid using jQuery</title>
4-
<meta charset="utf-8">
3+
<head> <title>Input Error Notification with aria-live=assertive and aria-invalid using jQuery | WCAG 2</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
67
<script>
78
$(document).ready(function(e) {
@@ -32,7 +33,12 @@
3233
});
3334
});
3435
</script>
35-
<style type="text/css">
36+
<style>
37+
body{
38+
background:#fff;
39+
color:#000;
40+
font:100% / 1.5 sans-serif;
41+
}
3642
label.failed {
3743
border: red thin solid;
3844
}

‎working-examples/aria-label-accessible-name-dialog/index.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22
<html lang="en">
33

44
<head>
5-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6-
<title>aria-label Example: close button</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>aria-label Example: close button | WCAG 2</title>
78

89
<style>
9-
body {
10-
font-family: sans-serif;
10+
body{
11+
background:#fff;
12+
color:#000;
13+
font:100% / 1.5 sans-serif;
1114
}
1215

1316
button {

‎working-examples/aria-labelledby-description-complex-graphic/index.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset=utf-8>
5-
<title>ARIA10 Example 1</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>ARIA10 Example 1 | WCAG 2</title>
7+
<style>
8+
body{
9+
background:#fff;
10+
color:#000;
11+
font:100% / 1.5 sans-serif;
12+
}
13+
</style>
614
</head>
715

816
<body>

0 commit comments

Comments
 (0)