HTML, CSS и интерфейс, доступный разным людям

Где мы на карте

Это урок 45 из 72, блок «Интернет, веб и облако» (39–46). Мы продолжаем один проект: три вымышленные записи и пять результатов напоминания из версии 1.0 должны сохраниться. На опорной схеме показан ровно тот переход, который можно объяснить и проверить; стрелка не означает, что все промежуточные устройства нарисованы.

Ситуация и вопрос

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

Новые слова без пропусков

HTML задаёт смысловую структуру: заголовок, форма, таблица и подписи. CSS меняет внешний вид, но не заменяет смысл. Семантический элемент говорит браузеру, какую роль играет часть страницы. Метка label связывает текст с полем ввода через одинаковые for и id. Экранирование HTML превращает символы < и > из пользовательского текста в обычный видимый текст, а не команды разметки. Доступность означает возможность выполнить задачу людям с разными устройствами и способами восприятия.

Опорный сигнал

Прочитайте схему слева направо. Для каждой стрелки назовите вход, действие и проверяемый результат. Затем закройте подпись следующей карточки и предскажите её своими словами. Вернитесь к реальному примеру: различайте учебную аналогию, работу localhost и возможный удалённый сайт. Если картинка обещает больше, чем объяснение, исправьте объяснение или рисунок.

Разбираем шаг за шагом

Откройте исходный код web_assistant.py: внутри страницы есть <main>, заголовки <h1> и <h2>, <label for='today'>, <input id='today'> и заголовки таблицы <th scope='col'>. Перейдите клавишей Tab от поля даты к кнопке: фокус должен следовать понятному порядку. Временно уберите CSS мысленно или через браузер: порядок и смысл страницы должны сохраниться. Сервер вызывает html.escape для заголовков вымышленных задач; если в тесте указано <script>, на странице выводятся видимые символы, а не выполняется код. Это защита отображения, а не всеобъемлющая безопасность будущего сайта.

Предскажите и проверьте

Не запускайте код сразу. Выпишите точный ожидаемый результат, включая порядок строк и символы. Объясните, что код доказывает, а чего не доказывает: этот маленький пример моделирует одно правило и не создаёт настоящий интернет, TLS-сертификат или открытый сервер. Затем выполните фрагмент в каталоге step-04 и сравните результат посимвольно. Измените один вход, сначала предскажите новый результат, потом проверьте.

from html import escape
print(escape("<b>Task</b>"))

Ожидаемый вывод

<b>Task</b>

Поймайте ошибку

Ошибка — писать только placeholder вместо видимой подписи или передавать смысл статуса лишь цветом. Кнопка без текста не объяснит действие читателю; картинка текста не заменит настоящий текст. Экранирование на выводе не отменяет проверку данных на входе и не делает учебный сервер подходящим для открытого интернета.

Изменение проекта

Проверьте три языка ?lang=ru, ?lang=kz, ?lang=en: язык документа и подписи меняются, ID и пять машинных статусов остаются теми же. Добавьте в журнал проекта результаты проверки клавиатурой, узким экраном и при увеличенном тексте. Не используйте реальные данные одноклассников.

Задание и доказательство

Найдите в коде три смысловых элемента и объясните их пользу. Введите в копии вымышленного файла заголовок <b>Task</b> и предскажите исход в HTML, затем сравните с результатом. Проверьте, что изменение только цвета CSS не меняет содержимое таблицы.

Перенос в новую ситуацию

Если следующий экран будет показывать изображение задачи, какую текстовую альтернативу нужно дать? Когда изображение декоративно и пустой alt уместен, а когда от него пропадёт важная информация?

Возврат через 1, 7 и 30 дней

Через 1 день нарисуйте главный переход по памяти и приведите контрпример к слишком простой аналогии. Через 7 дней объясните новый случай однокласснику, не читая готовый текст; проверьте не менее 7 из 10 вопросов. Через 30 дней повторите опыт с локальной веб-версией и убедитесь, что три исходных задачи и пять правил сохранились. Запишите, какой термин всё ещё непонятен, и вернитесь к его первому объяснению.

Первоисточник для проверки

Официальная документация

Следующий урок

Выпуск 1.1: веб-версия и честная модель облака