1.6 Забезпечення доступності Web–сторінки
При розробці повинні бути доступні такі властивості Web-сайту – тобто, що повинен містити доступний Web-сайт. Буде детально представлено кожну властивість.
Однією з основних вимог стандартів Web є використання семантичної структури HTML. Семантична структура є також вкрай важливою для доступності. Це пов’язано з тим, що вона забезпечує інфраструктуру для інформації на сторінці. Коли люди не можуть бачити візуальний стиль сторінки, семантична структура допомагає вказати їм низку речей. Вона може вказати на положення в ієрархії документа, і способи, якими вони можуть взаємодіяти з різними елементами на сторінці, а також забезпечити виділення текстового контенту в правильних місцях.
Гарним прикладом того, що семантична структура документа важлива для доступності, є навігація. Добре структурованим навігаційним меню є список елементів. Можна оформити його як список HTML: При розробці Web–сторінки фіксованого розміру, ймовірно, доведеться вибирати для неї розмір екрану. Здоровий глузд підказує, що сторінка повинна бути доступна (і правильно відображатися) для максимально можливого числа користувачів. Ідея проста: необхідно визначити найбільш часто використовується дозвіл дисплея і розробити сторінку таким чином, щоб сторінка гарантовано заповнювала весь робочий простір.
<ul> Тег створення списку
<li>Menu Item 1</li> 1 пункт списку
<li>Menu Item 2</li> 2 пункт списку
<li>Menu Item 3</li> 3 пункт списку
</ul>
Структуруючи навігаційні меню як списки, можна дозволити зчитувачу екрану, який не може бачити список, легко зрозуміти, що це список. Зчитувач екрану повідомляє їм, що це список. Якщо розмітка списку не використовується, то зчитувач екрану не зможе дізнатися, що це список, і повідомити про це користувачеві.
У випадку чисто декоративних зображень, тобто зображень, що використовуються для відстеження реклами, або будь-якого іншого зображення, яке навряд чи могли б зацікавити користувача або служити для взаємодії, необхідно задати атрибут alt порожнім. Це означає не перепустку атрибута, а завдання у вигляді alt="". Це пов’язано з тим, що тактичні зчитувачі екрану зазвичай допомагають своїм користувачам впоратися з погано доступними сторінками. Коли зображення не має атрибута alt, особливо коли воно є частиною посилання, зчитувач екрану читає користувачеві URL зображення. Це робиться для того, щоб можна було по URL здогадатися, що з себе представляє зображення, наприклад, якщо зображення називається add_to_cart.gif (додати_в_кошик.gif). Тому потрібно задавати alt="" для зображень, які, як ви знаєте, не зацікавлять користувача, щоб зчитувач екрану не читав URL такого зображення, що може бути досить складно для користувача зчитувача екрану.
Не всі форми контенту є такими простими, як зображення. Більшість складних інформаційних середовищ, такі як Flash (файли Flash самі можуть бути цілими Web-сайтами) або фільми, вимагають більш складних описів. Найостанніші версії Flash дозволяють надати альтернативний текст для об’єктів у фільмах Flash, так само, як в HTML.
Більша частина сучасної Web активно використовує крім HTML додаткові технології. Навіть щось базове, таке як CSS, можна використовувати таким чином, що зробить сторінку або взаємодію значно менш доступними. Ключовим моментом доступності у взаємодії є початок з найпростіших взаємодій і використання їх як будівельних блоків більше складних взаємодій.
Зазначимо, що завдання цього прикладу – змусити вас подумати про роль, яку відіграють різні об’єкти на Web-сторінці. Щоб забезпечити їх доступність, вони повинні бути семантично змістовні як з позиції використаних елементів HTML, так і використаної візуальної метафори. Якщо ви вважаєте це надто заплутаним, то перечитайте приклад кілька разів, і розгляньте кілька меню та інші компоненти Web-сторінки, думаючи при цьому не тільки про те, що використовується правильний код HTML, але також про те, що вдале подання компонента має сенс із точки зору його функції. Ви навряд чи будете чекати, що відвідувач Web-сторінки для пошуку буде використовувати текстове поле помічене “введіть свою адресу e-mail, щоб підписатися на цю розсилку”, і також не будете чекати, що зрячий відвідувач зможе знайти що цікавить його контент, якщо всі заголовки будуть оформлені також як звичайний текст (аналогічно, ви не будете чекати, що сліпий користувач знайде цікавий для його контент, якщо всі “заголовки” будуть, насправді, просто параграфами, які зроблені крупніше за допомогою CSS або елементів font).
Гарним прикладом цього є широко використовувана візуальна метафора вкладок. Метафора вкладки створена на основі архівних папок, індексованих по темі. Це було перенесено на комп’ютери, щоб дозволити одній області на екрані виводити інформацію з різних тем, представленим вкладками, з’єднаними з цією областю можна бачити гарний приклад використання вкладок на сайті dev.opera.com подивіться на них вгорі сторінки. До цих пір все це досить просто. Проблема лежить в технологіях, що використовуються для створення вкладок вони часто реалізуються за допомогою JavaScript.
Як тільки вкладки починають використовуватися як частина взаємодії більш складного, ніж просто представлення користувачам можливості вибирати інформацію, вихідна метафора буде порушена, але часто використовується все ще такий же код для представлення вкладок.
Це є основе розуміння, як реалізувати доступну взаємодію. Однією з великих переваг HTML є те, що основна робота з визначення, як зробити взаємодію в HTML доступною, вже була зроблена. Поки що для руйнування метафори не використовуються інші технології поверх HTML, можна без великих зусиль змусити працювати більшість речей для більшості людей.