Type each heading as ordinary words and let the stylesheet add the letter spacing, the capitals and any stars or flourishes. The page looks the same, and the words stay words for screen readers, searches and phones.

A heading that looks like a painted sign

A garden centre's home page opens its spring section with a heading typed as S P R I N G, between two rows of stars. On the owner's monitor it looks like a hand-painted sign.

The effect was made at the keyboard: capitals, a space after every letter, and stars typed on either side. A person glancing at it reads one word.

Software reads a row of single letters between rows of symbols. That difference is felt by people using screen readers, by anyone searching, and by everyone on a phone.

What a screen reader makes of it

A screen reader turns the page into speech for people with little or no sight. Depending on the program and its settings, it may name each star and read each spaced letter on its own.

The listener then has to collect the letters and assemble the word. Many screen reader users move through a page by jumping from heading to heading, so this is often what they hear first.

Words typed entirely in capitals add a smaller problem. Some screen readers take a short word in capitals for an abbreviation and spell it out.

Where else the trick fails

The same heading causes trouble well beyond screen readers:

The phone is where owners usually notice. A heading that fits one line on a monitor arrives as three lines of scattered letters, with part of a word stranded at the end of one.

Spacing belongs in the stylesheet

The same look can come from the design instead of the keyboard. A stylesheet can space the letters of a word by any amount while the word itself stays whole.

It can also display the heading in capitals while the text underneath keeps ordinary capitalisation, so screen readers say a word instead of spelling it.

Because the effect is set in one place, every heading of that kind matches, and a change of mind about the spacing is one edit rather than retyping every heading.

Ornaments drawn, not typed

Stars, flourishes and short rules belong in the design too. The stylesheet can draw them beside the heading as a small image or a border, which screen readers do not announce.

An ornament placed in the page as an image needs empty alternative text, which tells screen readers to pass over it.

Ornaments set this way also behave on a phone, shrinking with the heading instead of wrapping onto a line of their own.

A heading should be marked as one

Decorated headings like these are often not headings in the code at all, only a line of large bold text. Screen reader users jumping between headings skip straight past them.

Mark each one as a heading at the right level, so the page has an outline: one main heading, then sections, then subsections beneath them.

Search engines read that outline as well, and a heading made of real words tells them what the section below it is about.

A worked example

A sheet music store in a city neighbourhood sells printed music, method books and exam books, along with stands, strings and other accessories, to students, teachers and community choirs.

Each section of its home page, from new arrivals to exam books, was headed with spaced capitals between rows of stars, typed by staff in the site's editor.

A piano teacher who uses a screen reader mentioned, while ordering by phone, that the home page took a long time to listen to.

The headings turned out to be bold paragraphs, not headings. On phones they broke mid-word, and searching the page for the word arrivals found nothing.

They were retyped as plain words and marked as headings. The theme now adds the spacing and capitals, with a small star on each side drawn from the stylesheet.

On screen the page looks as it did. To a screen reader, a search engine or a phone, each heading is now a word.

Other keyboard decorations

The same habit shows up in other forms: rows of arrows or underscores as dividers, symbols borrowed from other alphabets to make fancy lettering, and little faces made from punctuation.

Each is read aloud by some screen readers, character by character, and none of it means anything to a search engine.

The remedy is the same. Dividers and ornaments come from the design, and the words stay plain text.

Keeping it that way

The fix lasts only if new headings are made the same way. Add the spaced style to the heading choices in the site's editor, so staff pick it from a menu.

A line in the site's editing notes helps too: type headings as ordinary words, and let the chosen style supply the decoration.

The counter-case

A logo, or a sign photographed for the site, can use spaced letters and stars freely, because it is artwork. As an image it needs only alternative text giving its words.

A single decorative character in a heading does little harm, and some screen readers skip common symbols altogether.

But a word spelled out with spaces is still a row of letters to every program that reads it. Where decoration touches the words, the design should supply it.

Retyping the decorated headings

  1. Find every heading typed with spaces or symbols.
  2. Read the page on a phone held upright.
  3. Retype each heading as ordinary words.
  4. Mark each one as a heading at the right level.
  5. Add the spacing and capitals in the stylesheet.
  6. Draw the ornaments as part of the design.
  7. Add the style to the editor's heading choices.

Step three is the change every reader and program notices. Once the letters are a word again, screen readers say it, searches match it and phones keep it together; the styling only restores the look.

A handwriting font used for every paragraph explains how to keep a decorative typeface for a few large words and a plain one for reading.

Frequently asked questions

Why not type spaces between the letters of a heading?

Software reads each spaced letter on its own. Screen readers may spell the word out, searches do not match it, and phones split it across lines.

How do screen readers handle stars typed in a heading?

Depending on the program and its settings, they may read each star aloud as a word, so the listener hears a row of symbols before the heading itself.

How can a heading keep its spaced look?

Set the letter spacing and capitals in the stylesheet. The text stays a whole word in normal case, and the design supplies the look on every screen.

Where should stars and flourishes come from?

From the design, drawn by the stylesheet as an image or border beside the heading. An ornament placed in the page as an image needs empty alternative text.

Does it matter whether the line is marked as a heading?

Yes. Screen reader users jump between headings, and search engines read them as the page's outline. Bold text that only looks like a heading is skipped.

Can a logo use spaced letters and stars?

Yes. A logo or photographed sign is artwork, so the spacing is part of the image. Give it alternative text that states the words it shows.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Headings typed with spaces and symbols?

Send us a link to the home page, and we will show how its headings can keep their look while reading as words.

Start a Conversation