アクセシビリティページ

見やすい、使いやすい、正しく伝わる

※WCAG2.1で定められた達成基準
※構造上不可の場合は事前に提示し達成可能な範囲にて実装

今求められている
すべての人にやさしい
WEBサイト

コントラストがはっきりして
見やすいデザイン
キーボードだけで
操作・閲覧できる構成
音声アシスタントを
意識した実装

2024年、Webアクセシビリティ義務化

2024年4月1日から障害者差別解消法が改正され、社会的障壁の除去の実施として合理的配慮の提供が義務化されました。
この中にWebアクセシビリティが含まれており、全ての事業者は必要な対策を講じることが求められています。
『目が見えなくても音声で情報が正しく伝わる』、『マウス操作ができなくてもキーボードでページが閲覧できる』など、より多くのユーザーにやさしいWEBサイトが今、求められています。

お問合せは
こちら

アクセシビリティAに含まれる内容
(主な4例)

1.1.1　非テキストコンテンツ
画像が示している情報を代替テキストとして記入している。
※装飾目的、説明文があるものは代替テキストを記入しない場合もあります。
視覚に不自由のある方が音声アシスタントを使って内容を正しく理解できるようになります。
1.3.2　意味のある順序でのマークアップ
コンテンツが意味の通る順序で並べられ、視覚的な読み順とHTMLの構造が一致している。
適切なマークアップは、スクリーンリーダーやキーボード操作を最適にし、正しいHTML構造にすることでSEOの改善にもつながります。
2.2.2　一時停止、停止、非表示の実装
自動再生するコンテンツは、5秒以内にユーザーが停止、非表示、一時停止できるような機能が実装されている。
操作不能な要素はユーザーにとってストレスとなる場合があります。停止ボタンなどを設置し、ユーザーがコントロールできるようにします。
3.3.2　ラベル又は説明（入力支援）
入力内容や形式、必須項目かどうかが利用者に明示され、ラベルや説明が正しく関連付けられている。
適切にマークアップすることで、フォームの入力が直感的になり、ユーザーの利便性が向上し離脱率の低減に繋がります。

※それぞれの内容については省略、簡略化しており、主要となる対応を記載しております。

1.2.1　音声だけ及び映像だけ (収録済): 音声のみのコンテンツには、その内容を文字起こしするテキストの提供をおこない、映像のみのコンテンツには、その内容を説明する音声トラックを提供します。→ 実装の際は内容をテキストや音声解説などの素材はお客様に提供いただき実装致します。
1.2.2　キャプション (収録済): 映像に含まれる音声の内容をキャプション(テキスト)として表示します。→ 実装の際はキャプションのテキストはお客様に提供いただき実装致します。
1.2.3 音声解説、又はメディアに対する代替 (収録済): 視覚に障害のあるユーザーのために、映像の重要な内容を音声で説明する音声解説、または詳細なテキストを表示します。→ 音声解説、テキストはお客様に提供いただき実装致します。
1.3.1　情報及び関係性: コンテンツの情報構造が適切に伝わるように、見出し、リスト、表などの意味的なマークアップを行い、情報の関係性や階層構造を明確にします。
1.4.1　色の使用: 色による識別が困難なユーザーのために、色だけを頼りとした情報提示や操作の促しはせず、テキスト、記号なども併用してわかりやすく表現します。
1.4.2　音声の制御: 音声が自動で再生される場合、ユーザーが操作できるコントロールできるよう実装します。
2.1.1　キーボード: キーボードのみでWEBページの閲覧や操作ができる実装を行います。
2.1.2　キーボードトラップなし: キーボードTABキーで移動する場合フォーカスが外せなくなるなどが無いように実装します。
例として、モーダルなどにおいてはESCキーで閉じれるように実装します。
2.2.1　タイミング調整可能: コンテンツにおいて表示時間などの時間制限を設ける場合、解除や調整(10倍以上長くできる実装)、延長などの機能をつけて実装します。
2.3.1　3回の閃光、又は閾値以下: 1秒間に3回以上の点滅があるコンテンツを実装しないよういたします。
2.4.1　ブロックスキップ: ヘッダーやサイドナビなどのページ内で繰り返す情報や項目がある場合、それをスキップできる実装を行います。
2.4.2　ページタイトル: 他のページとタイトルが重複するのを避け、ページにあった適切なタイトルを定義いたします。
2.4.3　フォーカス順序: キーボード操作(Tabキーなど)でフォーカスする要素は適切な順番にフォーカスできるようにします。(上から順になど規則性のある順序でフォーカスさせます)
2.4.4　リンクの目的: リンク先がリンクテキスト、前後の文などでわかるようにテキストを記述します。例：『リンクはこちら』→『vowzサイトのリンクはこちら』
3.1.1　ページの言語: lang属性を適切に実装します。
例：日本語のページの場合 <html lang="ja">例：上記のような日本語ページで一部英語がある場合 <p lang="en">Hellow VOWZ</p>

※参考：「ウェブアクセシビリティ導入ガイドブック」（デジタル庁）
[https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook]

※達成基準レベルAについてWCAG2.1で定められた達成基準をもとに制作いたします。

