［連載］徹底解説！インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン (9)

こんにちは、freeeの伊原です。前回冒頭でお知らせした「アクセシビリティの祭典」で、今年も無事レフェリーを務めあげた次第です。アクセシビリティに取り組むWeb系の事業会社であるサイボウズ対サイバーエージェントということで、前半は取り組み自慢大会、後半は互いの傷をえぐり合うような死闘を繰り広げていただきました。殴り合いの様子はアクセシビリティの祭典 2018のFRESH!配信動画やスライドをぜひご覧頂ければと。

バトル中に感じたのは、やはり「アクセシビリティをビジネスにする」というところのハードルを超える策を各社とも必死に模索しているのだなあ、ということです。「正義として、品質として」という文脈はだいぶ共有されてきており、先人の知恵を活用しながら粘り強く取り組めば、ボトムアップで取り組むスタイルは定着する。そして、場合によっては給与にも反映される。これは素晴らしいことです。ですが、そこからもう一歩本気を出すには、やはり事業会社のビジネスの根幹に対しての売上や、研究開発としてのリターン、果てはブランディングに直結しているものだということを明示する必要があるのだなあ......と。

逆に言えば、いよいよそういう段階にアクセシビリティ業界（？）が来たとも言えます。思えばUXやユーザビリティも、昔は「そんなもの無くても作れるよ」と邪険にされていた存在でした。それが、appleというプレイヤーが台頭し、サービス全体のデザインや使い勝手が世界を変えるということを指し示したことで、風向きが変わったわけです。それと同じような風が、アクセシビリティにも、まさにいま吹きはじめているのではないか。そんなふうに感じるこのごろです。

さて、そんな時代に備えるためにも、まずはコードレベルできちんと足元を整えるのが重要！ということで、今回も書籍から内容をダイジェストでご紹介いたします！

10章：フィルターウィジェット

前回は商品リストの1項目を作り上げたわけですが、今度はそれらを並べた「商品リスト」に対してフィルタリングを行うという状況を想定した章になります。並び替えのボタンをどう作るかという話に加えて、商品リストの項目を追加で読み込む方法、表示をリストとグリッドで切り替える方法など、実際の案件でよくありそうなパターンを順を追って解説していきます。

並び替えは択一選択、ならば...

まずは並び替えのボタンです。典型的には、「新着順」「人気順」「価格の安い順」「価格の高い順」といった選択肢があり、選んだ後に「並べ替える」ボタンを押すと並び替えが掛かるようなものが思い浮かびます。さて、こういった構造をマークアップするにはどうしたらよいでしょうか。button要素を並べて、排他制御（どれかを選んだらどれかの選択が外れる）をJavaScriptで行うようなやり方をパッと思いつく方も多いと思います。しかし、この本では以下のように言っています。

たいていの問題は、HTMLに標準で用意されているフォーム関連要素のふるまいをうまく利用することで解決できます。都合のよいことに、これらの要素には特有のセマンティクス、キーバインディング、ふるまいが最初から組み込まれています。JavaScriptが利用できる（できるかもしれない）からといって、それを使って車輪の再発明をするべきということではないのです。

まずは標準のフォームコントロールでできないかを考えようと言っています。で、よく考えてみると、確かに択一選択に使える標準のコントロールは存在します。そう、ラジオボタンです。

<form role="form" class="sorter" method="get">
    <fieldset>
        <legend>並べ替え</legend>
        <input type="radio" name="sort-method" id="most-recent" value="most-recent" checked>
        <label for="most-recent">新着順</label>
        <input type="radio" name="sort-method" id="popularity" value="popularity">
        <label for="popularity">人気順</label>
        <input type="radio" name="sort-method" id="price-low-high" value="price-low-high">
        <label for="price-low-high">価格の安い順</label>
        <input type="radio" name="sort-method" id="price-high-low" value="price-high-low">
        <label for="price-high-low">価格の高い順</label>
    </fieldset>
    <button type="submit">並べ替える</button>
</form>

このようにすれば、HTMLだけで択一選択ができますね。スクリーンリーダーも「並べ替え グループ、新着順 ラジオボタン、チェックされています、全4個中1個」のように読み上げてくれるため、きちんと内容が伝わります。キーボードの左右キーで選択肢を切り替えることもでき、かなりアクセシブルです。

ただ、見た目に関してはまだ調整の余地があります。それぞれの選択肢をボタンのようにして、押したものが選択された形になり、他のものは選択が外れたように見せたいとして、どのようにすべきか。input要素のスタイルを調整するのはなかなか面倒だったりします。ここでは、label要素に着目すると上手くいきます。

<input type="radio" name="sort-method" id="most-recent" checked />
<label for="most-recent">新着順</label>

このようにラジオボタンのinputとlabel要素が関連付けられている場合、label要素をクリック（またはタップ）すると関連付けられたinputが選択されます。この挙動をうまく使い、label要素をボタンっぽいスタイルにしつつ、ラジオボタンのinputは見た目には隠してしまえば、択一選択のボタン群が作れるというわけです。

[type="radio"] + label {
    cursor: pointer;
    /* その他、基本のスタイル */
}

[type="radio"]:focus + label {
    /* フォーカス時のスタイル */
}

[type="radio"]:checked + label {
    /* 選択時のスタイル */
}
.sorter [type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding:0 !important;
    border:0 !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px);
}

なお、!importantを連打しているのは著者であるヘイドンさんのギャグです。そこまで執拗にしなくても、ふつうに隠れてくれるのでご安心を。

つづきはメルマガで……。