wat tutorial
Підручник з панелі інструментів WAT або веб-доступності для тестування доступності:
Засоби перевірки доступності були детально пояснені в нашому попередньому навчальному посібнику в Серія тестування доступності .
WAT (панель інструментів веб-доступності) - це панель інструментів для Браузер Internet Explorer та інші браузери - Це може допомогти в оцінці веб-сторінки на відповідність Правилам доступності веб-вмісту версії 2 (WCAG 2.0).
Як користуватися інструментом WAT?
Будь ласка завантажте та встановіть його звідси .
Після успішної інсталяції ви побачите додатковий інструмент веб-доступності безпосередньо під адресним рядком.
Ми дізнаємось це за допомогою веб-сайту EAsports - http://www.easports.com.
# 1) Заголовок сторінки - Ми можемо перевірити рядок заголовка сторінки у рядку заголовка вікна або рядку заголовка браузера. Наведення курсору миші на вкладці дасть вам інформацію про заголовок сторінки.
Введіть URL-адресу http://www.easports.com і перевірте заголовок сторінки в рядку заголовка вкладки, наводячи курсор миші.
# 2) Колір - Колір веб-сайту повинен переходити в кольоровий аналізатор контрастності.
Існує 3 різні рівні відповідності для визначення кольорового співвідношення, тобто рівень A, AA та AAA.
Він повинен отримати прохід на AA або AAA .
“A” означає низький рівень доступності, “AA” означає середній рівень доступності, а “AAA” - найвищий рівень доступності.
Введіть URL-адресу http://www.easports.com i На панелі інструментів натисніть вкладку Колір, виберіть Контрастний аналізатор і підтвердьте.
# 3) Заголовки - Заголовки забезпечують ефективний огляд змісту сторінки. Усі сторінки повинні починатися з заголовків H1 або H2. Текст заголовка повинен бути більшим, напівжирним та розмічати на веб-сторінках. І Сторінка повинна починатися з “h1”, і на кожній сторінці повинен бути принаймні один заголовок.
Щоб перевірити структуру заголовка, натисніть на http://www.easports.com і виберіть вкладку Структура, а потім натисніть на структуру заголовка та підтвердьте. Це дасть вам усі подробиці заголовка заголовка. Він також перевірить, правильно чи вкладені заголовки чи ні.
# 4) Додатковий текст для зображень - Атрибут alt підтримується у всіх основних браузерах. Усі зображення повинні мати пов'язаний з ним текст Alt. Він відображає значення атрибута alt як підказку, коли ми наводимо курсор на зображення. Це надає альтернативну інформацію про зображення, якщо зображення неможливо відобразити.
Введіть URL-адресу http://www.easports.com, натисніть на показати зображення та перевірте, чи доступний альтернативний текст для зображень.
Ви отримаєте нижче спливаюче вікно:
Ви отримаєте деталі, як зазначено вище.
# 5) Порядок вкладки - Порядок послідовностей вкладок повинен відображатися логічно і правильно. Ви можете перейти до різних посилань, натиснувши клавішу табуляції. Вибравши індикатор порядку вкладок, ви можете побачити кількість номерів біля посилань, що показує, скільки разів потрібно натиснути клавішу табуляції, щоб перейти за цим конкретним посиланням.
Щоб перевірити порядок вкладок, натисніть на адресу http://www.easports.com і натисніть Структура та виберіть індикатор порядку вкладок.
# 6) Списки - Список повинен відображатися у правильній структурі. Завжди слід перевіряти списки, щоб переконатися, що елементи списку дійсно містяться в одному списку. Список може мати дві форми: замовляв список і невпорядкований список . Невпорядковані списки використовують елемент і впорядковані списки використовують
елемент.
Введіть URL-адресу http://www.easports.com i На панелі інструментів натисніть на структуру та виберіть елементи списку та перевірте порядок списку.
Приклад невпорядкованого списку:
Приклад упорядкованого списку:
# 7) Контраст співвідношення - За замовчуванням він повинен мати мінімальний контраст. Веб-браузери повинні дозволяти людям змінювати колір тексту та фону, якщо це потрібно.
Введіть URL-адресу Google https://www.google.co.in/ та клацніть на зображення та виберіть Juicy Studio Luminosity Analyzer.
Відкриється нове вікно з назвою «Аналізатор кольорового контрасту» з таблицею результатів. Остання колонка - коефіцієнт контрастності яскравості.
найкращі сайти для перегляду аніме в Інтернеті безкоштовно
# 8) Етикетки - Етикетки повинні відображатися належним чином.
Введіть URL-адресу https://www.google.co.in/ і на панелі інструментів натисніть Структура та виберіть опцію набору полів / міток. Ви побачите набір полів та деталі міток.
# 9) Основні Структура Перевірте - Під час цієї перевірки ми перевіряємо веб-сторінки без зображень, стилів та макета.
На панелі інструментів натисніть Зображення, а потім Видалити зображення.
Тепер виберіть CSS, а потім натисніть Вимкнути CSS.
Нарешті клацніть на Таблиці, а потім виберіть Linearize.
Час на практику:
Давайте тепер дамо собі зразок завдання на перевірку доступності, звичайно, рішення є. Але ми рекомендуємо вам спробувати це самостійно, перш ніж переходити до відповіді.
Перевірте заголовки, зображення з альтернативним текстом, індикатор порядку вкладок та кольорову контрастність http://www.cbssports.com
Рішення: Клацніть на URL-адресу http://www.cbssports.com в Internet Explorer.
Щоб перевірити заголовки, натисніть Структура та виберіть Структура заголовка для перевірки заголовка.
Заголовки не в H1. Усі заголовки в H2.
Щоб перевірити текст заміщення, клацніть на Зображення та виберіть Показати зображення, щоб перевірити, чи є на зображеннях текст заміщення.
Ви побачите, що декілька зображень містять текст заміщення, а деякі з них не мають атрибута alt. Деталі зображення без тексту заміщення відображаються у спливаючому вікні, а деталі зображень із текстом заміщення відображаються біля зображень.
Наприкладalt = ”Текст пошуку CBS Sports.com”, який відображається біля піктограми пошуку, та текст alt = ”CBSSports.com”, який відображається біля логотипу Fantasy.
Щоб перевірити індикатор порядку вкладок, натисніть Структура та виберіть Індикатор порядку вкладок .
Підрахунок відображатиметься біля посилань, що показує, при якій спробі ви зможете натиснути на це конкретне посилання. Наприклад, щоб натиснути на верхню частину самого посилання NFL, вам потрібно буде натиснути кнопку вкладки з клавіатури 13 разів.
Тепер остання перевіряє контрастність кольорів, клацніть на кольорі та виберіть Contrast Analyzer.
Текст передається з подвійним A, тобто AA.
Там це спосіб оцінити доступність веб-сайту.
НАЗАД Підручник | НАСТУПНИЙ підручник
Рекомендована література
- Підручник із інструменту тестування доступності WAVE
- Поглиблені підручники Eclipse для початківців
- Підручник з тестування доступності (повний покроковий посібник)
- Топ 20 інструментів тестування доступності для веб-додатків
- Найкращі засоби тестування програмного забезпечення 2021 р. (Засоби автоматизації тестування якості)
- Підручник з деструктивного контролю та неруйнівного контролю
- Функціональне тестування проти нефункціонального тестування
- Підручник з тестування SOA: Методологія тестування для архітектурної моделі SOA