アクセシビリティについて

ウェブアクセシビリティ方針

誰もがいつでも、迷わず「書く」「読む」「応える」ができる状態を目指す

Amebaはこれまでもユーザーの生活に寄り添ってきました。

「人と情報をつむぎ 暮らしが豊かに育ちつづけるための機会をつくる。」をミッションに掲げ、ユーザーの「変化」にも寄り添っていきます。

今利用しているユーザーが歳をとっても、怪我や眼鏡を忘れてしまったときにも、ユーザーが日々遭遇するあらゆる環境や状況の変化が障害になるデザインであってはいけません。

アクセシビリティを高めると、障害者や高齢者、子どもも含めた誰もが使えるようになります。

そしてそれは、いつでも使いやすいにつながります。 Amebaはミッションの追求のために「誰もがいつでも、迷わずコンテンツを楽しむことができる」サービスを目指し、これからもアクセシビリティの向上に取り組みつづけていきます。

アクセシビリティを高める手段として、「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ」に対応することを一つの目標としています。そのためにAmebaで独自にAmeba Accessibility Guidelinesを策定し、アクセシビリティの向上に取り組んでいます。

対象範囲

ブログデザイン・レイアウトについて

Amebaブログには多数のデザインを適用する機能があります（ブログデザイン）。また、パソコン向けブログデザインには、自由にCSSを編集できるものもあります。そのため本方針では、ブログを作成した時の初期デザインである「シンプルスタンダード」を適用した、各レイアウトを対象とします。

パソコン

スマートフォン

関連リンク

例外事項

目標とする適合レベル及び対応度

JIS X 8341-3:2016のレベルAに準拠

本方針、また試験結果における「準拠」という表記は、情報通信アクセス協議会のウェブアクセシビリティ基盤委員会による「ウェブコンテンツのJIS X8341-3:2016対応度表記ガイドライン2016年3月版」で定められた表記によるものです。

追加する達成基準

担当部署名

Ameba事業本部

ご意見・ご要望などございましたら、以下の窓口よりお問い合わせください。
Amebaヘルプ｜お問い合わせ

ウェブアクセシビリティ試験結果

2020年1月から4月に実施したJIS X 8341-3:2016「附属書 JB（参考）試験方法」に基づいた試験結果です。

表明⽇ 2021年3月1日
規格の規格番号及び改正年 JIS X 8341-3:2016
満たしている適合レベル 適合レベルA一部準拠
依存したウェブコンテンツ技術のリスト
  • HTML5
  • CSS
  • JavaScript
  • WAI-ARIA1.1
試験対象のウェブページを選択した⽅法 ウェブアクセシビリティ方針の対象範囲のうち、ウェブページを代表するものとして4ページを選択。 対象とするブログデザイン・レイアウト、例外事項、試験対象ページの選定方法については、ウェブアクセシビリティ方針の対象範囲に基づきます。
試験を⾏ったウェブページのURL
試験実施期間 各デバイスごとに実施
・パソコン: 2020年1月23日〜2020年3月12日
・スマートフォン: 2020年3月19日〜2020年4月

達成基準チェックリスト

達成基準に該当するコンテンツが対象範囲内にある場合は「適用」、ない場合は「-」と表記しています。 適用かつ達成基準を満たしている場合は「適合」、満たしていない場合は「不適合」と表記しています。

