アクセシビリティ
読む価値のある声明とは、問題点を明記したものです。この声明では、私たちが目指している基準と、見落としを報告する方法も明記しています。
- WCAG 2.2 AAを目標に設定
- コントラストは主観でなく測定
- 既知の不足点を一覧化
方針
このウェブサイトはWCAG 2.2 レベルAAに対応するよう構築しており、思い込みで済ませず、実際に確認しています。コントラストは各要素が実際に描画される色を基準に測定し、不合格になるとビルドを停止します。これは掲げて年に一度見直す目標ではなく、リリースのたびに実施しています。
完全な適合を主張するものではありません。既知の不足については、隠さず以下に記載しています。このサイトまたはアプリの何かがご利用いただけない場合は、件名をAccessibilityとして、何が起きたのかを[email protected]までお知らせください。ご意見ではなく、不具合報告として扱います。
施行日
組み込まれているもの
- すべてのページがJavaScriptなしで動作します。 初期状態では何も隠されておらず、スクリプトで表示される仕組みでもありません。そのため、スクリプトの実行に失敗したページや、厳格なコンテンツブロッカーを使っている環境、テキストのみを扱うクライアントでも内容を確認できます。インタラクティブな要素は、すでに動作するページに追加された拡張機能です。
- コントラストは、実際に描画された背景に対して測定しています。 想定した色を目視で確認するのではなく、各要素の背後にある最初の不透明な祖先要素を特定して測定します。このサイトの本文はかつて4.49:1で、AAの基準を下回っていたものの、見た目には十分自然でした。測定して初めて問題が見つかりました。
- スキップリンクと明示的なフォーカス表示。 すべてのページはコンテンツへ移動するスキップリンクから始まり、すべてのインタラクティブな要素には、見た目を整えるためにアウトラインを削除するのではなく、明示的なフォーカス表示を用意しています。
- 意味のある構造。 1ページにつきh1は1つ、見出しのレベルを飛ばさず順番に配置し、実際のリスト、適切な見出しセルとキャプションを備えた表、スクリーンリーダーで移動できるランドマークを使用しています。
- 動きはシステム設定に合わせます。 prefers-reduced-motionが指定されている場合はすべてのアニメーションを無効にし、コンテンツが表示されるまで待たせず、すぐに表示します。
- テキストを拡大できます。 レイアウトには相対単位とリフローを使用しているため、テキストを拡大したりウィンドウを狭くしたりしても、レイアウトが崩れたり横方向にスクロールしたりしません。
- 意味のある代替テキストを用意しています。また、リンク自体にテキストがある場合、その中の画像には意図的に空のaltを設定しています。そこに説明を加えると、スクリーンリーダーが同じ内容を2回読み上げてしまうためです。
確認されている課題
このセクションがあるからこそ、このページを公開する価値があります。ここに挙げる項目はすべて実際に存在する問題で、私たちは把握しています。どれも解決済みとして紹介しているわけではありません。
このサイトは30言語で公開されていますが、すべての言語でスクリーンリーダーを使ったテストは行っていません。 テストは英語で実施しています。右から左へ読む言語での発音や読み上げ順序、また表示用書体に対応する文字がなくプラットフォームのフォントに置き換えられる文字体系については、支援技術を使った検証が済んでいません。
使用している2種類の書体はラテン文字にのみ対応しています。 キリル文字、デーヴァナーガリー文字、グルジア文字、タイ文字、アラビア文字、ヘブライ文字、ベンガル文字、エチオピア文字、CJKはすべてプラットフォーム独自のフォントに置き換えられます。通常は読みやすさの面で適切ですが、英語で私たちが管理している書体上の細部、つまり太さ、字間、小さな文字が小さすぎると感じられるサイズは、これらのロケールでは管理できません。
一部のインタラクティブな要素は新しく、テストが十分ではありません。 比較表とヘルプ検索は、その場で行を絞り込む適切なパターンを採用していますが、結果件数の変更をスクリーンリーダーに通知する機能は実装済みであるものの、ユーザーテストは行っていません。
アプリにも同じ方針を適用していますが、サイトほど頻繁には監査していません。 アプリはプラットフォーム独自のテキストサイズ変更機能とスクリーンリーダーに対応しており、その2つが大部分を担っています。ただし現在は、リリースごとに正式なアクセシビリティ監査を実施していません。
サイトとアプリのどちらについても、正式な第三者監査は実施していません。 保有していない認証を取得しているかのように受け取られるよりも、その事実を明確に伝えたいと考えています。
アプリと、知っておいていただきたいこと
Telvioアプリは、実行されるオペレーティングシステムのアクセシビリティ機能に依存しています。iOSではVoiceOverとDynamic Type、AndroidではTalkBackとフォントサイズ変更機能を使用します。キーパッド、残高、料金一覧で構成されるアプリのインターフェースでは、重要な部分のほとんどをこれらの機能でカバーできます。
アクセシビリティ機能というより、アクセシビリティに関わる設計上の判断としてお伝えしておきたいことがあります。アプリではアカウントが不要なため、サインアップフォームも、入力するパスワードも、メール認証の手順も、メッセージから取り出すコードもありません。支援技術を使う人や、フォームの操作を難しく感じる人が最も頻繁につまずく一連のやり取りが、そもそも存在しないのです。インストールして、発信し、通話できます。
その一方で、対応できないこともあります。アプリから緊急サービスには発信できません。この点は緊急通話に記載しています。家族に海外へ電話する高齢者など、家族がこのアプリを親族のために設定するケースは少なくありません。その場合、設定時に説明すべき最も重要なことがこれです。
問題をお知らせいただく方法
件名をAccessibilityとして、[email protected]までメールをお送りください。ページまたは画面、行おうとしていたこと、使用していた支援技術とそのバージョン、代わりに起きたことをお知らせいただけると役立ちます。どれも必須ではありません。“スクリーンリーダーで料金表を使えません”という一文だけでも十分な報告です。何もお知らせいただけないより、簡単な内容でもご連絡いただける方がありがたいと考えています。
5営業日以内に、状況の評価と、問題があると判断した場合はおおよその対応時期をお知らせするよう努めます。作業の完了を妨げる問題は、ほかの作業に優先して修正します。作業を難しくする問題については、曖昧な約束をするのではなく、現実的な順番で対応します。
欧州連合にお住まいで、アクセシビリティに関する義務が果たされていないとお考えの場合は、該当する各国の執行機関に申し立てることもできます。まずは私たちにご連絡いただきたいと考えていますが、どちらの方法でも対応します。
チェックが実際に行われる仕組み
声明と実践の違いを示すものとして、2つの点を説明します。
コントラストは解析するのではなく、描画された状態で確認します。 スタイルシートから読み取った色の値は、要素に指定された色を示すだけで、実際にどのように見えるかは示しません。暗い帯の上にある半透明の要素、正規表現では理解できない最新のカラーファンクション、ヒーロー画像の上に固定されたヘッダーなどがその例です。このチェックでは、各要素から最初の不透明な祖先要素までさかのぼり、ブラウザー自体を使って色を解決することで、実際の背景を描画してから比率を計算します。この処理により、このサイトの本文が4.49:1で、AAを下回り、単独で見るとまったく普通に見えることが判明しました。
ページは記述どおりではなく、描画された状態でチェックします。 別の検証プログラムが実際のブラウザーで各ページを読み込み、ビューポート内のテキストが不透明度0になっていないか、ドキュメントが横方向にスクロールしないか、何かがそれ自体の背景色で描画されていないかを確認します。最後の項目は、実際に公開されるまではばかげているように聞こえるかもしれません。以前、1つのグループ化されたCSSルールがラベルの文字色と背景色を同じ値に設定してしまい、コントラスト比1:1になったことがありました。これはマークアップにもDOMにも見えず、ソースのスクリーンショットにも現れません。
意図的に決めたこと
- 許可のない動きは使いません。 スクロールアニメーションは、動きを希望していることをスクリプトで最初に確認したうえで有効になるため、動きを減らす設定を有効にしている人にはコンテンツがすぐに表示され、現れる途中の動きも表示されません。
- JavaScriptの背後にコンテンツを隠しません。 作成時点で何も非表示にはしません。これはパフォーマンスだけでなくアクセシビリティのための判断でもあります。表示されるためにスクリプトに依存するページは、そのスクリプトが動作しないすべての人にとって機能しないページだからです。
- データではアイコンではなく言葉を使います。 比較表では、チェックマークやバツ印の代わりに“Yes”、“None”、“Rounded up”と表示します。チェックマークは読み上げると意味が曖昧になり、コピーすると見えなくなるためです。
- 説明が重複する場合は空のaltを使います。 リンク自体にテキストがある場合、その中の画像には
alt=""を設定します。スクリーンリーダーがリンク先を2回ではなく1回だけ読み上げるためです。 - 幅の広い表は専用の枠内でスクロールさせます。 ページ全体を横に押し広げないため、スマートフォンで段落を読むときに画面を横方向へスクロールする必要がありません。
結論
私たちはWCAG 2.2 AAに基づいて開発し、リリースごとに検証しています。検証では、想定ではなく実際に描画された背景に対してコントラストを測定しています。これは完全準拠を主張するものではありません。
既知の不足点として、30言語を対象としたスクリーンリーダーのテストは英語でのみ実施されていること、書体がラテン文字にしか対応しておらず、その他の文字体系ではプラットフォームフォントにフォールバックすること、最新のインタラクティブ要素はテストが十分でないこと、第三者による監査を実施していないことがあります。
使用できないものがあれば、件名を「アクセシビリティ」として[email protected]までご報告ください。不具合報告として扱い、作業を妨げる問題は他の作業に優先して修正します。
よくある質問
Telvioはどのアクセシビリティ標準に準拠していますか？
ウェブサイトではWCAG 2.2 レベルAAを目標とし、定期的な見直しではなく、リリースのたびに確認しています。コントラストは各要素が実際に描画される背景との関係で測定し、不適合が1つでもあればビルドを停止します。完全適合を主張しているわけではありません。
TelvioのウェブサイトはJavaScriptなしで動作しますか？
はい。初期状態では何も非表示にしてスクリプトで表示する仕組みを使っていないため、JavaScriptを無効またはブロックしていても、すべてのページでコンテンツが表示されます。比較フィルターなどのインタラクティブ機能は、すでに動作するページに追加された機能です。
Telvioではアクセシビリティ監査を実施しましたか？
ウェブサイトとアプリのいずれについても、第三者による監査は実施していません。サイトのリリースごとに自動および手動の確認を行っており、この声明では既知の不備を省略せずに記載しています。
Telvioアプリはスクリーンリーダーで利用できますか？
アプリでは、プラットフォーム独自のアクセシビリティ機能を利用しています。iOSではVoiceOverとDynamic Type、AndroidではTalkBackとフォントサイズの拡大に対応しています。ウェブサイトほど頻繁には監査しておらず、リリースごとに正式なアクセシビリティ監査を実施しているわけではありません。
アクセシビリティ上の問題を報告するにはどうすればよいですか？
件名を「Accessibility」として[email protected]にメールをお送りください。どのページまたは画面で、何をしようとして、何が起きたのかを記載してください。利用している支援技術とバージョンも役立ちますが、必須ではありません。5営業日以内の返信を目指しています。
言語によってサイトで使われるフォントが違うのはなぜですか？
サイトのデザインに使用している2つの書体は、ラテン文字にのみ対応しています。キリル文字、デーヴァナーガリー文字、ジョージア文字、タイ文字、アラビア文字、ヘブライ文字、ベンガル文字、エチオピア文字、CJKでは、プラットフォーム独自のフォントにフォールバックします。一般的には読みやすくなりますが、これらのロケールではタイポグラフィの細部を当社で管理できないことを意味します。
