Headings on a Phone That Hide the Content

Seven headings and nothing else

On a computer, the page is a long, readable list of information. On a phone, the same page shows seven short headings, each with a small plus sign, and nothing beneath them.

The headings say Info, Prep, Costs, Forms, Kids, More and FAQ. The answer the visitor needs is behind one of them, and they have to guess which.

Someone using a keyboard instead of a mouse tabs straight past all seven, because none of them can be selected. A screen reader announces them as plain text, if it announces them at all.

The content is all there. For many visitors it might as well not be.

Why content gets folded away

Accordions, which open and close under each heading, and tabs, which switch between panels, were adopted for good reasons. Phone screens are small, and long pages look daunting.

Folding sections away makes a page look short and tidy, and lets visitors open only what they need. Done well, it works.

Done carelessly, it turns the page into a guessing game, and shuts out people who use a keyboard or listen to pages read aloud.

What goes wrong

• Labels that name a category rather than the answer inside.
• Headings that cannot be opened from a keyboard.
• No signal to screen readers about what is open or closed.
• Find on page misses words inside closed sections.
• Printing leaves out every section that was closed.
• Opening one section snaps another shut and jumps the page.

The second is the one that locks people out entirely. A visitor facing vague labels can still open every section. A visitor who cannot open any of them gets nothing.

Labels that say what is inside

A heading over hidden content has more work to do than one over visible content, because visitors decide from the heading alone whether to open it.

Write it as the question it answers, or a phrase that names the answer. How far before my trip should I come in? What should I bring? What does a consultation cost?

Those are longer than one-word labels, and that is the point. On a phone, a list of plain questions is quicker to scan than a row of categories that each need opening.

WCAG 2.0, the usual reference for web accessibility, asks for exactly this: headings and labels that describe their topic or purpose.

Controls that work without a mouse

Many accordions are built from ordinary page elements made clickable with a script. They respond to a finger or a mouse and ignore the keyboard.

The fix is to make each heading's trigger a real button. Buttons can be reached with the Tab key, opened with Enter or the space bar, and are understood by screen readers without extra work.

Keep the focus visible too: a clear outline around whichever heading the keyboard is on. Many designs remove that outline because someone found it untidy.

Then test it. Put the mouse aside, press Tab until you reach the first heading, and try to open it.

A worked example

A travel clinic sharing a medical building with a pharmacy and two family practices offers consultations and vaccinations for people going abroad, by appointment.

Its page on preparing for an appointment showed seven collapsed sections on phones, labelled with single words.

The theme built them from clickable text, so keyboard users could not open them, and a patient using a screen reader heard only the labels.

The front desk spent part of every day answering the same two questions: what to bring, and how many weeks before a trip to come in. Both answers sat inside the section labelled Prep.

The clinic's web company rebuilt the section. The headings became questions, each one a real button that announces whether it is open, and the two most-asked answers moved above the accordion, always visible.

The page also now prints with every section open, since many patients print it to bring along.

Saying what is open

A sighted visitor sees the plus sign turn into a minus. A screen reader user needs the same information in words.

A small attribute on the button, called aria-expanded, tells assistive technology whether the section is open or closed, and the script updates it as the visitor uses the page.

It is one line in the template. Without it, screen reader users open and close sections blind, unsure whether anything happened.

Keep the essentials open

Some information should never be folded away. Hours, the phone number, prices, how to book and anything a visitor needs before arriving belong in plain view.

A useful test: if the front desk answers a question several times a week, the answer should be visible without opening anything.

Accordions suit the long tail: questions only a few people ask, details for particular cases, and the fine print.

Tabs on small screens

Tabs cause similar problems in another form. A row of five tabs that fits a computer screen becomes, on a phone, a cramped strip of tiny labels, sometimes cut off at the edge.

On narrow screens, most sites are better off turning tabs into stacked headings, each followed by its content or opening beneath it.

The same rules apply either way: every tab reachable and usable from the keyboard, with a label that says what is behind it.

The counter-case

An accordion with clear question headings, built on real buttons, is a good pattern, and long lists of questions on phones are easier to use with one than without.

Short pages need nothing hidden at all. Scrolling is easy on a phone, and a page of a few hundred words with good headings beats any folding scheme.

Nor does any of this mean removing accordions that already work. The changes are labels, buttons and one attribute, usually made once in the template.

Where content is folded away, though, the headings must say what is inside and open for everyone.

Testing the page

1. Open the page on a phone.
2. Read only the headings and guess the contents.
3. Rewrite vague labels as questions or answers.
4. Tab through the page without a mouse.
5. Make each heading a real button.
6. Move the most-asked answers into plain view.
7. Print the page and see what is missing.

Step four takes two minutes and shows the most serious problem at once. If the keyboard cannot reach and open a section, everything inside it is missing for some of your visitors.

Telling people plainly what they need to know before they arrive is also the point of accessibility information about the premises.

Frequently asked questions

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.