O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Accessibility meets structure

92 visualizações

Publicada em

The deck for the digital accessibility course of Valeria Kurmak (https://kurmak.info/)

Visual design impacts the way digital information is perceived. It is based not only on sensory aspects (contrast, clarity, etc), but on the way the content itself and the system it is embedded in is organized. Such digital medium structure reflected in design helps developers correctly implement assistive technologies support, and also simplifies user's mental model build-up.

WCAG 2.0 aspects related to digital medium structuring are investigated in the deck based on several examples.

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Accessibility meets structure

  1. 1. СТРУКТУРА ЦИФРОВЫХ СИСТЕМ XДОСТУПНОСТЬ Lara Simonova: facebook, linkedin
  2. 2. I. FRAME SETTING
  3. 3. Frame setting 1 / Цикл взаимодействия и доступность перцепция
  4. 4. перцепцияобработка Frame setting 1 / Цикл взаимодействия и доступность
  5. 5. перцепцияобработка формирование запроса Frame setting 1 / Цикл взаимодействия и доступность
  6. 6. перцепцияобработка формирование запроса трансляция запроса Frame setting 1 / Цикл взаимодействия и доступность
  7. 7. перцепцияобработка формирование запроса трансляция запроса слабослышащие глухие слабовидящие незрячие с нарушениями цветовосприятия с ментальными нарушениями с нарушениями ОДС Frame setting 1 / Цикл взаимодействия и доступность
  8. 8. перцепцияобработка формирование запроса трансляция запроса слабослышащие глухие слабовидящие незрячие с нарушениями цветовосприятия с ментальными нарушениями с нарушениями ОДС Frame setting 1 / Цикл взаимодействия и доступность
  9. 9. перцепцияобработка формирование запроса трансляция запроса слабослышащие глухие слабовидящие незрячие с нарушениями цветовосприятия с ментальными нарушениями с нарушениями ОДС Frame setting 1 / Цикл взаимодействия и доступность
  10. 10. Frame setting 2 / Перцепция и структура Особые перцептивные потребности у: Незрячих   Слабовидящих Людей с нарушенным цветовосприятием Слабослышащих Глухих
  11. 11. Frame setting 2 / Перцепция и структура Особые перцептивные потребности у: Незрячих   Слабовидящих Людей с нарушенным цветовосприятием Слабослышащих Глухих Релевантные аспекты интерфейсов: Сенсорные Структурные
  12. 12. 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
  13. 13. Frame setting 3 / Cтруктура: где? Структура
  14. 14. Frame setting 3 / Cтруктура: где? Структура Состав элементов внутри смыслового  модуля (с учетом контекста) Расположение элементов внутри  смыслового модуля
  15. 15. Frame setting 3 / Cтруктура: где? Структура Состав элементов внутри смыслового  модуля (с учетом контекста) Расположение элементов внутри  смыслового модуля Расположение смысловых модулей друг  относительно друга на странице  (статическое и динамическое)
  16. 16. Frame setting 3 / Cтруктура: где? Структура Состав элементов внутри смыслового  модуля (с учетом контекста) Расположение элементов внутри  смыслового модуля Расположение смысловых модулей друг  относительно друга на странице  (статическое и динамическое) Логика навигации (расположение,  принципы)
  17. 17. Frame setting 3 / Cтруктура: где? Структура Состав элементов внутри смыслового  модуля (с учетом контекста) Расположение элементов внутри  смыслового модуля Расположение смысловых модулей друг  относительно друга на странице  (статическое и динамическое) Логика навигации (расположение,  принципы) Логика нейминга (заголовки блоков,  ссылки, тайтлы страниц)
  18. 18. Frame setting 4 / Cтруктура: зачем и как? Структура, заложенная в дизайн Почему важна?
  19. 19. Структура, заложенная в дизайн Поддержка вспомогательных  технологий в коде Frame setting 4 / Cтруктура: зачем и как? Почему важна?
  20. 20. Структура, заложенная в дизайн Почему важна? Поддержка вспомогательных  технологий в коде Облегчение построения  ментальных моделей сервиса Frame setting 4 / Cтруктура: зачем и как?
  21. 21. Структура, заложенная в дизайн Почему важна? Поддержка вспомогательных  технологий в коде Облегчение построения  ментальных моделей сервиса Каждый, из перечисленных ранее пунктов WСAG 2.0 имеет отношение либо к одной из, либо к  обеим задачам. Каждый так или иначе привязан к дизайну, хотя для некоторых это неочевидно. Frame setting 4 / Cтруктура: зачем и как?
  22. 22. Проектирование [out of scope] Как добиться ? Frame setting 4 / Cтруктура: зачем и как? Структура, заложенная в дизайн Почему важна? Поддержка вспомогательных  технологий в коде Облегчение построения  ментальных моделей сервиса
  23. 23. II. ПРИМЕРЫ
  24. 24. Пример 1: музыкальный лейбл SILO
  25. 25. Пример 1: музыкальный лейбл SILO 1.3.2. Meaningful sequence When the sequence in which content is  presented affects its meaning, a correct  reading sequence can be  programmatically determined. i. На уровне элементов в рамках  модуля ii. На уровне модулей в рамках  функционального блока
  26. 26. 2.4.3. Focus order Пример 1: музыкальный лейбл SILO 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.
  27. 27. 2.4.5. Multiple ways of access Пример 1: музыкальный лейбл SILO 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. Есть теги, сквозные по  категориям
  28. 28. 2.4.10 Section headings 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. 3.2.3. Consistent navigation 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.
  29. 29. 2.4.6. Headings and labels Headings and labels describe topic or  purpose. Пример 1: музыкальный лейбл SILO
  30. 30. 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 identified  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 Пример 1: музыкальный лейбл SILO
  31. 31. Пример 1: музыкальный лейбл SILO Сайт довольно четко структурированный Четкие блоки, которые разработчику будет удобно разметить под скрин ридер Внутри блоков четкая однотипная верстка Консистентность навигации на страницах Выделен блок с основным контентом (но что это за контент, неясно) Но совершенно нечитаемый Очень плотная верстка Слабо считываются приоритеты Неясно, где пользователь находится Много нерелевантной информации: погода, астрономические данные, данные о браузере Часть релевантной информации теряется + Проблемы с навигацией между страницам Такой сайт можно потенциально подготовить для незрячего человека, задав разработчику  приоритеты блоков, но адаптировать его под слабовидящего без редизайна — невозможно
  32. 32. Пример 2: протфолио Anthony Kolber
  33. 33. Пример 2: протфолио Anthony Kolber Adaptable 1.3.2. Meaningful sequence Navigable 1 (mental model) 2.4.3. Focus order Navigable 2 (notation) 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
  34. 34. Пример 2: протфолио Anthony Kolber 1.3.1 Info and relationships Information, structure, and relationships  conveyed through presentation can be  programmatically determined or are  available in text
  35. 35. Пример 2: протфолио Anthony Kolber Сайт четко структурированный Смысловые блоки (кейсы) отделены друг от друга Внутри смыслового блока понятная структура Хорошая работа с фокусом внимания Консистентность навигации (что несложно, сайт небольшой с однотипной информацией) При верстке для людей с особенностями Можно поработать над более четким визуальным разбиением кейсов (цвет может не работать) Продумать, как описать ссылки Дизайн этого сайта понятен разработчику, который должен будет его верстать с учетом доступности
  36. 36. Пример 3: музей Frans Hals Museum
  37. 37. Пример 3: музей Frans Hals Museum Navigable 1 (mental model) 2.4.3. Focus order 2.4.5. Multiple ways of access 2.4.8. Location Predictable 3.2.3. Consistent navigation
  38. 38. Пример 3: музей Frans Hals Museum Adaptable 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 Predictable 3.2.3. Consistent navigation
  39. 39. Пример 3: музей Frans Hals Museum 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.6. Headings and labels 2.4.10 Section headings 2.4.4. / 2.4.9. Link purpose Predictable 3.2.3. Consistent navigation
  40. 40. Пример 3: музей Frans Hals Museum Adaptable 1.3.2. Meaningful sequence Navigable 1 (mental model) 2.4.3. Focus order Navigable 2 (notations) 2.4.6. Headings and labels 2.4.10 Section headings 2.4.4. / 2.4.9. Link purpose
  41. 41. Пример 3: музей Frans Hals Museum Читаемая структура сайта, но без информационного фашизма Понятное разбиение на функциональные блоки Внутри модулей хороший состав и расположение элементов Большинство текстовых страниц структурированы консистентно В целом понятная, хотя и не самая привычная, навигация При верстке для людей с особенностями Навигация могла бы быть более привычной Со структурой меню можно было поработать: логика названий пунктов, их группировка На некоторых страницах заголовки текстовых блоков требуют доработки Несмотря на некоторые структурные недочеты, визуальная структура сайта понятным образом  ложится в код. Но построение пользователем его ментальной модели можно было бы облегчить: в  текущей версии приходится ориентироваться контекстно (контекстная навигация удобная). 
  42. 42. 1.3.1 Info and relationships Information, structure, and relationships  conveyed through presentation can be  programmatically determined or are  available in text 1.3.2. Meaningful sequence 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. 2.4.5. Multiple ways of access 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.. 2.4.6. Headings and labels Headings and labels describe topic or  purpose. 2.4.10 Section headings 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. 3.2.3. Consistent navigation 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.  Пункт без примера
  43. 43. «Грубый Декарт» Frans Hals Museum Дизайн Структура SILO Anthony Kolber Wikipedia site inspire WHO W3C iTunes App Store Connect
  44. 44. III. ЧЕКЛИСТ
  45. 45. Чеклист / 1. Узнаваемые паттерны (принятые в индустрии и принятые в рамках сервиса) Унификация структуры интерфейсных модулей  одного типа Унификация логики взаимодействия с ними Унификация сценариев выполнения задачи Унификация логики верстки страниц с похожими  модулями 1. 2. 3. 4. event agent viewcreateedit
  46. 46. Группировка модулей одного типа в рамках  страницы (карточки контактов, событий) Группировка элементов одного типа внутри  модуля, если релевантно (теги, ссылки, соцсети) 1. 2. Чеклист / 2. Группировка
  47. 47. Структура сервиса и его навигации и страниц  согласуется с приоритетами задач пользователя  (купить, найти, развлечься) Структура любого модуля с информационной  иерархией элементов (название, дата, описание,  СТА) Возможность уточнить свои приоритеты (optional) 1. 2. 3. Чеклист / 3. Приоритезация who am I? artist tourist parent choosereadseealso
  48. 48. (в контексте) Ограничение количества: пункты меню,  категории, ссылки, секции на странице, теги Ограничение вложенности: уровни меню, глубина  сайта Указание количества вложенных элементов на  входе 1. 2. 3. Чеклист / 4. Контроль числа смысловых элементов  see all events (57)
  49. 49. Лексическая: заголовки разделов, ссылки, заголовки страниц, пункты меню Длина Количество слов Части речи Дополнительные индексы Визуальная: заголовки разделов Кегль Стиль Согласование текстов ссылок и названий страниц 1. a. b. c. d. 2. a. b. 3. Чеклист / 5. Унификация навигационных элементов одного типа
  50. 50. IV. ПРОЕКТИРОВАНИЕ СТРУКТУРЫ
  51. 51. Как находить структуру? Исследование: Выявление значимых сущностей в предметной области; Изучение их свойств и связей между ними; Определение возможных действий с ними с учетом  потенциальных целей пользователя, его возможностей, и  контекстов Упаковка в модель: Схемы Спецификации Гайды Вайрфреймы = Проектирование
  52. 52. Как находить структуру? Исследование: Выявление значимых сущностей в предметной области; Изучение их свойств и связей между ними; Определение возможных действий с ними с учетом  потенциальных целей пользователя, его возможностей, и  контекстов Упаковка в модель: Схемы Спецификации Гайды Вайрфреймы = Проектирование отдельная история
  53. 53. Lara Simonova: facebook, linkedin СПАСИБО

×