アクセシビリティ対応のメリット^※

アクセシビリティ対応は、社会的責任を果たすだけでなく、市場の拡大や企業のブランド価値向上につながります。また、PC、タブレット、スマートフォンといったさまざまなデバイスで使いやすい設計を行うことで、ユーザー体験（UX）が向上し、結果的にサイトのアクセス数や滞在時間の増加が期待でき、適切なマークアップによって検索エンジンに正しくクロールすることで、SEO（検索エンジン最適化）に効果を発揮します。
このように、アクセシビリティやUIの改善には、多くのメリットが期待できます。

※効果を確実に保証するものではありません。

VOWZの強み

確かな経験と実績
設立以来、数多くの企業様のサイトを手掛けてきました。大規模サイトから小さなサイトまで柔軟に対応いたします。
UI設計に自信あり
どのような要件のサイトでもユーザー目線を第一に、使いやすさを重視したUI設計、汎用的な実装を心がけており、お客様からご好評いただいております。
最新の動向の取り入れ
VOWZスタッフは定期的にアクセシビリティの勉強会を実施、セミナーにも積極的に参加しており、アクセシビリティの最新の動向を常にチェックし業務に反映しております。

UI/アクセシビリティ
改善の事例

実際にUI、アクセシビリティ改善した事例をご紹介します

約1000p! 大規模サイトのアクセシビリティAA 対応!!
- UI
- アクセシビリティ
多言語サイトも合わせ、約1000pを超えるアクセシビリティのリニューアルを行いました。約１年をかけアクセシビリティAAに準拠したサイトリニューアルを成功させました。
導線UIの再設計
- UI
サイトの導線が複雑でユーザーが目的のページにたどり着けていないというご相談を受け、UI改善を行いました。導線を整理し、PC時はもちろんスマートフォンでも使いやすくした結果、アクセス数と滞在時間が向上しました。

特殊サーバー環境での実装
- アクセシビリティ
PHPやJavaScriptに制限があるサーバーでのサイトリニューアルを行いました。制限内でもできるだけ動きを損わせない実装を行い、モダンなサイトへのリニューアルを成功しました。
請求フォームの改善
- UI
- アクセシビリティ
ボタンが押しずらかったり、自動記入に未対応だった請求フォームを改善した結果、資料請求やお問い合わせの件数が向上しました。
レポートの提出
- アクセシビリティ
アクセシビリティチェックをしたのち、内容のレポートを作成します。
エラーの種類、エラーページを詳細に記載し、提出いたします。

UI・アクセシビリティのことなら「VOWZ」にお任せ! お気軽にお問い合わせください

アクセシビリティの実装はレベルA、AAを対象としています。

VOWZではお客様のご希望を伺い、アクセシビリティA準拠にするかAA準拠にするかを相談し実装いたします。
アクセシビリティAAAは、デザイン時点から非常に制限が多く厳しい条件があり、達成できない場合が多いため、アクセシビリティのレベルA、AAを対象としています。お客様のご要望を伺った上で対応可能か判断させていただき制作を進めてまいります。

アクセシビリティA、AA、AAAとは?

アクセシビリティの基準は、Webコンテンツアクセシビリティガイドライン（WCAG）によって定義されています。WCAGは、Web上のコンテンツが障害を持つ人々にとっても利用可能であることを確保するための国際的な基準です。WCAGは、アクセシビリティのレベルをA、AA、AAAの3つのレベルに分類しています。それぞれのレベルで満たすべき基準には以下のような特徴があります。

・レベル A（25の達成基準）：
アクセシビリティを最低限確保するための基準。このレベルに達していないと、ウェブコンテンツが一部のユーザーにとって利用不可能になる可能性があります。
・レベルAA（レベル Aの達成基準に加えて13の達成基準）：
多くの国で公的機関に求められる標準的なレベル。これにより、多くの障害を持つユーザーがアクセス可能になります。
・レベルAAA（レベル AAの達成基準に加えて23の達成基準）：
このレベルを目指すことは理想的ではありますが、非常に厳しい基準であるため、すべてのウェブサイトに適用するのは実用的でない場合が多いです。

プロジェクトの進行の流れ

お客様よりご依頼を承りましたら
通常、下記の流れにて制作進行いたします

ヒアリング
プロジェクト内容をメールなどで伺い、依頼内容を精査し大まかな要件把握とお見積りを行なっていきます。
キックオフ
お見積もりをご了承いただき、内容が決定しましたら制作メンバーとお客様で開始時に打ち合わせをし相互で内容のすり合わせを行います。
要件定義・
画面設計
要件定義し、画面設計を行っていきます。
細かなスケジュールを決めて、プロジェクトによっては週に数回お客様と会議をし、内容を細かく報告し確認しながら進めていきます。
デザイン・
コーディング
アクセシビリティを考慮したデザイン作成を行い、デザインの了承いただけましたらコーディングを開始いたします。
修正〜納品対応
修正対応と、アクセシビリティチェックを行い納品データを作成していきます。
弊社のチェック項目を元に人の目で１つ１つチェックをして納品物に問題がないか入念に確認してから納品いたします。