Типография

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

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

Гарнитура

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

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

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

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

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

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

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

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

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

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

Когда вы ищете следующий шрифт, обратите особое внимание на следующее:

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

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

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

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

h2 {font-size: 16px;}

h2 {font-size: 1rem;}

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

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

Структура и планировка

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

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

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

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

Расстояние

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

Узкий блок текста облегчает читателям переход к следующей строке.

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

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

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

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

Рекомендации по структуре и макету

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

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

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

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

Проверьте свое понимание

Проверьте свои знания об измерении доступности