kzakza表は、見出しと値を組み合わせることで、必要な情報だけを選択して取得することができるとても便利なフォーマットです。見出しと値を同時に参照できることで初めてその有用性を発揮します。視覚機能に問題のない方であれば、見出しと値セルを同時に見ることも可能ですが、視覚障害者等の音声ユーザーは、スクリーンリーダーでフォーカスがあったところの情報を順番に読み上げて取得するため、表を読み上げる場合、見出しから離れた箇所で例えば、値セル「300円」と読み上げられても、何が300円かわかりませんので、自分が求める情報を特定することができません。300円」のように、値セルにある「300円」という情報と関連する見出しの「アイスコーヒー」が同時に読み上げられる機能が利用できることが重要です。属性の有無によるスクリーンリーダーの読み上げの違い」(以下、「前エントリ」)というエントリを3月に書いたことがあり、テーブルの見出し読み上げについて、一度検証したことがありました。その際にheaders属性の検証をしていなかったことと、改めて検証してみると誤りもあったこと(すいません)、3月時点では対応していなかった(と思われた)PC-Talkerの見出し対応が確認されたことから、改めて確認しました(誤りがあったこと、また、すでに情報が古くなっていることから、このエントリを公開のタイミングで前エントリは非公開とました)。本エントリは、kzakzaが確認できる範囲でまとめた検証結果及び結論ですでの、誤りがある可能性があります。その点をご留意ください。した環境は以下のとおりです。2018より2つ前のバージョンで検証していますので、ご留意ください。10と同じ挙動すると思われたことから、前エントリで検証したPC-Talker7(Windows7版のPC-Talker7)の検証を省略しました(PC-Talker10ほどがりがりに検証してはいませんが、PC-Talker7も見出し読み上げに対応していることは一応は確認済み)。備忘的に各種環境のテーブルまわりの機能と操作方法を以下の通りまとめました。IE11Tキーでテーブル単位の移動が可能。セル間の移動は基本的に水平移動のみで、他環境で可能となっている垂直移動はできない。Ctrl+F9)、カーソルが移動したセルのth見出しを読み上げる3Shift+F9で、カレントなセルの値とともに、その行見出しと列見出し詳細はNetReader2のマニュアル参照。FFTキーでテーブル単位の移動が可能Ctrl+Alt+矢印キーでセル間を水平移動/垂直移動できる。矢印キーのみで移動する(この場合は、水平移動しかできない)だけでも値セルのテキストだけではなく、見出しも読み上げてくれる。ChromeTキーでテーブル単位の移動が可能Ctrl+Alt+矢印キーでセル間を水平移動/垂直移動できる。EdgeTキーでテーブル単位の移動が可能Ctrl+Alt+矢印キーでセル間を水平移動/垂直移動できる。矢印キーのみで移動する(この場合は、水平移動しかできない)だけでも値セルのテキストだけではなく、見出しも読み上げてくれる。上の機能は「スキャンモード」で使用する必要がある(Edgeでは自動的にオン)。その他、カレントセルの見出しを読み上げるコマンドがある。モードを使う」を参照。Safari初期設定でテーブルの見出しを読み上げる設定担っている(見出し読み上げのオン/オフは「設定」>「一般」>「アクセシビリティ」>「VoicerOver」>「詳細度」の「表の出力」で設定可能ローターで「ひょう」を選択していると、上下スワイプでテーブル単位の移動が可能。テーブル内の移動は左右スワイプによる水平移動のみであるが、ローターで「縦方向のナビゲーション」を選択するとテーブル内では、上下左右のスワイプでテーブル内のセルの上下左右移動が可能。ローターで「ひょう」、「縦方向のナビゲーション」を選択可能にするためには「設定」の「VoicerOver」の中で設定する必要がある。Safariテーブルにフォーカスがあったタイミングで、Ctrl+Shift+Option+下矢印キーを押すと、セル単位にフォーカスが当てられるようになり、VOキー(初期設定ではCapLockキー又はCtrl+option)+矢印キーでセル間を水平移動/垂直移動できる。>「詳細度」>「通知」で「表の行を移動したときはヘッダを読み上げる」にチェックボックスをいれると、セル移動時に見出しを読み上げてくれる見出しを読み上げるには、VO-R(最初に行見出しを読み上げる。検証対象であげたそれぞれの環境で読み上げてみることで、確認しました。個別検証結果のとおり、まとめていますが、これらの検証結果をうけてとりあえず先にまとめをしておきます。各要素・属性の利用の要否についてcaption要素table要素の直後に配置したcaption要素のテキストにはテーブルにフォーカスがあったタイミングで一番最初にフォーカスが当たる。Tキーなどでテーブル単位で移動する場合もキャプションからどの表であるかがわかるので、キャプションがある表にはそのキャプションにcatpion要素を必ず用いるべき。要素による見出し指定は対応している。th要素のみで複雑な表の構成を解析して、期待通りの読み上げをしてくれる環境もあった。見出しがある表ではth要素は必ず用いるべき。属性scope属性の対応の有無は環境によって分かれたが、scope属性で見出しのスコープを指定することで、対応する環境で期待どおりの読み上げが行われるメリットはあっても、対応しない環境で期待されない挙動を招くようなデメリットはないので、th要素とともにscope属性は指定しておくことが望ましい。NetReader2の環境のみであった。一部でもheaders属性に対応している場合、scope属性よりheaders属性が優先されることが確認できた。属性がなければ読まれる見出しがそれがあることで読まれなくなる事例もあった。属性を使用することは避けたほうがよいと思われる。以下はそれぞれの環境における各要素、属性の対応をまとめた表です。複雑な表への対応方法(値セルに対応する見出しの読み上げ)パターン4やパターン6のサンプルあるような見出しが複数行・列に渡ったり、結合される表への対応方法についても以下のとおりまとめました。IE11との組み合わせであれば、th要素のみで概ね対応化。Chromeとの組み合わせでは対応方法なし。要素のテキストにフォーカスがあたって読み上げる。Safari・Tキーでテーブル全体又は矢印キーでフォーカスがテーブルの冒頭にあたったタイミングでcapiton要素のテキストを読み上げる。・行移動(セルを横に移動)時に値セルにフォーカスが当たると列見出しを読み上げる。・列移動(セルを縦に移動)時には行見出しは読み上げない。要素の見出しを読み上げる。scope属性の対応及び対応状況の確認。パターン2との挙動の違いの確認。値セルにフォーカスがあったタイミングでscope属性で指定された見出しを読み上げる。scope属性で関連付けられていない値セルで当該見出しを読み上げない。IE11・パターン3-1<scope属性で列見出し指定>では、行移動(セル間を水平移動)の場合は移動した先のセルの列見出しを読み上げる。行見出しとして「列見出し1」を読み上げない(これは望まれる挙動)・パターン3-2<scope属性で行見出し指定>の表では、別の行に移動した場合(行頭から前の行の行末に移動するなど)、移動先のセルの行見出しを読み上げる。FF・パターン3-1<scope属性で列見出し指定>では、行移動(セル間を水平移動)の場合は移動した先のセルの列見出しを読み上げる。行見出しとして「列見出し1」を読み上げない(これは望まれる挙動)・パターン3-2<scope属性で行見出し指定>の表では、列移動(セル間を垂直移動)の場合は移動した先のセルの行見出しを読み上げる。Edge・パターン3-1<scope属性で列見出し指定>では、行移動(セル間を水平移動)の場合は移動した先のセルの列見出しを読み上げる。行見出しとして「列見出し1」を読み上げない(これは望まれる挙動)・パターン3-2<scope属性で行見出し指定>の表では、列移動(セル間を垂直移動)の場合は移動した先のセルの行見出しを読み上げない。列見出しとして「行見出し1」を読み上げる。要素のみで複数列・行の見出しを読み上げるか)。要素の見出しを全て読み上げる。IE11・行移動(セル間を水平移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・別の行に移動した場合(行頭から前の行の行末に移動するなど)、移動した先のセルに関連する複数の行見出し(結合している見出し含む)全て読み上げる・値セルが結合している場合もその結合した値セルの全ての見出しを読み上げる(例:値6セルの列見出しであれば、「列見出し3、列見出し6、列見出し4、列見出し7」を「値6」とともに読み上げる。NR2・行移動(セル間を水平移動)の場合、移動したセルの複数の列見出しのうち、もっとの内側の列見出しを読み上げる(例:「値1」から「値2」への移動の場合、「列見出し6」を「値2」とともに読み上げる(「列見出し3」は読み上げない)。見出しセルの結合有無による挙動の違いはみられない。・列移動(セル間を垂直移動)の場合、移動したセルの複数の行見出しのうち、もっとの外側の行見出しを読み上げる(例:「値8」から「値11」への移動の場合、「列見出し3」を「値11」とともに読み上げる(「列見出し7」は読み上げない)。見出しセルの結合有無による挙動の違いはみられない。・見出しが結合しても、関係する値セルではその結合見出しを読み上げる(列見出しについては、内側の見出ししか読まないという挙動により上のサンプルではそれが検証できないで、別にサンプルを作成して検証)・値セルが結合している場合、関係する見出しは1つしか読み上げない(「例:値5」から「値6」への移動の場合、「列見出し7」しか読まない<列見出し3、列見出し6、列見出し4も読まれるべき>)・行移動(セル間を水平移動)の場合、移動したセルの複数の列見出しのうち、もっとの内側の列見出しを読み上げる(例:「値1」から「値2」への移動の場合、「列見出し6」を「値2」とともに読み上げる(「列見出し3」は読み上げない)。見出しセルの結合有無による挙動の違いはみられない。・列移動(セル間を垂直移動)の場合、移動したセルの複数の行見出しのうち、もっとの外側の行見出しを読み上げる(例:「値8」から「値11」への移動の場合、「列見出し3」を「値11」とともに読み上げる(「列見出し7」は読み上げない)。見出しセルの結合有無による挙動の違いはみられない。FF・値セルが結合している場合を除き、行移動(セル間を水平移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・値セルが結合している場合を除き、列移動(セル間を垂直移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・値セルが結合している場合、関係する見出しは1列分もしくは、一行分の見出ししか読み上げない(「例:値5」から「値6」への移動の場合、「列見出し6、列見出し3」しか読まない<列見出し4と列見出し7も読まれるべき>。IE11,Chrome<IE11>・値セルが結合している場合も含め、行移動(セル間を水平移動)の場合は移動した先の値セルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・値セルが結合している場合も含め、列移動(セル間を垂直移動)の場合は移動した先の値セルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・複数の見出しセルが横に結合している場合、値セルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・複数の行見出しセルが縦に結合している場合、その結合見出しセルは1つのセルとみなされず、1つ目のセル以外は空白の見出しセルが存在している挙動で読み上げる<Chrome>・値セルが結合している場合を除き、行移動(セル間を水平移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・値セルが結合している場合を除き、列移動(セル間を垂直移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・値セルが結合している場合、関係する見出しは1列分もしくは、一行分の見出ししか読み上げない(「例:値5」から「値6」への移動の場合、「列見出し3、列見出し6」しか読まない<列見出し4と列見出し7も読まれるべき>。Edge・行移動(セル間を水平移動)の場合は移動した先のセルに関連する複数の列見出し(結合している見出し含む)全て読み上げる・列移動(セル間を垂直移動)の場合は、移動した先のセルに関連する複数の行見出し(結合している見出し含む)全て読み上げる・値セルが結合している場合もその結合した値セルの全ての見出しを読み上げる(例:値6セルの列見出しであれば、「列見出し3、列見出し6、列見出し4、列見出し7」を「値6」とともに読み上げる。・列移動(セル間を垂直移動)とにみ、移動したセルの複数の列見出しのうち、もっとの外側の見出しを読み上げる(列見出しなら列見出し2、列見出し3、列見出し4のみ、行見出しなら行見出し1、行見出し2、行見出し3しか読まない)。複数列・行の見出しの場合のscope属性の対応及び対応状況の確認。パターン4との挙動の違いの確認。要素の見出しを全て読み上げる。scope属性で関連付けられていない値セルで当該見出しを読み上げない。IE11・パターン5-1<scope属性で列見出し指定>では、行移動(セル間を水平移動)の場合は、scope属性で列見出し指定した列見出し0を含め、関連する複数の列見出し(結合している見出し含む)全て読み上げる。行見出しとして「列見出し0」を読み上げない(これは望まれる挙動)。横に結合した値セルの複列行に渡る列見出しもすべて読み上げる(例:「値22と値23の結合」セルについては、「列見出し0」、「列見出し1」、「列見出し4」、「行見出し2」、「列見出し5」を読み上げる)・パターン5-2<scope属性で行見出し指定>の表では、別の行に移動した場合(行頭から前の行の行末に移動するなど)、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し(結合している見出し含む)全て読み上げる。列見出しとして「行見出し0」を読み上げない(これは望まれる挙動)。FF・パターン5-1<scope属性で列見出し指定>では、行移動(セル間を水平移動)の場合は、scope属性で列見出し指定した列見出し0を含め、関連する複数の列見出し(結合している見出し含む)全て読み上げる。行見出しとして「列見出し0」を読み上げない(これは望まれる挙動)。値セルが横に結合している場合、1列分の列見出ししか読み上げない。・パターン5-2<scope属性で行見出し指定>の表では、列移動(セル間を垂直移動)の場合は、、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し(結合している見出し含む)全て読み上げる。列見出しとして「行見出し0」を読み上げない(これは望まれる挙動)。値セルが縦に結合している場合、1行分の行見出ししか読み上げない。IE11,Chrome・パターン5-1<scope属性で列見出し指定>では、行移動(セル間を水平移動)の場合は、scope属性で列見出し指定した列見出し0を含め、関連する複数の列見出し(結合している見出し含む)全て読み上げる。行見出しとして「列見出し0」を読み上げない(これは望まれる挙動)。値セルが横に結合している場合、1列分の列見出ししか読み上げない。・パターン5-2<scope属性で行見出し指定>の表では、列移動(セル間を垂直移動)の場合は、、scope属性で行見出し指定した行見出し0を含め、関連する複数の行見出し(結合している見出し含む)全て読み上げる。列見出しとして「行見出し0」を読み上げない(これは望まれる挙動)。値セルが縦に結合している場合、1行分の行見出ししか読み上げない。NR2パターン3でこの環境では、scope属性の対応していないことが確認できたので、詳細な挙動の記述は省略するが、パターン5-1とパターン5-2で挙動に違いはなかった。headers属性の対応及び対応状況の確認。値セルが結合した場合の状況確認。要素の見出しを読み上げる。headers属性で指定した見出しとscope属性で指定された見出しが異なる場合は、headers属性が優先される。IE11・値セルと同じ行にない見出しを指定したものを含めて、headers属性で指定した行見出しを全て読み上げる・値セルの結合によって関連する列見出しが2列に渡る場合を除き、値セルと同じ列にない見出しを指定したものを含めて、headers属性で指定した見出しを読み上げる・列見出しは2行に渡ると、内側の1行分の列見出ししか読み上げなくなる。(「値3」から「値4」への移動の場合、headers属性で指定した「列見出し6」を「値4」とともに読み上げるが、「列見出し2」を読み上げない。FF・値セルと同列・同行にない見出しを指定したものを含めて、headers属性で指定した見出しを読み上げる・ただし、見出しは複数行・列に渡ると、「行見出し1」との組み合わせを除き、内側の1行分又は1列分の見出ししか読み上げなくなる(例:「値3」から「値4」への移動の場合、headers属性で指定した「列見出し6」を「値4」とともに読み上げるが、「列見出し2」を読み上げない。Safari・パターン4と挙動は同じ。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。