Accessibility meets structure

СТРУКТУРА ЦИФРОВЫХ СИСТЕМ XДОСТУПНОСТЬ
Lara Simonova: facebook, linkedin

Frame setting 1 / Цикл взаимодействия и доступность
перцепция

перцепцияобработка

формирование
запроса

запроса
трансляция
запроса

запроса
трансляция
запроса
слабослышащие
глухие
слабовидящие
незрячие
с нарушениями цветовосприятия
с ментальными нарушениями
с нарушениями ОДС

Frame setting 2 / Перцепция и структура
Особые перцептивные потребности у:
Незрячих
Слабовидящих
Людей с нарушенным цветовосприятием
Слабослышащих
Глухих

Незрячих
Глухих
Релевантные аспекты интерфейсов:
Сенсорные
Структурные

Незрячих
Глухих
Релевантные аспекты интерфейсов:
Сенсорные
Структурные
Релевантные пункты WCAG 2.0
Adaptable
1.3.1 Info and relationships
1.3.2. Meaningful sequence
Navigable 1 (mental model)
2.4.3. Focus order
2.4.5. Multiple ways of access
2.4.8. Location
Navigable 2 (notations)
2.4.2. Page titled
2.4.6. Headings and labels
2.4.10 Section headings
2.4.4. / 2.4.9. Link purpose
Predictable
3.2.3. Consistent navigation
Compatible
4.1.2. Name, role, value of UI components

Frame setting 3 / Cтруктура: где?
Структура

Структура
Состав элементов внутри смыслового
модуля (с учетом контекста)
Расположение элементов внутри
смыслового модуля

Структура
Расположение смысловых модулей друг
относительно друга на странице
(статическое и динамическое)

Структура
Логика навигации (расположение,
принципы)

Структура
Логика навигации (расположение,
принципы)
Логика нейминга (заголовки блоков,
ссылки, тайтлы страниц)

Frame setting 4 / Cтруктура: зачем и как?
Структура,
заложенная в дизайн
Почему важна?

Структура,
Поддержка вспомогательных
технологий в коде

Структура,
Облегчение построения
ментальных моделей сервиса

Структура,
Каждый, из перечисленных ранее пунктов WСAG 2.0 имеет отношение либо к одной из, либо к
обеим задачам. Каждый так или иначе привязан к дизайну, хотя для некоторых это неочевидно.

Проектирование
[out of scope]
Как добиться ?
Структура,

Пример 1: музыкальный лейбл SILO

When the sequence in which content is
presented aﬀects its meaning, a correct
reading sequence can be
programmatically determined.
i. На уровне элементов в рамках
модуля
ii. На уровне модулей в рамках
функционального блока

2.4.3. Focus order
If a Web page can be navigated
sequentially and the navigation
sequences aﬀect meaning or operation,
focusable components receive focus in
an order that preserves meaning and
operability.

More than one way is available to locate
a Web page within a set of Web pages
except where the Web Page is the result
of, or a step in, a process.
i. Нет поиска
ii. Можно попасть на страницу
альбома из основной ленты и из
«витрины»
iii. Категории контента в верхнем
меню
iv. Есть теги, сквозные по
категориям

2.4.8. LocationПример 1: музыкальный лейбл SILO
Information about the user's location
within a set of Web pages is available.
2.4.2. Page titled
Web pages have titles that describe topic
or purpose.
Section headings are used to organize
the text content.
Navigational mechanisms that are
repeated on multiple Web pages within
a set of Web pages occur in the same
relative order each time they are
repeated, unless a change is initiated by
the user.

Headings and labels describe topic or
purpose.

The purpose of each link can be
determined from the link text alone or
from the link text together with its
programmatically determined link
context, except where the purpose of
the link would be ambiguous to users in
general.
/
A mechanism is available to allow the
purpose of each link to be identiﬁed
from link text alone, except where the
purpose of the link would be
ambiguous to users in general.
2.4.4. / 2.4.9. Link purpose

Сайт довольно четко структурированный
Четкие блоки, которые разработчику будет удобно разметить под скрин ридер
Внутри блоков четкая однотипная верстка
Консистентность навигации на страницах
Выделен блок с основным контентом (но что это за контент, неясно)
Но совершенно нечитаемый
Очень плотная верстка
Слабо считываются приоритеты
Неясно, где пользователь находится
Много нерелевантной информации: погода, астрономические данные, данные о браузере
Часть релевантной информации теряется
+ Проблемы с навигацией между страницам
Такой сайт можно потенциально подготовить для незрячего человека, задав разработчику
приоритеты блоков, но адаптировать его под слабовидящего без редизайна — невозможно

Пример 2: протфолио Anthony Kolber

Adaptable
2.4.3. Focus order
Navigable 2 (notation)
2.4.2. Page titled
2.4.4. / 2.4.9. Link purpose
Predictable

Information, structure, and relationships
conveyed through presentation can be
programmatically determined or are
available in text

Сайт четко структурированный
Смысловые блоки (кейсы) отделены друг от друга
Внутри смыслового блока понятная структура
Хорошая работа с фокусом внимания
Консистентность навигации (что несложно, сайт небольшой с однотипной информацией)
При верстке для людей с особенностями
Можно поработать над более четким визуальным разбиением кейсов (цвет может не работать)
Продумать, как описать ссылки
Дизайн этого сайта понятен разработчику, который должен будет его верстать с учетом доступности

