20. Інклюзивний і доступний дизайн форми

Сьогодні ми навчимося створювати інклюзивний і доступний дизайн форми, щоб нашим сайтом могло скористуватися ще більше людей! Чи задумувалися ви коли-небудь, як користуються інтернетом люди з порушенням зору?
Сьогодні ми створимо адаптивну форму з конвертором валют і не тільки. А ще, поговоримо про важливість цієї теми.

Для чого потрібен інклюзивний і доступний дизайн?

Подивіться на картинку. Чи бачили ви подібні речі у вашому місті ? Для чого і для кого вони створені.

А зараз подивімося відео “Інверсна інклюзія: доступний світ для всіх”. Що думаєте про це?

Чи на вашу думку достатньо розвинена доступність в Україні ? А в інших країнах?
Ось кілька фондів з України, які займаються проблемами інклюзії та доступності:

Unbroken – це проєкт у Львові, який допомагає пораненим українцям – як військовим, так і цивільним. Вони надають безкоштовне протезування, реабілітацію та психологічну підтримку тим, хто постраждав через війну. Мета фонду – щоб люди змогли повернутися до повноцінного життя, незважаючи на отримані травми.
Caritas – міжнародний благодійний фонд, що працює в Україні вже багато років і серед іншого допомагає людям з інвалідністю.
Відчуй – фонд, який займається допомогою людям із порушеннями слуху. Вони популяризують жестову мову, підтримують людей із вадами слуху та забезпечують доступ до якісних слухових апаратів.

Всі ці фонди роблять важливу справу, допомагаючи тим, хто цього найбільше потребує. 💙

А ось такі тревел-шоу на youtube сьогодні можна знайти. Трохи весело і трохи корисно показують інклюзію на вулицях міст Олександр і його гості.
Олександр Терен — український військовий, який втратив обидві ноги на фронті, а після повернення став ведучим тревел-шоу «Відвал ніг або All інклюзив». Разом із відомими гостями він досліджує українські міста на безбар’єрність, привертаючи увагу до інклюзивності. Також Олександр є письменником, мотиваційним спікером і виступає за соціалізацію ветеранів. Посилання на тревел-шоу:
Відвал ніг Одеса і Відвал Ніг Дніпро.

Інклюзивний і доступний дизайн форми та сайту в інтернеті

Доступ до інформації в інтернеті, такий звичний та доступний нам всім може стати цілим випробування для людей з порушенням зору. Чи знаєте ви я люди з порушенням зору:

1️⃣ …сплачують комунальні послуги?
2️⃣ …читають та пишуть повідомлення у соцмережах?
3️⃣ …купують товари в інтернет-магазинах?
4️⃣ …користуються банківськими додатками?
5️⃣ …читають книги та новини онлайн?
6️⃣ …орієнтуються на вебсайтах без допомоги зору?
7️⃣ …використовують GPS-навігацію для пересування містом?
8️⃣ …дивляться відео на YouTube чи фільми?

Уявіть, що ви заходити на сайт, але не можете прочитати текст або натиснути кнопку, бо вона незрозуміло підписана. Для людей із поганим зором або незрячих така проблема трапляється дуже часто.

Щоб зробити сайти зручними для всіх, розробники додають інклюзивні елементи:
✅ Альтернативний текст (alt) для картинок – щоб незрячі люди могли почути, що зображено на фото.
✅ Чіткі контрасти кольорів – щоб текст добре читався навіть людям із проблемами зору.
✅ Озвучка та підтримка навігації клавіатурою – щоб можна було керувати сайтом без мишки.

Це важливо, бо інтернет має бути місцем, де кожен може знайти потрібну інформацію без перешкод. Створюючи доступні сайти, ми допомагаємо мільйонам людей користуватися мережею комфортно. 💙

Адаптація форми

Сайт адаптований для людей з порушенням зору за допомогою наступних елементів:

1. ARIA-атрибути для доступності:
   • aria-labelledby=”title” для поля введення суми – вказує, що воно пов’язане з заголовком “Конвертор валют”.
   • aria-describedby=”amount-help” – допомагає пояснити, що означає поле введення.
   • aria-live=”polite” для блоку результату – повідомлення про результат буде автоматично озвучене екранними читалками при зміні.
