There is a version of this article that lists the Inclusion Bar's three buttons and stops. That version would be a fair description of the product and a poor description of the job, because the parts a visitor struggles with are almost always parts an author wrote. This is the authoring half.
What you get without doing anything
- Text size
- Three steps (Normal, Large, Larger) from the Adjust control on the Inclusion Bar. It scales the whole page, so it only helps text that is genuinely text.
- High contrast
- A black page with white text. Every block has its own dark palette for this state; it is not a filter thrown over the top.
- Read aloud
- The Listen control narrates what is on screen, in the language currently selected, with a playbar you can scrub.
- Translate
- Twenty languages, one of which is English. See running a tour in any language.
None of it is gated. A free account gets the same bar as an Enterprise one, and it is on by default on every new Experience.
Live example · The Bellhaven Hotel
Open full sizeAlt text that earns its place
Every Image block has an Alt text field. Photo Gallery takes one per image. Before & After takes one for each half of the slider. Filling them in is the difference between a page that works and a page that has holes in it.
- Describe what the picture shows in this context, not what the file is. The same photograph needs different alt text in a species article and in a fundraising appeal.
- One sentence. Around 125 characters is a good ceiling. If it needs a paragraph, the paragraph belongs on the page as a Text block.
- Do not open with Image of or Photo of. It is announced as an image already.
- A purely decorative image can have an empty field. A decorative image described in detail is noise for the person relying on it.
- Alt text is translated along with the rest of the page, so it is doing work in nineteen other languages too.
| Weak | Better |
|---|---|
otter.jpg | A sea otter floating on its back, cracking a clam on a stone balanced on its chest. |
| Photo of the gallery | The east gallery, with the mammoth skeleton in the centre and cases along both walls. |
| Map | Second floor plan. You are at the lift lobby; the Coral Gallery is straight ahead past the stairs. |
Contrast inside your own palette
You choose one colour (the page background), and NearField derives the rest of the readable surfaces from it: body text, headings, secondary text, card fill and borders. The choice between light and dark foregrounds is made on the background's measured luminance rather than on how dark it looks, so a mid-grey page gets the foregrounds that actually read better on it.
- What is not derived is your primary colour. Buttons, links and accents use the hex you gave, as given. Check it against your background yourself.
- The shipped pairing, Ivy
#5C6F2Don Oatmeal#FAF8F5, is the one that has been tested. If you change one, re-check the other. - Only a full six-digit hex is accepted. Anything else falls back to the standard page colour rather than half-applying a theme, which is deliberate: a half-applied theme is how unreadable pages happen.
- Slate
#D7CEC6is a divider and disabled-surface colour, not a text colour. It measures 1.46:1 on Oatmeal, which is invisible to a lot of people and marginal for everyone else. - High contrast overrides your palette entirely. Test your page in both states. A colour that only works in your palette is a colour that stops meaning anything the moment somebody needs contrast.
Never let colour carry the meaning
This is the failure that survives every other fix, because it looks correct to the person who built it.
- A Promo Box that is red when a habitat is closed and green when it is open says nothing to a colourblind visitor, and says nothing at all in high contrast. Write the word Closed in it.
- A colour-coded floor plan needs its key repeated in the alt text and the caption, in words.
- A rating's stars survive because they are shape and number, not because they are gold. Copy that pattern: pair every colour with a label, an icon or a number.
- Do not distinguish two buttons by colour alone. Their labels should be different enough to work in a list read out loud.
Plain language
- One idea per block. The block boundaries become the pauses when the page is read aloud.
- Answer first. A visitor standing at a Marker wants the fact, then the story.
- Expand an initialism the first time, every time. There is no glossary and a visitor may have arrived at this page first.
- *Avoid tap here, see below and click the link.* A button's label is announced on its own, out of context, so label it with its destination.
- Read the block order as an outline. That order is the script for read-aloud and the reading order for a screen reader; if the outline is wrong, everything downstream is wrong.
Captions, transcripts and things in frames
NearField does not host video. A Video block embeds YouTube or Vimeo, which means the captions are the ones you uploaded there, so upload them there, and check they are real captions rather than the platform's automatic guess.
The Audio block has a Transcript (optional) field. What it renders is a collapsed Transcript summary the visitor can open. That transcript is text, so it translates; but while it is collapsed, read-aloud will not narrate it. Fill it in for the person who cannot use the audio, and do not treat it as a substitute for the page having words.
A PDF opened from a File Action is drawn as page images, each one labelled by page number, and only the first twelve pages are drawn. The text inside cannot be selected, translated or read aloud. A menu that exists only as a PDF is a menu that a blind visitor cannot read. Put it on the page in an Accordion as well.
Test it in four minutes
- 1
Open the published page on a real phone
Not the builder preview. Use the live link.
- 2
Adjust → Text size → Larger
Read the whole page. Anything that clips, overlaps or disappears is a bug in the content, not in the control.
- 3
Adjust → High contrast
Look for meaning that vanished: a colour-coded badge, a tinted callout, a photograph carrying words.
- 4
Translate → a language you cannot read
You are not checking the translation. You are checking that nothing important stayed in English, which is how you find text baked into an image.
- 5
Listen, all the way to the end
The order of the page is the order it is read. This is the fastest way to hear a page that is out of sequence.
Example
Harbour Point Aquarium
Harbour Point runs school groups four mornings a week, which means a large, mixed audience arriving at the same twelve Markers at once. Their house rules for every Experience are short.
- Every image has alt text, and every image that carries information has Show alt text as caption switched on.
- Feeding times are written as words on the page, never as a photograph of the printed board.
- Tank status is a Promo Box with the word, Closed for maintenance, never a colour on its own.
- Every recording has its transcript pasted in, because the education room is loud enough that half the group cannot hear the audio anyway.
- The four-minute test is run against one page a week, rotating, rather than against everything before an opening.
Do I need an accessibility overlay widget as well?
No, and NearField does not ship one. The Inclusion Bar is built into the page rather than bolted onto it, which is why it can translate your actual content and read your actual layout. There is no third-party overlay in the product.
Can I turn the Inclusion Bar off?
Yes, per Experience, in the builder's Settings tab. Think hard first: for some visitors it is the only way to read the page. When it is off, an inline Privacy choices link takes its place so cookie settings stay reachable.
Does read-aloud read everything on the page?
It reads what is rendered and visible, which includes the shared header and footer, the branch of a show-and-hide rule that is actually showing, and any greeting personalised with a visitor's own answer. It does not read collapsed content, image alt attributes, or anything inside an embedded frame.
Is any of this a paid feature?
No. Text sizing, high contrast, read-aloud, translation and the alt text fields are all available on every plan, including Free.
Alt text, captions and transcripts are all fields on the media blocks. Here is the full reference.
Photos and media blocks