Twitterのアクセシビリティを眺める
アクセシビリティのお勉強のために、Twitterのhtmlを調べてみた。
キーボードでの操作性とかに関してはJS側でやっていると思われるのでroleやaria属性等のタグを眺めただけです。
戻るボタン
左上にある戻るボタンですね。
これをdevツールで見てみるとdiv要素であること、アクセシビリティの配慮として以下がわかりました。
- roleにbuttonを指定している。
- tabindex=0を指定してtabで移動できる
- aria-labelに戻るを指定している。
<div aria-label="戻る" role="button" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1niwhzg r-42olwf r-sdzlij r-1phboty r-rs99b7 r-1w2pmg r-ero68b r-vkv6oe r-1ny4l3l r-mk0yit r-o7ynqc r-6416eg r-lrvibr" style="margin-left: calc(4px + (-1 * (42px - 1.5em)) / 2);"><div dir="auto" class="css-901oao r-1awozwy r-13gxpu9 r-6koalj r-18u37iz r-16y2uox r-1tl8opc r-a023e6 r-b88u0q r-1777fci r-rjixqe r-dnmrzs r-bcqeeo r-q4m81j r-qvutc0"><svg viewBox="0 0 24 24" aria-hidden="true" class="r-13gxpu9 r-4qtqp9 r-yyyyoo r-1q142lx r-50lct3 r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M20 11H7.414l4.293-4.293c.39-.39.39-1.023 0-1.414s-1.023-.39-1.414 0l-6 6c-.39.39-.39 1.023 0 1.414l6 6c.195.195.45.293.707.293s.512-.098.707-.293c.39-.39.39-1.023 0-1.414L7.414 13H20c.553 0 1-.447 1-1s-.447-1-1-1z"></path></g></svg><span class="css-901oao css-16my406 css-bfa6kz r-1tl8opc r-bcqeeo r-qvutc0"></span></div></div>
最初の２つは基本的なやつですかね。
- https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML#html_and_accessibility
- https://web.dev/use-semantic-html/
aria-labelに関しては、矢印のアイコンだけでは何をするかについては分からないからでしょうか、戻ると指定されています。（、MDNでは✖️だと閉じるかどうか分からないよねという例が書いてある。確かに削除かもしれない。）
タブ
タブを包含するdiv要素にはrole=tablistが、タブのアイテムにはrole="presentation"が指定されている。
ツイートのタブにはtabindex=0が指定されているが、ツイートと返信、メディア、いいね、の残りの３つタブには、tabindex=-1が指定されていて、実はタブでフォーカスが当たらないようになっていた。
リツイートとかお気に入りとか
この辺はすごくわかりやすい。
リプライ、リツイート、お気に入り、それぞれはアイコンで表現されている。
なのでaria-labelが親切に指定されている。２件のリツイート。リツイートする。といった具合だ）
またこれらを包含するdiv要素のroleにはgroupが指定されている。
最後の共有の部分は
aria-expanded=false
aria-haspopup=true
となっていて、popupがあること、その状態が非表示であることがわかる。
新規登録画面
Modalのアクセシビリティについてはこの辺を指定するらしい。
- aria-modal
- aria-labelledby
- aria-describedby
タブでの移動は配慮すべきであるが、こちらはJSでやるしかなさそう。
この辺が参考になった。
その他
画像
代替テキストというのはあるが、altタグはちゃんと指定されていた（あたりまえ）
aria-level
<h2 dir="auto" aria-level="2" role="heading" class="css-4rbku5 css-901oao css-bfa6kz r-18jsvk2 r-1tl8opc r-adyw6z r-1vr29t4 r-135wba7 r-bcqeeo r-qvutc0"><div class="css-1dbjc4n r-xoduu5 r-1wbh5a2 r-dnmrzs r-1ny4l3l"><div class="css-1dbjc4n r-1awozwy r-xoduu5 r-18u37iz r-1wbh5a2 r-dnmrzs r-1ny4l3l"><div class="css-1dbjc4n r-1awozwy r-xoduu5 r-18u37iz r-dnmrzs"><span class="css-901oao css-16my406 css-bfa6kz r-18jsvk2 r-1tl8opc r-1vr29t4 r-bcqeeo r-1udh08x r-3s2u2q r-qvutc0"><span class="css-901oao css-16my406 r-1tl8opc r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1tl8opc r-bcqeeo r-qvutc0">ウェブアクセシビリティ基盤委員会</span></span></span><span class="css-901oao css-16my406 r-18u37iz r-1q142lx r-1tl8opc r-bcqeeo r-qvutc0"></span></div></div></div></h2>
ベストプラクティスはこのroleを使わないこと。普通にh1~h6を使えと。
どうしてもdivタブで表現したい理由があるのだろう。
こんなのもあるということだけ知ってれば良さそう。
またh2に明示的に指定されれているところも見つかった。
（おまけ）
dir属性というのがついている。確かにtwitterのユーザーの言語によって文字の方向はかわる。
機械的にattributeをリストアップして、使われているrole、property,stateを集計する（TODO)
感想
Twitterのアクセシビリティが完璧なものとは思わないが8~9割型正しいとは思うし、実際に眺めてて参考になった。
MDN等を見るより実際にどのように使われているのかを見たほうがわかりやすく、roleやaria-labelの使用例がわかってよかった。（この辺はMDNには具体例が少ないので学びになった）
DropdownやModalといったUIに関しては、普段実装する分には基本的にUIライブラリを使うと思うので、この辺の配慮は勝手にされると思う。ただどのような配慮されているというは知っておい損はないだろう。
Discussion