Accessible HTML structure for syntax highlighter

user_1394457 0
Viewed 66

I'm fixing an old WordPress syntax highlighter plugin (the plugin owner abandoned it), and while fixing the PHP errors was easy, while I'm fixing it, I might as well improve accessibility as well.

My question is regarding the HTML structure for the code. I want to show the number on one side and the code next to it:

enter image description here

I figured the HTML would be something like this:

<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>

But I'm not sure. Should the code be in an <ol> or a <table>? Are the spans for changing the color ok? Is the toolbar role appropriate? Am I missing something? If anyone has an example of an accessible code highlighter, I'd love to see it.

The way it is right now, it's a table with all numbers in one <td> and all the code in another!

accessibility html
1 Answers

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

I would say that <ol> is more appropriate than <table>.

Using a table here looks a bit like presentational purpose only. I wouldn't call a table with line numbers on the left and code lines on the right exactly a data table.

Are the spans for changing the color ok?

As as default and because you can't do better in HTML anyway, I would say yes, it's fine.

IF HTML has more specific elements to semantically indicate keywords, blocks, numbers, strings, variables, etc. then you would be strongly recommanded to use them instead of spans. But there aren't really such specific elements, except maybe <var, <kbd> and/or <samp>; but their semantic signification has never been very clear.

However, as a higher level, you should be using <code> or <pre> to enclose the whole code, to mark it as such. The problem is that, if you use those two elements, you can no longer use <ol> or <table>.

Perhaps the most acceptable compromise would be <ol><li><code>One line of code</code></li>...</ol>.

In any case, for specific things like marking keywords inside the line of code, you don't have another better choice than <span> in what HTML has to offer.

Is the toolbar role appropriate?

Given that you haven't given the code inside the div, it's a bit difficult to answer.

Normally, a toolbar should contain a set of buttons or occasionally other controls like dropdown menus, and in principle nothig else then that.

If the content of that div corresponds to this simple definition, yes, the toolbar is appropriate. Otherwise, no.

Not that it isn't very worth it to use the toolbar role for less than 3 buttons

As I can imagine here, this div contains only a single button to copy the code in clipboard. If it's indeed the case, then by the definition above, it isn't very appropriate.

user_19712160
Related