アクセシビリティ

Riebeckiteでは、キーボード操作やスクリーンリーダー、文字の見やすさなど、さまざまな環境でサイトを利用できることを大切にしています。

WCAG 2.2 AAを参考にしていますが、最終的なサイトのアクセシビリティは、使用するThemeやPlugin、記事の内容、独自に追加したコードによっても変わります。

Riebeckiteが対応していること

Riebeckiteが生成する基本的なページでは、ブラウザや支援技術がページの構造や操作方法を正しく理解できるようにしています。

たとえば、

• ページの言語やタイトルを正しく設定する
• ヘッダー、本文、ナビゲーションなどを適切に区別する
• ページ移動にはリンク、操作にはボタンを使う
• キーボードでも操作できるようにする
• 選択中や開閉状態などを支援技術にも伝える
• アニメーションを減らす設定をできるだけ尊重する

といった対応を行っています。

画像については、Riebeckiteが内容を推測して説明文を自動生成することはありません。意味のある画像には、記事やPlugin側で適切な説明を付けてください。

Pluginを作る場合

ボタンやメニューなどのUIを持つPluginでは、マウス以外でも操作できるようにしてください。

基本的には、次の点を意識すれば十分です。

• ページ移動にはリンク、操作にはボタンを使う
• クリックできる div や span はできるだけ使わない
• アイコンだけのボタンには、何をするボタンなのか分かる名前を付ける
• キーボードでも操作できるようにする
• 開閉するUIでは、現在の状態が支援技術にも分かるようにする
• ダイアログやLightboxは Escape でも閉じられるようにする
• アニメーションを減らす設定を尊重する

Graph、Chart、Mapなどの視覚的なコンテンツでは、複雑な図そのものを無理に読み上げ可能にするより、必要に応じて説明文やキャプション、元データなどの代替情報を用意してください。

Themeを作る場合

Themeでは、特に「見やすさ」と「操作している場所の分かりやすさ」が重要です。

次の点に注意してください。

• キーボード操作中の選択位置が見えるようにする
• 文字と背景の色を十分に見分けられるようにする
• リンクを色だけで区別しない
• 選択中やエラーなどの状態を色だけで表現しない
• 文字を大きくしても内容が切れないようにする
• Light/Darkの両方で読みやすさを確認する
• 必要のない大きなアニメーションを避ける

特に outline: none などでキーボード操作時の表示を消す場合は、代わりに現在位置が分かる表示を用意してください。

記事を書くとき

記事側でも、少し意識するだけで読みやすさを改善できます。

• 内容が分かるページタイトルを付ける
• 見出しを自然な順番で使う
• リンク先が分かる文章にする
• 意味のある画像には説明を付ける
• 装飾だけの画像には説明を付けない
• 図や動画などには、必要に応じて近くに説明を書く

公開前に、マウスを使わず Tab キーだけでも主要な操作ができるか確認してみるのもおすすめです。

Riebeckiteでの確認

Riebeckiteでは、標準のページ構造だけでなく、公式ThemeやUIを持つ公式Pluginについてもアクセシビリティを確認しています。

Search、Color Mode、目次、Lightbox、Gallery、Graphなどの操作を伴う機能や、各Themeでの文字・リンク・フォーカス表示などが主な対象です。

ただし、Riebeckiteを使っているだけで、すべてのサイトが自動的にアクセシブルになるわけではありません。

使用するThemeやPlugin、記事の内容も含めて、サイト全体で使いやすさを考えることが大切です。