Accessibility Tool Guide

ABI_SPARK homepage with a marker labelled 1 pointing to the accessibility widget icon on the left edge of the screen.
ABI_SPARK homepage with a marker labelled 1 pointing to the accessibility widget icon on the left edge of the screen.
Marker labelled 1
Accessibility widget labelled

Accessibility Tool

Allows you to modify the way the ABI_SPARK website is displayed to make it more accessible and personalised to your needs. By default, this tool appears on the right-hand side of the page, but you can move it to any edge of the web page, by positioning first your mouse over the icon of the tool and then moving it by clicking on the left mouse button and keep it clicked while you move it to the desired position, either on the left or right side of the page.

To open the accessibility menu, just click on the tool with the left mouse button.

The accessibility panel is open on the left of the page, showing a grid of 18 options such as Keyboard Navigation, Text Reader and Magnifier. A marker labelled 2 points to the toggle icon at the top.
The accessibility panel is open on the left of the page, showing a grid of 18 options such as Keyboard Navigation, Text Reader and Magnifier. A marker labelled 2 points to the toggle icon at the top.
Marker labelled 2
Narrow/Expand arrows on the top left edge of the screen.

Narrow/Expand

On the left-hand side of the window, you can scroll down and activate other functions, as we’ll see further on the guide

You can use this Arrow to
expand the accessibility menu and make it appear larger.

A pop-up dialog titled "Hide accessibility widget" with four time period choices and a blue confirm button. A marker labelled 3 points to the dialog.
Mobile view of the accessibility panel with the language dropdown opened, showing options such as Afrikaans, አማርኛ and العربية. Marker 3 points to the hide icon at the top left and marker 4 points to the language dropdown.
Marker labelled 3
"Hide accessibility widget" marker

Eye/Hide

When you click on the Eye icon, a window appears with the options to ‘hide’ the Accessibility Tool for the current session, next 24 hours, a week or a month.

Marker labelled 4
Language Selection

Language Selection

Many languages are available. If yours is not visible, you can scroll down the list by clicking on the scroll bar on the right side.

The Text Reader option is highlighted in the accessibility panel, and a playback control bar appears on the page with play, skip, reload and settings buttons. A marker labelled 5 points to both.
Marker labelled Text Reader

Text Reader

The Text Reader function allows you to listen to an audio description of the ABI_SPARK website. Clicking on this function will bring up a new sound icon at the bottom center of your window. Clicking on it will bring up a window where you can control the tone of voice used, the speed, the accent, pause or skip ahead. When a function is selected it is marked with a “check” icon.

The Magnifier option in the accessibility panel is selected and outlined in orange with a tick, and a marker labelled 6 points to it.
Marker labelled 6
Marker labelled Magnifier

Magnifier

The Magnifier function zooms
in on the ABI_SPARK website
display.

The Readable Font option in the accessibility panel is selected, with a tooltip explaining it converts the site’s fonts to easy-to-read ones. A marker labelled 7 points to it.
Marker labelled 7
Marker labelled Readable Font

Readable font

Through the Readable Font
function you can adapt the
ABI_SPARK website’s font to
one that is easier to read.

The Highlight Links option in the accessibility panel is selected, and the navigation links on the page are now shown in red. A marker labelled 8 points to the option.
Marker labelled 8
Marker labelled Highlight Links

Highlight Links

The function Highlight Links
emphasises the links on the page, making them easier to identify.

The Image Descriptions option in the accessibility panel is selected, and a floating description box appears over an image on the page. A marker labelled 9 points to the option.
Marker labelled 9
Marker labelled Image Description

Image Descriptions

If the images have a description, the function Image Descriptions will allow you to see it.

The Highlight Headers option in the accessibility panel is selected, and headings on the page (Welcome to ABI_SPARK, Discover Our Mission) now have a line underneath. A marker labelled 10 points to the option.
Marker labelled 10
Marker labelled Highlight Headers

Highlight Headers

The Highlight Headers function, emphasises the titles by placing a division bar below them.

The Enlarge Buttons option in the accessibility panel is selected, with a marker labelled 11 pointing to it.
Marker labelled 11
Marker labelled Enlarge Buttons