Пример 3: музей Frans Hals Museum

2.4.3. Focus order
2.4.8. Location
Predictable

Adaptable
2.4.3. Focus order
2.4.8. Location
2.4.2. Page titled
Predictable

Adaptable
2.4.3. Focus order
2.4.8. Location
2.4.4. / 2.4.9. Link purpose
Predictable

Adaptable
2.4.3. Focus order
2.4.4. / 2.4.9. Link purpose

Читаемая структура сайта, но без информационного фашизма
Понятное разбиение на функциональные блоки
Внутри модулей хороший состав и расположение элементов
Большинство текстовых страниц структурированы консистентно
В целом понятная, хотя и не самая привычная, навигация
При верстке для людей с особенностями
Навигация могла бы быть более привычной
Со структурой меню можно было поработать: логика названий пунктов, их группировка
На некоторых страницах заголовки текстовых блоков требуют доработки
Несмотря на некоторые структурные недочеты, визуальная структура сайта понятным образом
ложится в код. Но построение пользователем его ментальной модели можно было бы облегчить: в
текущей версии приходится ориентироваться контекстно (контекстная навигация удобная).

Information, structure, and relationships
conveyed through presentation can be
programmatically determined or are
available in text
When the sequence in which content is
presented affects its meaning, a correct
reading sequence can be
programmatically determined.
2.4.3. Focus order
If a Web page can be navigated
sequentially and the navigation
sequences affect meaning or operation,
focusable components receive focus in
an order that preserves meaning and
operability.
More than one way is available to locate
a Web page within a set of Web pages
except where the Web Page is the result
of, or a step in, a process.
2.4.8. Location
Information about the user's location
within a set of Web pages is available.
2.4.2. Page titled
Web pages have titles that describe topic
or purpose..
Headings and labels describe topic or
purpose.
Section headings are used to organize
the text content.
2.4.4. / 2.4.9. Link purpose
A mechanism is available to allow the
purpose of each link to be identified from
link text alone, except where the purpose
of the link would be ambiguous to users
in general.
Navigational mechanisms that are
repeated on multiple Web pages within a
set of Web pages occur in the same
relative order each time they are
repeated, unless a change is initiated by
the user.
4.1.2. Name, role, value of UI components (ARIA attributes)
For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by
the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Пункт без примера

«Грубый Декарт»
Frans Hals Museum
Дизайн
Структура
SILO
Anthony Kolber
Wikipedia
site inspire
WHO
W3C
iTunes App Store Connect

Чеклист / 1. Узнаваемые паттерны
(принятые в индустрии и принятые в рамках сервиса)
Унификация структуры интерфейсных модулей
одного типа
Унификация логики взаимодействия с ними
Унификация сценариев выполнения задачи
Унификация логики верстки страниц с похожими
модулями
1.
2.
3.
4.
event agent
viewcreateedit

Группировка модулей одного типа в рамках
страницы (карточки контактов, событий)
Группировка элементов одного типа внутри
модуля, если релевантно (теги, ссылки, соцсети)
1.
2.
Чеклист / 2. Группировка

Структура сервиса и его навигации и страниц
согласуется с приоритетами задач пользователя
(купить, найти, развлечься)
Структура любого модуля с информационной
иерархией элементов (название, дата, описание,
СТА)
Возможность уточнить свои приоритеты (optional)
1.
2.
3.
Чеклист / 3. Приоритезация
who am I?
artist
tourist
parent
choosereadseealso

(в контексте)
Ограничение количества: пункты меню,
категории, ссылки, секции на странице, теги
Ограничение вложенности: уровни меню, глубина
сайта
Указание количества вложенных элементов на
входе
1.
2.
3.
Чеклист / 4. Контроль числа смысловых элементов
see all events (57)

Лексическая: заголовки разделов, ссылки, заголовки страниц, пункты меню
Длина
Количество слов
Части речи
Дополнительные индексы
Визуальная: заголовки разделов
Кегль
Стиль
Согласование текстов ссылок и названий страниц
1.
a.
b.
c.
d.
2.
a.
b.
3.
Чеклист / 5. Унификация навигационных элементов одного типа

IV. ПРОЕКТИРОВАНИЕ СТРУКТУРЫ

Как находить структуру?
Исследование:
Выявление значимых сущностей в предметной области;
Изучение их свойств и связей между ними;
Определение возможных действий с ними с учетом
потенциальных целей пользователя, его возможностей, и
контекстов
Упаковка в модель:
Схемы
Спецификации
Гайды
Вайрфреймы
= Проектирование

Как находить структуру?
Исследование:
Выявление значимых сущностей в предметной области;
Изучение их свойств и связей между ними;
Определение возможных действий с ними с учетом
потенциальных целей пользователя, его возможностей, и
контекстов
Упаковка в модель:
Схемы
Спецификации
Гайды
Вайрфреймы
= Проектирование
отдельная история

Lara Simonova: facebook, linkedin
СПАСИБО

Accessibility meets structure

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Accessibility meets structure

Semelhante a Accessibility meets structure (20)

Accessibility meets structure