时间戳

首页 > 解决方案 > 语法高亮的可访问 HTML 结构

html - 语法高亮的可访问 HTML 结构

问题描述

我正在修复一个旧的 WordPress 语法高亮插件（插件所有者放弃了它），虽然修复 PHP 错误很容易，但在我修复它的同时，我还不如改进可访问性。

我的问题是关于代码的 HTML 结构。我想在一侧显示数字及其旁边的代码：

在此处输入图像描述

我认为 HTML 应该是这样的：

<section> <!-- Maybe article? -->
    <header>
        <h1>Sample HTML</h1> <!-- Maybe <h3> would fit my blog posts best -->
        <div role="toolbar">toolabar buttons here</div>
    </header>
    <ol>
        <li><span class="sh-r ">&lt;div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">&gt;</span>
        ...
    </ol>
</section>

但我不确定。代码应该在 a<ol>还是 a中<table>？改变颜色的跨度可以吗？工具栏角色是否合适？我错过了什么吗？如果有人有一个可访问的代码荧光笔示例，我很乐意看到它。

现在的方式是一张表，其中所有数字都在一个表中，<td>所有代码都在另一个表中！

标签： htmlaccessibility

解决方案

代码应该在 a<ol>还是 a中<table>？

我会说这<ol>比<table>.

在这里使用表格看起来有点像仅用于演示目的。我不会将左侧行号和右侧代码行的表称为数据表。

改变颜色的跨度可以吗？

默认情况下，因为无论如何您都无法在 HTML 中做得更好，所以我会说是的，这很好。

如果 HTML 有更具体的元素来在语义上指示关键字、块、数字、字符串、变量等，那么强烈建议您使用它们而不是 span。但实际上并没有这样的特定元素，除了可能<var和<kbd>/或<samp>; 但它们的语义含义从来都不是很清楚。

但是，作为更高级别，您应该使用<code>or<pre>将整个代码括起来，以将其标记为这样。问题是，如果你使用这两个元素，你就不能再使用<ol>or <table>。

也许最可接受的折衷方案是<ol><li><code>One line of code</code></li>...</ol>.

无论如何，对于特定的事情，比如在代码行中标记关键字，您没有比<span>HTML 提供的更好的选择了。

工具栏角色是否合适？

鉴于你没有给出 div 里面的代码，这有点难以回答。

通常，工具栏应该包含一组按钮或偶尔的其他控件，如下拉菜单，原则上除此之外别无其他。

如果那个 div 的内容对应于这个简单的定义，是的，工具栏是合适的。否则，没有。

并不是说少于 3 个按钮使用工具栏角色不是很值得

正如我在这里想象的那样，这个 div 只包含一个按钮来复制剪贴板中的代码。如果确实如此，那么根据上面的定义，它不是很合适。

推荐阅读