Zenn
🦔

Button role - 意外に注文少なかった

2023/10/28に公開
アクセシビリティ
W3C
aria
tech

まず定義から

https://www.w3.org/TR/wai-aria-1.2/#button

An input that allows for user-triggered actions when clicked or pressed. See related link.

クリックや押下したらユーザーアクションを起こすことを許すインプットである。リンク(role)も見てね

NOTE
If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.

（link roleの要素を)押した時、ブラウザのフォーカスやページのlocationを変えないのであれば、button roleを使うことを検討してね

トグルボタンならaria-pressedをつけて

Buttons support the optional attribute aria-pressed. Buttons with a non-empty aria-pressed attribute are toggle buttons. When aria-pressed is true the button is in a "pressed" state, when aria-pressed is false it is not pressed. If the attribute is not present, the button is a simple command button.

押下毎にon offを切り替えるようなトグルするボタンにはaria-pressed属性をつけてね。ということらしい

  • aria-pressed="true": on
  • aria-pressed="false": off

aria-pressed 属性がなければコマンドボタン（押す毎にアクションが起こるタイプ）

tabindexについての説明

buttonと合わせて使われるtabindexについての言及がどこかでされてるかと思いきや、どこにも書いてなかった
focusable にする必要はあるから、そこからtabindexをつけることは自明の理でしょ？ってことなのか

aria属性

aria-pressed="true/false"

前述の通り

aria-disabled="true/false"

まぁ、disabled属性と同じものよね

aria-haspopup="MIXED"

プルダウンメニューみたいなものをトリガーするbuttonにつけるもの

取りうる値：

  • false (default) ...Indicates the element does not have a popup.
  • true ...Indicates the popup is a menu.
  • menu ...Indicates the popup is a menu.
  • listbox ...Indicates the popup is a listbox.
  • tree ...Indicates the popup is a tree.
  • grid ...Indicates the popup is a grid.
  • dialog ...Indicates the popup is a dialog.

押下したらどんなものがpopupを指定する感じか
基本はmenuが開くものってことであとは明示的に名前で指定する模様

aria-expanded="true/false/undefined"

上記メニューなどの展開状況を示唆するstate
trueで展開状態。

aria-controls="ID"

aria-haspopup とともに、展開する要素のIDを指定

<button type="button"
    id="menubutton1"
    aria-haspopup="true"
    aria-controls="menu1">
    Actions
</button>
 <ul id="menu1"
      role="menu"
      aria-labelledby="menubutton1">
...

keybord shortcut

  • Enter ... で押せるようにして
  • Space ... で押せるようにして

プルダウンメニューのようなものなら（オプショナル）...

  • Enter, Space, ↓　... メニュー開いて最初の要素にフォーカス移動して
  • ↑ ... メニュー開いて最後の要素にフォーカス移動して

その他・気になるもの・語句メモ

RichなWebの代名詞とも言えるbutton roleだったが、思いの外ARIAとしての注文は多くなかった。
扱いとして、単純なシングルクリックのボタン、トグルボタン、何かを開閉するボタンの３種を分けて取り扱うぐらいか

Discussion