どのように判断すべきりマークアップ <table> ,<div> や <ul><li> ドイツ-ユニバーサルデザインはテーブルのようなデータはもらえますか？

StackOverflow https://stackoverflow.com/questions/2103749

質問

例えば、何のアクセス可能な方法でこのデザイン。

altテキストhttp://easycaptures.com/fs/uploaded/220/0715108922.png

現在、会社のCMSはこのHTMLのためにこのデザイン

<div id="presentationsContainer">
        <div class="ItemsContainer">
            <div class="presentationsItemContainer">
                <div class="TitleContainer">
                    Presentation October 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="Presentation.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    May 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    March 2009</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2009.ppt">Download PPT </a>
                </div>
            </div>
            <div class="presentations">
                <div class="TitleContainer">
                    Results Presentation September 2008</div>
                <div class="MediaContainer">
                    <a target="_blank" href="2008.ppt">Download PPT </a>
                </div>
            </div>
        </div>
    </div>

のように <table> 良くないのでスクリーンリーダーユーザーその後はどうな画面ユーザーが多くの意味divタグの両方を問題のためのスクリーンリーダーユーザーまたは無意味div少ない問題をより適切にマークアップ

何をすべき使用するためのアクセスがcssが無効にしてあるコード技術くばフォーマット?

役に立ちましたか？

解決

IMO任意の3つの方法の罰金です。私が良くなるためにそれらのいずれかを議論することができ、他の2

私はそれを見ていたときに自分がちょうどその少ないコードので、リストに行くだろう。

<ul id="presentationsContainer">
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
    <li>
        Presentation October 2009
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
        <span><a target="_blank" href="Presentation.ppt">Download PPT </a></span>
    </li>
</ul>

の [編集] の追加のダウンロードのPPTの追加はまだだけ各Liに対する別のスパンを追加することによって行うことができます。私はあなたが右にスパンを浮動PDFダウンロードを取得することを想定し、それに幅を与えています。別の列を追加し、この方法は、任意のより多くのCSSコードではありません。地獄あなたもスパンを削除し、タグにそのスタイルを追加することができます。何のリンクがないと仮定すると、その最初の列です。

あなたは（複数の列とのより良い選択であるかもしれない）テーブルにそれを変更したい場合は、

しかし、あなたはちょうどこのような何かを行うことができます：あなたはすでにかかわらず、目を通すためにそこにあるどのくらいのより多くのコードを参照することができます。 

<table id="presentationsContainer">
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
  <tr>
    <td class="main" width="60%">Presentation October 2009</td>
    <td class="dl" width="20%">Download pdf</td>
    <td class="dl" width="20%">Download ppt</td>
  </tr>
</table>

他のヒント

<table>のための完璧な候補のようなスクリーンショットに見えます。これは、x-ブラウザの互換性、および完全にアクセスできるいくつかのヘッダーで、スタイルに容易になります。 CSSスタイルが削除された場合もほとんど同じレンダリングされます。

順不同リストのように私にはそのルックス。そのようDIVのを使用することは良いのテーブルを使用するよりもありません。順不同リストを使用すると、マークアップの観点から、より多くの理にかなっています。

これより少なくともより は、W3Cのガイドライン がダウンロードリンクがあっても無視されるのでご注意のコンテキスト

いるだけではなく、:

<a target="_blank" href="2009.ppt">Download PPT </a>

き:

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top