2. Контрастність та простий інтерфейс:
   • Використання висококонтрастних кольорів для кнопок (background-color: #007bff; з білим текстом).
   • Чіткий, зрозумілий шрифт без зарубок (Arial, sans-serif).
3. Автоматичне фокусування (autofocus):
   • Поле введення суми має autofocus, що дозволяє користувачам відразу вводити значення без додаткових дій.
4. Альтернативний текст для зображення:
   • alt=”Конвертор валют” для картинки, що допомагає незрячим користувачам зрозуміти її зміст.

Ці елементи покращують доступність сайту для людей, які користуються екранними читалками або мають знижений зір.

Практика. Інклюзивний і доступний дизайн форми.
Конвертор валют на HTML\CSS\JS

1: Створіть новий проєкт HTML\CSS. Змініть назву сторінки на “Конвертор валют”. Створіть і підключіть файл зі скриптами.

<script src="script.js"></script>

2: Додайте картинку в тему на початку. Не забудьте про підпис alt. Налаштуйте ширину і висоту.

3: Додайте контейнер для решти елементів форми. В середину додамо назву, і поле для введення суми та підпис. Решту елементів форми також необхідно буде додати в середину div з контейнером

   <div class="container">
      <h1 id="title">Конвертор валют</h1>
      <label for="amount">Сума:</label>
      <input type="number" id="amount" aria-labelledby="title" aria-describedby="amount-help" autofocus />
      <br />


...
 </div>

5: Аналогічно додайте поле для валюти в яку будемо переводити: назва “В” і id=”to”.

6: Додаємо кнопку і поле для результату. Клік на кнопку має викликати функцію convert(), яку створимо згодом:

      <button onclick="convert()">Конвертувати</button>
      <h2 id="result" aria-live="polite">Результат:</h2>

7: Додаймо стилі. Подумайте, чим ці стилі допомагають зробити форму адаптованішою.

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f4f4f4;
}
.container {
  margin-top: 50px;
}
input,
select,
button {
  font-size: 1.2em;
  margin: 10px;
  padding: 10px;
}
button {
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}
button:hover {
  background-color: #0056b3;
}

8: Попрацюймо над кодом js. Створіть функцію getRate з параметром currency. Додайте умову яка повертає курс валюти до долара. 1 долар до 1 долара – повертаємо 1. На момент створення сторінки: 1 долар – 0.95 євро, повертаємо 0.95

  if (currency === "USD") return 1;
  // те саме для євро
  //те саме для гривні
  return null;

  if (isNaN(amount) || amount <= 0) {
    document.getElementById("result").textContent = "Введіть коректну суму";
    return;
  }
  if (fromRate === null || toRate === null) {
    document.getElementById("result").textContent = "Помилка конвертації";
    return;
  }

12: Рахуємо результат і записуємо у поле для результату.

  const result = (amount / fromRate) * toRate;
  document.getElementById("result").textContent = `Результат: ${result)} ${to}`;

Запустіть й подивіться на результат. Як зробити вивід красивішим?

13: Щоб округлитирезультат, використаймо функцію

Результат: ${result.toFixed(2)} 

2: Створіть форму з адаптивним дизайном для реалізації одного з цих завдань на ваш вибір.

1️⃣ Калькулятор одиниць виміру (конвертація км → милі, кг → фунти тощо).
2️⃣ Розрахунок відсотків за депозитом (введення суми, вибір терміну, отримання прибутку).
3️⃣ Конвертер часу (введення часу, вибір часового поясу, отримання результату).
4️⃣ Розрахунок знижки (введення початкової ціни, вибір % знижки, підрахунок фінальної суми).
5️⃣ Розрахунок площі фігур (круг, квадрат, прямокутник).
6️⃣ Розрахунок гіпотенузи (теорема Піфагора).
7️⃣ Ваш варіант задачі (у ній мають бути 1-3 поле вводу і елемент select або radio або checkbox)

Хочете дізнатися більше ? Переходьте на сторінку з уроками по CSS та Javascript і прокачайте навички з веброзробки 😎🤖 !!!