Як створити доступний дизайн веб-сторінки

Екран ноутбука

Інтернет-магазини, банківські програми, бронювання готелів або робота на фріланс, все більше завдання, які вирішуються через Інтернет і які замінили в деяких випадках звичайні засоби масової інформації.

це швидке зростання цифрових операцій полегшило нам у багатьох аспектах життя. Це економить наш час, оскільки операції швидші, і немає необхідності їхати до будь-якого фізичного закладу, і звичайно, створено нові ЗМІ, яких раніше не було і що зараз більшість людей використовують такі, як соціальні мережі, потокові фільми та серіали на платформах, таких як Netflix, або онлайн-платіжних системах, таких як Paypal.

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

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

Але це лише перша частина вирішення проблеми. Думаючи про цих користувачів, ми повинні дизайн інтерфейсів веб-сторінок які полегшать ваш досвід і відповідно до ваших потреб. Є кілька принципів при розробці, які ми можемо застосувати.

Зміст та джерела

Починаючи з найосновнішого, треба встановити пріоритети в дизайні вмісту. Заголовок та рядок меню повинні бути легко візуально доступними та бути першим, що бачить користувач. Елементи на домашній сторінці, зображення та відповідна інформація знайдуться вдруге.

Реклама або рекламні банери з’являються на багатьох сторінках. Якщо це саме по собі це дратує всіх користувачів, для людей із вадами зору це проблема, оскільки викликає велику плутанину і заважає читати веб-схему. Ось чому важливо створити загальний редакційний дизайн сторінки, яка є організовано логічно і зрозуміло, а елементи мають відповідний розмір, так що навіть якщо є інші відволікаючі фактори, користувачі можуть зосередитись на важливому вмісті.

Шрифти, якими ви користуєтесь бажано, щоб вони були великий і розбірливий. Тип Без зарубок і напівжирних шрифтів Вони значно полегшують читання людям, які можуть страждати на дислексію. Інші рекомендовані шрифти: Arial, Times New Roman, Helvetica, Tahoma, Calibri та Verdana.

І звичайно, завжди слід подбати про те, щоб між ними існувала чітка різниця тексту та фону. Не використовуйте подібні кольори, скоріше вибирайте контрастні кольори.

Без шрифтів із напівжирним шрифтом

Використання шрифтів Sans Serif Bold забезпечує кращу візуалізацію тексту.

Альтернативний текст

El Альтернативний текст або Alt Tag - це описи, розміщені на зображеннях на веб-сторінках. Хоча цей текст недоступний для читання користувачами, a добре написаний опис - це інструмент, який допомагає нам досягти кращого позиціонування SEO.

Але корисність Alt Tag не лише зводиться до цього. Для тих користувачі, які використовують зчитувачі з екрана щодо вад зору описи зображень такі єдине посилання, яке вони повинні знати, який зовнішній вигляд того, що показано на сторінці. Отже, якщо ми збираємось розмістити, наприклад, фотографію деяких сукулентів, хорошим альтернативним текстом буде: Три сукулентних рослин у рожевих горщиках. Дуже короткий текст, наприклад: Кімнатні рослини, Це не опис, який містить відповідні деталі і, отже, не працює.

Сукуленти в рожевий горщик

Три сукулентних рослин у рожевих горщиках. Приклад альтернативного тексту.

Адаптивність

При проектуванні ми також повинні враховувати всі презентації, в яких буде показано наш інтерфейс, або в веб- або мобільна версія. Досвід завжди буде різним залежно від середовища, де ми його переглядаємо.

Коли ми використовуємо мобільний, ми можемо зазнати впливу різних середовищ які ускладнюють читання Змісту екрана. Наприклад, якщо ми знаходимося на відкритому повітрі, яскравість сонця змусить екран виглядати дуже темним, а шум не дасть нам добре чути звук. Ось чому важливо ретельно продумати ці деталі, щоб мобільна версія мала великі літери та темні кольори, а відео повинні мати субтитри, якщо їх важко почути.

Мобільний екран

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

Послідовність дизайну

Редакційний дизайн що ми робимо з нашим веб-сайтом повинні бути однаковими незалежно від розділу де ти. У розділі "Домашня сторінка" повинні з'являтися ті самі значки на панелі меню, що й у розділі "Контакти". Ми не повинні змінювати стиль ні розташування ключових кнопок в Інтернеті.

Нам також не зручно розміщувати відео, що відтворюються автоматично при відкритті сторінки. Користувачам, які використовують зчитувачі з екрану, важко знати, як їх призупинити.

Веб-сайт Starbucks

Рядок меню на сторінці Starbucks однаковий у всіх розділах.

Навігація на клавіатурі

Нарешті, деякі користувачі з проблемами координації рухів мають труднощі з схопленням комп’ютерної миші або використанням сенсорної панелі ноутбука і покладаються виключно на клавіатуру. Обов’язково що ваш веб-сайт розроблений таким чином це може бути повністю функціональний лише за допомогою кнопок клавіатури.


Залиште свій коментар

Ваша електронна адреса не буде опублікований. Обов'язкові для заповнення поля позначені *

*

*

  1. Відповідальний за дані: Мігель Анхель Гатон
  2. Призначення даних: Контроль спаму, управління коментарями.
  3. Легітимація: Ваша згода
  4. Передача даних: Дані не передаватимуться третім особам, за винятком юридичних зобов’язань.
  5. Зберігання даних: База даних, розміщена в мережі Occentus Networks (ЄС)
  6. Права: Ви можете будь-коли обмежити, відновити та видалити свою інформацію.