Make your page accessible

An accessible page can be used by everyone: people who use a screen reader, who have poor eyesight, who avoid movement on screen, or who are simply looking at their phone in the sun. LinkHarbor takes care of a lot automatically; some things are up to you. This article shows what to look out for.

#What LinkHarbor does automatically

• If a visitor has turned on “Reduce motion” in their system, background videos don't play, and scroll and parallax effects as well as hover animations are switched off
• The “Heading” block is output as a real heading that screen readers use for orientation
• Images from the “Image” and “Gallery” blocks get your alt text as their description
• If you haven't chosen your own text colour for buttons, LinkHarbor picks one to match the button colour

#Alt texts for images

An alt text describes what can be seen in an image. Screen readers read it out, and it appears when an image doesn't load.

“Image” block

The “Alt text” field in the block editor.

“Gallery” block

An “Alt text” of up to 200 characters per image.

• Describe the content, not the file: “Cappuccino with latte art on a wooden table” instead of “IMG_2041”
• For images with text, the text belongs in the alt text
• Keep it short – one sentence is usually enough

Where to find the fields is explained in The free blocks in detail and Content blocks.

#Structure with headings

Divide longer pages with the “Heading” block rather than with large text. Screen reader users jump from heading to heading and so quickly find what they are looking for – such as “Opening hours” or “Contact”.

#Clear link titles

• Every link should make sense on its own: “Menu as PDF” instead of “Click here”
• Avoid identical titles for different targets
• Emojis at the start of a title are read out; use them sparingly

More about links in Add and style links.

#Contrast and readability

• Make sure there is enough contrast between text and background, especially with light pastel colours
• If text sits on a background image or video, use the “Overlay opacity” in the theme so it stays readable
• No important text only in an image – visitors with a screen reader can't read it
• Choose an easy-to-read font and a font size that isn't too small for text blocks

You set colours, background and font in the theme, see Design.

#Use custom CSS with care

With custom CSS you can change almost anything – including things that matter for accessibility. Don't hide focus outlines, don't shrink text too much, and after making changes, test the page with the keyboard too. See Custom CSS.

#Test it yourself

1. Turn on the screen reader on your phone (VoiceOver on iPhone, TalkBack on Android) and listen to your page
2. Increase the text size in the system settings and check that everything stays readable
3. Look at the page in bright light and in dark mode