/
npmgit

Accessibility

Набор вспомогательных стилей для улучшения доступности. A set of supporting styles to improve accessibility.

Import

css
@import 'proxima-vue/styles/accessibility.css';

Visually hidden

Позволяет скрыть содержимое визуально, но оставить доступ для вспомогательных технологий: Allows you to visually hide content while maintaining access for assistive technologies:

html
<span class="visually-hidden">
  text only for assistive technologies
</span>

Focus outline

Вспомогательные классы добавляют outline при фокусе: Helper classes add outline on focus:

html
<!-- outline on any focus -->
<button class="outline-focus">
  outline-focus
</button>

<!-- outline on visible focus (on tab key) -->
<button class="outline-focus-visible">
  outline-focus-visible
</button>

Стилизовать outline можно через кастомные свойства: You can style the outline using custom properties:

css
:root {
  --app-outline-offset: 0.1875rem;
  --app-outline-size: 0.25rem;
  --app-outline-style: solid;
  --app-outline-color: rgba(0, 61, 255, 0.7);
}

По умолчанию все компоненты используют данные стили при фокусе с клавиатуры. By default, all components apply these styles when focused using the keyboard.

Reduce motion

Данные стили отключают анимации, если пользователь предпочитает их минимизировать: These styles disable animations if the user prefers to minimize them:

css
@media (prefers-reduced-motion: reduce) {
  html *,
  html *:before,
  html *:after,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none;
    transition: none;
  }
}
View source on GitHub