CSS Nite LP58フォローアップ（3）植木 真さん、 秋山 豊志さん

2018年9月29日に都内で開催したCSS Nite LP58「Coder’s High 2018」のフォローアップとして、植木 真さん（インフォアクシア）、 秋山 豊志さん（コンセント）の『実案件から学んだフロントエンドにおけるアクセシビリティ対応』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

メッセージ、補足など

セッション3「実案件から学んだ フロントエンドにおけるアクセシビリティ対応」の発表をしました秋山です。
「植木さんのアクセシビリティセッション」として笑いを期待されていた方、今回は笑いポイントが控えめでごめんなさい。

普段、自分達が何気なく行なっているマークアップ。
CSS や JS の表現力の強さに目を奪われがちですが、「情報の提供」という側面においてはマークアップ以上に重要なことはないと言っても過言ではありません。
表現、機能の都合を優先しそうにになることもあるかもしれませんが、そこをぐっとこらえて情報構造としての正しさとの両立を目指してください。

また、基本の「キ」「ホ」の中には、一部、コンテンツについて言及しているものも含んでいます。
これらは「コーダーが考えるものか？」と問われれば、自分は「違う」と答えます。
ただし、「コーダーが担保するものか？」であれば「イエス」と答えるでしょう。
視覚的に表現されない情報の有無にいち早く気付くことができるのもコーダーだからです。
あるべき情報が不足していた場合、コーダーが積極的に声をあげ、周りと連携をとってコンテンツをアクセシブルにするために行動する必要があると考えています。

今回のセッションで情報を提供すること、改めて「マークアップすること」の大切さに気づいていただけたのであれば幸いです。

植木 真（株式会社インフォアクシア）

セッション開始前に「アクセシビリティに取り組んでいる人？」という問いかけに手を挙げた人は、全体の1～2割程度でした。

でも、スライドを入手したら、基本の「キ」や「ホ」で紹介した合計20項目のうち、普段自分が意識していることが幾つあるか改めて数えてみてください。きっとゼロという人はいないと思います。「アクセシビリティ」だと思っていなかったとしても、半分の10項目くらいは意識している人が大半ではないでしょうか。

全国各地で「Webアクセシビリティの学校」を開催しているのですが、アンケートで最も多くいただくコメントが「意外と普通のことが多くて、イメージが変わりました」、「何気なくやっていたことに意味があることを知りました」というものです。今回の基本の「キ」と「ホ」でも、そんなふうに感じた方も多かったのではないかと思います。

2020年にオリンピック、パラリンピックが控えているせいか、アクセシビリティを確保していきたいという企業が増えています。弊社でも案件は増えてきているのですが、対応できるスキルを持った制作会社さんや制作者さんが不足しているのが現状です。今回のセッションで興味を持った方がいらっしゃっいましたら、スキルアップの1つのテーマとしても「アクセシビリティ」を意識してもらえたらと思います。

100点じゃなくていいんです。まずは、基本の「キ」と「ホ」の中で、1つでも2つでもいいので、できることから実践していきましょう。ウェブを今よりもマシンリーダブルにしていけるのは、コーダーの皆さんなのですから！

アンケートでのご質問への回答

Q1. 間違ったコーディング例はdiv要素の場合でしたが、section要素でも同じなのか気になりました。

section 要素を利用する場合においても、div 要素と同様の結果となります。スクリーンリーダーは、現時点ではsection 要素による情報のまとまりをユーザーに伝えることができません。

要素の意味から考えると「section 要素で情報のまとまりを示せる 」と考えるのは妥当ではあるのですが、アクセシビリティの観点からは見出し要素を情報のまとまりの起点とする方が、より幅広い環境へとアプローチできます。ただし、上記は「 section 要素を利用しないでください」というものではありません。

それよりも、単純に「画像1、見出し1、本文1、画像2、見出し2、本文2、...」という順序でHTMLコードに記述されていると、スクリーンリーダーはその順序通りに読み上げていくので、例えば「画像2」が「見出し1」のコンテンツであるかのように聞こえてしまいます。そういった読み上げ順序を考慮しても、見出しの前に情報を伝えているコンテンツがあることは好ましくないといえます。

例えば、同じように見出しの前に画像がある場合でも、情報を伝えていない装飾の画像であれば、alt属性を空にしたり、CSSのbackground-imageプロパティを使ったりすることで十分なこともあるでしょう。

Q2. alt属性は長くてもいい、最近はそうなったんですね。今はlongdesc属性は使わないのでしょうか？

longdesc 属性は「サポートしている環境が非常に少なく、longdesc 属性を利用してもユーザーに情報の提供ができない」状態です。そのため、代替テキストの提供手段として longdesc 属性の利用はお勧めできません。
（また、html5 でも img 要素の longdesc 属性は廃止されています）

少し古いのですが、下記に longdesc 属性のサポート状況が記されています。仕様上は正しかったとしても、ブラウザや支援技術によるサポートが十分でなければ、ユーザーはそのコンテンツを利用できないことに注意する必要があります。
https://waic.jp/docs/as/info/201406/H45.html

Q3. 意味のない要素（例: ULリストの行頭記号）にCSSのcontentプロパティを使用するのはアリでしょうか？

「アリ」です。

ただ、注釈で頭に利用する ※ （米印）は、悩ましさがあります。「参照元と参照先で、一対に ※ （米印）を存在させる」という観点で、秋山は「※」を content プロパティで表現しないようにしています。

Q4. ハンバーガーメニューのbutton要素はフォームの送信用だからダメだと言われたのですが？

ご指摘ありがとうございます。
button 要素を submit として利用させないようにするためには、type 属性の指定が必要でした。
下記のように訂正させてください。

<button type="button">メニュー</button>

また、リンクを強調するために、見た目を「ボタン」的に表現する場合もあります。
この場合は下記のように a 要素を使っていただいて大丈夫です。

<a href="#" class="button">リンク</a>