语法荧光笔的可访问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 "><div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">></span>
...
</ol>
</section>
但是我不确定。代码应该在<ol>还是在<table>？更改颜色的范围可以吗？工具栏角色合适吗？我想念什么吗？如果有人有可访问的代码突出显示示例，我很乐意看到它。
现在的样子，它是一个表，其中所有数字都在一个表中，<td>而所有代码都在另一个表中！
昆汀
代码应该在
<ol>还是在<table>？
我会说<ol>比这更合适<table>。
在这里使用表格看起来仅是出于演示目的。我不会称其表的左侧为行号而右侧的代码行为数据表。
更改颜色的范围可以吗？
作为默认设置，因为无论如何您都无法在HTML中做得更好，所以我会说是的，这很好。
如果HTML具有更具体的元素来在语义上指示关键字，块，数字，字符串，变量等，那么强烈建议您使用它们而不是跨度。但是实际上除了<var，<kbd>和/或<samp>;之外并没有这样的特定元素。但是它们的语义含义从未十分清楚。
但是，作为更高级别，您应该使用<code>或<pre>将整个代码括起来，以进行标记。问题是，如果您使用这两个元素，则不能再使用<ol>或<table>。
也许最可接受的折衷办法是<ol><li><code>One line of code</code></li>...</ol>。
无论如何，对于诸如在代码行内标记关键字之类的特定事情，您没有比<span>提供HTML更好的选择。
工具栏角色合适吗？
鉴于您尚未在div中提供代码，因此很难回答。
通常，工具栏应包含一组按钮或偶尔包含其他控件（如下拉菜单），原则上不包含其他按钮。
如果该div的内容与此简单定义相对应，是的，工具栏是合适的。否则，不会。
使用工具栏角色少于3个按钮不是很值得
正如我在这里可以想象的那样，该div仅包含一个按钮，可以将代码复制到剪贴板中。如果确实如此，那么按照上面的定义，它不是很合适。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Web代码的语法荧光笔，例如html，php，css
- 2
Web代码的语法荧光笔，例如html，php，css
- 3
语法荧光笔不起作用
- 4
HTML Canvas - 创建荧光笔效果
- 5
在Vimscript中，是否可以访问语法荧光笔已知的信息？
- 6
在Vimscript中，是否可以访问语法荧光笔已知的信息？
- 7
使用jquery语法荧光笔突出显示html textarea内的Java代码
- 8
语法荧光笔：找不到XML笔刷
- 9
语法荧光笔：找不到XML笔刷
- 10
CSS中的笔荧光笔效果
- 11
增加荧光笔返回的文本的长度
- 12
Elasticsearch 荧光笔误报
- 13
自定义荧光笔
- 14
荧光笔混合功能 OpenGL
- 15
jQuery和语法荧光笔在动态加载的选项卡上不起作用
- 16
python tkinter文本小部件中的Pygments语法荧光笔
- 17
VS代码JavaScript错误语法荧光笔在升级后无法正常工作
- 18
jQuery和语法荧光笔在动态加载的选项卡上不起作用
- 19
python tkinter文本小部件中的Pygments语法荧光笔
- 20
ace编辑器语法荧光笔中行尾的退出状态
- 21
我在哪里将Sublime Text的自定义语法荧光笔定义放在哪里？
- 22
使用荧光笔时看不到工具提示
- 23
荧光笔addHighlight不会更改文本颜色
- 24
使用Bootstrap Typeahead进行荧光笔替代
- 25
Resharper Quickfix荧光笔偏移量问题
- 26
weava荧光笔扩展如何在后台运行？
- 27
jqplot CategoryAxisRenderer荧光笔工具提示输出错误
- 28
ListView荧光笔不适用于某些png
- 29
荧光笔addHighlight不会更改文本颜色
我来说两句