Accessibility Tools HomepageAccessibility Tools Homepage

Accessibility Tool

About the project

A selection of tools to improve the accessibility of written web content for people with visual impairments and dyslexia. This tool is still in the early stages of development and has not yet been tested on dynamic content but in the future I hope to develop it into a Shopify app.

Key Features

Change Font Size

Changing the size of text can improve readability but not everyone will be aware of how to do this in their computer settings. This tool demonstrates how the size of text can be easily changed to maximise user comfort.

Change Contrast Levels

Poor contrast between text and background can seriously impair usability. This tool allows users to adjust the contrast to their preference.

Text Highlighter

Highlighting text can make reading easier by helping users to track their place on the page and to maintain focus when reading long pararaphs. This tool allows users to select the colour and brightness level of the highlight, and to either track the text line by line using the mouse/trackpad or sentence by sentence using the 'd' key to move forwards and the 'w' key to move back. The tool is able to detect sentences that end with question marks, exclamation marks, and full stops, without breaking the sentence when it encounters periods in initials, acronyms, title, and other common uses. This feature is currently only available for desktop.

Dyslexia Friendly Styling

The 'Dyslexia Friendly Style Guide' by the British Dyslexia Association suggests several elements to consider in Dyslexia friendly web styling, including the readability of fonts, headings and structure, and colour. This tool changes the styling of written content to make it more Dyslexia friendly by changing the font family and size; increasing character, word, and line spacing; replacing underlined and italisied content with bold styling and uppercase/small caps text with lower case text; increasing the difference in size between headings and body text; changing the alignment of text; emphasising hyperlinks; and adjusting colour and contrast levels.

View More Projects

Select one of the images below to learn more about the project.