Сделать финансовое приложение доступным

или умереть блин я не знаю сложно очень все ей богу

@GlafiraZhur для TradingView

Апрель 2023

Глафира Жур

Twitter: @glafirazhur

Accessibility Team Lead

GDE for Web

clck.ru/34GPJb

@glafirazhur

Accessibility Club Minsk

Курс про цифровую доступность

https://accessibilityunity.com/

@a11yminsk

@MinskCSS, @MinskJS

Вхожу в программный коммитет

@glafirazhur

TradingView Supercharts

Процесс аудита

@glafirazhur

Что нужно сделать

@glafirazhur

провести аудит всего приложения
посчитать, сколько времени надо на доработки
доработать

Что нужно сделать НА САМОМ ДЕЛЕ

@glafirazhur

определить команду аудиторов
проэстимировать аудит (включая создание бэклога)
провести аудит
определить приоритетность
определить команду для доработок
создать бэклог на доработки с учетом приоритетов
провести эстимейт бэклога
провести ревью сделанной работы
составить отчет для контроля процесса

@glafirazhur

Как эстимировать аудит?

@glafirazhur

Тройная оценка

@glafirazhur

E = (O + 4M + P) / 6

E - эстимейт

O - оптимистичная оценка

M - реальная оценка

P - пессимистичная оценка

Тройная оценка

@glafirazhur

E = (O + 4M + P) / 6

(5 + 4*7 + 14) / 6 = 8

O = 5

M = 7

P = 14

Как проводить аудит?

@glafirazhur

VPAT report

Как проводить аудит? Первые идеи

@glafirazhur

за основу взять отчет VPAT
пройтись по каждому пункту
написать все задачи в соответствии с пунктом

@glafirazhur

Пример работы по VPAT

Как (НЕ) проводить аудит? Первые идеи

@glafirazhur

за основу взять отчет VPAT
пройтись по каждому пункту
написать все задачи в соответствии с пунктом

Как НА САМОМ ДЕЛЕ проводить аудит?

@glafirazhur

WCAG и платформы

@glafirazhur

определить версию WCAG и требуемый уровень
определить платформы, браузеры, скринридеры

@glafirazhur

Компонентный подход

Доступность кирпичиков системы

@glafirazhur

обеспечить доступность дизайн-системы
обеспечить доступность библиотеки компонентов

Доступность в

дизайн-системе

@glafirazhur

Использование только цвета

для передачи информации

@glafirazhur

Контраст

@glafirazhur

Визуализация фокуса

@glafirazhur

Состояние компонентов

@glafirazhur

Работа с клавиатуры

@glafirazhur

Порядок фокуса (дизайн)

@glafirazhur

Порядок фокуса (разработка)

@glafirazhur

Аннотации к дизайну

@glafirazhur

Text

Аннотации

Пример переработки паттернов

@glafirazhur

Пример переработки паттернов

@glafirazhur

Библиотека компонентов

Доступность библиотеки компонентов

@glafirazhur

Завести сторибук
Добавить в него плагин проверки доступности
Привести компоненты в соответствие с W3C

Storybook + Accessibility plugin

@glafirazhur

W3C Patterns

Паттерны

Проблемы использования библиотеки компонентов

@glafirazhur

Исходный вариант

@glafirazhur

<div class="field-wrapper">
  <span>Symbol</label>
  <input>
</div>

Вставляем новый компонент в приложение

@glafirazhur

Проблемы использования UI

@glafirazhur

<table>
  <tr>
    <td>
      <span>Symbol</span>
    </td>
    <td>
      <span>Symbol</span>
    </td>  
    <td>
      <span>Symbol</span>
    </td>
  </tr>
  <tr>
    <td>
      <input id="symbolID">
    </td>
    <td>
      <input id="qtyID">
    </td>  
    <td>
      <input id="priceID">
    </td>
  </tr>
</table>

Проблемы использования UI

@glafirazhur

<table>
  <tr>
    <td>
      <span id="symbolLabelID">Symbol</span>
    </td>
    <td>
      <span id="qtyLabelID">Qty</span>
    </td>  
    <td>
      <span id="priceLabelID">Price</span>
    </td>
  </tr>
  <tr>
    <td>
      <input id="symbolID" aria-labelledby="symbolLabelID">
    </td>
    <td>
      <input id="qtyID" aria-labelledby="qtyLabelID">
    </td>  
    <td>
      <input id="priceID" aria-labelledby="priceLabelID">
    </td>
  </tr>
</table>