个人中心
gpt4 book ai didi

css - 如果设计有表类数据，如何判断哪些标记更易于访问？ ,
和
  • 转载 作者：技术小花猫 更新时间：2023-10-29 11:49:23 27 4
    gpt4 key购买 nike

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

    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，那么哪种代码技术将保持可理解的格式？

    最佳答案

    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>

    关于css - 如果设计有表类数据，如何判断哪些标记更易于访问？ <table> , <div> 和 <ul><li>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2103749/

    27 4 0

这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =

  • css - 嵌套table in table in table in table in table in div显示 block 不继承高度

    为什么 wrapper #4 没有继承其父表容器的高度？表格嵌套在一个显示 block 包装器中，每个嵌套的div是显示表格，每个表格继承到最里面的一个。是什么原因造成的，我该如何解决？ jsfidd

  • html - Bootstrap table table-condensed table-hover，顶部边框不显示

    我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见，除非我将其大小设置为 2 px。 我该如何解决这个问题？ HTML #name 1.one 2.two 3.thr

  • 数据库结构 : Relational table with more columns or relational table to a relational table?

    我正在逻辑层面上设计一个数据库，以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理，所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO

  • database - DB::table ('table' ) 和 model::('table' ) 之间的区别

    在 Laravel 上，我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别？ 谢谢。 最

  • python - 在 Python 中抓取 TABLE I NEED
    之间的所有文本

    我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据，在此页面上存在一个表，id 为:main_table_countries_today其中包含我希望收集的 15x225

  • javascript - Sequelize : Many To Many table(CROSS TABLE) associated to other table

    这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>

  • javascript - "Table tr"、 "table tbody"，不适用于 javascript 仅适用于 "table"

    我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时，我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同，我想将它们显示在表格之外的另一个元素中。

  • MySql 当 table.column = table.column 时选择 table.column

    假设我的数据库中有一张地铁 map ，其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH

  • css - CSS 规则 "Semantics": table, table-row, table-cell

    我最近经常使用这些属性，尤其是 display: table-cell。它在现代浏览器中得到了很好的支持，并且它对某些网格有很多好处，并且可以非常轻松地对齐内容，而无需棘手的标记。但在过去的几天里，我

  • css - 两列等高只有 css(不显示 : table, table-row, table-cell)

    在 CSS 中，我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20

  • apache-spark - spark.table ("TABLE A") 和 spark.read 之间有什么区别。 ("TABLE A")

    问题作为标题，我正在学习sparkSQL，但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.

  • Sqlite3 : Creating a new table from an old table is not populating the sqlite_sequence table correctly

    我正在尝试根据 this answer 删除表上的非空约束.但是，它似乎没有在 sqlite_sequence 中创建条目。这样做之后，即使我可以在使用测试表时让它正常工作。 有趣的是，如果我备份我的

  • javascript - sap.m.Table 中是否有多个标题，如 sap.ui.table.Table？

    var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t

  • Mysql (select a.id from table a) 和 (select table.id from table) 之间的区别

    下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉，如果我的问题重复)。 最佳答案 完

  • css - 为什么 table::after 元素是在 table > td 元素之后创建的，而不是 table 元素？

    我尝试在表格后添加点，方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效，但似乎在第一个表格列之后添加了点，而不是

  • mysql - 数据库设计 : Multiple join tables or one table with identifying 'table' column

    我正在设计一个可以标记任何内容的数据库，我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎，希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag

  • html - CSS table-cell 中的 table 元素偏移其他 table-cell 内容

    "center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么？如何在不要求在我的表格前添加“虚

  • html - 我可以替换 ' with `
    ` + css: ` table{...}` 吗？

    table{border:1px solid #000;}没有 border=1 似乎无法工作陈述。与更改 的方式相同进入input{width:400px;} , 我想用 并仅在 css 中声明边

  • iPhone个性 table 圆角 table

    我对 iPhone 屏幕设计没有太多经验，但我需要制作一个像这样的表格:(图片)，我进行了调查，但没有找到任何东西。该表需要有一个圆角，用户将能够插入数据，在本例中是名字、姓氏等......现在我使用

    • 技术小花猫
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com