wat tutorial
Урок за WAT или Web Accessibility Toolbar за тестване на достъпността:
Инструменти за тестване на достъпността бяха обяснени подробно в предишния ни урок в Серия за тестване на достъпността .
WAT (лента с инструменти за уеб достъпност) - е лента с инструменти за Браузър Internet Explorer и други браузъри - Той може да помогне за оценка на уеб страница за съответствие с Насоките за достъпност на уеб съдържание версия 2 (WCAG 2.0).
Как да използвам инструмента WAT?
Моля те изтеглете и инсталирайте от тук .
След успешна инсталация ще видите допълнителен инструмент за достъпност в мрежата точно под адресната лента.
Ще научим това с помощта на уебсайта EAsports - http://www.easports.com.
# 1) Заглавие на страницата - Можем да проверим лентата със заглавие на страницата в лентата със заглавия на прозореца или лентата със заглавия на браузъра. При задържане на мишката върху раздела ще получите информация за заглавието на страницата.
Въведете URL адреса http://www.easports.com и проверете заглавието на страницата в заглавната лента на раздела, като задържите курсора на мишката.
# 2) Цвят - Цветът на уебсайта трябва да преминава в Color Contrast Analyzer.
Има 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) Подреждане на раздели - Редът на последователността на раздели трябва да се показва логично и правилно. Можете да навигирате до различните връзки, като щракнете върху бутона tab. След като изберете индикатор за подреждане на раздели, можете да видите броя на числата близо до връзките, което показва колко пъти трябва да кликнете върху клавиша за раздели, за да достигнете до тази конкретна връзка.
За да проверите реда на раздела, щракнете върху url http://www.easports.com и щракнете върху Структура и изберете индикатор за подреждане на раздели.
# 6) Списъци - Списъкът трябва да се показва в правилната структура. Винаги трябва да се проверяват списъци, за да се гарантира, че елементите от списъка наистина се съдържат в един списък. Списъкът може да бъде в две форми: наредени списък и неподредени списък . Неуредените списъци използват елемент и подредени списъци използват
елемент.
Въведете URL адреса http://www.easports.com i В лентата с инструменти щракнете върху структурата и изберете елементи от списъка и проверете реда на списъка.
Пример за неподреден списък:
Пример за подреден списък:
# 7) Контраст съотношение - По подразбиране трябва да има минимален контраст. Уеб браузърите трябва да позволят на хората да променят цвета на текста и фона, ако е необходимо.
Въведете google url https://www.google.co.in/ и щракнете върху изображения и изберете Juicy Studio Luminosity Analyzer.
Отваря се нов прозорец с озаглавен анализатор на цветови контрасти с таблицата с резултатите. Последната колона е коефициент на контраст на яркост.
как да настроите фалшив имейл
# 8) Етикети - Етикетите трябва да се показват правилно.
Въведете URL https://www.google.co.in/ и в лентата с инструменти щракнете върху Структура и изберете опция поле / етикети като опция. Ще видите подробности за полето и етикета.
# 9) Основни Структура Проверете - При тази проверка ние проверяваме уеб страници без изображения, стилове и оформление.
В лентата с инструменти щракнете върху Изображения, след което премахнете изображения.
Сега изберете CSS и след това кликнете върху Деактивиране на CSS.
Накрая кликнете върху Таблици, след което изберете Линеаризиране.
Време за практика:
Нека сега си дадем примерна задача за тест за достъпност, разбира се, решението е предоставено. Но ви препоръчваме да изпробвате това сами, преди да преминете към отговора.
Проверете заглавията, изображенията с алтернативен текст, индикатора за подреждане на раздели и цветовия контраст в http://www.cbssports.com
Решение: Щракнете върху url http://www.cbssports.com в Internet Explorer.
За да проверите заглавията, щракнете върху Структура и изберете Структура на заглавието за проверка на заглавието.
Заглавията не са в H1. Всички заглавия са в Н2.
За да проверите алтернативен текст, щракнете върху Изображения и изберете Показване на изображения, за да проверите дали алтернативният текст присъства в изображенията или не.
Ще откриете, че няколко от изображенията са с алтернативен текст и малко от тях са без атрибут alt. Подробностите за изображението без алтернативен текст се показват в изскачащи прозорци, а подробностите за изображенията с алтернативен текст се показват близо до изображенията.
Напримерalt = 'Търсене на CBS Sports.com' текст, който се показва близо до иконата за търсене и alt = 'CBSSports.com' текст, който се показва близо до логото на Fantasy.
За да проверите индикатора за подреждане на раздели, щракнете върху Структура и изберете Индикатор за подреждане на раздели .
Броят ще се покаже близо до връзките, което показва при какъв опит ще можете да кликнете върху тази конкретна връзка. Например, за да щракнете върху най-горната NFL връзка, ще трябва да натиснете бутона tab от клавиатурата 13 пъти.
Сега последният за проверка на цветовия контраст, щракнете върху цвят и изберете Контрастен анализатор.
Текстът се предава с двойно A, т.е. AA.
Там това е начинът да се оцени достъпността на уебсайта.
Препоръчително четене
- Урок за инструмент за тестване на достъпност на WAVE
- Уроци за задълбочено затъмнение за начинаещи
- Урок за тестване на достъпността (Пълно ръководство стъпка по стъпка)
- Топ 20 Инструменти за тестване на достъпността за уеб приложения
- Най-добри инструменти за тестване на софтуер 2021 г. (Инструменти за автоматизация на QA теста)
- Урок за деструктивно изпитване и безразрушително тестване
- Функционално тестване срещу нефункционално тестване
- Урок за тестване на SOA: Методология за тестване за архитектурен модел на SOA