3

Considering the needs of screen readers, browser spell-checking, search engines, etc. how should non-human-language text be marked up in HTML?

Should it be wrapped in a particular tag?
Is there a standard special lang attribute for the enclosing tag (eg. "")?

Note that we may wish to mark up a form input as accepting some sort of non-human-language text.

Examples of non-human-language text:

  • a short cryptographic hash
  • a large block of encrypted data
  • proprietary formal notation
  • ASCII art
Improve this question
4

I like to use the <code> tag for anything code-like, hash-ish (pun), or data blocks. I use the <pre> tag for displaying direct ascii output (such as screen grabs from mainframes or art).

Improve this answer
2
  • Definitely agree about <code>, but still curious about how I'd mark up a form input that expected non-language (eg. a textbox for ascii art) to prevent a spell-checker from complaining. Maybe it's not possible?
    – Ian Mackinnon
    Oct 2 '10 at 23:03
  • @Ian Mackinnon - you could use a style sheet to force a monospace font to be used for a textbox and use a code converter to convert any " " into &nbsp; characters to force spaces to translate properly regardless of spacing.
    – Joel Etherton
    Oct 2 '10 at 23:13
1

There's no specific recommendations for WCAG 2.0 or even in HTML5 (yet). You can probably wrap it with a <code> tag (like Joel Etherton suggested).

ASCII art is different though. WCAG recommends that you provide the user a text description and a way to skip it. See H86.

Improve this answer
1

This depends on the actual content (there is an important difference between, e.g., a hash and ASCII art) and the context (editable vs. presented content). So after choosing the appropriate element (and possibly WAI-ARIA), HTML5 offers the following options:

  • The language tag zxx (IETF BCP 47/IANA registry) can be used for "no linguistic content":

    <span lang="zxx"><!-- … --></span>

  • The translate attribute (HTML5) can be used to specify that the content should not be translated:

    <span translate="no"><!-- … --></span>

  • The spellcheck attribute (HTML5) can be used to specify that editable content should not be checked for spelling/grammar errors:

    <textarea spellcheck="false"><!-- … --></textarea>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.