ヘッダーを固定した表のアクセシビリティ - Qiita
この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装
border-collapse | A Day in the Life
統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。 今まで統合ボーダーモデルを選んだ時のtableにかかるborderはtableの外にかかるものだと思い込んでた（苦）気になったのでborder-collapseをcollapse（統合ボーダーモデル）、tableとtd,thのborderに1px solidのプロパティを与え、各ブラウザでどのように表示されるか調べてみた。 Win Firefox...左に1pxはみ出す Win IE6...tableの内側に表示 Mac Safari...右に1pxはみ出す Mac Firefox...左に1pxはみ出す borderに1px以上のプロパティを与えてやるとWin IE6以外のブラウザは、ボーダーの半分
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
