web-dev-qa-db-ja.com

テーブルを使用してWebフォームをレイアウトすることを選択します：（どのように）それらを有効/アクセス可能にできますか？

数十の非常に複雑なフォームでサイトを構築しています。私たちにとって最善の解決策は、<table>を使用してフォームを作成することです。

しかし、私たちはアクセシビリティと標準について心配しています。

私が思うのは、フォームmayは完全にアクセス可能であり、適切な方法で作成されていれば標準は有効であるということです。

例えば：

<table>
    <tr>
       <th rowspan="2">Your informations</th>
       <th><label for="name">Name</label></th>
       <td><input id="name"></td>
    </tr>
    <tr>
       <th><label for="surname">Surname</label></th>
       <td><input id="surname"></td>
    </tr>
</table>

私にとってこれは完全に有効な形式であり、アクセスしやすいものでもあります。しかし、私は間違っているかもしれません。私ですか？

最近アクセス可能なフォーム/標準を有効なフォームにするために、どこに注意を払う必要がありますか？

seoの観点にも興味があります。

追伸テーブルは単純なテーブルではなく、rowspan、colspanを多く使用しますが、構造（colsとrowsの意味、見出しなどは完全に適切です）

seohtml5formsaccessibilitytable
3
skyline26

一般的なアクセシビリティは、どのHTML Doc Typeに応じて異なります：

  • XHTML 1.0 Transitional
  • HTML 4.01 Transitional
  • HTML5

これは、W3CにはHTML5で廃止された多くのアクセシビリティ属性があるため、最初に決定するのは、サポートするDOCタイプです。アクセシビリティは私の最強の分野ではなく、対応する必要があるものでもありませんが、亀裂をとることに決め、HTML5を使用して Webコンテンツアクセシビリティガイドライン1.0用のW3C HTMLテクニック アクセシビリティの場合に使用する必要がありますWebデザインでは重要です。

とにかく、テーブルを使用したHTML5の優れたアクセシビリティでは、次のようになります。

<table>
    <CAPTION>Please Input Your information</CAPTION>
    <tr>
        <th><label for="firstname" accesskey="n">Name</label></th>
        <td><input id="firstname" tabindex="1"></td>
    </tr>
    <tr>
        <th><label for="surname" >Surname</label></th>
        <td><input id="surname" tabindex="2"></td>
    </tr>
</table>

基本的に、あなたは物事があなたが知っているようにうまく説明されていることを確認する必要があり、キャプションフィールドは音声シンセサイザーでうまく機能し、テーブルが何であるかを正確に読み取る必要があります。したがって、この例では、「情報を入力してください」は情報を要求するのに適した説明です。さらに、ページのどこかに、より良いアクセシビリティのためにその情報が必要な理由を追加できます。

tabindexはタブの順序を設定します。視覚障害者や他の障害のあるユーザーは、タブを非常に頻繁に使用してナビゲートします。

accesskeyはテーブルにフォーカスポイントを設定するため、この場合はNを押すとテーブルにフォーカスが移動します。

HTML4では、ABBRのようなものを使用できます。これは、音声シンセサイザーが優先メソッドとしてラベル上で読み上げます。理由は不明です。

私が出会った他の有用なフィールドは<table summary="I am a input table for user information">です。これはバージョン5で廃止されましたが、追加情報を追加するのが非常に便利なため、W3Cはキャプションをもっと使用したい、他の誰かがこれに答えられるかもしれません。

1
Simon Hayter

レイアウトにテーブルを使用しないことを強くお勧めします。

しかし、まだテーブルをレイアウトに使用し、それについてアクセスしたい場合、次のようにする必要があります。

  1. <caption>タグを使用しない
  2. <th>を使用しない
  3. HTML5を使用している場合、廃止されているため、summary属性は使用しないでください。

これは、 成功基準1.3.1 のためであり、準拠するには、一般的な失敗を回避する必要があります。特に一般的な 障害番号46 。一般的な障害を使用する場合、準拠していません。

プレゼンテーションにCSSを使用することは、アドバイザリテクニックと見なされます（つまり、既存のアクセシビリティを強化します）。これが十分な技術ではない主な理由は、支援技術がスタイルシートを完全に無視してコンテンツを表示するためです。そして、それは本当に、本当に良いことです。

フォーム全体を見なくても、508またはWCAGに準拠していないことを保証できます。

また、スクリーンリーダーユーザーの観点から考えると、フォームは次のように聞こえます。

2列2行のテーブル。情報を入力してください。行1列1名前列2編集行2列1姓列2編集

これは、本当にシンプルなテーブルの2つのフィールドのみです。 rowspanを追加すると、テーブルが実際に別のエラーを引き起こす可能性があります（ FR49 ）。

この手法は絶対に避けてください。

PS。 SEOに関しては、マークアップはそれほど重要ではありませんが、 Googleはしばらく前に発表しました ページ速度はランキングに影響し、テーブルは間違いなくHTMLを重くします。

<tr>
   <td><label for="name">Name:</label></td>
   <td><input type="text" id="name" name="name" /></td>
</tr>

コードとロードの両方に比べて大幅に長い

<label class="cssClass" for="name">Name: 
    <input type="text" name="name" id="name" />
</label>
1
MrJinPengyou

レイアウトにCSSを使用することは、レイアウトにHTMLテーブルマークアップを使用するよりも間違いなく優先されます。既存のレイアウトテーブルをCSSに変換するのに多大な労力が必要な場合、別の方法として、レイアウトテーブルに ARIAプレゼンテーションの役割 を指定します。

ARIAプレゼンテーションロールは、ATユーザーエージェントに、この要素がプレゼンテーション用であり、安全に無視できることを伝えます。

0
Claudia Alden Case