如何判断什么应该更易于访问的标记 <table> ,<div> 和 <ul><li> 如果设计已经表之类的数据？

Question

例如什么是可访问的方式，以代码这样的设计。

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将残疾后，其代码技术将保持可以理解的格式化?

Answer 1

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仍然可以通过只添加另一跨度向每个L1来完成。我假设让你的跨度浮动到右边的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>

Answer 2

这截屏看起来像一个<table>一个完美的候选人。这将是更容易的风格，X浏览器兼容，并与一些头完全访问。如果CSS样式被移除它也将呈现几乎相同。

Answer 3

这在我看来就像一个无序列表。采用div就像是没有更好的比使用表。使用一个无序列表使得从标记的观点来看更有意义。

Answer 4

一件事，将是更多的访问(或至少更加符合 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>