達成基準 適合レベル 適用/非適用 結果
1.1.1 非テキストコンテンツの達成基準 A 適用 適合
1.2.1 音声だけ及び映像だけ（収録済み）の達成基準 A 適用 適合
1.2.2 キャプション（収録済み）の達成基準 A - -
1.2.3 音声解説又はメディアに対する代替コンテンツ（収録済み）の達成基準 A 適用 適合
1.3.1 情報及び関係性の達成基準 A 適用 適合
1.3.2 意味のある順序の達成基準 A 適用 適合
1.3.3 感覚的な特徴の達成基準 A 適用 適合
1.4.1 色の使用の達成基準 A 適用 適合
1.4.2 音声の制御の達成基準 A - -
1.4.3 コントラスト（最低限レベル）の達成基準 AA 適用 適合
2.1.1 キーボードの達成基準 A 適用 適合
2.1.2 キーボードトラップなしの達成基準 A 適用 適合
2.2.1 タイミング調整可能の達成基準 A - -
2.2.2 一時停止，停止及び非表示の達成基準 A 適用 適合
2.3.1 3回のせん（閃）光，又はしきい（閾）値以下の達成基準 A 適用 適合
2.4.1 ブロックスキップの達成基準 A 適用 適合
2.4.2 ページタイトルの達成基準 A 適用 適合
2.4.3 フォーカス順序の達成基準 A 適用 適合
2.4.4 リンクの目的（コンテキスト内）の達成基準 A 適用 適合
2.4.7 フォーカスの可視化の達成基準 AA 適用 適合
3.1.1 ページの言語の達成基準 A 適用 適合
3.2.1 フォーカス時の達成基準 A 適用 適合
3.2.2 入力時の達成基準 A - -
3.3.1 エラーの特定の達成基準 A 適用 適合
3.3.2 ラベル又は説明の達成基準 A 適用 適合
4.1.1 構文解析の達成基準 A 適用 適合
4.1.2 名前（name），役割（role）及び値（value）の達成基準 A 適用 適合

達成基準の事例と対応策

2020年1月から4月に実施した試験において、代表的な事例の具体的な内容とその対応策を示します。記載されている内容は全て修正済みです。

1.1.1 非テキストコンテンツの達成基準

事例1: アイコンへの代替テキストの漏れ
ブログランキング表示の推移を表す画面のスクリーンショット
対象ページ 全てのページ（パソコンで閲覧時）
内容 サイドバーに表示されているブログのランキング表示の推移を表すアイコンに代替テキストが設定されていなかった
対応 推移を表す代替テキスト「ランキング維持」「ランキング下降」「ランキング上昇」を設定する
事例2: 記事に含むメディアを示すアイコンへの代替テキストの漏れ
「こえのブログ」や「動画」を含む記事一覧のスクリーンショット
対象ページ https://ameblo.jp/ameba-accessibility（リスト・タイルレイアウトに設定し、パソコンで閲覧時）
内容 記事一覧で、記事が「こえのブログ」や「動画」を含む記事であることを伝える代替テキストがなかった
対応 「こえのブログ」を含む記事であること、動画を含む記事であることを伝える代替テキストを設定する

1.3.1 情報及び関係性の達成基準

事例1: 記事本文中の装飾をスタイルで表現
記事中テキストにおける太字・斜体・打ち消し線のスクリーンショット
対象ページ https://ameblo.jp/ameba-accessibility/entry-12567449306.html（パソコン・スマートフォンで閲覧時）
内容 記事中テキストで、太字・斜体・打ち消し線の装飾部分がスタイル属性で実装されていた
対応 適切な要素を使用する
事例2: 見出しを段落タグで表現
Ameba人気のブログのスクリーンショット
対象ページ 全てのページ（パソコンで閲覧時）
内容 見出しであるべき「Ameba人気のブログ」が、p要素（段落）で実装されていた
対応 h2 要素を使用する

1.4.1 色の使用の達成基準

事例1: リンクであることを色のみで伝えている
色のみで伝えているリンクテキストのスクリーンショット
対象ページ https://ameblo.jp/ameba-accessibility/entry-12567449306.html（スマートフォンで閲覧時）
内容 エディタで挿入したリンクテキストが、色のみでリンクであることを伝えていた
対応 下線をつけるなど、色以外でもリンクテキストであることを伝える

1.4.3 コントラスト（最低限レベル）の達成基準

事例1: カレンダー上の文字色と背景色のコントラストが低い
カレンダー機能のスクリーンショット
対象ページ 全てのページ（パソコンで閲覧時）
内容 カレンダー上の、投稿のあった日の日付の文字色と背景色のコントラスト比が4.5:1以下だった
対応 コントラスト比の向上のため、色の組み合わせの見直しを行う
事例2: リンクテキストの文字色と背景色のコントラストが低い
コントラストの低いリンクテキストのスクリーンショット
対象ページ ・https://ameblo.jp/ameba-accessibility/entry-12567449306.html（パソコンで閲覧時）
・https://ameblo.jp/ameba-accessibility/（スタンダードレイアウトに設定し、パソコンで閲覧時）
内容 いいね、コメント、リブログの件数の表記の、文字色と背景色のコントラスト比が4.5:1以下だった
対応 コントラスト比の向上のため、色の組み合わせの見直しを行う

