text-enhancer

General information

This is a student project and future improvements can't be expected. Feel free to contribute or copy for other projects. MIT license applies.

Purpose

A JavaScript module designed to make text more accessible across different web interfaces. This module allows developers to target different text elements and provide end users with options such as:

• Resizing the text with a unit-aware logic
• Switching fonts for better readability (serif/sans as default, but other fonts can be added)
• Increasing contrast between text and background, by changing background and/or text color.

It is aimed to be especially useful for users with dyslexia (change of fonts), or other visual impairments that is helped by manipulating text size and other factors that affect the readability.

Features

Resize text with some unit aware logic. Switch fonts between serif and sans-serif depending on preferens (possible to add more sets of fonts, even dedicated ones for dyslexia). Fallback for inconclusive inputs Tested with jest and documented in testrapport.md

Installation

npm install text-enhancer

Usage

import { createTextEnhancer } from 'text-enhancer'

const enhancer = createTextEnhancer({
  selectors: ['element', '.class', '#id'],
    step: '2px',
    minSize: 6,
    maxSize: 40,
    root: document
})

// Example: Improve readability for a user with low vision
enhancer.increaseTextSize() // makes targeted elements/classes/id's bigger
enhancer.cycleFontSet() // Cycles through different fonts if original is hard to read.
enhancer.applyColorTheme('highContrast') // Takes over styling of text-element and adds contrasting text- and background-color

API

| Method | Description | |----|----| | increaseTextSize() | Increase text size by one step | | decreaseTextSize() | Decrease text size by one step | | setTextToMax() | Set text size to configured max | | setTextToMin() | Set text size to configured min | | restoreTextSize() | Restore to original size | | cycleFontSet() | Cycles through available font sets | | restoreFontFamily() | Removes font override | | changeTextColor(color) | Apply specified color to text | | changeBackgroundColor(color) | Apply specified color to text-backgrounds | | applyColorTheme(themeName) | Apply predefined color themes | | restoreColors() | Restore the original text and background colors | | updateTarget(newSelectors) | Updates the internal selector list. | | getCurrentFontSet() | Get currently active font set name | | getConfig() | Return a copy of the current config object |

Testing

This module is tested with Jest for automated unit testing. All major logic is covered and all edgecases I could think of as well, such as fallback and conversions.

npm test

See testrapport.md (swedish) for more details

Contributing

As mentioned, this is a student project. Contributions, feedback adn forks are welcome - but future updates are not guaranteed. Feel free to adapt it dor your own needs.

Repository

https://github.com/Pyrre1/text-enhancer

License

MIT