accessibility: replace <tt> with appropriate tags

<tt> is a "non-conforming feature".
It is "entirely obsolete, and must not be used by authors"
as specified in https://www.w3.org/TR/html51/obsolete.html#elementdef-tt.

This PR replaces <tt> with either <code> or <kbd> as suggested
in the above recommendation. Practically, it improves accessibility
of the page, allowing screen readers to understand the document
more accurately.

Note that both <code> and <kbd> are recognized in older browsers already,
so this PR doesn't cause any incompatibility issue.
This commit is contained in:
Sorawee Porncharoenwase 2020-10-01 12:35:09 -07:00 committed by Matthew Flatt
parent b3e27ca69c
commit 93e280c042

View File

@ -71,7 +71,7 @@ function MakeContextQueryItem(qry, desc) {
+' onclick="return new_query(this,\'' +' onclick="return new_query(this,\''
+encodeURIComponent(desc) +encodeURIComponent(desc)
+'\');">' +'\');">'
+ desc.replace(/{{/g, "<tt><b>").replace(/}}/g, "</b></tt>") + desc.replace(/{{/g, "<code><b>").replace(/}}/g, "</b></code>")
+ '</a></li>'; + '</a></li>';
} }
@ -112,34 +112,34 @@ function InitializeSearch() {
+'</div>' +'</div>'
+'<div id="help_panel" '+panelstyle+'>' +'<div id="help_panel" '+panelstyle+'>'
+'<ul style="padding: 0em; margin: 0.5em 1.5em;">' +'<ul style="padding: 0em; margin: 0.5em 1.5em;">'
+'<li>Hit <tt>PageUp</tt>/<tt>PageDown</tt> or' +'<li>Hit <kbd>PageUp</kbd>/<kbd>PageDown</kbd> or'
+' <tt>C+Enter</tt>/<tt>S+C+Enter</tt> to scroll through the' +' <kbd>Ctrl</kbd>+<kbd>Enter</kbd> / <kbd>Shift</kbd>+<kbd>Ctrl</kbd>+<kbd>Enter</kbd>'
+' results.</li>' +' to scroll through the results.</li>'
+'<li>Search terms are all required, use' +'<li>Search terms are all required, use'
+' &ldquo;<tt>N:<i>str</i></tt>&rdquo; to negate a term.' +' &ldquo;<kbd>N:<i>str</i></kbd>&rdquo; to negate a term.'
+'<li>Use &ldquo;<tt>M:<i>str</i></tt>&rdquo; to match only' +'<li>Use &ldquo;<kbd>M:<i>str</i></kbd>&rdquo; to match only'
+' identifiers from modules that (partially) match' +' identifiers from modules that (partially) match'
+' &ldquo;<tt><i>str</i></tt>&rdquo;; &ldquo;<tt>M:</tt>&rdquo; by' +' &ldquo;<kbd><i>str</i></kbd>&rdquo;; &ldquo;<kbd>M:</kbd>&rdquo; by'
+' itself will restrict results to bound names only.</li>' +' itself will restrict results to bound names only.</li>'
+'<li>Use &ldquo;<tt>H:<i>str</i></tt>&rdquo; to match only' +'<li>Use &ldquo;<kbd>H:<i>str</i></kbd>&rdquo; to match only'
+' modules that implement a language' +' modules that implement a language'
+' &ldquo;<tt>#lang <i>str</i></tt>&rdquo;.</li>' +' &ldquo;<kbd>#lang <i>str</i></kbd>&rdquo;.</li>'
+'<li>Use &ldquo;<tt>R:<i>str</i></tt>&rdquo; to match only' +'<li>Use &ldquo;<kbd>R:<i>str</i></kbd>&rdquo; to match only'
+' modules that implement a reader module' +' modules that implement a reader module'
+' &ldquo;<tt>#reader <i>str</i></tt>&rdquo;.</li>' +' &ldquo;<kbd>#reader <i>str</i></kbd>&rdquo;.</li>'
+'<li>&ldquo;<tt>L:<i>str</i></tt>&rdquo; is similar to' +'<li>&ldquo;<kbd>L:<i>str</i></kbd>&rdquo; is similar to'
+' &ldquo;<tt>M:<i>str</i></tt>&rdquo;, but' +' &ldquo;<kbd>M:<i>str</i></kbd>&rdquo;, but'
+' &ldquo;<tt><i>str</i></tt>&rdquo; should match the module name' +' &ldquo;<kbd><i>str</i></kbd>&rdquo; should match the module name'
+' exactly; &ldquo;<tt>L:</tt>&rdquo; by' +' exactly; &ldquo;<kbd>L:</kbd>&rdquo; by'
+' itself will restrict results to module names only.</li>' +' itself will restrict results to module names only.</li>'
+'<li>&ldquo;<tt>T:<i>str</i></tt>&rdquo; restricts results to ones in' +'<li>&ldquo;<kbd>T:<i>str</i></kbd>&rdquo; restricts results to ones in'
+' the &ldquo;<tt><i>str</i></tt>&rdquo; manual (naming the' +' the &ldquo;<kbd><i>str</i></kbd>&rdquo; manual (naming the'
+' directory where the manual is found).</li>' +' directory where the manual is found).</li>'
+'<li>Entries that correspond to bindings have module links that' +'<li>Entries that correspond to bindings have module links that'
+' create a query restricted to bindings in that module (using' +' create a query restricted to bindings in that module (using'
+' &ldquo;<tt>L:</tt>&rdquo;), other entries have similar links for' +' &ldquo;<kbd>L:</kbd>&rdquo;), other entries have similar links for'
+' restricting results to a specific manual (using' +' restricting results to a specific manual (using'
+' &ldquo;<tt>T:</tt>&rdquo;); you can control whether manual links' +' &ldquo;<kbd>T:</kbd>&rdquo;); you can control whether manual links'
+' appear (and how) in the preferences.</li>' +' appear (and how) in the preferences.</li>'
+'<li>Right-clicking these links refines the current query instead of' +'<li>Right-clicking these links refines the current query instead of'
+' changing it (but some browsers don\'t support this).</li>' +' changing it (but some browsers don\'t support this).</li>'
@ -387,8 +387,8 @@ function SanitizeHTML(str) {
.replace(/>/g, "&gt;") .replace(/>/g, "&gt;")
.replace(/</g, "&lt;") .replace(/</g, "&lt;")
.replace(/\"/g, "&quot;") .replace(/\"/g, "&quot;")
.replace(/{{/g, "<tt><b>") .replace(/{{/g, "<code><b>")
.replace(/}}/g, "</b></tt>"); .replace(/}}/g, "</b></code>");
} }
function UrlToManual(url) { function UrlToManual(url) {
@ -526,7 +526,7 @@ var indicators =
: (j==i) ? "&#9658;" : (j==i) ? "&#9658;"
: "&middot;"; : "&middot;";
} }
a.push("&nbsp;<tt>"+s+"</tt>"); a.push("&nbsp;<code>"+s+"</code>");
} }
return a; return a;
}()); }());