4

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

替代文字 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>

like<table>对屏幕阅读器用户不利，那么具有大量非语义 div 标签的屏幕用户会发生什么都会给屏幕阅读器用户带来问题，或者非语义 div 会产生比正确标记更少的问题

什么应该用于可访问性，如果 css 将被禁用，那么哪种代码技术将保持可理解的格式？

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

4

4 回答 4

8

IMO 三种方式中的任何一种都可以。我可以争辩说他们中的任何一个都比其他两个更好。

我自己会选择这个列表，因为当我查看它时它的代码更少。

<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 下载，您将跨度浮动到右侧并给它一个宽度。这样添加另一列不再是 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>
于 2010-01-20T18:20:30.723 回答
3

该屏幕截图看起来像是<table>. 样式更容易，与 x 浏览器兼容，并且某些标题完全可访问。如果删除 css 样式，它也会呈现几乎相同的效果。

于 2010-01-20T18:45:22.197 回答
1

一件更容易访问（或至少更符合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>
于 2010-02-10T09:42:59.840 回答
1

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

于 2010-01-20T18:11:58.530 回答