ホームページ » コーディング » マークアップを使用してHTMLテーブルのアクセシビリティを向上させる方法

    マークアップを使用してHTMLテーブルのアクセシビリティを向上させる方法

    Webアクセシビリティとは、視覚障害のある人が簡単に使用できるようにWebアプリケーションを設計することです。これらのユーザーの何人かはに頼ります スクリーンリーダー ウェブページの内容を読むため。スクリーンリーダー ページに存在するコードを解釈します そして その内容をユーザーに読み上げる.

    Webページで構造化された方法でデータを表示するために広く使用されているHTML要素です。そのデザインは、単純なものから複雑なものまで、行ヘッダ、マージヘッダなどを完備しています。.

    アクセシビリティを念頭に置いて表が設計されていないと、スクリーンリーダーが複雑な表のデータをユーザーにとって意味のあるものに変換することは困難になります。したがって、アクセシビリティの観点から複雑なHTMLテーブルをより理解しやすくするためには、 ヘッダ、列グループ、行グループなどが明確に定義されていることを確認する. これがどのようにしているのか、以下で見ます。 マークアップで達成.

    スコープ属性

    シンプルなテーブルでも

    とマークアップ scope = "col" 支援技術が、同じ列に続くセルが学生の名前であることを識別するのに役立ちます。.

    同様に、セルは

    含む scope = "colgroup" それがまたがる列グループ内をたどるセル内のデータがその特定の主題に関連付けられていることをユーザーが識別するのを助けます。.

    それからあります

    とマークアップ scope = "行" これは、同じ行内でそれに続くセルが “グレード” その特定の学生の名前に関する情報.

    行グループ

    それでは、別の例に移りましょう。この例では、行ヘッダと列ヘッダを入れ替えることを除いて、上の表とほぼ同じ表が表示されるため、行グループを操作できます。.

     
    ヘッダを明確に定義するタグ、あなたはそのアクセシビリティを向上させることができます。 範囲 セル内の類似したタイプのデータから生じる可能性がある混乱を避けるためのものであり、.

    従業員名 従業員コード プロジェクトコード 従業員の指定
    ジョン・ドウ 32456 456789 ディレクター
    ミリアム・ルター 78902 456789 副所長

    scope属性は何をするのですか? W3Cによると:

    つまり、データセルとそれに対応するヘッダーセルを関連付けるのに役立ちます。.

    上記の例では切り替えることができることに注意してください

    にとって . その限り 範囲 価値がある コル, 対応する列のヘッダとして解釈されます.

    範囲 attributeはこれら4つの値のいずれかを持つことができます。 コル, , 行グループ, コルグループ 列のヘッダー、行のヘッダー、列のヘッダー、行のグループのヘッダーをそれぞれ参照します。.

    複雑なテーブル

    それでは、もっと複雑なテーブルに移りましょう。.

    上の表は、3つの科目について、クラスの生徒とその実用的な成績と理論の成績を示しています.

    これがそのHTMLコードです。テーブルが使用している ローパン そして コルスパン データセルの結合ヘッダを作成する.

    学生の名前 生物学 化学 物理
    実用的 理論 実用的 理論 実用的 理論
    ジョン・ドウ A A+ B A A A-
    ミリアム・ルター A A C C+ A A-

    上記の表では、各データセル、つまり各表のセル 成績を表示する, 3つの情報に関連付けられています。

    • この学年はどの学生に属しますか?
    • この学年はどの科目に属しますか?
    • この学年は実用的または理論的なセクションですか??

    これら3つの情報は、3つの異なるタイプのヘッダーセルで構造的および視覚的に定義されています。

    • 学生の名前
    • 件名
    • 実用的または理論

    アクセシビリティのために同じ定義をしましょう.

    学生の名前 生物学 化学 物理
    実用的 理論 実用的 理論 実用的 理論
    ジョン・ドウ A A+ B A A A-
    ミリアム・ルター A A C C+ A A-

    上記のマークアップで追加しました 範囲 データセルに関する見出し情報を含むセルへ.

    列グループ

    Biology、Chemistry、Physicsの各セルは、それぞれ2つの列からなるグループに関連付けられています(Theory&Practical)。追加するだけ colspan = "2" 列グループを作成するのではなく、特定のセルが2セル分のスペースを占めることを示すだけです。.

    列グループを作成するには、使用する必要があります コルグループ それから追加 スパン 列グループに含まれる列数を示す属性.

    学生の名前 生物学 ジョン・ドウ
    件名 ジョン・ドウ ミリアム・ルター
    生物学 実用的 A A
    理論 A+ A
    化学 実用的 B C
    理論 A C+
    物理 実用的 A A
    理論 A- A-

    サンプルを用意したので、前の例の列グループに対して行ったように行グループを作成することから始めましょう。.

    ただし、次のようなタグを使用して行グループを作成することはできません。 コルグループ ないから 行グループ 素子.

    HTML行は通常、を使用してグループ化されます。 , そして 要素です。単一のHTML

    要素は1つ持つことができます , 1 そして複数 . 複数を使用します ボディ テーブル内で行グループを作成し、それぞれのスコープをヘッダーセルに追加します。.

    件名 ジョン・ドウ ミリアム・ルター
    生物学 実用的 A A
    理論 A+ A
    化学 実用的 B C
    理論 A C+
    物理 実用的 A A
    理論 A- A-

    行を追加しました “実用的” そして “理論” それぞれに ボディ 2行ずつの行グループを作成します。私達はまた追加しました scope = "行グループ" この2つの行に関する見出し情報を含むセル(この場合、成績が属する件名).

    今読む:CSSと同じ列の高さ