Skip to main content
LibreTexts - Ukrayinska

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

  1. Last updated
  2. Save as PDF
  • Page ID
    103540

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

    Технічні: Контент на цій сторінці орієнтований насамперед на веб-розробників і носить технічний характер.

    Експертиза коду

    Поки ви тестуєте за допомогою автоматизованих інструментів або інших ручних стратегій, часто корисно, а іноді необхідно подивитися на розмітку HTML, щоб підтвердити або дослідити далі потенційні бар'єри, інструменти або стратегії з'явилися. Усі браузери мають функцію перегляду вихідного коду (або щось еквівалентне) для перегляду HTML, що лежить в основі веб-сторінки. Хоча використання View Source є одним з потенційних способів перегляду HTML-розмітки, пошук конкретних бітів HTML, пов'язаних з потенційними бар'єрами, які були ідентифіковані, може зайняти багато часу.

    Краща стратегія вивчення коду полягає у використанні функції Inspect Element, яку надають більшість браузерів сьогодні. Зазвичай ви можете клацнути правою кнопкою миші на елементі, який ви хочете переглянути (наприклад, зображення), а потім вибрати «Перевірити елемент», щоб переглянути HTML та CSS, які використовуються для відображення зображення. Подивіться на розмітку елемента зображення, щоб побачити, чи присутній атрибут alt і яке його значення, а також які інші атрибути він може містити (наприклад, атрибути ARIA, які можуть бути присутніми для вирішення потенційного бар'єру, який ідентифікував перевірка).

    Інструменти розробника браузера (наприклад, DevTools Chrome або інструменти в Firefox Developer Edition) надають цілий спектр інформації про розмітку сторінки на додаток до того, щоб мати можливість вивчити конкретні елементи в HTML.

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

    Розглянемо експертизу коду більш детально в розділі Експертиза і ремонт коду.

    Ремонт коду

    Часто доводиться коригувати код вручну під час аудиту та повторне тестування, щоб придумати рішення для виправлення проблем доступності. Використовуючи інструменти розробника браузера, можна динамічно налаштовувати розмітку HTML та CSS для тестування можливих рішень, можливо, запуску потенційних виправлень через екранну читалку, перш ніж робити рекомендації. Firefox Quantum (Developer Edition), Chrome, Internet Explorer, Edge та Safari мають інструменти, які дозволяють динамічно коригувати код.

    Під час написання звітів про доступність веб-сторінок може бути корисним надати невеликі фрагменти коду, щоб продемонструвати розробникам, що потрібно зробити, щоб виправити проблему, або принаймні описати зміни коду письмовими словами. Наявність хорошого знання HTML, CSS та JavaScript є необхідною умовою для надання рішень у звітах про доступність.

    Детальніше про ремонт коду ми поговоримо в розділі Експертиза і ремонт коду. Відео нижче містить вступ до перевірки та ремонту коду за допомогою перегляду оглянути браузер.

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

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

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