-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathcarousel.html
77 lines (77 loc) · 4.29 KB
/
carousel.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessible Carousel</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/carousel.css" />
</head>
<body>
<div class="container">
<div class="page-wrapper">
<h1>The Carousel</h1>
<p><a href="http://haltersweb.github.io/Accessibility/">View the library of solutions.</a></p>
<ul class="bullet singletons">
<li>The carousel is assigned an aria-describedby to inform the user that they are in a carousel.</li>
<li>Carousel Items are aria-hidden until they slide into view. Once in view focus is put on that item so that the content can be read.</li>
<li>Accessibly hidden text announces that you are in X of Y offers.</li>
<li>The lentils are leveraged as if they were content tabs.</li>
<li>Focus goes to the offer you requested by either engaging the arrows or the lentils.
</ul>
<p>This is a fake paragraph with a <a href="fake-landing-page.html">fake link</a>.</p>
<div class="carousel" tabindex="0" aria-describedby="carouselDescription">
<p id="carouselDescription" class="screen-reader-text">This is a carousel with four offers.</p>
<button type="button" class="carousel-arrow-left disabled" aria-disabled="true">
<span class="screen-reader-text">view previous offer</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" role="presentation" focusable="false" class="svg-collapsed">
<circle cx="25" cy="25" r="22" stroke="black" stroke-width="3" />
<path fill="#FFFFFF" d="M37,25L20.5,40c-1.2,1.1-3.1,1-4.2-0.2c-1.1-1.2-1-3.1,0.2-4.2L28,25L16.5,15c-1.2-1.1-1.4-3-0.3-4.2,c1.1-1.2,3-1.4,4.2-0.3L37,25z"/>
</svg>
</button>
<div class="carousel-frame">
<div class="carousel-items" data-carousel-item-shown="1" tabindex="-1">
<div class="carousel-item" data-carousel-item="1" tabindex="-1">
<h2>Offer Number One<span class="screen-reader-text"> of four</span></h2>
<p>Some fantastic text about offer one with a <a href="">call to action</a>.</p>
</div>
<div class="carousel-item" data-carousel-item="2" tabindex="-1">
<h2>Offer Number Two<span class="screen-reader-text"> of four</span></h2>
<p>Some fantastic text about offer two with no call to action.</p>
</div>
<div class="carousel-item" data-carousel-item="3" tabindex="-1">
<h2>Offer Number Three<span class="screen-reader-text"> of four</span></h2>
<p>Some fantastic text about offer three with a <a href="">call to action</a>.</p>
</div>
<div class="carousel-item" data-carousel-item="4" tabindex="-1">
<h2>Offer Number Four<span class="screen-reader-text"> of four</span></h2>
<p>Some fantastic text about offer four with ano call to action.</p>
</div>
</div>
</div>
<button type="button" class="carousel-arrow-right" aria-disabled="false">
<span class="screen-reader-text">view next offer</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" role="presentation" focusable="false" class="svg-collapsed">
<circle cx="25" cy="25" r="22" stroke="black" stroke-width="3" />
<path fill="#FFFFFF" d="M37,25L20.5,40c-1.2,1.1-3.1,1-4.2-0.2c-1.1-1.2-1-3.1,0.2-4.2L28,25L16.5,15c-1.2-1.1-1.4-3-0.3-4.2,c1.1-1.2,3-1.4,4.2-0.3L37,25z"/>
</svg>
</button>
<div class="lentils">
<button class="lentil enabled" type="button" data-carousel-item="1" aria-label="view offer one"></button>
<button class="lentil" type="button" data-carousel-item="2" aria-label="view offer two"></button>
<button class="lentil" type="button" data-carousel-item="3" aria-label="view offer three"></button>
<button class="lentil" type="button" data-carousel-item="4" aria-label="view offer four"></button>
</div>
</div>
<p>This is a fake paragraph with a <a href="#">fake link</a>.</p>
</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/carousel.js"></script>
</body>
</html>