如果设计有像数据一样的表,如何判断什么应该是更容易访问的标记<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中的任何一种都可以.我可以说他们中的任何一个比其他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>