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

Question

我正在修复一个旧的 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>

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

现在的样子，它是一个表格，所有数字都在一个 <td> 中所有的代码都在另一个!

Answer 1

Should the code be in an <ol> or a <table>?

我会说 <ol>比 <table> 更合适.

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

Are the spans for changing the color ok?

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

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

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

也许最可接受的妥协是 <ol><li><code>One line of code</code></li>...</ol> .

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

Is the toolbar role appropriate?

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

通常，工具栏应该包含一组按钮或偶尔包含其他控件(如下拉菜单)，原则上仅此而已。

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

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

我在这里可以想象，这个 div 只包含一个按钮来复制剪贴板中的代码。如果确实如此，那么按照上面的定义，就不太合适了。