Типографика

Создание и разработка доступного контента — это не только выбор легко читаемого шрифта. Даже с доступными семействами шрифтов люди с низким зрением, когнитивными, языковыми и учебными нарушениями могут испытывать трудности с обработкой текста из-за других элементов, таких как вариации шрифта, размер, интервалы и кернинг — и это лишь некоторые из них. Данный модуль рассмотрит основные соображения по дизайну, чтобы сделать ваш контент более инклюзивным и охватить еще больше людей.

Чтобы изучить конкретную реализацию типографики, ознакомьтесь с модулем типографики в Learn CSS.

Шрифт

Основным фактором, который может сильно повлиять на доступность текста, является шрифт. Ваш выбор шрифта и стилизации может как улучшить, так и испортить любой дизайн страницы.

Люди с нарушениями чтения, обучения и внимания, такими как дислексия и синдром дефицита внимания и гиперактивности (СДВГ), а также люди с низким зрением, могут получить пользу, когда вы используете доступные шрифты.

Выбирайте распространенные шрифты. Самый быстрый способ создать доступный дизайн — это выбрать распространенный шрифт (например, Arial, Times New Roman, Calibri, Verdana и многие другие).

Многие исследования шрифтов, тестирующие людей с инвалидностью, показывают, что распространенные шрифты приводят к более быстрой скорости чтения и более глубокому уровню понимания по сравнению с необычными шрифтами. Хотя эти распространенные шрифты не являются по своей природе более доступными, чем другие шрифты, некоторым людям с инвалидностью легче их читать, потому что у них есть большой опыт работы с этими шрифтами (или их использования).

В дополнение к выбору распространенного шрифта обязательно избегайте витиеватых или рукописных шрифтов, а также тех, которые имеют только один регистр символов (например, только заглавные буквы). Эти специальные шрифты с курсивными дизайнами, причудливыми формами или художественными особенностями, такими как тонкие линии, могут выглядеть красиво, но их гораздо труднее читать некоторым людям с инвалидностью, чем распространенные шрифты.

Характеристики букв и кернинг

Исследования того, легче ли читать шрифты с засечками или без засечек, не дают однозначного ответа, но определенные цифры, буквы или комбинации могут запутать людей с языковыми нарушениями обучения и когнитивными расстройствами. Для людей с такими типами нарушений каждая буква и цифра должны быть четко определены и иметь уникальные характеристики, чтобы буквы не путались с цифрами.

Распространенными нарушителями читаемости являются заглавная "I" (India), строчная "l" (lettuce) и цифра "1". Аналогично пары букв, такие как b/d, p/q, f/t, i/j, m/w и n/u, иногда могут переворачиваться либо слева направо, либо сверху вниз для некоторых читателей.

Читаемость текста также снижается, когда межбуквенный интервал или кернинг слишком плотный. Обратите особое внимание на кернинг, особенно между проблематичной парой букв r/n. В противном случае такие слова, как "yarn", могут превратиться в "yam" или "stern" в "stem", полностью изменив смысл текста.

Коллекции шрифтов с открытым исходным кодом, такие как Google Fonts, могут помочь вам в выборе наиболее инклюзивного шрифта для вашего следующего дизайна. Если вы используете продукты Adobe, вы можете встраивать доступные семейства шрифтов от партнеров-литейщиков непосредственно в ваши дизайны — это включает избранные Google Fonts.

При поиске следующего шрифта обратите особое внимание на следующее:

• Используйте распространенные шрифты, когда это возможно.
• Избегайте использования сложных или рукописных шрифтов и тех, которые имеют только один регистр символов.
• Выберите шрифт с уникальными характеристиками — обращая особое внимание на заглавную I, строчную l и цифру 1.
• Проверьте определенные комбинации букв, чтобы убедиться, что они не являются точным зеркальным отражением друг друга.
• Проверьте кернинг, особенно между парой букв r/n.

Размер шрифта и типографское оформление

