Headings and words

A cartoon character in glasses reads from a tablet beside a pile of toy letter blocks spelling pop pop and WCAG

Screen reader users do not read a page from the top. They ask for a list of the headings, pick the one they want, and jump to it. It is the same thing you do with your eyes when you scan a page, done with a keyboard. If your headings are bold paragraphs, that list is empty and the whole page is a wall.

Headings are structure, not big text

Every website editor has a way to say "this is a heading". In WordPress it is the Heading block, with a level chooser from H1 to H6. In Wix and Squarespace it is the text style menu, with Heading 1, Heading 2 and so on. Use those. Making a paragraph bold and bigger looks the same to you and means nothing to a screen reader, to Google, or to a browser's reader view.

One Heading 1 on each page. Usually your platform makes the page title the H1 for you, so you start at Heading 2 in the body.
Go down one level at a time. Heading 2, then Heading 3 under it. Never jump from 2 to 4 because 4 looks the right size.
Make each heading say what is under it. "Who can come" beats "Information".
Sentence case. Capital letter on the first word and on names, lower case for the rest.

SATURDAY CLUB as bold text
Heading 1: Saturday club, then Heading 1: WHO CAN COME
Heading 2: When and where, then Heading 4: Cost

Heading 1: Saturday club
Heading 2: Who can come
Heading 2: When and where
Heading 3: Cost

If your page has a big decorative title at the top and then a Heading 1 again further down, that is 2 H1s. Pick one. The big title should be the H1 and the next one becomes a Heading 2.

Words on the screen

You are not writing the words here, you are setting how they appear. The Readability course covers the writing itself, and Dawn will check a page for you. The display rules are short.

Body text at least 16px. Most themes do this by default. The trouble starts when someone shrinks it to fit more in.
Line spacing of about one and a half times the text size. Cramped lines are hard for dyslexic readers to track.
Left aligned. Centred text is fine for a heading or a card. Justified text, straight on both sides, opens rivers of white space between words and is harder to read on a phone.
No ALL CAPS. Capitals lose the word shape readers rely on, and screen readers sometimes spell them out as initials.
Lines no longer than about 80 characters. Your theme probably limits this. If it does not, narrow the content column.
Short paragraphs, one idea each, and lists for anything that is a list.

Fonts

Your theme's default font is almost always fine. The problem is the "friendly" font someone picked to match the logo. A quick test is to type Il1 O0 bdpq in it. If you cannot tell the capital I from the lower case l and the number 1, it is a logo font, not a reading font. Keep it for the logo.

Pasting from Word brings Word's fonts, sizes and colours with it. Paste as plain text instead. In most editors that is Ctrl Shift V, or there is a paste as text button. Then add the headings again with the editor's own heading tool.

Check it

Open a page on your site. Select the WAVE icon in your browser, then select Structure. You get a list of the page's headings in order. Does it read like a contents list? Are there gaps in the levels, or none at all?
Hold Ctrl and press + until the browser says 200 per cent. Everything should still be readable and nothing should be cut off at the side.
Look for any text that seems smaller than the body text, like captions or footer links. Those are usually the ones under 16px.

Pick your longest page. Fix the headings on that one page only, using the editor's heading tool. Run WAVE's Structure view again. That is the before and after for everything else on the site.

In the guidelines: 1.3.1 Info and relationships (opens in a new tab) (A), 2.4.6 Headings and labels (opens in a new tab) (AA), 1.4.4 Resize text (opens in a new tab) (AA).

Next: Links →