css - 如果设计有表类数据，如何判断哪些标记更易于访问？ <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

IMO 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 添加另一个 span 来完成。我假设要获取 pdf 下载您将跨度 float 到右侧并给它一个宽度。这样添加另一列就不再是 css 代码了。你甚至可以删除 span 并将该样式添加到 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>