8.5: Шаблон аудиту та аудиту Покроковий

Last updated
Save as PDF

Page ID: 103504

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)

Шаблон аудиту є, мабуть, найбільш впливовим з різних типів аудитів, які будуть розглянуті тут.

Мета аудиту

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

Процес аудиту

На скріншоті нижче ви можете побачити окреслені області сторінки. Для аудиту шаблонів основна навігація, заголовок (тобто. Банер), Бічне меню та область нижнього колонтитула розглядаються. Основна область вмісту буде проігнорована наразі, щоб бути переглянута як частина загального аудиту.

Регіони шаблонів див. опис нижче

Малюнок: Типові елементи шаблону включають заголовок, бічне меню, банер, основний зміст області, додатковий контент, і нижній колонтитул

Ключовий момент: Перш ніж читати далі, завантажте шаблон огляду WCAG2 [doc], якщо ви ще цього не зробили, і відкрийте його в Microsoft Word, або іншому текстовому процесорі, який підтримує файли.doc.

Процедура аудиту

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

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

Примітка щодо наступних відео: Відео, які відображаються в розділі нижче, вважаються «медіа-альтернативами для тексту», і тому вони не потребують підписів. Сам текст містить текстові еквіваленти для відео (див. Рекомендацію 1.2.2). Тим не менш, ми підписали їх тут. Якщо ви зіткнулися з відео, які використовуються таким чином, без підписів, їх не потрібно ідентифікувати в аудиторському звіті як потенційний бар'єр, якщо вони вказані як альтернативи медіа.

Тест навігації клавішею Tab

Відео: Тестування доступності клавіш Tab

Мініатюра вбудованого елемента «Тестування доступності клавіш Tab»

Елемент YouTube був виключений з цієї версії тексту. Ви можете переглянути його онлайн тут: https://pressbooks.library.ryerson.ca/pwaa/?p=1438

