Zenn
⚖️

{a11y改善UI} - button & link

2022/11/20に公開
CSS
HTML
JavaScript
UI
アクセシビリティ
tech

TL;DR

  • 黙ってbuttonタグかaタグを使えばよい（div等での捏造禁止）
  • しかし、アイコンのみの場合は特別な配慮が必要

style by state

button:hover, button:focus {
  /* 今まさに押せる状態になったとわかる見た目にする */
}

button:active {
  /* ボタンが実際に押されたように見せる */
}

[disabled], a:not([href]) {
  /* 押せないボタン、リンク */
}

example - icon only

label

スクリーンリーダユーザ向けの配慮。これは必須です

alt（iconがimgの場合）

この時のaltは、アイコン内容を示すものではなく押した時に行われる操作を記載

<button>
    <img src="left-arrow-icon.jpg" alt="前へ戻る" />
</button>

button内にvisually-hiddenテキスト

<button>
    <LeftArrowIcon />
    <span class="visually-hidden">前へ戻る</span>
</button>

aria-label

<button aria-label="前へ戻る">
    <LeftArrowIcon />
</button>

aria-labelledby

<p>
    直前の操作を取り消すには、
    <span id="id-prev-button-text">前へ戻る</span>
    ボタンを押します。
</p>
<button aria-lebelledby="id-prev-button-text">
    <LeftArrowIcon />
<button />

description

スクリーンリーダを使わないユーザのための配慮。
アイコンが見える状態でも、その意味を掴みにくい場合には補足説明を加える

独自tooltip

もちろん、focus時にも出現させる

title属性

hoverでしか表示されないらしいからどうだろう

related WAI-ARIA

  • label
    • aria-lebel
    • aria-lebelledby
  • description
    • aria-describedby
  • state
    • aria-disabled
    • aria-pressed

reference

Discussion