-
Notifications
You must be signed in to change notification settings - Fork 28
Expand file tree
/
Copy pathtab-like-navigation.html
More file actions
78 lines (78 loc) · 6.8 KB
/
tab-like-navigation.html
File metadata and controls
78 lines (78 loc) · 6.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tab-like Page Navigation</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/tab-menu.css" />
</head>
<body>
<div class="container">
<div class="page-wrapper">
<h1>Tab-like Page Navigation—Two Versions</h1>
<p><a href="http://haltersweb.github.io/Accessibility/">View the library of solutions.</a></p>
<p>These tab-like navigation links are semantically in-page links and do not use an ARIA model. (<a href="#whyNotAria">See "Why not use ARIA" for more info.</a>)</p>
<p><em>Notice that after navigating to the requested in-page content, if you press the tab key focus goes to the first actionable element found in the DOM after the linked container's open tag.</em></p>
<p>This is important because engaging an in-page link should <strong>move focus to the corresponding container requested</strong>.</p>
<p>Unfortunately, this can be problematic in certain browsers. Therefore, by assigning <strong>tabindex="-1"</strong> to the target container, the container now accepts focus when the in-page tab link is engaged.</p>
<p>These tab-like navigation links can either:</p>
<ul class="bullet singletons">
<li>Reveal a single content panel at a time.</li>
<li>Show all content and scroll to the content requested.</li>
</ul>
<p>Use the buttons below to see each version. The js does not change.</p>
<div class="toggle-group">
<button type="button" id="allContentView" class="toggle" aria-disabled="false">Full content version</button>
<button type="button" id="singleContainerView" class="toggle" aria-disabled="true">Single content panel version</button>
</div>
<div class="tabbed-content single-container-view">
<ul data-widget="tab-menu">
<li class="tab-menu-item"><a href="#one" class="tab-menu-link current">Section One</a></li>
<li class="tab-menu-item"><a href="#two" class="tab-menu-link">Section Two</a></li>
<li class="tab-menu-item"><a href="#three" class="tab-menu-link">Section Three</a></li>
</ul>
<div id="one" class="content-panel current" tabindex="-1">
<h2>Welcome to Section One</h2>
<p><button type="button">Fake button</button></p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
</div>
<div id="two" class="content-panel" tabindex="-1">
<h2>Welcome to Section Two</h2>
<p><button type="button">Fake button</button></p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
</div>
<div id="three" class="content-panel" tabindex="-1">
<h2>Welcome to Section Three</h2>
<p><button type="button">Fake button</button></p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus amet veritatis vero incidunt vel itaque assumenda, nesciunt hic eius sequi sit tempore? Nam temporibus reprehenderit aliquid iure at aliquam veritatis.</p>
</div>
</div>
<div id="whyNotAria" tabindex="-1">
<h2>Why not use ARIA?</h2>
<p>We don't use ARIA in this method since this tab-like navigation is simply a list of in-page links configured horizontally rather than vertically. It doesn't add much user value to the page.</p>
<p>The use of tab-like navigation most often serves marketers (above-the-fold content) and developers (cuts down on the need for session variables, heavy server calls, etc.).</p>
<p>ARIA tab solutions are best used for creating web-based tools that assist the user in navigation and content curation. The ARIA methodology for tabs sprang out of the need for a web-based solution for the type of tab interface you find when, say, configuring PC settings.</p>
<p>ARIA was never meant to be used for simple website navigation.</p>
<p>Therefore, when creating simple website navigation ARIA should not be used. But when creating complex widgets such as web-mail interfaces an ARIA tab model would be used.</p>
</div>
</div>
<div class="overlay"></div>
<div class="block-screen"></div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/namespacing.js"></script>
<script type="text/javascript" src="js/accessibility-helpers.js"></script>
<script type="text/javascript" src="js/tab-menu.js"></script>
</body>
</html>