152
110

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

要素を非活性にするのに、まさか disabled を使ってないよね?

Last updated at Posted at 2024-09-04

はじめに

フロントエンドエンジニアのみなさん、
要素を非活性にする際、disabled=trueを使っていませんか?

アクセシビリティ的にそのやり方は良くないです。

最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。
その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。

結論

disabled=true ではなく aria-disabled=true を使う

disabledの場合

disabledが付与されている要素はフォーカスができません

そのため、キーボードを用いて操作しているユーザーにとって、
要素の存在を認知しにくいものにしてしまいます。
(フォーカスできない要素は存在しない要素とほぼ同義だから)

画面収録 2024-09-03 21.39.22.gif

ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知することができません。
キーボード操作をしている方からすると、
「あれ?? 入力エリアがない??」 と思ってしまいます。

これが操作の途中、例えばバリデーションなどの仕様でdisabledになってしまうと、ユーザーからすれば急に要素が消えるように感じてしまい、誤作動を起こす要因になります。

アクセシビリティを考慮するならdisableを使用しない方がベターです。

代わりにaria-disabled を使う方が良いです。

(※ disablearia-disabled の兼用はできないので注意)

area-disabledの場合

カーソルを当てることができるようになります。
画面収録 2024-08-14 20.55.16.gif

また、スクリーンリーダーなどからは無効であることを認識できるようになります。

aria-disabled

aria-disabled 属性は、 true に設定されると、その属性が設定されている要素や、フォーカス可能なすべての子孫要素が無効状態であることを意味していることを示します。この宣言は、スクリーンリーダーのような支援技術を使用する人々に、そのような要素は編集やその他の操作ができないことを意味していることを知らせます。

Voice Over では、無効なフィールドにカーソルが当たると「淡色表示」として読み上げられるようになります。

しかし、disabled と違って、要素の機能が変更されません!!

つまり、 input フィールドに aria-disabled を指定しても
見た目も変わらないし、入力できるし、クリックもできます。

そのため、前述した機能が欲しい場合は、手動での実装が必要です!

アクセシビリティに配慮したテキストフィールド

例えば以下のようなテキストフィールドを作成するとします。
(reactで書いてます)

追加で実装するのは以下です。

  • css で背景とホバーのデザインを当てる
  • 読み取りしかできないようにする
text-field.tsx
import classNames from 'classnames';
import styles from './text-field.module.scss';

type TextFieldProps = {
  disabled?: boolean;
};

const style = {
  padding: '4px',
};

export const TextField = ({ disabled = false }: TextFieldProps) => {
  return (
    <div>
      <input
        style={{ ...style }}
        className={classNames(disabled && styles.disabled)}
        type="text"
        aria-disabled={disabled ? true : undefined}
        readOnly={disabled ? true : undefined}
      />
    </div>
  );
};
text-field.module.scss
.disabled {
  background-color: #e9eaea;
  cursor: not-allowed;
}

readOnly + CSS と簡単に表現することができます。

area-disabled=true で得られる恩恵は、キーボード操作で要素間を移動する時に、ボタンの状態に拘らず同じキーダウン回数で同じ要素に辿り着けるため、ユーザが誤作動を起こしにくいことです。

今回はtext-fieldを例に挙げましたが、これは buttoncheckboxなどについても同様です。
disabledではなく、area-disabledを使用します。

まとめ

ここまで見ていただき、ありがとうございます!

ちなみに、フィードバックしてくださったシニアエンジニア曰く、
「アクセシビリティはアメリカでは当たり前。 aria-disabled を使うのは普通だよ」

とのこと。
調べてもaria-disableddisabledのどっち論争が散見されますが、アクセシビリティに厳しいアメリカではaria-disabled一択のようです。

こういったフィードバックを得られる環境がまじでありがたい😭。

参照

aria-disabled

152
110
9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
152
110

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?