Appleのストアページで使われているアクセシビリティのテクニック

この記事では[Apple Storeのページ](https://www.apple.com/jp/store)で使用されているアクセシビリティのテクニックについてみていきます。

## ナビゲーションのaria-label
`nav`タグに`aria-label="グローバル"`がついています。
こうすることでランドマークメニューには「グローバル　ナビゲーション」が入るので、下層ページでローカルナビゲーションが現れた時に差別化できます。

## ナビゲーションメニューの開閉
![Appleのロゴとストアリンクのスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/322ece20-c07e-3fba-d06d-3a239be330c2.png)

ロゴの横の「ストア」ですが、こちらはリンクになっています。
PCではホバーするとサブメニューが開き、下層ページへのリンクが表示されます。

ホバーでメニューを開くのはあまり良くないかもしれませんが、このメニューはキーボードで操作した時はリンクの隣にメニューを開閉するボタンが表示されます。

![キーボードで開閉ボタンにフォーカスしている様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/d915400d-35a1-d6b9-4828-124cd90b996d.png)

このボタンには`aria-label="ストアのメニュー"`、`aria-expanded="boolean"`、`aria-controls="globalnav-submenu-link-store"`が指定されており、スクリーンリーダーユーザーでも問題なく使用できるようになっています。

また、開かれたメニューのなかの各グループは
- `h2` Macを詳しく見る
- `ul`

のようにマークアップされており、
`ul`には`aria-labelledby`で`h2`への参照が貼られています。
細かい部分にも手を抜いていませんね。

![見出しとリストのスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/548a9b75-8fe9-751d-a6f0-1f343b194070.png)


リストの中に入った時に`h2`のラベルが読み上げられるようになっています。
こうすることでタブキーだけで操作した時にもリストの概要が分かるので親切です。

## `role="button"`のリンク
![虫眼鏡とカバンのアイコンのスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/040a1df8-d667-d4b3-58a6-1c400f08870d.png)

このテクニックは多用されており、スクリーンリーダーやマウスユーザーが普通に操作した時は「apple.comを検索」というフリーワード検索ボックスが表示され、ページ遷移することなくその場で検索できるようになっています。

JavaScriptが無効になっていたりエラーで止まったりしている場合はリンク先に飛んだ後のページで検索できるので、こちらはアクセシビリティというよりかはユーザー体験の向上としてJavaScriptでの実装が入っているようです。

![フリーワード検索のフォームの実装部分のコード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/274eb2da-682a-7563-1ead-c3f929801306.png)

またこの検索ボックス周りは`form`と`input`で正しくフォームとしてマークアップされており、入力欄にテキストを入力すると左に装飾っぽく見えている虫眼鏡アイコン（に見えていた送信ボタン）が送信ボタンとして機能するようになり、入力のクリアボタンも表示されて使用できるようになります。
![入力欄に文字を入力して送信ボタンにフォーカスしたスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/32a12b66-e7c1-92c8-613b-7f3f63f1314a.png)

Appleはこういうデザインが上手いですね。

## さらに詳しく　リンク

「下取りに出すと、iPhone 16が実質2,077円/⽉ x 36回から§^。24か⽉⽬のアップグレードで残りの⽀払いが不要に§。キャリア契約付きで、さらに8,800円割引に§§。 さらに詳しく」

というテキストの「さらに詳しく」という部分には先ほどの`role="button"`のリンク　テクニックが使用されており、クリックするとモーダルが開きます。

モーダルが開くとすぐに「iPhone 36か月分割払いオファー」という見出しにフォーカスが移ります。
`h2`に`tabindex`属性がないので、あった方がいい気がします。（なくてもフォーカスはできるんですね…できないと思っていました。）

こちらのモーダルはなぜか`dialog`で実装されていませんが、`role="dialog" aria-labelledby=":r0:" aria-modal="true"`でバッチリマークアップされています。

## アコーディオン
先ほどのモーダルの中に「トランスクリプトを表示」というボタンが置かれており、
`aria-controls=":r27:-transcript" aria-expanded="true"`でariaが付与されています。

アコーディオンパネルの部分が閉じている時はコンテンツが`display: none;`になっているので`aria-hidden="true"`はなくてもよさそうです。

また、Appleはこういうアコーディオンが開く簡易なボタンをリンクと同じ色で、下線なしでデザインしている（かつアイコンがついている）ようです。
逆にリンクは同じリンク色で下線が引かれています。
こういう細かい部分で切り分けがされているのはさすがですね。

## 利用規約を見る
これは面白いテクニックですが、先ほどのモーダルの最後にある「利用規約を見る」は`input type="checkbox" aria-hidden="true"`でマークアップされており、スクリーンリーダーで聞いてみると利用規約を見るにチェックを入れる体験になっています。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/987da035-e84c-6381-c325-362dd03ffe62.png)

