Работаем с размером шрифта для обеспечения доступности

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

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

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

Кстати, сейчас я пишу магистерскую диссертацию, и ее цель — создать чеклист доступности для Android-разработчиков, который поможет создавать более доступные приложения. Первоначальный чек-лист уже готов, и я собираю отзывы, так что если вы хотите помочь мне, проверьте Android Accessibility Checklist, а затем ответьте на пару вопросов в этой Google-форме. Я буду очень, очень благодарен всем, кто примет участие!

Ладно, давайте начнем.

Размер шрифта

Одна интересная вещь, связанная с размером шрифта, заключается в том, что около 25% пользователей Android увеличивают размер шрифта (источник: Appt.org). Так что это большая группа наших пользователей! Иногда от доступности отказываются, потому что говорят, что она касается только небольшой группы пользователей. Четверть пользовательской базы — это уже значительное количество пользователей — на самом деле, оно может быть больше, чем, например, язык, который поддерживает ваше приложение.

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

Тестирование размера шрифта

Для тестирования размера шрифта у вас есть как минимум два варианта. Использование телефона (реального устройства или эмулятора) или предварительный просмотр Compose. Давайте рассмотрим каждый из них в следующих подразделах.

На телефоне

Вы можете протестировать свое приложение, изменив размер шрифта в настройках доступности. Скорее всего, он находится в разделе Settings > Accessibility > Display size and text > Font Size. Установите размер шрифта на самый большой.

Увеличив размер шрифта, просмотрите свое приложение. Заметили что-то, что не работает? Какой-то текст не читается? Вы нашли проблемы. В следующем разделе вы найдете несколько предложений по устранению этих проблем.

С помощью предварительного просмотра Compose

Вы также можете проверить, как ведут себя шрифты разных размеров, с помощью предварительных просмотров в Compose. Если вы работаете с версией до Compose 1.6, вам нужно будет явно определить масштабы шрифтов. Это можно сделать с помощью атрибута fontScale:

@Preview(fontScale = 1.8f)
@Composable
fun ComponentPreview() {
  ...
}

Compose 1.6 предлагает кое-что удобнее — шаблоны Multipreview API, в частности @PreviewFontScale.

@PreviewFontScale
@Preview
@Composable
fun ComponentPreview() {
  ...
}

На рисунке ниже видно, как он добавляет предварительный просмотр для всех настроенных размеров шрифта (85%, 100%, 115%, 130%, 150%, 180% и 200%) для моего примера приложения с графиком:

Исправление размера шрифта

Итак, вы протестировали свое приложение и обнаружили проблему. Что делать, чтобы ее устранить? Я использую один из своих любимых ответов: «Это зависит от ситуации». Я перечислю несколько проблем и способы их устранения.

Проблема: шрифт сам по себе не масштабируется

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

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

Проблема: текст обрезается

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

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

Вот один пример из приложения с графиками, увеличенный до 200 %:

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

Вы можете получить доступ к значению масштаба шрифта пользователя в Compose через его конфигурацию. Точнее, через LocalConfiguration.current.fontScale. Это плавающее значение — для 100% масштаба шрифта оно равно 1, а для 200 % — 2.

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

// First, get the font scale
val fontScale = LocalConfiguration.current.fontScale

// Second, use it to scale the padding:
Canvas(
    modifier = Modifier
        .padding(
            bottom = GraphComponent.innerPadding * fontScale,
            start = GraphComponent.innerPadding * fontScale,
            end = GraphComponent.innerPadding / 2,
        )
... ) { ... }

Таким образом, у меня появляется свободное пространство для меток осей. Вот то же самое изображение с масштабом шрифта 200% после изменений:

Я буду рад узнать, нашли ли вы другие способы решения этих проблем, особенно с графиками и Canvas!

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

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

Один из способов решить эту проблему — обеспечить гибкость элементов. Так, если эти элементы помещаются в один ряд, они так и останутся, но если нет, они должны быть в двух (или более) рядах. В Compose 1.5.0 добавлен хороший, хотя и экспериментальный, компоновочный компонент под названием FlowRow, который делает то, что я описал.

Когда я меняю текущую реализацию на использование FlowRow (то есть просто Row -> FlowRow), кнопки хорошо выравниваются при размере шрифта 200%:

Итого

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

Сталкивались ли вы с подобными проблемами? Получали ли вы отзывы пользователей о размерах шрифтов? Есть ли у вас альтернативные способы решения этих проблем? Я буду рад услышать, поэтому, пожалуйста, поделитесь ими!

Источник