2.1.1 キーボードの達成基準

事例1: 埋め込み要素にキーボードで遷移できない
キーボードで遷移できないiframeで実装されたリブログ記事のスクリーンショット
対象ページ ・https://ameblo.jp/ameba-accessibility/entry-12567449306.html（パソコンで閲覧時）
・https://ameblo.jp/ameba-accessibility/（スタンダードレイアウトに設定し、パソコンで閲覧時）
内容 リブログ記事のリブログカードがiframeで実装されており、キーボードで遷移することができなかった
対応 a 要素を利用する。
事例2: リンク、ボタンをキーボード操作で開くことができない
キーボード操作で開くことができない いいね！した人一覧、コメント一覧、リブログ一覧のスクリーンショット
対象ページ ・https://ameblo.jp/ameba-accessibility/entry-12567449306.html（パソコンで閲覧時）
・https://ameblo.jp/ameba-accessibility/（スタンダードレイアウトに設定し、パソコンで閲覧時）
内容 いいね！した人一覧、コメント一覧、リブログ一覧のボタン・リンクが、キーボード操作だけで開くことができなかった
対応 button 要素を利用する。

2.4.3 フォーカス順序の達成基準

事例1: 要素を動的に追加した際に、フォーカスを適切に移動していない
フォーカス移動が適切ではないフォローフィード画面のスクリーンショット
対象ページ 全てのページ（スマートフォンで閲覧時）
内容 フォローフィード上の「もっとみる」ボタンを実行後、追加された記事ではなく「もっとみる」ボタンにフォーカスされていた
対応 「もっとみる」実行後に追加されたコンテンツの1記事目にフォーカスする

2.4.4 リンクの目的（コンテキスト内）の達成基準

事例1: 一覧へのリンクテキストのラベルが件数のみで表現されている
いいね一覧へのリンクテキストが、件数だけで表現されており情報を示すには不十分な画面のスクリーンショット
対象ページ https://ameblo.jp/ameba-accessibility/entry-12567449306.html（スマートフォンで閲覧時）
内容 「いいね一覧」へのリンクが、「いいね」された件数だけでリンクされていた。リンク先の情報を示すには不十分であった。
対応 「この記事についたいいね！：5件」のようにリンクテキストの修正を行う

2.4.7 フォーカスの可視化の達成基準

事例1: ボタンのフォーカスが表示されていない
修正前
フォーカスが表示されない いいね ボタンのスクリーンショット
修正後
フォーカスが表示されるよう修正された いいね ボタンのスクリーンショット
対象ページ ・https://ameblo.jp/ameba-accessibility/entry-12567449306.html（パソコンで閲覧時）
・https://ameblo.jp/ameba-accessibility/entry-12571256153.html（パソコンで閲覧時）
・https://ameblo.jp/ameba-accessibility/entry-12573208599.html（パソコンで閲覧時）
・https://ameblo.jp/ameba-accessibility/（スタンダードレイアウトに設定し、パソコンで閲覧時）
内容 「いいね」ボタンのフォーカスが表示されていなかった
対応 ボタン要素の実装に置き換え、フォーカスが表示されるように変更する
事例2: リンクのフォーカスが見切れている
フォーカスリングが見切れてしまっている画面のスクリーンショット
対象ページ https://ameblo.jp/ameba-accessibility/（スマートフォンで閲覧時）
内容 記事一覧、人気記事、画像一覧などのリンクのフォーカスリングが見切れて表示されていなかった
対応 フォーカスリングの表示はしているものの、見切れているので表示されるように修正

3.3.1 エラーの特定の達成基準

事例1: 未入力で検索を実行するとエラーページが表示されるが、エラーの原因を示していない
未入力状態にある検索モジュールのスクリーンショット
対象ページ 全てのページ（パソコンで閲覧時）
内容 サイドバーの「このブログを検索する」にフォーカスし、Enterキーを押すとエラーページに遷移した。何かしらの入力が必要ということをユーザーに伝えていなかった。
対応 未入力の状態で検索を実行できないように変更