見えているラベルで読み上げられないリッチテキストエディター

あるショップのお問い合わせフォームに、「メッセージ」と見出しの付いた欄があります。上には太字・斜体・箇条書きのボタンが並び、書いた文章に書式を付けられます。画面では、フォームのほかの欄と同じようにラベルが付いて見えます。ところが、スクリーンリーダーでTabキーを押してこの欄に入っても、「メッセージ」とは読み上げられません。一つ目の例では、欄に名前がなく、入力欄であることも伝わりません。Chromeのアクセシビリティツリーでは、ただのgeneric要素です。二つ目の例では、エディターのライブラリーが欄に名前を付けています。名前は「Rich Text Editor. Editing area: main」で、ライブラリーが作るどのエディターにも同じ名前が付くため、エディターが二つあるフォームでは、同じ名前の欄が二つ並びます。音声操作の利用者が画面の言葉どおり「メッセージをクリック」と話しても、どちらの例でも何も起きません。

textareaにはプレーンテキストしか入らないため、リッチテキストエディターには使えません。太字や箇条書きを表示するために、エディターはcontenteditableでdivを編集できるようにします。このdivはフォームの入力欄ではありません。label要素が名前を付けられるのは、button、input、meter、output、progress、select、textareaなど、HTMLでラベル付け可能とされる要素だけです。そのため、divを指すfor="message"は何の名前にもならず、ラベルをクリックしても何も起きません。画面で見えるラベルと欄の結び付きがコードにないので、1.3.1を満たしません。またcontenteditableはdivを編集できるようにするだけで、ロールは与えません。スクリーンリーダーには入力欄であることも、何の欄かも伝わらず、ロールと名前の両方で4.1.2を満たしません（W3Cの失敗例F59とF68）。W3Cの失敗例F111は、見えるラベルがあるのに名前がないコントロールというこの場面全体を取り上げ、1.3.1、2.5.3、4.1.2のすべてを満たさないとしています。role="textbox"を足すだけでは、ロールは直っても名前は空のままです。

CKEditor 5やLexicalのように、ロールを自分で付けるエディターのライブラリーもあります。CKEditor 5は、名前が指定されていなければaria-labelも付けます。「Rich Text Editor. Editing area: main」の「main」は編集領域の名前で、ページ上のどこにもない言葉です。欄にロールと名前は付きますが、その名前は上に表示されたラベルではありません。2.5.3は、見えている言葉が名前に含まれ、その言葉を話せば操作できることを求めていますが、名前には「メッセージ」がどこにもありません。画面のラベルは欄と結び付いていないままなので、1.3.1も満たしません。

どの例も見た目は同じで、マウスを使う目の見える人には問題が見えません。ライブラリーが付ける名前の問題は、エディターが増えるほど大きくなります。商品の「説明」と「お手入れ方法」の二つのエディターがあるフォームでは、同じ名前の欄が二つになり、区別できるのは並び順だけです。

10グループ中2グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響なし）
• 認知 （影響なし）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーの利用者には、名前のない欄か、ライブラリーの名前が付いた欄として伝わります。上に書かれた「メッセージ」が聞こえないため、何を書く欄なのか、どのエディターにいるのかが分かりません。
• 手の操作が限られる 音声操作の利用者は、見えているラベルを話してもエディターが反応しません。その言葉が名前になっていないためです。

axeのaria-input-field-nameルールは、テキストボックスのロールを持つ要素を調べるため、role="textbox"があって名前のない欄は検出します。ロールのないdivはaxeにとって入力欄ではなく、どのルールも報告しません。ライブラリーの名前も名前には違いないため、二つ目の例も違反としては報告されません。この例のようにラベルのforが欄を指したままなら、ラベルの言葉が名前にないため、axeは確認が必要な項目に挙げるだけです。EaseWebの診断は、ロールのない編集可能なdivを4.1.2の問題として報告し、「Rich Text Editor…」や「Editor editing area…」という名前のエディターは、人による確認に回します。表示されたラベルを名前にすべきかは、人が見て判断することだからです。iframeの中のエディターには届きません。手作業でもAIアシスタントでも、手早い修正ではdivにidを付けてラベルのforと合わせることがあります。レビューでは正しく見えますが、何の名前にもなりません。