フォームの送信ボタンの無効化がなぜアクセシビリティの観点からNGなのか

フォームの送信ボタンの無効化がNGなのは、３つの理由があります。

１．なぜ無効化になっているのかユーザーが間違いに気づかない恐れがある
２．無効化されたボタンはフォーカスができないため、Tabキーでナビゲートされない
３．無効化されているボタンはグレーアウトされていて読みにくい

出典：Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド

Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド

今回は「２．無効化されたボタンはフォーカスができないため、Tabキーでナビゲートされない」について検証してみました。
正直曖昧なところがあったので、スクリーンリーダーを用いてどのように読み上げるのかも含め、キーボード操作を行ってみました。

なお、使用したスクリーンリーダーは「NVDA」です。

disabled属性を使用したボタンの無効化

サンプル：DNP 大日本印刷

お問合わせ | DNP 大日本印刷

<div class="wrap-agree-box center">
    <p class="btn-send"><input id="submitBtn" type="submit" name="submit" value="確認画面に進む" disabled=""></p>
</div>

disabled属性はボタンや入力フィールドを無効化する属性で、定番の方法です。button属性やinput属性などに使われます。

スクリーンリーダーでのふるまい

・読み上げ
「ボタン 使用不能 確認画面に進む」と読み上げられます。音声から「ボタン」であること、「 使用不能」であることはわかります。

・Tabキーによる操作
Tabキーではフォーカスされないので、このボタンは飛ばされてしまいます。もし、入力フィールドでエラーが発生したままTabキーで進んできたとしても、このボタンに気づきにくく、何がエラーになっているかもわかりません。

JavaScriptを利用した無効化

サンプル：大和ハウス工業

[お問い合わせフォーム]戸建住宅の商品情報や建築、購入について

<div class="qaBtns01">
    <div id="form_btn">
        <span class="qaBtns01_btn qaBtns01_btn-t1">入力項目をご確認ください</span>
    </div>
<!--<input type="submit" value="次へ" class="qaBtns01_btn qaBtns01_btn-t2 fnFade">-->
</div>

これも多いパターンだと思いますが、JSを利用してボタンの表示内容を切り替えます。

スクリーンリーダーでのふるまい

・読み上げ
「入力項目をご確認ください」と読み上げられます。これだけなので、音声からこれがボタンであることはわかりません。ただエラーテキストが表示されているだけのように勘違いしそうです。

・Tabキーによる操作
これもTabキーではフォーカスされないので、このボタン（ボタンなのか？）は飛ばされてしまいます。DNPのときと同じ状態です。

aria-disabled属性を使用したボタンの無効化

disabled属性と似た属性で、aria-disabled属性というのもいます。Webアクセシビリティを補完するWAI-ARIAの１つです。aria-disabled属性の特徴は、

・disabled属性のようにスクリーンリーダーで使用不能と読み上げます
・フォーカスが適用されます
・無効化された見た目は、JSなどで表現する必要があります

サンプル：Twitter

https://twitter.com/login?lang=ja

<div class="css-1dbjc4n">
    <div role="button" class="css-1dbjc4n r-urgr8i r-42olwf r-sdzlij r-1phboty r-rs99b7 r-1fz3rvf r-usiww2 r-1pl7oy7 r-1v6e3re r-icoktb r-1ny4l3l r-1dye5f7 r-o7ynqc r-6416eg r-lrvibr" data-testid="LoginForm_Login_Button" aria-disabled="true">
        <div dir="auto" class="css-901oao r-1awozwy r-jwli3a r-6koalj r-18u37iz r-16y2uox r-1tl8opc r-a023e6 r-b88u0q r-1777fci r-rjixqe r-bcqeeo r-q4m81j r-qvutc0">
            <span class="css-901oao css-16my406 css-bfa6kz r-1tl8opc r-a023e6 r-rjixqe r-bcqeeo r-qvutc0"><span class="css-901oao css-16my406 r-1tl8opc r-bcqeeo r-qvutc0">ログイン</span></span>
        </div>
    </div>
</div>

スクリーンリーダーでのふるまい

残念ながら、いいサンプルはありませんでした。
aria-disabled属性を使用しているサンプルとして紹介しておりますが、先に書いたようなふるまいにはなっていませんでした。
特にTabキーでフォーカスされません。いい実例を教えてほしい。。

まとめ

以上の検証結果から、

ボタン無効化は使わずにシンプルにフィードバックを返そう

・無効化はTabによるキーボードの操作でフォーカスがあたらないので気付きにくい
・JSでボタンのように対応しても、ボタン属性でないことことから「ボタン」と読み上げられない
・シンプルなUIが一番です

というのが今のところの結論です。