Enlarge Buttons

The Enlarge Buttons option
increases the size of the buttons. Also clickable titles or links will be accordingly enlarged.

The Readable Mode option in the accessibility panel is selected, and the page now shows a stripped-down version with plain text and a list of links. A marker labelled 12 points to the option.
Marker labelled 12
Marker labelled Readable Mode

Readable Mode

By selecting the function
Readable Mode, the content of the website will be displayed in a new window in a clearer and more readable way.

The Text Magnifier option in the accessibility panel is selected, and a large tooltip appears on the page showing the welcome text enlarged. A marker labelled 13 points to the option.
Marker labelled 13
Marker labelled Text Magnifier

Text Magnifier

When hovering over an element on the screen, the Text Magnifier function enlarges the text of that element in a tooltip or text box.

The Mute Media option in the accessibility panel is selected, with a marker labelled 14 pointing to it.
Marker labelled 14
Marker labelled Mute Media

Mute Media

The Mute Media function mutes all sounds and vocal elements.

The Page Summary option in the accessibility panel is selected, and a pop-up dialog shows an AI-generated summary of the page. A marker labelled 15 points to the option.
Marker labelled 15
Marker labelled Page Summary

Page Summary

The Page Summary function
enables a pop-up dialog showing an AI-generated summary of the page. 

The Virtual Keyboard option in the accessibility panel is selected, and an on-screen QWERTY keyboard now appears on the page. A marker labelled 16 points to the option.
Marker labelled 15
Marker labelled Virtual Keyboard

Virtual Keyboard

The Virtual Keyboard function
enables users to use the
mouse to type in contents.

The Custom Colour section and the Cursor section of the accessibility panel are both highlighted. A marker labelled 17 points to Custom Colour and a marker labelled 18 points to Cursor.
Marker labelled 17
"Custom Colour" marker

Custom Colour​

The Custom Colour function enables you to change the colour of some elements of the website like the background, the headings or the content.

Marker labelled 18
"Cursor" marker

Cursor

The first function to appear when you scroll down is the Cursor function and it changes the colour and size of the cursor.

The Font sizing section of the accessibility panel is highlighted, with tabs for Font Size, Line Spacing, Word Spacing and Letter Spacing, and a slider with minus and plus buttons. A marker labelled 19 points to the section.
Marker labelled 19
"Font Sizing" marker

Font Sizing

The Font Sizing function
enables users to change the font size, line spacing, word spacing, and letter spacing. 

The Dark High-Contrast option in the accessibility panel is selected, and the page now has a black background with yellow and white text. A marker labelled 20 points to the option.
Marker labelled 20
Marker labelled Dark High-Contrast

Dark High-Contrast

The Dark High-Contrast function turns the background black and the text in high contrasting colours.

The Monochrome option in the accessibility panel is selected, and the colours on the page are now shown in greyscale. A marker labelled 21 points to the option.
Marker labelled 21
Marker labelled Monochrome

Monochrome

The Monochrome function
displays the ABI_SPARK
website to black and white.

The Contrast Mode option in the accessibility panel is selected, and the page background is now mostly white with dark text. A marker labelled 23 points to the option.
Marker labelled 22
Marker labelled Contrast Mode

Contrast Mode

The Contrast Mode
turns the background white and the text in dark colour.

The Bright High-Contrast option in the accessibility panel is selected, and the page text now sits in white boxes against the original background. A marker labelled 22 points to the option.
Marker labelled 23
Marker labelled Bright High-Contrast

Bright High-Contrast

The Bright High-Contrast
function turns the background white and the text in dark colour.

The Turn Off option in the accessibility panel is selected, and all accessibility functions will be turned off. A marker labelled 24 points to the option.
Marker labelled Turn Off

Turn Off

The Turn Off function resets
all the accessibility functions
you selected.

If you have any questions while using the accessibility tool, you can simply hover over the function
you want and the tool will show you a short explanation of what it does, or if you have more
questions about EqualWeb’s solution you can visit their website at https://www.equalweb.com/

Scroll to Top