実はWAI-ARIAで楽になるコーディングの例と、コーダーがアクセシビリティ意識を持つための1アプローチ

この記事は Webアクセシビリティ Advent Calendar 2019 の 14日目の記事です。

はじめに

2016年で新卒で入社し、今年9月までの3年半強ほど、ニコニコ生放送のUIデザインの開発をしていました。

UIデザインの責務としては、見た目やインタラクションの他、コンポーネントのHTML定義/CSS実装までやっていました。若干フロントエンドにも入り込む、デザイナーとしては珍しいケースだったかもしれません。
(登壇記事 => ログミー: コンポーネント指向のフロントエンド開発において、デザイナー×エンジニアの協業を通して学んだこと)

ニコ生フロントエンドではアクセシビリティにもある程度配慮をしてHTML定義をしており、エンジニアさん-デザイナー共同でWebアクセシビリティの勉強会や、WAI-ARIA勉強会も開かれていました。

今年9月から、ニコ生を離れ、特設ページ(いわゆるLP = ランディングページ)やポータルサイトを作る部署に移りました。

これにより、

• 大規模なプロダクト/サービス → 数ページの静的Webページ
• UIデザイン → グラフィック寄り/演出重視
• React/CSS Modulesの堅牢な環境 → ejs/scss/vanilla or jQueryの軽量な環境
• チーム開発 → ~2人程度の少人数
• 開発工数からリリース日を確定　→ イベント日基準などでのリリース

というように大きく環境が変わりました。

課題

UIデザインや大規模なプロダクトでは、専任のフロントエンドエンジニアもいて、コードに落とすときにアクセシビリティに配慮ができていました。
一方で、LPなどのほとんどデザイナーで完結させる業務では、見た目重視で、コーディングの際のアクセシビリティという話自体上がることも少なく、短納期のものも多いため、アクセシビリティに割く余裕もなさそうな状態でした。

課題解決のためにやっていること

このような状況で単に「アクセシビリティのために工数を割きましょう！」というのは現実的に難しいところなので、僕は「 アクセシビリティに配慮することで実は実装が楽になる プラクティスを見つけて 普及 させ、コーディングの際にアクセシビリティを考えるきっかけ を作る」という方向でやっていっています。

(これは生放送開発時代に、コーディングのアクセシビリティへの配慮をすることで、コードがより書きやすくなったり、エンジニアさんと意思疎通が取りやすくなったという経験から、アクセシビリティは読み上げやSEOだけでなく、マシンリーダブルにもなるため、結果として実装者にもユースフルになるのではないか、という考えに行き着いたからです。)

今回はその例をいくつか紹介したいと思います。

aria属性によってインターフェースを統一することで実装者ごとのブレをなくす

LPは書き捨てのコードもあったりするため、実装者ごとの癖が出やすいです。これにより、引き継ぐ際に読みづらかったり、初めて書く人が迷うことがあります。
これはaria属性を使うことで、インターフェースを統一することができます。

例えば以下のような例です。

ハンバーガーメニュー

複数ページのあるLPではハンバーガーメニューがよく使われます。

このハンバーガーメニューの実装方法は、

• class名で区別することが多いが、 単語でも show open active expand hide isXXX など、命名が非常にブレやすい
• そもそも状態をjsでしか管理しておらず、htmlに現れないこともある

のように実装者によりまちまちで、実装を引き継ぐ際や、どう書くかを毎回迷う必要があったりします。

これは、 aria-hidden 属性を使うことで一気にインターフェースを統一することができそうです。

タブ切り替え

これもLPではよく出てくる要素の一つです。先ほどと同じく、実装やclass名にブレが出やすいものの一つです。

これは aria-selected 属性によってインターフェースを統一することができそうです。

きっかけをもたせる

以上の２つの例も、もう少し突き詰めると、 aria-expanded 属性、 tabindex 属性、 disabled 属性あたりを適切に実装する必要がありますが、まずは実装のブレを無くせるという利点から aria-hidden や aria-selected の利用を普及させていきます。

これにより、まだ完璧ではありませんが、アクセシビリティを考えながらコードを書く意識を持つきっかけをつくることができます。

aria-hidden 属性を覚えたら…

LPでは、装飾要素を非常によく使います。

これで困るのが、例えば背景に文字を無限に敷きたいという理由から

<span class="deco">profileprofileprofileprofileprofileprofileprofile</span>

というかなりやばめな状況を作りがちです。

これを

<span class="deco" aria-hidden="true">profileprofileprofileprofileprofileprofileprofile</span>

というちょっとの手間でアクセシビリティを向上させることができる、という話が自然に導入できます。

おわりに

今回は、工数や理解を得るのが難しい状況の中でもこういうアプローチの仕方がある、という一つの例を紹介しました。

当然、WAI-ARIAだけでなく、HTMLのセマンティクスであったり、もう少し視野を広げると、色やコンテンツや文章であったりと、アクセシビリティの向上の対象はたくさんありますが、このようなコーダーにとっては身近な問題を解決するわかりやすいものがあると、アクセシビリティの意識の導入がしやすいのではないかと思います。