5.5: Експертиза та ремонт коду

Last updated
Save as PDF

Page ID: 103514

\( \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}}\)

Технічні: Контент на цій сторінці призначений для технічної аудиторії.

Інструментарій: Якщо вашим улюбленим браузером є Firefox, ви можете встановити Firefox для розробників з розширеними інструментами розробника. Ви також можете скористатися стандартним інструментом «Інспектувати елемент», який можна знайти в контекстному меню більшості браузерів, клацнувши правою кнопкою миші на елементі і вибравши його з меню.

Після того, як ви виявили потенційний бар'єр, ви можете визначити, де проблема виникає в розмітці HTML. На скріншоті нижче вкладка зворотного зв'язку (1) у правій частині екрана розглядається, клацнувши правою кнопкою миші та вибравши «Оглянути елемент з Firebug»» (2). Примітка: Firebug тепер застарілий, але ви можете зробити те ж саме, вибравши «Оглянути елемент» в меню. Ви помітите, що код, пов'язаний з функцією, виділений у вікні коду (3) внизу ліворуч. Натисніть кнопку Редагувати (4), щоб відредагувати HTML-код, щоб перевірити можливі рішення.

знімок екрана, що показує код експертизи, описаний вище

Малюнок: Кроки для вивчення та зміни коду для тестування потенційних рішень доступності

У наведеному вище випадку тест навігації клавішею Tab показав, що вкладка Зворотній зв'язок не отримає фокус, тому не можна керувати за допомогою клавіатури. Простим виправленням цього є додавання tabindex="0" до основного елемента, що містить вкладку. Після додавання, без перезавантаження сторінки, знову проводиться тест навігації клавішею Tab, щоб побачити, чи тепер вкладка фокусується на клавіатурі. Це так, хоча все ще неможливо керувати вкладкою, що вимагає зміни пов'язаного JavaScript.

вікно редагування коду firebug, описане в підписі нижче

Малюнок: Результат додавання tabindex="0"

Після натискання кнопки Редагувати обраний код зверху відкривається для редагування. У цьому випадку tabindex="0" було додано, щоб перевірити, чи додає цей фокус клавіатури на вкладку Зворотній зв'язок (що вона робить).

Щоб переглянути інші інструменти для вивчення коду, перегляньте наступне відео про перевірки доступності Chrome.

Відео: Новий спосіб тестування доступності за допомогою Chrome DevTools

Мініатюра для вбудованого елемента «Новий спосіб перевірки доступності за допомогою Chrome DevTools - A11yCasts #23»

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