All guides / Security-compliance
Smart Accessibility
Overview
Smart Accessibility adds a small button to the left edge of every page of your website. Visitors click it to open a panel of tools that change how the website looks for them: bigger or smaller text, high contrast and other colour modes, a plainer font, underlined links, extra spacing, no animations and a clearer keyboard outline.
On its settings page you choose which of those tools your website offers, and whether the pop-out button shows at all. You can also put any single tool on your pages as a text link, such as a "High contrast view" link in your header or footer, with a shortcode.
The tools only change the website for the person using them, in their own browser. Nothing changes for anyone else, and nothing on your website is edited. Each visitor's choices are remembered as they move from page to page, and the next time they visit on the same device.
Smart Accessibility helps visitors who find your website hard to read, but it does not make the website accessible on its own. You still need clear headings, descriptive link text and alt text on your images, and your accessibility statement.
New websites have it on
A new school website starts with Smart Accessibility already on, so there is nothing to set up. A website that existed before keeps its own setting. If yours is off, go to the Dashboard and click Switch on Smart Accessibility in New on your website. Nothing is switched on without someone clicking it. Your website's accessibility statement mentions the button only while it is on.
Getting set up
Step 1: Turn on Smart Accessibility
Go to Smart Plugins in the menu on the left. Find the Smart Accessibility card and click On. It is off until you turn it on.
Step 2: Save changes
Click the red Save changes button at the bottom right of the page. Every tool is on to begin with, and the button shows on every page. To change that, see Choosing the tools.
Step 3: Check your website
Open any page of your website. A square button with a person symbol appears on the left edge, half way down the screen, in your school's brand colour. If your brand colour is too pale for the white symbol to stand out, the button is near-black instead.
Choosing the tools
Go to Smart Plugins and click Smart Accessibility in the menu on the left, or Open settings on its card. The page has three parts.
Toolbar
Accessibility toolbar turns the pop-out button on the left edge of every page on or off. Turn it off if you would rather offer the tools only as links on your pages (see Adding a tool to a page as a link). Visitors' saved choices still apply on every page while it is off.
Tools
Each tool has its own On and Off. A tool that is off disappears from the toolbar and from any link you have added for it. If a visitor had turned it on, it turns off for them.
If you turn every tool off, nothing appears on your website at all.
Save changes
Click the red Save changes button at the bottom right of the page. The change shows on your website straight away.
Adding a tool to a page as a link
A shortcode puts one tool on a page as a text link. Visitors click the link to turn the tool on, and click it again to turn it off. A tick appears in front of the link while the tool is on. The link and the toolbar always agree: turning high contrast on from one shows it as on in the other.
Paste the shortcode into a page, a post, or a Text widget in your header or footer (Appearance → Widgets). For example:
[smart-accessibility option="high-contrast"]
shows a link reading High contrast view. To use your own words, add label:
[smart-accessibility option="high-contrast" label="Switch to high contrast"]
| Option | Link text | What a click does |
|---|---|---|
high-contrast |
High contrast view | Turns high contrast on or off |
negative-contrast |
Negative contrast view | Turns negative contrast on or off |
light-background |
Light background view | Turns the light background on or off |
greyscale |
Greyscale view | Turns greyscale on or off |
underline-links |
Underline links | Turns link underlining on or off |
readable-font |
Readable font | Turns the readable font on or off |
text-spacing |
Text spacing | Turns the extra spacing on or off |
stop-animations |
Stop animations | Turns animations off or back on |
highlight-focus |
Highlight focus | Turns the keyboard outline on or off |
larger-text |
Larger text | Makes the text one step bigger each click |
smaller-text |
Smaller text | Makes the text one step smaller each click |
reset |
Reset accessibility settings | Turns every tool off and puts the text back to normal size |
The same list is on the Smart Accessibility settings page, ready to copy.
Using the toolbar
Click the button to open the Accessibility tools panel. Click it again, click the ×, click anywhere else on the page or press Esc to close it. Keyboard users can also press Tab past the last button.
Keyboard users reach the button first: pressing Tab once on any page moves to it, and Enter opens the panel.
Text size
A− makes the text smaller and A+ makes it bigger. The number between them shows the current size, from 80% up to 200% of normal.
Colours
Only one of these can be on at a time. Choosing one turns off the other two.
| Button | What it does |
|---|---|
| High contrast | White text and yellow, underlined links on a black background. Pictures behind text are hidden so the text is easy to read; other photos stay |
| Negative contrast | Reverses the colours of the whole page, so light areas go dark. Photos, banners and videos keep their normal colours |
| Light background | Black text and dark blue, underlined links on a plain white background, for busy or low-contrast designs |
Reading
These can be combined in any way.
| Button | What it does |
|---|---|
| Greyscale | Removes all colour from the page, for visitors who find colour distracting |
| Underline links | Underlines every link, so links can be told apart from other text without relying on colour |
| Readable font | Swaps your website's font for a plain, wide one (Verdana) that many people with dyslexia find easier to read. Icons are left alone |
| Text spacing | Adds space between lines, letters, words and paragraphs |
| Stop animations | Stops moving and fading effects, and pauses sliders and videos that play by themselves. Turning it off starts your sliders again |
| Highlight focus | For people who use the Tab key instead of a mouse: shows a thick yellow outline around whichever link or button they are on, so they can always see where they are on the page |
A tool that is on is shown filled in black with a tick. Click it again to turn it off.
Reset all
Reset all turns every tool off and puts the text back to its normal size.
If something looks different
- You cannot see the button on your website. Check that Smart Accessibility is On in Smart Plugins, and that you clicked Save changes. The button only appears on the public pages of the website, not in the admin area. If you still cannot see it, your browser may be showing an old copy of the page: refresh it, or see Page Cache.
- Your website suddenly looks different on your computer, for example black and yellow, grey or with bigger text. Someone has turned on a tool in the toolbar on that device. Open the toolbar and click Reset all. Nobody else sees the change.
- A visitor's settings were not remembered. Choices are kept in the visitor's own browser, so they do not follow them to another device or browser. Private or incognito windows, and browsers set to clear site data, forget them when the window is closed.
- Part of a page did not get bigger. Text that is part of a picture, such as words in a banner image or a poster, cannot be resized by the toolbar.
- The button covers something on a page. It sits on the left edge, half way down. Let Realsmart know which page it is.
- You want to remove the button but keep your links. Turn Accessibility toolbar Off on the Smart Accessibility settings page and click Save changes.
- You want to remove everything. Turn Smart Accessibility Off in Smart Plugins and click Save changes. The button disappears from the website for everyone, and any shortcodes on your pages show nothing.
- A shortcode shows nothing. Check that the tool it is for is On on the Smart Accessibility settings page, and that the option is spelled as in the table above. Capital letters and spaces do not matter, so
High Contrastworks too. - A tool is missing from the toolbar. It has been turned Off on the Smart Accessibility settings page.
Did this work for you?
If a step looked different on your site, tell us and we'll update the screenshots.
Thanks for your feedback.