Люди часто предполагают, что выбор доступного семейства шрифтов — это все, что нужно для создания инклюзивного контента, но также важно учитывать размер шрифта и то, как текст оформлен на странице.

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

h2 {font-size: 16px;}

---

h2 {font-size: 1rem;}

Поскольку вы не можете предсказать потребности каждого пользователя, при добавлении шрифтов в ваши цифровые продукты обязательно учитывайте следующие рекомендации:

• Базовые размеры шрифтов должны быть определены с относительным значением (%, rem или em), чтобы обеспечить легкое изменение размера.
• Ограничьте количество вариаций шрифта, таких как цвет, жирный, ВСЕ ЗАГЛАВНЫЕ и курсив, чтобы повысить читаемость. Вместо этого используйте методы для выделения слов в вашем тексте, такие как звездочки, тире или выделение отдельного слова.
• По возможности используйте разметку вместо текста на изображениях. Программы чтения с экрана не могут читать встроенный текст на изображениях (без добавления дополнительного кода), а встроенный текст также может стать пикселизированным при увеличении пользователями с низким зрением.

Структура и макет

Хотя шрифт, размер шрифта и типографское оформление важны для доступной типографики, структура и макет текста на странице могут быть не менее важными для понимания пользователем.

Сложные макеты могут стать настоящим барьером для людей с низким зрением, нарушениями чтения и 6,1 миллиона человек в США с СДВГ. Эти типы нарушений затрудняют для людей сохранение своего места и следование потоку текста из-за отсутствия четких линейных путей, отсутствующих заголовков и несгруппированных элементов.

Важным аспектом доступного дизайна макета является выделение критически важных элементов друг от друга и группировка похожих элементов вместе. Если элементы расположены слишком близко, может быть трудно определить, где один элемент начинается, а другой заканчивается, особенно если у них похожее оформление.

Думайте о своем тексте как о коллекции отдельных пунктов в плане. Это поможет вам спланировать общую структуру страницы и позволит использовать заголовки, подзаголовки и списки, когда это уместно.

Интервалы

Интервалы между абзацами, предложениями и словами также важны, поскольку они помогают читателям сохранять фокус на тексте и добавляют к общему визуальному пониманию страницы. Длинные строки текста могут стать барьером для читателей с нарушениями, поскольку им трудно сохранять свое место и следовать потоку текста. Узкий блок текста облегчает читателям переход к следующей строке.

Выравнивание контента

Еще одной проблемой для многих людей с нарушениями является чтение выровненного по ширине текста. Неровные интервалы между словами в выровненном тексте могут привести к образованию "рек пространства" вниз по странице, что затрудняет чтение текста.

Выравнивание текста по ширине также может привести к тому, что слова либо сбиваются в кучу, либо растягиваются неестественным образом, поэтому читателям может быть трудно определить границы слов.

К счастью, существуют четкие руководящие принципы по интервалам и инструменты, такие как Good Line-Height и Golden Ratio Calculator, которые помогают сделать наш текст более доступным. Включение этих руководящих принципов помогает людям с расстройствами дефицита внимания, нарушениями чтения и зрения сосредоточиться больше на тексте и меньше на макете.

Лучшие практики для структуры и макета

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

• Используйте элементы, такие как заголовки, подзаголовки, списки, числа, блоки цитат и другие визуальные группировки, чтобы разбить страницу на разделы.
• Используйте четко определенные интервалы между абзацами, предложениями и словами.
• Создавайте колонки текста, которые не превышают 80 символов в ширину (40 символов для логограмм).
• Избегайте выравнивания абзацев по ширине, которое создает "реки пространства" внутри текста.

Выводы по доступной типографике

Доступная типографика может быть сведена к разумным дизайнерским решениям, основанным на ваших знаниях о потребностях ваших пользователей. Помня об этом модуле при разработке и создании вашего контента, вы значительно поможете себе четко общаться с наибольшим количеством людей.

Обратитесь к модулю типографики для Learn CSS, чтобы узнать, как реализовать определенные правила и стили.

Источник — https://web.dev/learn/accessibility/typography

Комментарии