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

この記事ではApple Storeのページで使用されているアクセシビリティのテクニックについてみていきます。

ナビゲーションのaria-label

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

ナビゲーションメニューの開閉

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

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

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

また、開かれたメニューのなかの各グループは

• h2 Macを詳しく見る
• ul

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

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

role="button"のリンク

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

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

またこの検索ボックス周りはformとinputで正しくフォームとしてマークアップされており、入力欄にテキストを入力すると左に装飾っぽく見えている虫眼鏡アイコン（に見えていた送信ボタン）が送信ボタンとして機能するようになり、入力のクリアボタンも表示されて使用できるようになります。

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"でマークアップされており、スクリーンリーダーで聞いてみると利用規約を見るにチェックを入れる体験になっています。

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

別タブで開くリンク

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

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

見出し

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

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

カードリンクの実装

ストアの商品へのリンクカードは「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はこちらのようにlist-style="none"のリストに対して、意図的にリストとしたい意図がないのであればリストとして扱わないという強い意志があるようです。
個人的にはSafari独自の仕様はやめてほしいですが、ulの多用でスクリーンリーダーユーザーがウンザリしているのは事実あったようなので多用しないように気をつけたいものです。

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

画像のalt

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のアクセシビリティアドベントカレンダーの最後の記事を書かせていただきました。

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