如果设计中有表状数据，如何判断<table>、<div>和<ul><li>哪种标记更易访问？

Question

例如，对此设计进行编码的可访问方式是什么。

alt text 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将被禁用，那么哪种代码技术将保持可理解格式？

Answer 1

我认为这3种方法中的任何一种都可以。我可以说他们中的任何一个都比另外两个更好。

我自己也会使用这个列表，因为当我看它的时候，它的代码更少。

<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代码了。见鬼，你甚至可以删除跨度，并将该样式添加到a标记中。假设第一列中没有链接。

但是，如果您想将其更改为一个表(这可能是一个具有更多列的更好的选择)，您可以这样做:您已经可以看到还有多少代码需要查看。

<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>

Answer 2

这张屏幕截图看起来像是<table>的完美候选者。它将更容易样式化，与x浏览器兼容，并且一些头文件完全可访问。如果去掉css样式，它也会呈现出几乎相同的效果。

Answer 3

在我看来，这是一个无序列表。像这样使用div并不比使用表更好。从标记的角度来看，使用无序列表更有意义。