HTML for Kids · Урок

Основы доступности

Добавляйте альтернативный текст к изображениям и делайте веб-страницы удобными для пользователей

«Основы доступности» — бесплатный урок HTML for Kids на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.

Создание доступных страниц

Основы доступности

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

Что такое доступность?

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

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

Давайте научимся делать страницы более доступными для всех!

Добавление альтернативного текста к изображениям

Используйте атрибут alt в теге <img>, чтобы описать изображение. Это помогает программам чтения с экрана передавать содержание изображения пользователям с нарушениями зрения.

Пример:

<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />

Использование семантического HTML

Семантические теги, такие как <header>, <nav> и <footer>, помогают вспомогательным технологиям понять структуру страницы.

Пример:

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
<footer>
  <p>© 2024 My Blog</p>
</footer>

Навигация с клавиатуры

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

Пример:

<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>

Добавление подписей к полям ввода

Используйте тег <label>, чтобы добавить понятные описания для полей ввода. Свяжите подпись с полем ввода с помощью атрибута for.

Пример:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
</form>

Цветовой контраст

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

Совет: Высокий контраст улучшает читаемость для пользователей с нарушениями зрения.

Пример:

<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>

Попробуйте сами

Создадим доступную форму. Вот пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Form</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" />
      <br />
      <button type="submit">Sign Up</button>
    </form>
  </body>
</html>

Повторение: доступность

Отличная работа!

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

Часто задаваемые вопросы

Урок «Основы доступности» бесплатный?

Да — полный текст урока «Основы доступности» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.

Чему я научусь в уроке «Основы доступности»?

Добавляйте альтернативный текст к изображениям и делайте веб-страницы удобными для пользователей Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML for Kids?

Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Основы доступности»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML for Kids?

Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML for Kids