Универсальный виджет для слабовидящих. Подключается к любому проекту — Vanilla JS, React, Vue, Angular.
Возможности
Шесть инструментов доступности, которые работают на любом сайте без изменения исходного кода.
Демонстрация
Нажмите на кнопку ниже — и страница преобразится на ваших глазах.
Регулируйте размер текста, чтобы увеличить или уменьшить шрифт.
Диапазон — от 100% до 150% с шагом 10%. Масштабируются все тексты на странице, включая заголовки и подписи.
Регулируйте расстояние между строками от 1.0 до 2.5.
Увеличенный интервал облегчает чтение при дислексии и слабом зрении.
Меняйте начертание всех шрифтов и повышайте контрастность букв для упрощения восприятия текста при нарушениях зрения.
Выбирайте любую из представленных цветовых схем: высокий контраст (чёрный/белый и белый/чёрный), тёплые тона и мягкая синяя.
Нажмите «Озвучить страницу» — активируется режим озвучки. Кнопка начнёт пульсировать и появится подсказка «Нажмите на абзац». Наведите курсор на любой абзац — он подсветится. Кликните по нему — браузер зачитает текст вслух. Режим остаётся активным: можно кликать на следующие абзацы без повторного нажатия кнопки. Нажмите кнопку ещё раз, чтобы выйти из режима.
Скрывайте или отображайте изображения на странице — текст остаётся, нагрузка на внимание снижается.
<script src="https://unpkg.com/pretty-accessibility-widget/dist/accessibility-widget.umd.js"></script>
<script>
new AccessibilityWidget.AccessibilityWidget({
position: 'bottom-right',
locale: 'ru'
});
</script>import { AccessibilityWidgetComponent } from 'pretty-accessibility-widget/react';
export function App() {
return (
<>
<AccessibilityWidgetComponent
position="bottom-right"
locale="ru"
/>
</>
);
}<template>
<AccessibilityWidgetComponent
position="bottom-right"
locale="ru"
/>
</template>
<script setup lang="ts">
import { AccessibilityWidgetComponent } from 'pretty-accessibility-widget/vue';
</script>import { Component, Input, OnInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
import { AccessibilityWidgetAngular } from 'pretty-accessibility-widget/angular';
@Component({
selector: 'accessibility-widget',
template: '',
})
export class AccessibilityWidgetComponent extends AccessibilityWidgetAngular {
@Input() override position: 'bottom-right' | 'bottom-left' = 'bottom-right';
@Input() override locale: 'ru' | 'en' = 'ru';
}Параметры
Все параметры передаются в конструктор при инициализации виджета.