視覚的にはアコーディオンのような動きになっており、あまりみない実装です。
アコーディオンが閉じていてもアコーディオンパネルの中のリンクにフォーカスできてしまったのでちょっと微妙な気はしました。

## 別タブで開くリンク
target="_blank"なリンクには「（新規ウインドウで開きます）」という隠しテキストが入っています。

スクリーンリーダーユーザーや画面を拡大してみているユーザーは新規ウィンドウが開いた（開く）ことに気付けない場合もあるので、この対応は普段からやっておくといいかもしれません。

## 見出し
「ストア。 クリスマスに魅惑のギフトを贈ろう。」というテキストの「ストア。」の部分が見出しタグになっており、それ以降のテキストは`div`で実装されています。

個人的には拾い読みする時に「ストア。 クリスマスに魅惑のギフトを贈ろう。」の方がわかりやすい気がしましたが、見出しを羅列した時にシンプルで明確なのは今の「ストア。」だけが見出しになっている方なのでわざとそうしているのかもしれません。

## カードリンクの実装
![ストアセクションの商品のリンクのスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/1b7a4a83-3cc5-97d2-3bb7-e3b64e2f8b1b.png)

ストアの商品へのリンクカードは「Mac」などのテキストが`a`で囲われており、タップエリアはJavaScriptで広げられています。
こうしておけば今後説明ようの長いテキストが入った時もアクセシブルネームが短くて済むのでいいですね。

カードには`data-trigger-click="click [data-relatedlink=':r6:_link']"`のような属性がついており、リンク部分には`data-relatedlink=':r6:_link'`が付与されているので、
`data-trigger-click="どのイベントで実行するか どの要素を指定するか"`のような運用になっていそうです。面白いですね。

また、こちらの商品のリストは`ul`ではなく`role="list"`の`div`と`role="listitem"`の`div`で作られています。

ちなみにこのページで`ul`はナビゲーション部分でしか使われておらず、基本的には`role="list"`の`div`と`role="listitem"`の`div`が使用されているようです。

Safariは[こちら](https://bugs.webkit.org/show_bug.cgi?id=170179#c1)のように`list-style="none"`のリストに対して、意図的にリストとしたい意図がないのであればリストとして扱わないという強い意志があるようです。
個人的にはSafari独自の仕様はやめてほしいですが、`ul`の多用でスクリーンリーダーユーザーがウンザリしているのは事実あったようなので多用しないように気をつけたいものです。

とはいえSafariのこのストアページでは`role="list"`がよく登場するので結局使いまくっとったら一緒やないかいというツッコミは入れたいです。

## 画像のalt
![iPhone 16 Proのリンクが貼られたカードリンクのスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/ee419f89-6733-4de1-f863-d084fce62990.png)

iPhone 16 Proの画像の`alt`には「デザートチタニウムのiPhone 16 Pro Maxとその上に浮かぶiPhone 16 Proを、白い紙が流れを描くように包んでいる」と書かれています。

デザートチタニウムがなんなのかわからなかったですが、「白い紙が流れを描くように包んでいる」のようにAppleが画像で表現している内容を`alt`に入れてある部分がさすがだなぁと思いました。

プラスチックじゃなくて紙ってところがサステナブルな感じでいいですね。

このようにほとんどの画像にはいい感じのaltが入っているのですが、
「お近くのApple Storeで無料のセッションに参加しませんか。」の画像にはなぜかaltが入っておらず、理由が少し気になっています。入れてもいいと思いますが…。

## 冗長な`role`
このページにはなぜか`main`要素を使用せず、`div`に`role="main"`が振られています。

フッター部分には`footer role="contentinfo"`が使用されており、こちらは冗長な`role`です。
理由がよくわからないです。

## 脚注
薄いグレーで表示された大量の脚注は`role="list"`の`div`と`role="listitem"`の`div`でマークアップされており、`role="list"`には`aria-label="脚注"`が振られているので視覚的に脚注だとわかるうえスクリーンリーダーでも脚注だとわかるようになっています。

こういう細かい部分はスクリーンリーダーで聞いてみないと気付けないので気付きになりますね。

## 感想
ということでここまでAppleのストアページを見てきました。

Appleは過去メインビジュアルにアクセシビリティを大きく打ち出していることもありましたし、
アクセシビリティガイドラインも作成されています。

このようにプラットフォーム側でアクセシビリティを考慮されていることを思うと、コンテンツの提供側である我々もそれに合わせてアクセシブルな実装を考えていく必要があると強く感じます。

これが当たり前に行われるようにしたいですね。

## まとめ
というわけで[Qiitaのアクセシビリティアドベントカレンダー](https://qiita.com/advent-calendar/2024/accessibility)の最後の記事を書かせていただきました。

皆さんもいろんなサイトのアクセシビリティを高めるテクニックを見つけたら記事を書いて共有してみてください🙏
楽しみにしています！