To make your website easier to use for people who use a screen reader (software that reads the page aloud) or find small or pale text hard to read, describe your pictures, mark your headings, word your links clearly, set the page language and keep text readable. Then test the published website with a free checker such as Lighthouse or WAVE.
We can't tell you whether your website meets a law or policy, such as the ADA, WCAG or your organisation's rules. EverWeb gives you the tools; a checker and your accessibility team can tell you what still needs work.
When you'd use this
- A university department must pass its institution's accessibility review before the website is renewed.
- A musician runs Lighthouse in Chrome, and it reports "Links do not have a discernible name" for the social media icons in the footer.
- A recipe writer's older readers say the pale grey text and small menu are hard to read.
1. Describe your pictures (alt text)
Alt text is a short description that a screen reader reads out in place of the picture.
| Picture | Where to type it |
|---|---|
| A picture, or a shape with a photo in it | Select it, go to Inspector > Shape Options, and fill in ALT Text |
| Image Slider widget | Inspector > Widget Settings: select each picture and fill in ALT Text |
| Responsive Image Gallery widget | Inspector > Widget Settings: select each picture and fill in Image ALT Text |
| A picture inside a blog post | Click the picture and use the alternative text option in the toolbar that appears |
Describe what the picture shows in one short sentence: "Owner Maria icing a wedding cake", not "IMG_2041.jpg" or "photo".
2. Use real headings
Screen reader users jump from heading to heading, so mark headings as headings, not only big and bold.
- Select the text box that holds the page's main heading.
- Go to Inspector > Text > Export Options and set HTML Tag to H1.
- Set section headings to H2, and headings inside a section to H3.
Use one H1 per page and don't skip levels. Choose the level by its place in the page, not by its size: change the size in the font settings or with a Paragraph Style. See Keep your text consistent with Paragraph Styles.
3. Write links that make sense on their own
Screen reader users often hear a page's links on their own, so "Click here" tells them nothing.
- Link the words that say where the link goes: "Download our 2026 price list (PDF)" or "Book a lesson".
- Icons and pictures with no words, such as social media icons or a logo that goes to your home page: select the icon, go to Inspector > Shape Options and type what the link does in ALT Text, for example "Our Instagram page". This fixes the Lighthouse message "Links do not have a discernible name".
- If a link has no words and no picture, such as an empty shape placed over a photo, link the photo itself instead and give it alt text.
How to make links: How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page.
4. Make text readable
- Contrast. Use dark text on a light background, or light text on a dark one. Pale grey on white and coloured text on a busy photo are the usual problems. Checkers flag normal text below a contrast ratio of 4.5 to 1. You can test two colours with the free WebAIM Contrast Checker. For text on photos, see Make text readable on top of a photo: overlays, masks and image fill options.
- Text size. On responsive pages, set a Minimum Font Size in Inspector > Text so text doesn't shrink too far on phones.
- Real text. Avoid Export Text as Image except for a logo. It turns words into a picture that can't be enlarged cleanly.
5. Set the page language
A screen reader uses the page language to pronounce words correctly. Go to File > Edit Publishing Settings and choose your website's Language. If some pages are in another language, select each one, go to Inspector > Page Settings and set its own Language.
6. Forms and video
- Forms. Give each field a caption that says what to type, such as "Your email address", not only example text inside the box.
- Video. Add captions on YouTube or Vimeo, using their own subtitle settings, then show the video with a shape whose Fill is set to Video. See How do I add a video, a background video or music to my EverWeb website?. For your own video file, add a written transcript on the page.
7. Check your website
Publish with File > Publish Entire Site first, then test the live website.
- Lighthouse (Chrome): open your page in Chrome, right-click it and choose Inspect. Click the Lighthouse tab (it may be behind the » arrows), tick Accessibility, and click Analyze page load.
- WAVE: go to wave.webaim.org, type your page's address and press Return (Enter on Windows).
Fix what they report, publish, and test again. Checkers can't tell whether your alt text is accurate, so read it through yourself.
Common problems
| The checker says | What to do |
|---|---|
| Image elements do not have [alt] attributes, or Missing alternative text | Fill in ALT Text for each picture (step 1) |
| Links do not have a discernible name | Give the linked icon or picture ALT Text that says where it goes (step 3) |
| html element does not have a [lang] attribute | Set Language in File > Edit Publishing Settings, then File > Publish Entire Site |
| Background and foreground colors do not have a sufficient contrast ratio | Make the text darker or the background lighter, or add an Overlay Color to the photo |
| Heading elements are not in a sequentially-descending order | Check the HTML Tag levels go H1, then H2, then H3, with none skipped |
| You fixed it but the report hasn't changed | Publish with File > Publish Entire Site and test again in a private browser window |
Related articles
- How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page
- Keep your text consistent with Paragraph Styles
- Make text readable on top of a photo: overlays, masks and image fill options
- How do I add a video, a background video or music to my EverWeb website?
- Why can't people find my website on Google?