如何判断什么应该是更容易访问的标记,
  • 设计是否有类似表格的数据?

发布于 2024-08-18 17:22:19 字数 1935 浏览 5 评论 0原文

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

替代文本 http://easycaptures.com/fs/uploaded/220/0715108922.png< /a>

目前,我公司的 CMS 为这种设计

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

(例如 )生成此 HTML 对于屏幕阅读器用户来说并不好,那么对于具有大量非语义 div 标签的屏幕用户来说,将会发生什么屏幕阅读器用户或非语义 div 的问题比正确标记产生的问题要少,

应该使用什么来实现可访问性,如果禁用 css,那么哪种代码技术将保持可理解的格式?

for example what is the accessible way to code this design.

alt text http://easycaptures.com/fs/uploaded/220/0715108922.png

currently my company's CMS producing this HTML for this design

<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> is not good for screen reader user then what will happen to screen user with lots of non semantic div tags are both will create problem for screen reader user or non semantic div creates less problem than properly markup

What should be use for accessibility and if css would be disabled then which code technique will keep understandable formatting?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

温柔戏命师 2024-08-25 17:22:19

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 添加另一个范围来完成。我假设要下载 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>

IMO any of the 3 ways is fine. I could argue any one of them to be better then the other 2.

Myself would go with the list just because its less code when I'm looking at it.

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

[EDIT] Adding the additional download ppt can still be done by just adding another span to each li. I am assuming that to get the pdf download your floating the span to the right and giving it a width. This way adding another column is not any more css code. Hell you could even remove the span and add that style to the a tag. assuming no links are in that first column.

However if you want to change it to a table (which may be a better choice with more columns) you can just do something like this: you can already see how much more code there is to look through though.

<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>
枕头说它不想醒 2024-08-25 17:22:19

该屏幕截图看起来非常适合 。它将更容易设计样式,与 x 浏览器兼容,并且某些标头完全可访问。如果删除 css 样式,它也会呈现几乎相同的效果。

That screen shot looks like a perfect candidate for a <table>. It will be easier to style, x-browser compatible, and with some headers completely accessible. It will also render pretty much the same if the css styling is removed.

不顾 2024-08-25 17:22:19

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

That looks to me like an unordered list. Using div's like that is no better than using tables. Using an unordered list makes a lot more sense from a markup standpoint.

爱殇璃 2024-08-25 17:22:19

一件更容易访问的事情(或者至少更符合 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>

One thing that would be more accessible (or at least more in line with the W3C’s guidelines) is download links that make sense out of context.

So, instead of just:

<a target="_blank" href="2009.ppt">Download PPT </a>

You could have:

<a target="_blank" href="2009.ppt" title="Download March 2009 presentation (PowerPoint file)">Download PPT </a>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文