Масштабирование и перестроение учебной страницы
Читатель может увеличить страницу, изменить размер шрифта или открыть материал в небольшом окне. В каждом случае меняется пространство для текста. Устойчивый урок перестраивается, сохраняя объяснение и управление. Если строки обрезаются или ссылки перекрывают друг друга, хороший контраст и правильные названия уже не позволяют выполнить задачу.
Продолжим a11y-lab после таблицы и смысловых альтернатив. Рассмотрим обычный текст отдельно от двумерного содержимого: длинный листинг и таблица могут требовать особого представления. Не будем скрывать горизонтальный выход всей страницы только ради исчезновения полосы прокрутки. Сначала найдём, какой элемент создаёт лишнюю ширину и зачем она нужна.
Увеличение и узкий экран связаны, но различаются
При масштабировании браузер может показывать меньшую область страницы в CSS-пикселях. Поэтому ранее достаточная ширина становится узкой для того же макета. Изменение размера текста без масштабирования создаёт другой набор условий: ширина окна может остаться прежней, а строки и панели станут выше. Следует рассматривать оба пути, а не делать вывод по одному размеру мобильного экрана.
Resize Text описывает увеличение текста до 200 процентов без потери содержания и функциональности с предусмотренными исключениями. Reflow рассматривает перестроение при ограниченном пространстве; для обычного вертикально прокручиваемого содержания важен пример ширины 320 CSS-пикселей. Это может соответствовать увеличению 400 процентов при исходной ширине 1280 CSS-пикселей, но конкретную проверку следует связывать с фактическим представлением.
Эти числа описывают разные условия. Успех при увеличении текста на 200 процентов не подтверждает автоматически перестроение всей страницы в другом сценарии. Кроме того, обычный текст и содержимое, которому для смысла необходима двумерная компоновка, оцениваются с учётом соответствующих исключений. Исключение не возникает только потому, что автор назначил блоку большую фиксированную ширину.
Сначала устраняем лишние ограничения
В базовом CSS статья имеет максимальную ширину, а не фиксированную. Это уже позволяет ей сжиматься вместе с доступной областью. Добавьте следующие правила в конец lesson.css; они уточняют поведение текста и изображений, не заменяя исходную оболочку:
html { font-size: 100%; }
body { font-size: 1rem; }
main, article, section, nav {
min-inline-size: 0;
}
article p, article li, article a, .site-header a {
overflow-wrap: anywhere;
}
article img {
display: block;
max-inline-size: 100%;
block-size: auto;
}
h1, h2, h3 { line-height: 1.25; }
.lesson-note {
padding: 1rem;
background: #f0edf7;
}font-size: 100% сохраняет связь с исходным размером браузера. Размер текста в rem зависит от корневого значения. Это не означает, что любое использование пикселей недопустимо: толщина границы может иметь фиксированное значение. Важно, чтобы содержательный текст и окружающая компоновка могли изменяться без обрезания, а не чтобы каждая величина использовала одинаковую единицу.
min-inline-size: 0 позволяет элементам сжиматься в тех компоновках, где автоматический минимум мог бы удерживать ширину длинного содержания. Оно не сокращает текст и не меняет его смысл. overflow-wrap: anywhere помогает длинной ссылке не растягивать всю статью. Обычные русские слова по-прежнему читаются в потоке; разрыв особенно полезен для технического имени или адреса без удобных пробелов.
Высота изображения становится автоматической относительно его ширины. Значения width и height в HTML продолжают описывать исходные пропорции, но CSS позволяет рисунку занимать доступное место. Если схема содержит мелкие подписи, одного уменьшения недостаточно: читателю может понадобиться текстовое описание из урока 5 или отдельное увеличение. Сжатое изображение не должно быть единственным способом прочитать данные.
Длинная строка кода
У листинга другая задача: последовательность символов и отступы могут быть существенны. Не следует применять к нему все правила обычного абзаца без оценки. Для короткого учебного выражения перенос строк может оказаться удобным. Для сравнения выравнивания или длинного табличного вывода отдельная горизонтальная прокрутка способна сохранить нужные отношения.
В нашем стенде сначала используем локальную прокрутку блока. Измените существующий pre в разделе descendants, добавив возможность фокуса и короткое имя, затем добавьте CSS:
<pre class="code-scroll" role="region" tabindex="0"
aria-label="Пример выбора элементов Employee"><code>IEnumerable<XElement> employees =
xDoc.Descendants("Employee");</code></pre>.code-scroll {
max-inline-size: 100%;
overflow-x: auto;
white-space: pre;
padding: 1rem;
}
.code-scroll:focus {
outline: 3px solid var(--focus-color);
outline-offset: 3px;
}Роль region здесь обозначает именованную область прокрутки. Обычный pre имеет неименуемую роль generic; один tabindex её не меняет. Поэтому короткое aria-label связано именно с явно заданной областью, а настоящий текст программы остаётся в дочернем code. Правила ARIA для pre.
Эта дополнительная остановка оправдывается управлением прокруткой, если она нужна в рассматриваемом представлении. Сам короткий пример может помещаться без неё; окончательная оболочка должна учитывать действительные листинги. Не превращайте каждую строку кода в отдельную остановку Tab. Читатель должен управлять областью, а не проходить сотни одинаковых элементов перед следующей ссылкой.
Для альтернативного представления можно заменить white-space: pre на pre-wrap и добавить подходящий перенос длинных последовательностей. Тогда визуальная строка может занять несколько строк экрана, хотя исходный текст кода не получает новых символов перевода строки. Пояснение должно учитывать это различие, особенно если автор ссылается на номера строк или расположение выражений.
Локальная прокрутка листинга не даёт оснований оставить горизонтальное движение для всей статьи. Если обычный абзац тоже выходит за окно, ищите фиксированную ширину, длинный URL, внутренний элемент сетки или другой источник. Глобальное overflow-x: hidden может убрать полосу вместе с доступом к части содержания. Оно скрывает проявление, а не исправляет ограничение.
Высота элементов зависит от текста
Хедер из урока 4 перестаёт закрепляться в небольшом представлении. Это сохраняет пространство для чтения и не требует угадывать, сколько строк займёт навигация. Аналогичный подход нужен карточкам следующего урока и сообщениям: их высота должна определяться содержимым. Фиксированные height: 40px для длинного русского названия способны скрыть вторую строку.
Заменять полное название многоточием следует только тогда, когда читатель может получить назначение другим понятным способом. Для учебной навигации часто проще разрешить перенос. Сокращение скрывает информацию именно в момент выбора следующего шага. При увеличении нужно наблюдать не только текст статьи, но и подписи управляющих элементов, хлебные крошки и возможные сообщения.
Для будущей проверки задайте несколько конкретных действий: прочитать объяснение полностью, увидеть назначение ссылки, прокрутить листинг, вернуться к оглавлению. Затем повторите их с увеличенным текстом и узким представлением. Запишите, где требовалось движение в двух направлениях и почему. Снимок узкого окна без выполненной задачи не показывает, доступен ли конец примера и не перекрывается ли управление.
Теперь учебная оболочка ограничивает максимальную ширину, допускает рост высоты и рассматривает сложные фрагменты отдельно. Следующая часть курса будет добавлять поведение меню и названия управления. Эти элементы должны сохранять полученные свойства: открытие нового блока не должно возвращать фиксированную ширину или скрывать его подпись при увеличении.