Помістіть курсор у верхній лівий кут сторінки. Почніть з багаторазового натискання клавіші Tab і проходження шляху курсора через елементи шаблону. Шукайте обхідні посилання у верхній частині сторінки, а якщо їх не видно, подивіться на рядок стану браузера внизу вікна браузера, щоб побачити, чи присутні приховані обхідні посилання. URL-адреса, що відображається там, повинна мати «#content» на кінці, або щось подібне з префіксом із знаком числа, або хеш (#), як його часто називають. Дотримуйтесь обхідних посилань, натиснувши клавішу введення, коли вони отримують фокус, щоб переконатися, що вони ведуть до основної області вмісту або в деяких випадках до бічного меню. Якщо цих обхідних посилань немає, шукайте інші засоби для навігації по вмісту, наприклад орієнтирів, як описано в тесті екранного читання нижче, або вивчаючи розмітку HTML, щоб знайти їх, або шукайте гарне використання заголовків. (Настанова 2.4.1, рівень А)
Переконайтеся, що шлях курсора видно. (Настанова 2.4.7, рівень AA)
Шукайте доступ до оператора доступності десь у верхній частині шаблону, і щоб він з'явився на початку послідовності вкладок. (Настанова 3.3.5, рівень AAA)
Переконайтеся, що меню ліворуч від сторінки відкрито, а елементи підменю можна отримати за допомогою клавіатури. Для цього може знадобитися використання клавіш зі стрілками або їх відкриття за допомогою клавіші Tab або пробілу. (Настанова 2.1.1, рівень А)
Переконайтеся, що існує спосіб пропустити повз меню, особливо якщо вони містять багато пунктів у підменю. Зазвичай клавіша Tab підводить фокус до меню, клавіші зі стрілками використовуються для переміщення по ньому, а клавіша Tab натискається для виходу з меню, і в цьому випадку переходимо до області банера праворуч. (Настанова 2.4.1, рівень А)
Після області банера курсор повинен переміщатися в основну область контенту. Знову переконайтеся, що фокус видно через елементи основного змісту. Зверніть увагу на панелі вкладок в основній області вмісту. Переконайтеся, що можна переміщатися між вкладками на панелі вкладок, зазвичай за допомогою клавіш зі стрілками, і пересуватися безпосередньо з вкладки на відповідну панель, зазвичай за допомогою клавіші Tab. Функціональність клавіатури для tabpanels може дещо відрізнятися від сайту до сайту. (Керівні принципи 2.4.7, рівень АА, Настанова 2.1.1, Рівень A, Настанова 2.4.1, Рівень A)
Дійшовши до кінця бічного меню, курсор повинен переміщатися в основну область вмісту. Зараз ми будемо ігнорувати тестування елементів в основній області вмісту, і повернемося до них, коли ми обговоримо загальні перевірки. (Настанова 1.3.2, рівень А)
Після вкладки через основну область вмісту, курсор повинен перемістити в праву сторону безкоштовного вмісту. Знову переконайтеся, що фокус видно під час навігації по його елементам, і що перемикачі, які використовуються для відкриття та закриття меню акордеона, працюють за допомогою натискання клавіш, і що вони роблять це без перезавантаження сторінки або без втрати фокусу на перемикачах, коли їх стан змінюється (наприклад, відкритий на закритий). Переконайтеся, що елементи у відкритих підменю працюють на клавіатурі. (Настанова 1.3.2, Рівень A, Настанова 2.4.7, Рівень АА, Настанова 3.2.2, Рівень A, Настанова 2.1.1, Рівень A)
Після проходження через область безкоштовного вмісту клавішею Tab, курсор повинен переміщатися в область нижнього колонтитула. Знову переконайтеся, що фокус видно, і що функціональні елементи, в даному випадку посилання, всі отримують фокусування клавіатури і працюють за допомогою натискання клавіш. (Настанова 1.3.2, Рівень A, Настанова 2.4.7, Рівень АА, Настанова 2.1.1, Рівень A)
Дійшовши до кінця сторінки, зверніть увагу, чи був шлях, який курсор пройшов через сторінку, логічним шляхом, що перетинається зліва направо, рухаючись зверху вниз. (Настанова 1.3.2, рівень А)
Також зверніть увагу, чи всі елементи, через які пройшов фокус, мають сенс самостійно та/або в контексті інших функціональних елементів на сторінці. (Настанова 2.4.9, рівень ААА, Настанова 2.4.4, Рівень A

Використання автоматизованої перевірки доступності

Відео: Автоматизована перевірка доступності

Мініатюра вбудованого елемента «Автоматизована перевірка доступності»

Ми будемо використовувати aChecker тут для демонстраційних цілей, хоча ви можете використовувати інший автоматизований інструмент тестування доступності.
Або протестуйте сторінку через її URL-адресу, або якщо сайт не є загальнодоступним, перегляньте джерело сторінки, який зазвичай знаходиться в меню Перегляд браузера, виберіть всю розмітку, що відображається у вікні джерела перегляду (наприклад, натисніть Ctrl-A), скопіюйте розмітку (наприклад, натисніть Ctrl-C) в буфер обміну системи, а потім вставте розмітку з буфера обміну (Ctrl-V) в область «Вставити HTML-розмітку» засобу перевірки спеціальних можливостей.
Відкрийте меню параметрів у програмі AChecker та виберіть Показати джерело, WCAG 2.0 (рівень AA) та Перегляд за настановою. Або відрегулюйте ці параметри за потребою. Ви можете вибрати WCAG 2.0 (Level AAA), хоча проблеми, виявлені на цьому рівні, як правило, необов'язкові.
Після вибору параметрів натисніть кнопку «Check It», щоб запустити перевірку, і почекайте кілька хвилин, поки буде сформований звіт.
Зверніть увагу на кількість відомих, ймовірних та потенційних проблем, які виявляє засіб перевірки, зосередившись на відомих проблемах, які слід запустити. Вивчіть відомі проблеми, щоб переконатися, що вони не є помилковими спрацьовуваннями. Можливо, вам доведеться перейти за посиланням «Номер рядка» поруч із проблемою, щоб вивчити навколишню розмітку. Якщо проблеми актуальні, зверніть увагу на них відповідними рекомендаціями у вашому звіті про розробку аудиту. Ви також можете переглянути іншу інформацію про проблеми, перейшовши за посиланням поруч із кожною перевіркою, яка вказана у звіті перевірки.
Після документування відомих проблем у звіті про розробку аудиту перейдіть на вкладку «Ймовірні проблеми» у програмі перевірки, якщо такі є, і скануйте ці проблеми, щоб підтвердити, чи є проблеми актуальними чи ні. Ці питання можуть бути актуальними, хоча часто вони не є, коли доступні альтернативи надаються. Скануйте вміст сторінки, щоб переконатися, що елементи, позначені як імовірно, мають доступну альтернативу. Якщо ці проблеми виявляться актуальними, зверніть увагу на них відповідними рекомендаціями у вашому звіті про розробку аудиту.
Нарешті скануйте проблеми, представлені на вкладці «Потенційні проблеми». Це досить часто не є проблемами взагалі, але оскільки шашка не в змозі ідентифікувати ці проблеми з упевненістю, людина повинна прийняти рішення. Якщо вони виявляться актуальними проблемами, визначте їх у вашому звіті про розробку аудиту.

Перевірка розмітки

Відео: Перевірка HTML

Мініатюра для вбудованого елемента «Перевірка HTML»

Як і у випадку з AChecker, надішліть URL-адресу або вставте копію джерела HTML сторінки в W3C HTML валідатор, щоб оцінити достовірність HTML, щоб переконатися, що помилки розмітки не викликають потенційних бар'єрів. Як і AChecker, ви також можете вибрати Параметри, хоча типових налаштувань зазвичай достатньо.
Зверніть увагу на помилки, виявлені у звіті, який генерує валідатор, і не турбуйтеся про попередження. Особливу увагу зверніть на дублікати ідентифікаторів, елементів, які не закриваються, і елементів, які неправильно вкладені. Ці проблеми ризикують заплутати читачі з екрану.
Якщо сторінка не перевіряє (більшість не буде), надайте загальне твердження разом із Рекомендацією 4.1.1 (Рівень А) у звіті про те, що перевірка повинна бути проведена для усунення потенційних бар'єрів, які можуть виникнути, коли допоміжні технології стикаються з порушеною розміткою, та надати посилання на валідатора. Немає необхідності документувати всі помилки розмітки, крім згаданих вище.

Сканування екранного читання

Відео: тестування доступності за допомогою ChromeVox

Мініатюра вбудованого елемента «Тестування доступності за допомогою ChromeVox»

Для тестування екранного читання ми будемо використовувати ChromeVox, увімкніть його, а потім продовжуйте.
Повторіть тест навігації клавішею Tab з запущеним читалкою екрана та уважно слухайте, що оголошує програма читання з екрана. Чи означає те, що ви чуєте? Документ у вашому аудиторському звіті, де може бути надано додатковий опис. Чи всі функціональні елементи здатні приймати фокус і працювати за допомогою натискання клавіш. (Настанова 3.3.2, Рівень A, Настанова 2.1.1, Рівень A)
Перерахуйте заголовки на сторінці за допомогою команди screen reader list headings (Cvox-L-H) і використовуйте клавішу зі стрілкою вниз для циклічного перегляду списку. Чи є заголовки присутні та структуровані змістовно? Чи є текст, який, здається, є заголовком, але він не розпізнається читачем з екрана (наприклад, великі жирні шрифти замість належних заголовків)? Задокументуйте ці проблеми у своєму звіті, якщо вони є релевантними (Настанова 1.3.1, Рівень А, Настанова 2.4.6, Рівень AA, Настанова 2.4.10, Рівень AAA). Якщо обхідні посилання відсутні, заголовки надаються, щоб дозволити навігацію по вмісту (Керівництво 2.4.1, Рівень A)
Перерахуйте орієнтири на сторінці за допомогою команди списку орієнтирів екранного читання (Cvox-L-;) та використовуйте клавішу зі стрілкою вниз для циклічного переходу по цільових регіонах. Чи всі області сторінки містяться в межах цільового регіону? Чи присутні орієнтири, якщо обхідні посилання або заголовки немає? Документуйте ці проблеми у своєму звіті, якщо це необхідно. Запропонуйте включити їх незалежно від інших способів навігації по сторінці, яка присутня. (Настанова 2.4.1, рівень А)
Перерахуйте посилання на сторінці за допомогою команди list link reader (Cvox-L-L). Чи всі посилання мають сенс у контексті чи ні в контексті? (Настанова 2.4.4, рівень A, настанова 2.4.9, рівень AAA)

Інші тести

Відео: Перевірка контрастності кольорів

Мініатюра вбудованого елемента «Перевірити колірний контраст»

Скануйте сторінку для потенційних проблем із контрастністю кольорів. Хоча сторінка не повинна мати жодного, сірий текст на сірому тлі в області нижнього колонтитула виглядає підозрілим. Визначте колірні коди, використовуючи функцію Inspect Element у вашому браузері, і запустіть ці кольори за допомогою тестера кольорового контрасту, щоб переконатися, що вони забезпечують достатню контрастність. (Настанова 1.4.3, Рівень AA, Настанова 1.4.6, Рівень AAA)