-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.php
More file actions
401 lines (356 loc) · 24 KB
/
index.php
File metadata and controls
401 lines (356 loc) · 24 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<?php
require(__dir__ . '/system/init.php');
$test_pattern_str = \Komarushi\Main::generateTestPatternCode();
\Komarushi\Main::setTestPatternCode(\Kontiki\Input::post('test_pattern_code', ''));
?><!DOCTYPE html>
<html lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DHXC51JFPG"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DHXC51JFPG');
</script>
<!-- Google analytics 3 -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2627567-53', 'auto');
ga('send', 'pageview');
</script>
<meta charset="utf-8">
<title>駒瑠市〜アクセシビリティ上の問題の体験サイト〜</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<!-- js -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
<!-- CSS -->
<link rel="preconnect" href="//fonts.gstatic.com">
<link href="//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/layout.css?v=0" media="all">
<?php
$share_url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/';
?>
<!-- OGP -->
<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="駒瑠市〜アクセシビリティ上の問題の体験サイト〜" />
<meta property="og:description" content="アクセシビリティ上の問題を意図的に仕込んだサイトを生成します" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $share_url ?>" />
<meta property="og:site_name" content="駒瑠市〜アクセシビリティ上の問題の体験サイト〜" />
<meta property="og:image" content="<?php echo $share_url ?>images/ogimage.png" />
<meta name="twitter:card" content="summary" />
</head>
<body>
<div class="header">
<div class="wrapper">
<h1>
<ruby>駒瑠市<rp>（</rp><rt>こまるし<span lang="en" translate="no">Komaru City</span></rt><rp>）</rp></ruby>
<span class="sub">アクセシビリティ上の問題の体験サイト</span>
</h1>
<img src="images/site_image.png" alt="体験サイトのイメージ画像" width="600" height="333">
</div>
</div>
<div class="wrapper">
<ul class="list summary">
<li class="accessibility">アクセシビリティ上の問題を仕込んだサイトを生成します</li>
<li class="assignment">勉強の教材、業務の資料としてお使いいただけます</li>
<li class="free">用途にかかわらず無料でお使いいただけます</li>
</ul>
</div>
<section id="setting">
<div class="wrapper">
<h2 id="config">障壁（バリア）の設定</h2>
<section id="setting_preset">
<h3>プリセット版</h3>
<p class="ac">問題をあらかじめ設定（プリセット）した駒瑠市サイトです。カスタマイズ版にのみ存在する障壁もあります。</p>
<form id="selectWcag4preset">
<fieldset>
<legend>プリセット版で使うWCAGのバージョンを選択してください</legend>
<ul class="wcag-version-list">
<li><input type="radio" id="preset_wcag20" name="wcagver" value="20" checked><label for="preset_wcag20">WCAG 2.0</label></li>
<li><input type="radio" id="preset_wcag21" name="wcagver" value="21"><label for="preset_wcag21">WCAG 2.1</label></li>
<li><input type="radio" id="preset_wcag22" name="wcagver" value="22"><label for="preset_wcag22">WCAG 2.2</label></li>
</ul>
</fieldset>
</form>
<?php
$presets = \Kontiki\Util::s(\Komarushi\Main::$message_presets);
$preset_html = '';
$preset_html .= '<ul id="preset" class="list">';
foreach ($presets as $k => $v) :
if ($k[0] == '_') {
continue;
}
if (strpos($k, 'story') !== false) {
continue;
}
$preset_html .= '<li><a href="practice/?preset=' . \Kontiki\Util::s($k) . '&wcagver=22">' . $v[0] . '</a><p>' . $v[1] . '</p></li>';
endforeach;
$preset_html .= '</ul>';
echo $preset_html;
?>
<script>
const selectWcag4preset = document.getElementById('selectWcag4preset');
const presetLinks = document.querySelectorAll('#preset a');
selectWcag4preset.addEventListener('change', function(event) {
const selectedValue = document.querySelector('input[name="wcagver"]:checked').value;
presetLinks.forEach(link => {
link.href = link.href.slice(0, -2) + selectedValue;
});
});
</script>
</section>
<section id="setting_customize">
<h3>カスタマイズ版</h3>
<p class="ac">パターンコードからサイトを生成します</p>
<form id="selectWcag4customize">
<fieldset>
<legend>カスタマイズ版で使うWCAGのバージョンを選択してください</legend>
<ul class="wcag-version-list">
<li><input type="radio" id="customize_wcag20" name="wcagver" value="20"><label for="customize_wcag20">WCAG 2.0</label></li>
<li><input type="radio" id="customize_wcag21" name="wcagver" value="21"><label for="customize_wcag21">WCAG 2.1</label></li>
<li><input type="radio" id="customize_wcag22" name="wcagver" value="22" checked><label for="customize_wcag22">WCAG 2.2</label></li>
</ul>
</fieldset>
</form>
<script>
(function() {
const selectWcag4customize = document.getElementById('selectWcag4customize');
function toggleCriteriaByWcag() {
const criterionFieldsets = document.querySelectorAll('#individual_set fieldset[data-required-wcag]');
const selected = selectWcag4customize.querySelector('input[name="wcagver"]:checked');
const selectedVersion = selected ? parseInt(selected.value, 10) : 22;
const hiddenWcagver = document.getElementById('wcagver4pattern');
const randomCodeWcagLabel = document.getElementById('random_code_wcag_label');
if (hiddenWcagver) {
hiddenWcagver.value = selectedVersion;
}
if (randomCodeWcagLabel) {
randomCodeWcagLabel.textContent = '（WCAG ' + (selectedVersion / 10).toFixed(1) + '）';
}
criterionFieldsets.forEach((fieldset) => {
const requiredVersion = parseInt(fieldset.dataset.requiredWcag, 10) || 20;
const disabled = selectedVersion < requiredVersion;
const radios = fieldset.querySelectorAll('input[type="radio"]');
const legend = fieldset.querySelector('legend');
radios.forEach((radio) => {
radio.disabled = disabled;
});
if (legend) {
if (!legend.dataset.baseLabel) {
legend.dataset.baseLabel = legend.textContent;
}
legend.textContent = disabled ?
legend.dataset.baseLabel + '（対象外）' :
legend.dataset.baseLabel;
}
fieldset.style.borderColor = disabled ? '#de1300' : '';
if (!disabled && !fieldset.querySelector('input[type="radio"]:checked') && radios.length > 0) {
radios[0].checked = true;
}
});
}
selectWcag4customize.addEventListener('change', toggleCriteriaByWcag);
toggleCriteriaByWcag();
})();
</script>
<ol class="list">
<li><strong>障壁の設定</strong> サイトに実装する障壁の設定を行います。ランダムな問題生成か個別指定を選んでください</li>
<li><strong>障壁パターンコードの出力</strong> 「障壁パターンコードを生成」のボタンを押すと、障壁パターンコードがこのページのtextareaに出力されます</li>
<li><strong>サイトを生成</strong> 「サイトを生成する」を押すことで、設定に応じたサイトが生成されます</li>
</ol>
<p>※設定した障壁を使いまわしたい時には、この障壁パターンコードを保存しておいてください。ふたたびこのページのtextareaに貼付することで、おなじ障壁を再現できます<br />
※開発中のサービスですので、障壁の種類や箇所は随時変更があります。障壁パターンコードがうまく機能しなくなった場合は、障壁パターンコードを再生成してください</p>
<form action="#test-pattern-str-exists" method="POST">
<input type="hidden" name="wcagver" id="wcagver4pattern" value="22">
<?php $ng_checked = \Kontiki\Input::post('code_type') != 'individual' ? ' checked="checked"' : ''; ?>
<label class="block"><input type="radio" name="code_type" value="ng"<?php echo $ng_checked ?>> ランダムな問題を含んだ障壁パターンコードを生成<span id="random_code_wcag_label">（WCAG 2.2）</span></label>
<details id="individual_set" class="block">
<summary tabindex="-1"><label><input type="radio" name="code_type" value="individual"> 障壁を個別に指定</label><span id="summary_desc" class="description">設定項目を表示します</span></summary>
<?php
$criteria_path = __DIR__ . '/system/resources/criteria.json';
$criteria = file_exists($criteria_path) ?
json_decode(file_get_contents($criteria_path), true) :
array();
$html = '';
$patterns = \Kontiki\Util::s(\Komarushi\Main::$message_patterns);
$prev_criterion = '';
$html .= '<ul class="list">' . "\n";
foreach ($patterns as $cat => $messages) :
$criterion = preg_replace("/[a-z]/", "", $cat);
$is_critreion_open = $prev_criterion != $criterion;
if ($is_critreion_open && isset($criteria[$criterion])) :
if (! empty($prev_criterion)) :
$html .= '</ul>';
$html .= '</fieldset>';
$html .= '</li>';
endif;
$required_wcag = 20;
if (in_array($criterion, \Komarushi\Main::$added_criteria_22)) :
$required_wcag = 22;
elseif (in_array($criterion, \Komarushi\Main::$added_criteria_21)) :
$required_wcag = 21;
endif;
$html .= "\t\t\t\t\t" . '<li>';
$html .= '<!-- f2 --><fieldset data-required-wcag="' . $required_wcag . '">';
$wcag_label = 'WCAG 2.0以上';
if ($required_wcag == 21) :
$wcag_label = 'WCAG 2.1以上';
elseif ($required_wcag == 22) :
$wcag_label = 'WCAG 2.2';
endif;
$html .= '<legend>' . $criterion . ' ' . $criteria[$criterion]['name'] . '（' . $wcag_label . '）</legend>';
$html .= '<!-- 2 --><ul>';
endif;
$html .= '<li>' . $cat . "\n\t\t\t\t\t\t" . '<ul>';
$n = 0;
foreach ($messages as $file => $message) :
$checked = $n == 0 ? ' checked="checked"' : '';
$n++;
$cat4post = str_replace('.', '_', $cat);
$html .= '<li><input' . $checked . ' type="radio" name="' . $cat4post . '" value="' . $file . '" id="' . $cat4post . '_' . $file . '"><label for="' . $cat4post . '_' . $file . '">';
$status = \Kontiki\Util::s(strtoupper($file));
$html .= $status . ': ' . $message . '</label>';
$try = ' [<a href="practice/?criteria=' . $cat . '_' . $file . '">この実装を試す</a>]';
$html .= $try;
$html .= "</li>\n";
endforeach;
$html .= '</ul><!-- /2 -->' . "\t\t\t\t\t" . '</li>' . "\n";
$prev_criterion = $criterion;
endforeach;
$html .= '</ul><!-- /1 -->' . "\n";
echo $html;
?>
</fieldset>
</li>
</ul><!-- class="list" -->
</details>
<p><input type="submit" name="gen_test_pattern_code" value="障壁パターンコードを生成"></p>
</form>
<section id="pattern-code-form">
<form action="./" method="POST">
<h4 id="test-pattern-str-exists"><label for="test_pattern_code">障壁パターンコード</label></h4>
<p id="test_pattern_code_description">※設定した障壁を使いまわしたい時には、障壁パターンコードを保存しておいてください。ふたたびこのtextareaに貼付することで、おなじ障壁を再現できます<br>
※開発中のサービスですので、障壁の種類や箇所は随時変更があります。障壁パターンコードによるサイトの生成がうまく機能しなくなった場合は、障壁パターンコードを再生成してください</p>
<?php /* ?>
<?php if (empty($test_pattern_str)): ?>
<p><label for="test_pattern_code">障壁パターンコードを入力してください</label></p>
<?php else: ?>
<p><label for="test_pattern_code">「サイトを生成する」を押してください</label></p>
<?php endif; ?>
<?php */ ?>
<textarea name="test_pattern_code" id="test_pattern_code" aria-describedby="test_pattern_code_description" cols="35" rows="8"><?php echo $test_pattern_str ?></textarea>
<p><input type="submit" value="サイトを生成する"></p>
</form>
<section class="cmt">
<h4 id="customize-by-url">URLによるカスタマイズ</h4>
<p><code>?criteria=</code>の形式のURLを使うことで、個別に障壁や達成事例を設定できます。<code>criteria</code>が受け付けるのは、以下のような形式です。カンマ区切りで複数指定も可能です（?criteria=2.1.1,2.4.1）</p>
<ul>
<li><a href="./practice/?criteria=2.2.2">2.2.2全般の不具合を確認する（?criteria=2.2.2）</a></li>
<li><a href="./practice/register.php?criteria=2.2.1a_ok2">簡単な操作で制限時間を延長できる（?criteria=2.2.1a_ok2）</a></li>
<li><a href="./practice/register.php?criteria=3.3.1a_ok,3.3.3a_ng">エラーの特定ができるが、エラー修正の提案ができていない（?criteria=3.3.1a_ok,3.3.3a_ng）</a></li>
</ul>
</section>
</section>
</section>
<section id="setting_story">
<h2>ストーリー版</h2>
<p class="ac">駒瑠市地球温暖化防止課の過去4年を振り返り、改善されていく様子をみてみましょう。<br />また、それぞれの年に存在するバリアに対応した試験結果を用意しているので、あわせて参考にしてください。</p>
<?php
$presets = \Kontiki\Util::s(\Komarushi\Main::$message_presets);
$preset_html = '';
$preset_html .= '<ul class="box_list">';
foreach (array_reverse($presets) as $k => $v) :
if (strpos($k, 'story') === false) {
continue;
}
if ($k[0] == '_') {
continue;
}
$preset_html .= '<li><a href="practice/accessibility.php?preset=' . \Kontiki\Util::s($k) . '">' . $v[0] . '</a><p>' . $v[1] . '</p></li>';
endforeach;
$preset_html .= '</ul>';
echo $preset_html;
?>
</section>
</div>
</section>
<div class="wrapper">
<div class="inner">
<section id="ussage">
<h2>注意事項</h2>
<ul>
<li>このサイトは「架空の地方自治体（駒瑠市・こまるし）のとある課のサイト」という設定でできています</li>
<li>サイトには意図的にアクセシビリティ上の問題が仕込んであります。利用には不快感を伴うことがあります</li>
<li>フォームの送信後のページなど、対象外の箇所には「試験対象外」というテキストが付与されています</li>
<li>PDFによる情報提供が存在します。当然ながらHTMLで情報提供した方が良いのですが、このサイトでは、「『お知らせ』はPDFによる添付しかできない困ったCMSを使っている」というような設定だとご理解ください</li>
<li>ブラウザで音声の自動再生をオフにしている場合で、自動再生の不具合を確認したい場合は、ブラウザの設定を調整してください</li>
<li>「障壁の設定」では便宜上達成基準の番号ごとのまとまりを持っていますが、システムの都合上、必ずしも障壁の内容と達成基準の番号は一致しません</li>
<!-- <li>現時点では、障壁はWCAG 2.0 AA（ダブルA）までの問題を実装しています</li> -->
<li>意図的にアクセシビリティ上の問題を生成するため、HTMLの文法に誤った箇所が含まれている場合があります<!-- 。「4.1.1 構文解析」に関しては、対象としないようにしてください --></li>
<li>いくつかの達成基準の項目について、障壁が実装されていないものがありますが、「2.3.1 3回の閃光又は閾値以下」の障壁については、将来的にも実装の予定はありません</li>
<li>現在も制作を続けておりますので、バグが含まれている可能性があることをご了承ください</li>
</ul>
</section>
<section id="contact-us">
<h2>問い合わせ等</h2>
<ul id="readme_vendor">
<li><a href="https://www.jidaikobo.com"><img src="./images/logo_author.svg" class="a11yc_logo_author" alt="ロゴマーク" width="140" height="140">有限会社時代工房</a></li>
<li><a href="https://twitter.com/jidaikobo"><img src="./images/Twitter_Logo_Blue.png" class="a11yc_logo_author" alt="Twitter Logo" width="140" height="140">時代工房のTwitter</a></li>
</ul>
</section>
<section id="google-analytics">
<h2>Google Analyticsについて</h2>
<p class="ac"><a href="https://marketingplatform.google.com/intl/ja/about/analytics/">Google Analytics</a>をつかってアクセス解析を行っています。</p>
</section>
<section>
<h2 id="change-log">変更履歴</h2>
<ul>
<li><time datetime="2026-03-28">2026年3月28日</time>
<ul>
<li>トップページの動画見出しに「1.4.12 テキストの間隔 (AA)」の適合例と不適合例を追加しました（<a href="https://a11yc.com/city-komaru/practice/index.php?criteria=1.4.12a_ok">1.4.12a_ok</a>、<a href="https://a11yc.com/city-komaru/practice/index.php?criteria=1.4.12a_ng">1.4.12a_ng</a>）。</li>
</ul>
</li>
<li><time datetime="2026-02-20">2026年2月20日</time>
<ul>
<li>複数の細かい修正をしています。</li>
</ul>
</li>
<li><time datetime="2025-01-11">2025年1月11日</time>
<ul>
<li>トップページの「あなたにもできる取り組み」の画像にツールチップを実装し、「1.4.13 ホバー又はフォーカスで表示されるコンテンツ (AA)」の不適合事例を実装しました（<a href="https://a11yc.com/city-komaru/practice/index.php?criteria=1.4.13a_ng">2秒以内で消えるツールチップ</a>、<a href="https://a11yc.com/city-komaru/practice/index.php?criteria=1.4.13a_ng2">消せないツールチップ</a>、<a href="https://a11yc.com/city-komaru/practice/index.php?criteria=1.4.13a_ng3">ホバーできないツールチップ</a>）</li>
<li>1.4.13の不具合の実装のついでに、トップページの「あなたにもできる取り組み」の周辺で、1.1.1や2.1.1のバリアをいくつか追加</li>
<li>キーボードトラップの事例をハンバーガーメニュー部分に実装しました。キーボードトラップの2.2.2のプリセットもこちらに変更しています（古いバリアは消してはいません）。</li>
</ul>
</li>
<li><time datetime="2024-07-07">2024年7月7日</time><ul>
<li>「駒瑠市環境イベント エこ・まるシェ」のページを追加し、「1.1.1 非テキストコンテンツ (A)」の不適合事例として、短い文章で説明できない内容の画像を足しました（<a href="https://a11yc.com/city-komaru/practice/information-each1.php?criteria=1.1.1f">1.1.1f</a>）</li>
<li>「駒瑠市環境イベント エこ・まるシェ」のページを追加し、「1.4.3 コントラスト (最低限) (AA)」の不適合事例のチラシ画像を足しました（<a href="https://a11yc.com/city-komaru/practice/information-each1.php?criteria=1.4.3g">1.4.3g</a>）</li>
</ul></li>
</ul>
</section>
</div>
</div>
<footer>
<div class="wrapper">
<div class="inner">
<div class="content">
制作：<a href="https://www.jidaikobo.com">有限会社時代工房</a><br>
ライセンス：<a href="https://github.com/jidaikobo-shibata/city-komaru/blob/master/LICENSE.txt">MIT</a><br>
動画・GIFアニメ作成協力：<a href="http://functiontales.com">FUNCTION TALES</a><br>
使っている音源は<a href="https://www.zapsplat.com">https://www.zapsplat.com</a>で取得しました。<br>
ご協力：<a href="https://twitter.com/momdo_">@momdo_</a>, <a href="https://twitter.com/securecat">@securecat</a>, <a href="https://twitter.com/yocco405">@yocco405</a>, naiki, <a href="https://twitter.com/masuP9">@masuP9</a>, <a href="https://twitter.com/koide_neko">Koide Junko</a>, kiri
</div>
</div>
</div>
</footer>
</body>
</html>