我正在修复一个旧的 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 "><div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">></span>
...
</ol>
</section>
但我不确定。代码应该在 <ol>
中吗?或 <table>
?改变颜色的跨度可以吗?工具栏角色合适吗?我错过了什么吗?如果有人有可访问的代码突出显示的示例,我很乐意看到它。
现在的样子,它是一个表格,所有数字都在一个 <td>
中所有的代码都在另一个!
最佳答案
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 只包含一个按钮来复制剪贴板中的代码。如果确实如此,那么按照上面的定义,就不太合适了。
https://stackoverflow.com/questions/63782827/
相关文章:
javascript - Three.JS - 使用相同的骨骼结构在 SkinnedMeshes 之
javascript - 指定列有更新时触发的 OnChange 触发器
android - 运行错误 01 46,响应 : . ..UNABLETOCONNECT
asp.net-core - 如何访问 Program.cs Main 方法中的 IHostingE
typescript - 键入一个 "type predicate"没有任何
python-3.x - 由于使用 Docker 的 PostgresDB 连接失败,无法启动 Ap
python - 是否有用于不同范数向量空间之间坐标转换的python算法?
python - 为什么我无法使用 "Send_file"从 Flask 发送图像以使用react