Monospace

Monospaced font plays a very important role in computer programming, data analysis, and related fields:

Even though computers can now display a wide variety of fonts, the majority of IDEs and software text editors employ a monospaced font as the default typeface. This increases the readability of source code, which is often heavily reliant on distinctions involving individual symbols, and makes differences between letters more unambiguous in situations like password entry boxes where typing mistakes are unacceptable. Monospaced fonts are also used in terminal emulation and for laying out tabulated data in plain text documents. In technical manuals and resources for programming languages, a monospaced font is often used to distinguish code from natural-language text.

Consequently, providing accessible "views" of monospaced font is one of AxAp's major goals. This page demonstrates several ways of using HTML markup to facilitate accessible reading and navigation of monospaced font in data files, program source code, etc.

Markup

At this level, our accessibility "tooling" consists largely of vanilla HTML elements, specified by tags (e.g., li, ol, pre, tt, ul) and supplemented by WAI-ARIA attributes (e.g., role, aria-*).

PRE

The pre (preformatted) tag is the normal way to display rectangular blocks of monospaced font in HTML. So, it is something like a styled variant of the div element. Unlike the p (paragraph) tag, pre preserves spaces.

TT, et al

The tt (teletype) tag is the normal way to display inline sequences of monospaced font in HTML. So, it is something like a styled variant of the span element. Unlike the pre (preformatted) tag, tt does not preserve spaces.

The br (break) tag can be added to force newline breaks, yielding a (flush left; ragged right) block of text. Each nbsp (non-breaking space) character entity takes up a full position, so it can be used for indentation.

UL, et al

The ol and ul (ordered and unordered list) tags are normally used with the li (list item) tag to create lists. However, ul can also be used a compact way to add an indentation level.

Status

Using assorted transformations and combinations of HTML tags, Rich Morin created a series of presentation mock-ups. Amanda Lacy then evaluated each example, using Apple's Safari web browser and VoiceOver screen reader. The Code Presentation Mockups page contains the resulting series of annotated and evaluated examples.

The current examples in the series share several characteristics:

  • The code is contained within a rectangular, lightly shaded area.

  • Multi-line statements can be joined, unless this would cause
    a line-ending comment to be folded into the middle of a line.

  • Existing indentation is preserved, but implemented by means
    of ul levels or sequences of nbsp character entities.

  • An indentation level is added (as required) to the contents
    of certain multi-line constructs (e.g., Elixir's case).

Our next step is to add support for code folding. This is likely to use a combination of ul and li tags, supplemented by appropriate WAI-ARIA attributes.


This wiki page is maintained by Rich Morin, an independent consultant specializing in software design, development, and documentation. Please feel free to email comments, inquiries, suggestions, etc!

Topic revision: r13 - 03 Aug 2016, RichMorin
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email