水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > コンテンツをアクセシブルにするのか、アクセシブルなコンテンツを作るのか

コンテンツをアクセシブルにするのか、アクセシブルなコンテンツを作るのか

2011年11月15日(火曜日)

コンテンツをアクセシブルにするのか、アクセシブルなコンテンツを作るのか

公開: 2011年11月19日22時30分頃

アクセシビリティ系の飲み会で、JIS X 8341-3:2010の7.2.4.10「セクション見出しに関する達成基準」の話で盛り上がったり。

達成基準の内容はこんな感じです (規格票から引用)。

セクションの見出しを用いてコンテンツを体系化していなければならない。

注記1 ここでいうセクションとは,ユーザインタフェースコンポーネントのまとまりではなく,一つ以上の関連するトピック又は考えを扱う自己完結的なコンテンツの一部であり,文書におけるセクションを意味している。なお,セクションは一つ以上の段落からなり,グラフィック,表,リスト及びサブセクションを含む。

注記2 ここでいう見出しは一般的な意味で用いられており,タイトル及び様々なタイプのコンテンツに見出しを付加するその他の手段を含む。

注記3 この達成基準は,ユーザインタフェースコンポーネントについてではなく,文書におけるセクションについて述べている。ユーザインタフェースコンポーネントについては,7.4.1.2 を参照する。

注記4 この達成基準は,等級AAA の達成基準である。

以上、JIS X 8341-3:2010 7.2.4.10 セクション見出しに関する達成基準 より

この解説が、「セクション見出し:達成基準 2.4.10 を理解する (waic.jp)」。

この達成基準がレベル AAA になっているのは、すべての種類のコンテンツには適用できないのと、見出しを挿入することが常に可能であるとは限らないからである。例えば、既存の文書をウェブで公開する際、その文書の作成者が付けなかった見出しを挿入できないことがあるからである。あるいは、長い手紙には様々なトピックが書かれていることが多いが、手紙に見出しを付けるととてもおかしくなってしまう。しかし、文書を見出しの付いたセクションに分けることができるのであれば、文書は理解しやすく、ナビゲートしやすいものになる。

以上、セクション見出し:達成基準 2.4.10 を理解する より

で、この関係の話でいろいろ盛り上がりました。議論の中身は割愛しますが、私がポイントだと思ったのは「既存の文書をウェブで公開する際……できない」という話。逆に言うと、「既存の文書」ではなくウェブ用に文書を作成する場合は、見出しを付けたりしてアクセシブルになるように注意すべきだということでもあります。

もっと言うと、ウェブに掲載する文章を用意するときは、ライティングの段階からアクセシビリティに配慮したほうが良いということです。この達成基準では見出しが取り上げられていますが、私がよく気になるのは画像の代替テキストです。

会社の業績などをグラフで説明するようなコンテンツは良くあると思いますが、見出しとグラフだけしかなかったりして……。

(見出し) [売上げの推移]

(画像代替テキスト) 【グラフ: 2011年の売上げ推移】

これでは肝心な情報がさっぱり分からないので、適切な代替テキストをつける必要があります。たとえばこう。

(見出し) [売上げの推移]

(画像代替テキスト) 【グラフ: 2011年の売上げは、Q1が1000万円、Q2が1200万円、Q3が1100万円、Q4が2000万円と推移しました。Q3からQ4の間に急激な上昇に転じています。】

こうすると、まあ分かるようにはなります。ただ引っかかるのは、頑張って書いたテキストが、画像の見える環境では読めないということです。なんだかもったいない感じがしてきます。

そんなに書くことがあるなら、それは本文で良いのではないでしょうか。つまり、こうなっていれば良いのではないかと。

(見出し) [売上げの推移]

(本文) 2011年の売上げは、Q1が1000万円、Q2が1200万円、Q3が1100万円、Q4が2000万円と推移しました。Q3からQ4の間に急激な上昇に転じています。

(画像代替テキスト) 【グラフ: 2011年の売上げ推移】

テキストを読むだけで分かるようにコンテンツを作成して、画像は画像で補助的に使うという形になります。

コンテンツを作る人に「画像には代替テキストが必要」という知識があると、コンテンツのあり方からして変わってくる場合があります。マークアップする人がアクセシビリティの知識を持っていれば良いのではなく、ウェブに関わる全ての人に知っておいてほしいところです。

関連する話題: Web / アクセシビリティ

最近の日記

関わった本など

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターンデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーションウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト