折りたたみの質問欄をキーで開くには？Enter・Spaceと回答を確認する

質問を選び、二つのキーを別々に試す

ページを開いたら、Tabを押して点検したい質問の見出しまで進みます。選択位置を示す枠などを見て、別のリンクや本文を選んでいないかを確かめます。行き過ぎたときはShiftを押しながらTabで戻ります。

回答が閉じていることを確認してEnterを一度押し、その質問に対応する回答が現れるかを読みます。別の質問の回答が開いた場合は、その違いも残します。閉じることを許す作りなら、同じ見出しでもう一度Enterを押し、回答が閉じるかを確認します。

次に、同じ質問を同じ閉じた状態に戻してからSpaceを一度押します。Enterで開いたままSpaceを押して閉じた結果を、「Spaceでは開かない」と取り違えないためです。初めから開いている欄や、必ず一つを開いておく欄は、その設定に合わせて開始状態を決めます。

押したキーだけでなく、選んでいた質問、操作前後の回答、使ったブラウザーと画面幅を一緒に確認します。一度の結果を全質問や別の環境へ広げず、気になる欄から同じ操作を試します。

参考：W3C APG：折りたたみ欄のキー操作と対応する回答

開いた記録と開かなかった別記録を分ける

ここでは仕組みを説明するため、実サイトの検証結果ではない二つの架空記録を比べます。一つ目は「予約方法」の質問ボタンをEnterで操作した記録です。回答は操作前に表示されず、操作後には表示されました。開閉を伝える値も、閉じたfalseから開いたtrueへ変わっています。

二つ目は「料金について」の別の質問ボタンをSpaceで操作した記録です。回答は操作前も操作後も表示されず、開閉を伝える値は両方ともfalseでした。falseはこの記録で確かめた値で、未確認を埋めたものではありません。

質問も記録も異なるため、この二例だけで「Spaceが原因」「同じ欄を直したら開いた」とは言えません。他の回答がどうなったか、個別原因、修正後は、どちらも未確認です。予約の手順や料金の回答内容も、この記録には含まれていません。

図の内容を文章で読む

説明用の別々の架空記録。予約方法の質問欄・Enterの記録：説明用の記録の名前は予約方法の質問欄・Enterの記録、質問の見出しは予約方法、確認した部品はbutton（質問のボタン）、押したキーはEnter、操作前の回答の表示は表示なし（false）、操作後の回答の表示は表示あり（true）、操作前の開閉を伝える値は閉じている（false）、操作後の開閉を伝える値は開いている（true）、操作後の他の回答は未確認、個別の原因は未確認、修正後の結果は未確認。料金の質問欄・Spaceの別記録：説明用の記録の名前は料金の質問欄・Spaceの別記録、質問の見出しは料金について、確認した部品はbutton（質問のボタン）、押したキーはSpace、操作前の回答の表示は表示なし（false）、操作後の回答の表示は表示なし（false）、操作前の開閉を伝える値は閉じている（false）、操作後の開閉を伝える値は閉じている（false）、操作後の他の回答は未確認、個別の原因は未確認、修正後の結果は未確認。二例は別の質問の別記録で、同一欄のキー比較実験や修正前後ではありません。実際の予約方法や料金の回答本文は記録にありません。false/trueは明示値で、他の回答・原因・修正後は未確認です。

PC原寸画像を開く · スマホ原寸画像を開く

二例を見比べたあと、実際の点検では対象の同じ質問に戻り、開始状態をそろえて両キーを試します。図の別記録を、同一欄で行った比較実験へ読み替えないことが大切です。

標準の詳細ブロックか、ボタン式かを確かめる

制作担当は、開かない質問を編集画面で選び、使っているブロックや部品を確かめます。公開ページの要素も調べ、見た目が似ていても仕組みを混同しないようにします。

WordPressの「詳細」ブロックは、HTMLのdetailsという折りたたみ部品と、見出しに当たるsummaryを使います。summaryを操作すると中身が開閉する標準の仕組みです。独自のクリック処理を足す前に、選んでいるのがsummaryか、追加した処理が標準動作を妨げていないかを対象箇所で調べます。

最初から開くかどうかは、detailsのopen属性の有無に関係します。HTMLの属性は値の読み方が異なり、open="false"と書いても、属性があるため開いた状態になります。本文の説明用記録にある開閉値falseと、detailsのopen属性は別の仕組みとして扱います。

質問がbuttonというボタンと別の回答領域で作られている場合は、次の節の対応関係を確認します。全欄を別方式へ置き換える前に、いま使う部品と、問題が出る質問を特定します。

参考：WordPress：詳細ブロックの構成

参考：MDN：detailsとopen属性

ボタンが示す状態と、実際の回答を対応させる

ボタン式では、質問を押す処理、回答の表示、開閉状態を伝える値を一緒に見ます。aria-expandedは開いているかを伝える属性で、trueが開いた状態、falseが閉じた状態です。この値を書き換えるだけで、回答そのものが表示されるわけではありません。

aria-controlsは、そのボタンが操作する回答領域のIDを指します。質問のボタンを選び、参照先のIDが対応する回答に付いているか、別の欄を指していないかを調べます。見出しに付いた装飾の矢印だけを見て、対応が正しいとは判断しません。

操作後は、表示された回答とaria-expandedの値を照合します。回答が開いているのにfalseのまま、あるいはtrueなのに回答が出ていない場合は、表示と伝える状態が食い違っています。これは点検する箇所の説明であり、上の架空二例でその食い違いが見つかったという意味ではありません。

Enterでは動いてSpaceでは動かない場合も、キー名だけで原因を決めず、対象ボタンの処理とブラウザーの標準動作を確認します。別部品にまで同じ処理を足したり、ページ全体のキー操作を止めたりせず、対象の質問と回答の組合せに範囲を絞ります。

参考：W3C APG：ボタンの状態と回答領域の対応

一つだけ開く設定と、最初の表示を確かめる

一つの回答を開いたとき、別の回答が閉じても、それだけで不具合とは限りません。一つずつ開く設定なのか、複数を同時に開ける設定なのかを先に確かめ、実際の動きと照らします。

標準のdetailsでも、同じname属性で関連付けた欄は、一つを開くと同じグループの別の欄が閉じる仕組みがあります。WordPressの詳細ブロックにも、現在の公式説明ではName属性によるグループ設定が案内されています。標準の詳細ブロックだから各欄は必ず独立する、とは決めつけません。

WordPressのアコーディオンブロックなど、まとまりを持つ部品を使っている場合は、同時に開く欄や初期表示の設定を確認します。設定項目の名前は利用中のバージョンと画面で確かめます。公式説明の一つの表記だけを、そのサイトにもある設定名として当てはめないようにします。

初めから開く質問を記録したうえで、別の質問を開く、元の質問に戻る、と順に確認します。必ず一つを開いたままにする作りもあるため、「もう一度押したら閉じる」を全欄共通の条件にせず、その作りで意図する動作と比べます。

参考：WordPress：詳細ブロックの初期表示とグループ

参考：WordPress：アコーディオンブロックの設定

対象を直したら、同じ条件と公開先で再確認する

修正したら、元と同じ質問、開始時の開閉、ブラウザー、画面幅でEnterとSpaceを試します。質問を選べること、対応する回答が現れること、閉じられる条件では閉じることを、それぞれ確認します。関連する別の質問も試し、一つの変更が他の回答を開いたままにするなどの影響を見ます。

回答の中にリンクなどがある場合は、開いた回答内の必要な項目へTabで進めるかも確認します。閉じたあとに見えない項目へ進まないか、現在の選択位置が分かるかは別の観点です。開閉ができたという結果だけで、それらまで確認済みにしません。

作業用の表示と公開ページは分け、公開した同じ版で質問と回答、キー操作、初期表示を確かめます。読み上げソフトを使う確認も、利用するブラウザーとの組合せを決めて別に行います。ここでの説明や架空記録は、実サイトのキー操作・読み上げ・WCAGへの適合を認定するものではありません。

公開先の説明用記録は、質問、部品、キー、操作前後の表示などをまだ取得していない例です。未確認をfalseや不具合へ置き換えず、実際に確認した項目から記録を更新します。開閉を直す仕事と、確認が終わっていない仕事を分けて進められます。

質問の開閉はできても、キーでどこを選んでいるか分からない場合は、次の記事で選択位置を示す印の確認方法を読めます。

キーで選んだ位置が分からないときの確認方法