この記事は最終更新日から1年以上経過しています。
アクセシビリティ方針ジェネレーター
公開日：
更新日：
こんにちは。田村です。
ウェブアクセシビリティ方針作成時に使えるジェネレーターを作成しました。
このツールを活用することで、ウェブアクセシビリティ方針の作成が効率的に行えるようになります。ぜひご活用ください。
ウェブアクセシビリティ方針策定ガイドライン
『JIS X 8341-3:2016』の要件としては、「対象範囲」と「適合レベル及び対応」を明記する必要があります。
また、要件にはありませんが、次の事項も明記しておくと良いでしょう。
必要に応じて追加してください。
- 目標を達成する期限
- 満たすことのできない達成基準
- 追加で目標とする達成基準
- 担当部署名
- 連絡手段（電話番号、Eメールアドレス等）
- 把握している問題点及びその対応に関する考え方
- 試験結果を表示しているページへのリンク
このツールでは次の項目を生成することができます。
- 対象範囲
- 目標とする適合レベル及び対応度
- 達成期限
- 例外事項
- お問い合わせ先
弊社でもサンプルページを用意しておりますので、ご参照ください。
ウェブアクセシビリティ方針（サンプル）
ツールの使い方
- 使い方は、次の入力フィールドの項目を入力し、
- 「出力」ボタンを押すと項目に沿ったアクセシビリティ方針が表示されます。
- 表示された方針は「contenteditable="true"」が設定されているため、見た目を保持したまま直接修正することが可能です。
- その後、「コードを表示」ボタンをクリックすると、HTML形式のアクセシビリティ方針が表示されます。
ここに方針が表示されます。
関連記事
この記事のハッシュタグ #Accessibility #便利ツール から関連する記事を表示しています。
アクセシビリティ達成基準チェックリストツール
こんにちは。田村です。 ウェブアクセシビリティ試験実施時に使える達成基準チェックリストのテーブル作成ツールを作成しました。 このツールを活用することで、達成基準チェックリストの作成が効率的に行えるようになります。ぜひご活用ください。 JIS X 8341-3:2016 試験実施ガイドライン JIS X 8341-3:2016 試験実施ガイドライン（達成基準チェックリストの例） 弊社でもサンプルページを用意しておりますので、ご参照ください。 ウェブアクセシビリティ検証結果（サンプル） ツールの使い方 使い方は、達成基準の「A, AA, AAA」を選択し、「出力」ボタンを押すと、達成基準チェックリストのテーブルが表示されます。 表示されたテーブルは「contenteditable="true"」が設定されているため、見た目を保持したまま直接修正することが可能です。 「適用」欄に「○」や「-」など「結果」欄に、「○」や「×」を入力することができます。 その後、「コードを表示」ボタンをクリックすると、HTML形式のテーブルが表示されます。 アクセシビリティ実装チェックリスト このテーブルはブラウザ上から直接修正できます。 「適用」の欄は、適用する達成基準を「○」、適用しない達成基準を「-」など、 「結果」の欄は、検証の結果、適合している達成基準を「○」、適合していない達成基準を「×」などを入力してみてください。 .c-table th,.c-table td{ font-size:12px } A AA AAA 出力 達成基準チェックリスト 達成基準 適合レベル 適用 結果 注記 コードを表示 const checklistData = [ {criteria: "1.1.1 非テキストコンテンツの達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.2.1 音声だけ及び映像だけ（収録済み）の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.2.2 キャプション（収録済み）の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.2.3 音声解説又はメディアに対する代替コンテンツ（収録済み）の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.2.4 キャプション（ライブ）の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "1.2.5 音声解説（収録済み）の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "1.2.6 手話（収録済み）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "1.2.7 拡張音声解説（収録済み）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "1.2.8 メディアに対する代替コンテンツ（収録済み）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "1.2.9 音声だけ（ライブ）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "1.3.1 情報及び関係性の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.3.2 意味のある順序の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.3.3 感覚的な特徴の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.4.1 色の使用の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.4.2 音声の制御の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "1.4.3 コントラスト（最低限レベル）の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "1.4.4 テキストのサイズ変更の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "1.4.5 文字画像の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "1.4.6 コントラスト（高度レベル）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "1.4.7 小さな背景音，又は背景音なしの達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "1.4.8 視覚的提示の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "1.4.9 文字画像（例外なし）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.1.1 キーボードの達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.1.2 キーボードトラップなしの達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.1.3 キーボード（例外なし）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.2.1 タイミング調整可能の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.2.2 一時停止，停止及び非表示の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.2.3 タイミング非依存の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.2.4 割込みの達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.2.5 再認証の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.3.1 3回のせん（閃）光，又はしきい（閾）値以下の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.3.2 3回のせん（閃）光の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.4.1 ブロックスキップの達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.4.2 ページタイトルの達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.4.3 フォーカス順序の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.4.4 リンクの目的（コンテキスト内）の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "2.4.5 複数の手段の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "2.4.6 見出し及びラベルの達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "2.4.7 フォーカスの可視化の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "2.4.8 現在位置の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.4.9 リンクの目的（リンクだけ）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "2.4.10 セクション見出しの達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "3.1.1 ページの言語の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "3.1.2 一部分の言語の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "3.1.3 一般的ではない用語の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "3.1.4 略語の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "3.1.5 読解レベルの達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "3.1.6 発音の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "3.2.1 フォーカス時の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "3.2.2 入力時の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "3.2.3 一貫したナビゲーションの達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "3.2.4 一貫した識別性の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "3.2.5 要求による変化の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "3.3.1 エラーの特定の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "3.3.2 ラベル又は説明の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "3.3.3 エラー修正の提案の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "3.3.4 エラー回避（法的，金融及びデータ）の達成基準", level: "AA", apply: "", result: "", note: ""}, {criteria: "3.3.5 ヘルプの達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "3.3.6 エラー回避（全て）の達成基準", level: "AAA", apply: "", result: "", note: ""}, {criteria: "4.1.1 構文解析の達成基準", level: "A", apply: "", result: "", note: ""}, {criteria: "4.1.2 名前（name），役割（role）及び値（value）の達成基準", level: "A", apply: "", result: "", note: ""} ]; function filterChecklist() { const selectedLevels = []; if (document.getElementById("levelA").checked) selectedLevels.push("A"); if (document.getElementById("levelAA").checked) selectedLevels.push("AA"); if (document.getElementById("levelAAA").checked) selectedLevels.push("AAA"); const filteredData = checklistData.filter(item => selectedLevels.includes(item.level)); return filteredData; } function generateTable() { const filteredData = filterChecklist(); const tableBody = document.getElementById("checklistTableBody"); tableBody.innerHTML = ""; filteredData.forEach(item => { const row = document.createElement("tr"); row.innerHTML = ` ${item.criteria} ${item.level} ${item.apply} ${item.result} ${item.note} `; tableBody.appendChild(row); }); document.getElementById("showCodeButton").style.display = filteredData.length > 0 ? "block" : "none"; } function toggleCodeDisplay() { const codeDisplay = document.getElementById("codeDisplay"); codeDisplay.style.display = (codeDisplay.style.display === 'block') ? 'none' : 'block'; if (codeDisplay.style.display === 'block') { codeDisplay.textContent = getCurrentTableHtml(); selectText(codeDisplay); } } function getCurrentTableHtml() { const tableBody = document.getElementById("checklistTableBody"); const rows = Array.from(tableBody.rows); let htmlString = "\n\n\n達成基準\n適合レベル\n適用\n結果\n注記\n\n\n\n"; rows.forEach(row => { htmlString += "\n"; Array.from(row.cells).forEach(cell => { htmlString += `${cell.textContent}\n`; }); htmlString += "\n"; }); htmlString += "\n"; return htmlString; } function selectText(element) { const range = document.createRange(); range.selectNodeContents(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); }
スタッフブログ
アクセシビリティ試験をサポートするランダムURL選択ツール
こんにちは。田村です。 ウェブアクセシビリティ試験実施時に使えるURLをランダムに選択するツールを作成しました。 ウェブアクセシビリティ試験を実施する際は、ウェブページ代表するページとランダムなページを選ぶことが多い印象です。 デジタル庁の試験実施リストをみてみるとこのような感じで選択されています。 ウェブアクセシビリティ検証結果 試験実施ページリスト 弊社もサンプルページを用意していますのでよろしければご覧ください。 WCAG AA準拠サイト作成のためのスタイルガイドライン 具体的には、アクセシビリティ試験を「ウェブページ一式単位での試験」で実施する場合、次のような形で40ページ〜50ページを選択する必要があります。 JIS X 8341-3:2016 試験実施ガイドライン a) 全てのウェブページを選択する場合 b) ランダムに選択する場合 c) ウェブページ一式を代表するウェブページを選択する場合 d) ウェブページ一式を代表するウェブページとランダムに選択したウェブページとを併せて選択する場合 ここでいう「d」を選ぶことが多い印象です。 また、アクセシビリティ試験後に修正を行い、再度試験を実施する場合も、再度ランダムに選ばれたページを使用しないと、準拠しているとは言えません。 ランダムに選んだ試験対象の特徴に関する質問 試験対象のページの選出理由の妥当性 試験で問題が発見された場合の対応 そこで、以下の情報を入力することで、重複のないランダムURLを選択し、特定のページを除外することができます。 対象となるURLを入力 ウェブページ一式を代表するウェブページを入力 ランダムに選択する数 ランダムにURLを選択したい場合に使ってみてください。 対象となるURLを入力 行数: 0 サンプルを入力する ウェブページ一式を代表するウェブページを入力 行数: 0 ランダムに選択する数を入力 実行 function countLines(text) { return text.split('\n').filter(line => line.trim() !== '').length; } function adjustTextareaHeight(textarea) { textarea.style.height = 'auto'; // 高さをリセット textarea.style.height = textarea.scrollHeight + 'px'; // 内容に応じて高さを設定 } const urlInput = document.getElementById('urlInput'); const urlLineCountDisplay = document.getElementById('urlLineCountDisplay'); const excludeInput = document.getElementById('excludeInput'); const excludeLineCountDisplay = document.getElementById('excludeLineCountDisplay'); urlInput.addEventListener('input', function() { adjustTextareaHeight(urlInput); const lineCount = countLines(urlInput.value); urlLineCountDisplay.textContent = '行数: ' + lineCount; }); excludeInput.addEventListener('input', function() { adjustTextareaHeight(excludeInput); const lineCount = countLines(excludeInput.value); excludeLineCountDisplay.textContent = '行数: ' + lineCount; }); document.getElementById('sampleButton').addEventListener('click', function() { const sampleUrls = [ "https://masizime.com/", "https://masizime.com/news/", "https://masizime.com/contact/", "https://masizime.com/policy/", "https://masizime.com/price/", "https://masizime.com/about/", "https://masizime.com/service/", "https://masizime.com/accessibility/" ]; urlInput.value = sampleUrls.join('\n'); adjustTextareaHeight(urlInput); urlLineCountDisplay.textContent = '行数: ' + countLines(urlInput.value); }); document.getElementById('selectButton').addEventListener('click', function() { const input = urlInput.value; const excludeInput = document.getElementById('excludeInput').value; const output = document.getElementById('output'); const numberInput = document.getElementById('numberInput').value; const urls = input.split('\n').filter(url => url.trim() !== ''); const excludedUrls = excludeInput.split('\n').filter(url => url.trim() !== ''); const numberToSelect = parseInt(numberInput, 10); if (isNaN(numberToSelect) || numberToSelect !excludedUrls.includes(url)); if (numberToSelect > filteredUrls.length) { output.value = '選択する数がURLの数を超えています。'; return; } const selectedUrls = getRandomUrls(filteredUrls, numberToSelect); output.value = selectedUrls.join('\n'); adjustTextareaHeight(output); }); function getRandomUrls(urls, count) { const shuffled = urls.sort(() => 0.5 - Math.random()); return shuffled.slice(0, count); }
スタッフブログ
