eye

アクセシビリティ機能

advanced 4 min #accessibility #a11y #screen reader

SubLearnは、アクセシビリティを重視して設計されています。能力や使用する支援技術に関わらず、すべてのユーザーに包括的な学習体験を提供することを目指しています。プラットフォーム全体でWeb Content Accessibility Guidelines (WCAG) 2.1 レベルAA基準に準拠しており、誰もが言語学習にアクセスできるようにしています。

アクセシビリティ機能

SubLearnは、アクセシビリティを重視して設計されています。能力や使用する支援技術に関わらず、すべてのユーザーに包括的な学習体験を提供することを目指しています。プラットフォーム全体でWeb Content Accessibility Guidelines (WCAG) 2.1 レベルAA基準に準拠しており、誰もが言語学習にアクセスできるようにしています。

スクリーンリーダーへの対応

SubLearnは、NVDA、JAWS、VoiceOver、TalkBackなどの主要なスクリーンリーダーに完全対応しています。セマンティックHTMLと包括的なARIA(Accessible Rich Internet Applications)ラベルをプラットフォーム全体で使用し、すべてのコンテンツやインタラクティブ要素がスクリーンリーダーのユーザーに正しく読み上げられるようにしています。

  • セマンティックHTML: すべてのページコンテンツは、適切な見出し階層(h1、h2、h3など)、セマンティック要素(main、nav、article、section)、説明的なリンクテキストで構造化されています。
  • ARIAラベル: フォーム入力、ボタン、動的コンテンツ領域には、aria-label、aria-describedby、リアルタイム更新用のaria-liveなど、適切なARIA属性がラベル付けされています。
  • 代替テキスト: サムネイルやアイコンを含むすべての画像に、意味を伝えるための説明的な代替テキストが含まれています。
  • フォームのアクセシビリティ: すべてのフォームコントロールはラベルと適切に関連付けられ、エラーメッセージは読み上げられ、バリデーションのフィードバックは明確に提供されます。

フルキーボードナビゲーション

SubLearnのすべての機能は、キーボードナビゲーションで完全にアクセスできます。プラットフォームのどの部分もマウスなしで使用できます。

  • Tabナビゲーション: TabキーとShift+Tabキーを使って、論理的な読み順でインタラクティブ要素間を移動できます。
  • キーボードショートカット: 包括的なキーボードショートカットガイドにアクセスするには、どこからでも?キーを押してください。ナビゲーション、動画再生の制御、フラッシュカードの評価などが可能です。
  • フォーカス管理: すべてのインタラクティブ要素に視覚的なフォーカスインジケーターが表示され、ページ上のどこにいるか常に把握できます。
  • コンテンツスキップ: すべてのページの上部に「メインコンテンツへスキップ」リンクがあり、ナビゲーションをバイパスしてメインの学習エリアに直接ジャンプできます。
  • キーボードトラップなし: キーボードユーザーがどの要素にも閉じ込められることはありません。フォーカスは常にインターフェース内で前後に移動できます。

モーション軽減モード

アニメーションやトランジションは、一部のユーザーにとって気が散ったり不快感を引き起こす場合があります。SubLearnは、デバイスのprefers-reduced-motion設定を尊重します。

  • 自動検出: OSの設定で「モーションを減らす」または「アニメーションを減らす」を有効にしている場合、SubLearnは自動的に不要なアニメーションを無効にします。
  • ページ遷移: フェードやスライドアニメーションは、モーション軽減モードでは無効になります。
  • インタラクティブ要素: ホバー効果やマイクロインタラクションは機能しますが、不要なモーションはありません。
  • 重要なアニメーションは維持: ボタンの状態やローディングインジケーターなどの重要な視覚的フィードバックは引き続き正常に動作します。

ハイコントラストと色覚特性に配慮したデザイン

