-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (59 loc) · 3.4 KB
/
index.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="Accessible tabs ui test.">
<title>tab-test</title>
<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
<div class="tabs" id="tabs">
<ul class="tabs_list" role="tablist">
<li role="presentation"><a href="#section1" id="tab1" class="tab" role="tab" tabindex="0" aria-controls="section1" aria-selected="true">Home</a></li>
<li role="presentation"><a href="#section2" id="tab2" class="tab" role="tab" tabindex="-1" aria-controls="section2">About</a></li>
<li role="presentation"><a href="#section3" id="tab3" class="tab" role="tab" tabindex="-1" aria-controls="section3">Contact</a></li>
<li role="presentation"><a href="#section4" id="tab4" class="tab" role="tab" tabindex="-1" aria-controls="section4">Section 4</a></li>
</ul>
<div class="content">
<div id="section1" class="content__panel" aria-labelledby="tab1" role="tabpanel">
<h3 class="content__title">Home</h3>
<p>タブ UI を実装してみました。<br>要件は下記</p>
<ul>
<li>not レスポンシブ</li>
<li>Internet Explorer: 9+</li>
<li>WAI-ARIA 対応で、キーボード操作が可能であること</li>
<li>PostCSS</li>
</ul>
<p>なんとなく既存プロジェクトに導入できるような形にしてみたくて、割と現実的そうなブラウザ対応を取ることにしました。</p>
<p>WAI-ARIA は機運。PC キーバインド設定するにあたっての JavaScript は Babel で実装できる環境まで作ったものの、結局 jQuery でササッと☺</p>
<p>PostCSS も機運。使ったプラグインはプリプロセスに postcss-nested と postcss-custom-properties と postcss-calc、ポストプロセスに autoprefixer と cssnano なのです。</p>
<p>→ 2016.09.08 追記：ちょっと込み入ってきたので続きは<a href="//hrfmmymt.tumblr.com/post/150112369172/tab-ui-a11y" target="_blank">ブログ</a>で。</p>
</div><!-- [/section1] -->
<div id="section2" class="content__panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
<h3 class="content__title">About</h3>
<div class="about" itemscope>
<img itemprop="image" alt="私が hrfmmymt だ" src="//pbs.twimg.com/profile_images/672293869120163840/7q4wxHvu.jpg" width="200">
<div class="about__description">
<p itemprop="name">Name : hrfmmymt</p>
<p itemprop="age">Age : 32</p>
<p itemprop="gender">Gender : Male</p>
</div>
</div>
</div><!-- [/section2] -->
<div id="section3" class="content__panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
<h3 class="content__title">Contact</h3>
<a href="//hrfmmymt.github.io/">hrfmmymt.github.io</a>
</div><!-- [/section3] -->
<div id="section4" class="content__panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true">
<h3 class="content__title">Tab4</h3>
<p>余ったアアアアアアア</p>
</div><!-- [/section4] -->
</div><!-- [/content] -->
</div><!-- [/tabs] -->
<footer>
<p>© 2016 <a href="//hrfmmymt.github.io/">hrfmmymt</a></p>
</footer>
<script src="dist/js/jquery.min.js"></script>
<script src="dist/js/script.js"></script>
</body>
</html>