この記事は最終更新日から1年以上経過しています。
アクセシビリティ達成基準チェックリストツール
公開日：
更新日：
こんにちは。田村です。
ウェブアクセシビリティ試験実施時に使える達成基準チェックリストのテーブル作成ツールを作成しました。
このツールを活用することで、達成基準チェックリストの作成が効率的に行えるようになります。ぜひご活用ください。
JIS X 8341-3:2016 試験実施ガイドライン
JIS X 8341-3:2016 試験実施ガイドライン（達成基準チェックリストの例）
弊社でもサンプルページを用意しておりますので、ご参照ください。
ウェブアクセシビリティ検証結果（サンプル）
ツールの使い方
使い方は、達成基準の「A, AA, AAA」を選択し、「出力」ボタンを押すと、達成基準チェックリストのテーブルが表示されます。
表示されたテーブルは「contenteditable="true"」が設定されているため、見た目を保持したまま直接修正することが可能です。
「適用」欄に「○」や「-」など「結果」欄に、「○」や「×」を入力することができます。
その後、「コードを表示」ボタンをクリックすると、HTML形式のテーブルが表示されます。
アクセシビリティ実装チェックリスト
このテーブルはブラウザ上から直接修正できます。
「適用」の欄は、適用する達成基準を「○」、適用しない達成基準を「-」など、
「結果」の欄は、検証の結果、適合している達成基準を「○」、適合していない達成基準を「×」などを入力してみてください。
| 達成基準 | 適合レベル | 適用 | 結果 | 注記 |
|---|
関連記事
この記事のハッシュタグ #Accessibility #便利ツール から関連する記事を表示しています。
アクセシビリティ方針ジェネレーター
こんにちは。田村です。 ウェブアクセシビリティ方針作成時に使えるジェネレーターを作成しました。 このツールを活用することで、ウェブアクセシビリティ方針の作成が効率的に行えるようになります。ぜひご活用ください。 ウェブアクセシビリティ方針策定ガイドライン 『JIS X 8341-3:2016』の要件としては、「対象範囲」と「適合レベル及び対応」を明記する必要があります。 また、要件にはありませんが、次の事項も明記しておくと良いでしょう。 必要に応じて追加してください。 - 目標を達成する期限 - 満たすことのできない達成基準 - 追加で目標とする達成基準 - 担当部署名 - 連絡手段（電話番号、Eメールアドレス等） - 把握している問題点及びその対応に関する考え方 - 試験結果を表示しているページへのリンク このツールでは次の項目を生成することができます。 - 対象範囲 - 目標とする適合レベル及び対応度 - 達成期限 - 例外事項 - お問い合わせ先 弊社でもサンプルページを用意しておりますので、ご参照ください。 ウェブアクセシビリティ方針（サンプル） ツールの使い方 使い方は、次の入力フィールドの項目を入力し、 「出力」ボタンを押すと項目に沿ったアクセシビリティ方針が表示されます。 表示された方針は「contenteditable="true"」が設定されているため、見た目を保持したまま直接修正することが可能です。 その後、「コードを表示」ボタンをクリックすると、HTML形式のアクセシビリティ方針が表示されます。 対象範囲 - ウェブサイトドメイン 目標とする適合レベル WCAG 2.0 WCAG 2.1 WCAG 2.2 目標とするレベル レベルA レベルAA レベルAAA 対応度 準拠 一部準拠 配慮 例外事項を表示する 表示する 達成期限 お問い合わせ部署 電話番号 受付可能時間 お問い合わせフォームURL 出力 ここに方針が表示されます。 コードを表示 const form = document.getElementById('policyForm'); const preview = document.getElementById('policyPreview'); const codeDisplay = document.getElementById('codeDisplay'); function formatDate(dateString) { const date = new Date(dateString); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は0から始まるので+1 const day = String(date.getDate()).padStart(2, '0'); return `${year}年${month}月${day}日`; } function generatePolicy() { const websiteDomain = form.websiteDomain.value || "『ドメイン』"; const complianceStandard = form.complianceStandard.value || "『目標基準』"; const complianceLevel = form.complianceLevel.value || "『目標レベル』"; const conformance = form.conformance.value || "『対応度』"; const deadline = form.deadline.value ? formatDate(form.deadline.value) : "『達成期限』"; const contactFormUrl = form.contactFormUrl.value; const department = form.department.value || "『お客様相談室』"; const phone = form.phone.value || "『電話番号』"; const businessHours = form.businessHours.value || "『受付可能時間』"; const showExceptions = form.exceptions.checked; // 基本のポリシー HTML テンプレート let policyHTML = ` ウェブアクセシビリティ方針 対象範囲 当社ウェブサイト（${websiteDomain}ドメイン配下にあるウェブサイト）とします。 目標とする適合レベル及び対応度 対象範囲に定義したウェブサイトについて、日本産業規格「JIS X 8341-3:2016 」及び${complianceStandard}、${complianceLevel}に${conformance}を目標としています。 本方針における「準拠・一部準拠・配慮」という対応度の表記は、情報通信アクセス協議会ウェブアクセシビリティ基盤委員会「ウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン – 2021年4月版」で定められた表記によるものです。 `; // 例外事項がオンの場合のみ表示 if (showExceptions) { policyHTML += ` 例外事項 以下は修正対応が困難であるため、目標の対象外とし、代替する手段で内容を説明するよう努めるものとします。 外部から提供されたコンテンツ、ウェブページ、画像、動画、PDF、SVG、表計算や文書作成ソフトで作成したデータ等 `; } policyHTML += ` 目標達成期限 ${deadline} お問い合わせ先 ${department}電話番号：${phone}受付可能時間：${businessHours} `; // お問い合わせフォームの URL が入力されている場合のみ追加 if (contactFormUrl) { policyHTML += ` ウェブアクセシビリティに関するご意見やお気づきの点がございましたら、お問い合わせフォームよりご連絡ください。 `; } preview.innerHTML = policyHTML; } function showCode() { // `policyPreview` の現時点の HTML を取得して `codeDisplay` に表示 codeDisplay.textContent = preview.innerHTML; codeDisplay.style.display = 'block'; // 選択可能にする const range = document.createRange(); range.selectNodeContents(codeDisplay); 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); }
スタッフブログ