SubLearnのデザインは、色覚特性やコントラスト感度に配慮しています。

  • 色に依存しない情報伝達: 情報を色だけで伝えることはありません。例えば、フォームのバリデーションエラーでは、テキスト、アイコン、色を組み合わせて使用します。
  • ハイコントラスト: テキストとインタラクティブ要素は、通常テキストで最低4.5:1、大きなテキストで3:1のコントラスト比を維持し、WCAG AA基準を満たしています。
  • ダークモード: 目の疲れを軽減し、暗い環境での読みやすさを向上させるハイコントラストのダークモードを利用できます。ライトモードとダークモードの両方がアクセシビリティのコントラスト要件を満たしています。
  • 色覚特性に配慮したパレット: アクセントカラーとUI要素は、色覚特性(第二色覚、第一色覚、第三色覚)のユーザーにも区別できるように選ばれています。

テキストサイズと読みやすさ

SubLearnは柔軟なテキストサイズ変更に対応し、すべてのズームレベルで読みやすさを維持します。

  • ブラウザズーム: Ctrl/Cmd + プラス/マイナスを使ってズームイン・ズームアウトしても、コンテンツが崩れたり使えなくなったりしません。
  • レスポンシブタイポグラフィ: テキストサイズはモバイル、タブレット、デスクトップデバイスで適切にスケーリングされます。
  • 行間とスペーシング: ゆとりのある行間と文字間隔により、長時間の学習セッションでも目の疲れを軽減し、読みやすさを向上させます。
  • 読みやすいフォント: すべてのサイズで視認性の高い、明確なサンセリフフォントを使用しています。

動画のキャプションとトランスクリプト

SubLearnのすべての動画には、聴覚に障がいのある方やテキストベースの学習を好む方のために、包括的なキャプションとトランスクリプトが含まれています。

  • 自動生成とレビュー済み: 動画のキャプションは自動生成され、正確さが確認されています。
  • 複数言語対応: キャプションは動画の元の言語と英語で利用できます。
  • 切り替えコントロール: キャプションのオン/オフの切り替えや字幕表示の調整が簡単にできます(Sキーまたはプレーヤーコントロールを使用)。
  • フルトランスクリプト: すべての動画で完全なトランスクリプトが利用でき、全文を読みたい方に対応しています。

フォーカスインジケーターと視覚的フィードバック

明確で見やすいフォーカスインジケーターが、キーボードユーザーや運動機能に障がいのある方のインターフェースナビゲーションを支援します。

  • 見やすいフォーカスリング: ボタン、リンク、フォーム入力がキーボードフォーカスを受けると、明るいバイオレットのフォーカスリングが表示されます。
  • ホバー状態: ボタンやリンクは、ホバーまたはフォーカス時に外観が明確に変化します。
  • 無効状態の明確化: 無効な要素は視覚的に区別され、操作できないようになっています。

アクセシビリティの問題を報告する

皆さんのフィードバックは、すべてのユーザーのアクセシビリティ改善に役立ちます。アクセシビリティの障壁に遭遇したり、改善の提案がある場合は、以下の方法でご連絡ください。

  • お問い合わせフォームでカテゴリーに「アクセシビリティの問題」を選択してください。
  • [email protected]まで、障壁の詳細と使用している支援技術の情報をメールでお送りください。
  • ページURL、影響を受けた機能、発生したエラーメッセージを含めてください。
  • アクセシビリティの報告には24時間以内に返信し、迅速に解決策や回避策を提供することを目指しています。

アクセシビリティ関連リソース

ウェブアクセシビリティと支援技術について詳しく知るには、以下をご覧ください。

  • WCAG 2.1ガイドライン: www.w3.org/WAI/WCAG21/quickref/で詳しいアクセシビリティ基準をご確認いただけます。
  • WebAIM: webaim.orgでは、アクセシブルにウェブを利用するための実践的なアドバイスを提供しています。
  • 支援技術リソース: American Foundation for the Blindなどの組織が、支援技術ユーザー向けのリソースを提供しています。

SubLearnは、アクセシビリティの継続的な改善に取り組んでいます。定期的にアクセシビリティ基準に照らしてプラットフォームを監査し、すべての学習者により良いサービスを提供するためにユーザーからのフィードバックを歓迎しています。言語学習は包括的で誰もがアクセスできるものであるべきであり、その責任を真摯に受け止めています。

このガイド役に立った?

ガイドをシェア

困ってる?

まだ質問ある?サポートチームが手伝うよ。

サポートに連絡