🐷

Twitterのアクセシビリティを眺める

4 min read

アクセシビリティのお勉強のために、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>

最初の2つは基本的なやつですかね。

aria-labelに関しては、矢印のアイコンだけでは何をするかについては分からないからでしょうか、戻ると指定されています。(、MDNでは✖️だと閉じるかどうか分からないよねという例が書いてある。確かに削除かもしれない。)

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

タブ

タブを包含するdiv要素にはrole=tablistが、タブのアイテムにはrole="presentation"が指定されている。

ツイートのタブにはtabindex=0が指定されているが、ツイートと返信、メディア、いいね、の残りの3つタブには、tabindex=-1が指定されていて、実はタブでフォーカスが当たらないようになっていた。

リツイートとかお気に入りとか

この辺はすごくわかりやすい。

リプライ、リツイート、お気に入り、それぞれはアイコンで表現されている。
なのでaria-labelが親切に指定されている。2件のリツイート。リツイートする。といった具合だ)

またこれらを包含するdiv要素のroleにはgroupが指定されている。

最後の共有の部分は

aria-expanded=false
aria-haspopup=true

となっていて、popupがあること、その状態が非表示であることがわかる。

新規登録画面

Modalのアクセシビリティについてはこの辺を指定するらしい。

  • aria-modal
  • aria-labelledby
  • aria-describedby
    タブでの移動は配慮すべきであるが、こちらはJSでやるしかなさそう。
    この辺が参考になった。

https://www.slideshare.net/techblogyahoo/scripty05

https://chakra-ui.com/docs/overlay/modal#accessibility

その他

画像

代替テキストというのはあるが、altタグはちゃんと指定されていた(あたりまえ)

https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML#text_alternatives

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>

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/heading_role

ベストプラクティスはこのroleを使わないこと。普通にh1~h6を使えと。
どうしてもdivタブで表現したい理由があるのだろう。
こんなのもあるということだけ知ってれば良さそう。

またh2に明示的に指定されれているところも見つかった。

(おまけ)

dir属性というのがついている。確かにtwitterのユーザーの言語によって文字の方向はかわる。

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/dir

機械的にattributeをリストアップして、使われているrole、property,stateを集計する(TODO)

感想

Twitterのアクセシビリティが完璧なものとは思わないが8~9割型正しいとは思うし、実際に眺めてて参考になった。
MDN等を見るより実際にどのように使われているのかを見たほうがわかりやすく、roleやaria-labelの使用例がわかってよかった。(この辺はMDNには具体例が少ないので学びになった)

DropdownやModalといったUIに関しては、普段実装する分には基本的にUIライブラリを使うと思うので、この辺の配慮は勝手にされると思う。ただどのような配慮されているというは知っておい損はないだろう。

Discussion

ログインするとコメントできます