Вікіпедія:Стиль/Доступність

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

Структура статті

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

Заголовки

Заголовки повинні розміщуватися послідовно, починаючи з рівня 2 (==). Рівень 1 використовується автоматично для заголовків статей, і ніколи не використовується в основному тлі статті. Не пропускайте окремі рівні заголовків.

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

Приклади правильного та неправильного використання заголовків

Правильно	Неправильно: хаотично	Неправильно: пропуск
[Початок статті] ==Розділ== [рівень 2] ===Підрозділ=== [3] ==Розділ== [2] ===Розділ=== [3] ====Підрозділ==== [4] ==Розділ== [2]	[Початок статті] ====Розділ?==== [4] ===Розділ?=== [3] ==Розділ?== [2] ==Розділ?== [2] ====Розділ?==== [4] ===Розділ?=== [3]	[Початок статті] [Пропущено розділ рівня 2] ===Розділ?=== [3] ==Розділ== [2] [Пропущено розділ рівня 3] ====Підрозділ?==== [4] ==Розділ== [2]

Плаваючі елементи

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

Залежно від різних факторів, розташування кількох зображень один під одним поруч із коротким текстом може призвести до того, що зображення будуть відображатися як частина розділів нижче. Це не проблема доступності, оскільки програми читання з екрана читають альтернативний текст (alt=) кожного зображення за розміщенням його в коді сторінки.

Колір

Група скриншотів, що показують наслідки дальтонізму червоного/зеленого кольору на читабельність тексту

Кольори найчастіше можна знайти у статтях Вікіпедії у шаблонах та таблицях. щодо технічної допомоги з використання кольорів див. Довідка:Кольори.

Статті (та інші сторінки), що використовують колір, повинні дотримуватися доступності відповідно до наступного:

• Впевніться, що колір не є єдиним методом донесення важливої інформації. Особливо, не використовуйте кольоровий текст чи фон, крім випадку, коли цей стан також передається іншим методом, таким як символом доступності, що відповідає умовному позначенню, чи текстом виноски. В іншому випадку, сліпі користувачі або читачі, що отримують доступ до Вікіпедії через роздруківку чи пристрій без кольорового дисплея, не одержать цю інформацію.
• Наші читачі повинні чітко визначати, що посилання є посиланням.
• Деякі читачі Вікіпедії мають часткову або повну колірну сліпоту або слабкозорість. Впевніться, що контраст тексту із фоном досягає, хоча б рівню AA настанов з доступності вебконтенту (WCAG) 2.0, а за можливості рівня AAA (див. «Understanding SC 1.4.3: Contrast (Minimum)» настанови WCAG). Щоб використовувати іменовані кольори CSS для тексту на білому фоні, зверніться до Вікіпедія:Стиль/Доступність/Кольори CSS для тексту на білому фоні щодо рекомендованих кольорів. Для інших використань, ось перелік інструментів, що можна використати для перевірки чи контраст є достатнім:
  • Ви можете використати кілька онлайн інструментів для перевірки контрасту кольору, включаючи: онлайн перевірник контрасту від WebAIM, сайт WhoCanUse або перевірка контрасту кольору від Snook.
    • Декілька інших інструментів існують в мережі, але перевіряйте, чи вони є оновленим перед тим, як їх використовувати. Деякі інструменти засновані на алгоритмах WCAG 1.0, коли еталоном тепер є алгоритми WCAG 2.0. Якщо інструмент конкретно не зазначає, що він заснований на WCAG 2.0, то вважайте, що він є застарілими.
  • Команда дизайну Фонду Вікімедіа надала колірну палітру з кольорами, що позначенні відносно до відповідності рівня AA. Їх використано у всіх елементах користувацького інтерфейсу в продуктах та основних темах Вікімедіа, комп'ютерних та мобільних версіях. Однак, вона не розглядає колір тексту посилань.
  • Таблиця у en:Wikipedia:Manual of Style/Accessibility/Colors показує результати для 14 відтінків темного і світлого фону для чорного тексту, білого тексту, тексту кольору посилань і тексту відвіданих посилань, що відповідають AAA.
  • Google Chrome має налагоджувач кольорового контрасту з візуальним керівництвом та програмою вибору кольору.
  • Завантажувальне програмне забезпечення Color Contrast Analyser дозволяє вам обирати кольори на сторінці та детально перевіряти їхній контраст. Однак, впевніться, що використовуєте лише оновлений алгоритм «luminosity» (освітленості), а не «color brightness/difference» (яскравість кольору/різниця), що є застарілим.
• Додаткові інструменти можуть застосовуватися, щоб допомогти створити графічні діаграми та кольорові схеми для карт тощо. Ці інструменти є точним, щоб перевіряти контраст на доступність, але вони можуть бути корисним для специфічних завдань.
  • Paletton (раніше Color Scheme Designer) допомагає вибрати хороший набір кольорів для графічної діаграми.
  • Color Brewer 2.0 надає безпечну кольорову схему для карт та деталізованих пояснень.
  • Light qualitative color scheme надає набір дев'яти кольорів, що працюють із користувачами з дальтонізмом та з позначками чорного тексту (серед інших палітр).
  • Ось деякі інструменти для симуляції зору із колірною сліпотою: Toptal ColorFilter (аналіз вебсторінок) та Coblis Color-blindness Simulator (аналіз локальних файлів). Також є розширення для браузера для аналізу вебсторінок: NoCoffee (Firefox)
  • Дуже простий інструмент з відритим кодом, що може допомогти вибрати кольори з високим контрастом — Color Oracle, «безкоштовний симулятор колірної сліпоти для Windows, Mac та Linux». Він дозволяє переглядати будь-що, що на вашому екрані, відповідно до того, як цей вміст мала би бачити особа з однією з трьох видів колірної сліпоти або у відтінках сірого.
• Якщо стаття використовує занадто багато кольорів та ви не знаєте як самостійно виправити це, то ви можете попросити допомоги в інших редакторів. Розмістіть {{Перефарбована}} у верху статті.

Коефіцієнти контрасту безпечних кольорів у вебсторінках проти чорного (верхній ряд) та білого (нижній ряд) або навпаки, з контурами в 3 (червоний), 4.5 (зелений) та 7 (синій)