Виживає не найсильніший і не найрозумніший, а той, хто краще за всіх відгукується на зміни, що відбуваються Леон Меггінсон, перефразовуючи Чарльза Дарвіна
Універсальна доступність це властивість інформаційної системи враховувати різний спектр аудиторії і пристроїв при взаємодії. Зокрема це може бути оптимізація для мобільної версії сайту, для друку або Siri , Але не варто обмежується тільки цим.
Доступність як правило відрізняють від простого зручності (useability) у використанні, саме в тому що система починає враховувати людей з порушеннями:
З огляду на що таких людей 7-10% і саме їм важливіше доступність електронних послуг (державних, онлайн-магазинів), то продовжуючи минулої тему про цілісність суспільства , Особливо важливо що багато держав зобов'язали свої ІнфоРесурс бути доступними (accessible). Поважають себе, аналогічно займаються цими питаннями. Парадоксально, але для доступного сайту досить зробити все якісно. Це безпосередньо позначиться на зручності дизайну, SEO та швидкості. Основи також лежать в машинної доступності даних, семантичної верстки і правильному UI.
З стандартів і рекомендацій WAI, WCAG , ARIA по суті можна виділити пункти:
Є проблеми з сучасними практиками ..
Аналогічно всяким онлайн-валідатора HTML, є і автоматичні тести на хороші практики. Втім завжди треба проходити вручну.
Progressive Enchantment, Graceful Degradation, Responsive Design - всі ці три словосполучення (і останнім особливо), пропагують універсальність структури документа. Для цього використовуються різні трюки frontend- і backend-розробки. Зокрема, оскільки у нас більше немає фіксованого розміру екрана (скажімо 1024 * 768) і він сильно розмитий, то за замовчуванням всі стилі повинні бути для мобільних пристроїв. І лише в разі великих екранів, елементи групуються в більш складні горизонтальні структури. Почнемо зі шрифтів ..
Пікселі застаріли, тепер в моді em. Конвертація віри відбувається дуже просто .. беремо стандартний розмір шрифту .. скажімо 16px і ділимо на нього розмір вашого елемента .. скажімо 28px у заголовка. Отримуємо 1.75em - тепер він буде масштабується. Те ж саме з шириною блоків - просто вказуємо замість пікселів відсотки
aside {
font-size: 1.75em; / * 28/16 * /
width: 31.25%; / * 300/960 * /
}
CSS дозволяє тепер групувати всі правила в залежності від властивостей екрану і комбінувати їх логічно за допомогою ключових слів and, or, not, only
@media screen and (min-width: 500px)
@media print and (max-device-height: 600px;)
@media handheld and (max-aspect-ratio: 5) and (orientation: landscape)
Крім того є поняття viewport, що задає початкове положення і здатності зуму.
<Meta name = "viewport" content = "width = device-width; initial-scale = 1; maximum-scale = 1; user-scalable = no">
Зрозуміло що цього не достатньо. За допомогою таких CSS - правил можна додати поведінку, але не можна
По-перше, зрозуміло що картинки для мобільників до якоїсь межі, повинні бути на всю ширину екрану. Або повністю, або частково з центруванням і збільшенням:
max-width: 100%
background-position: 50%;
Тепер проблема в тому що ми картинки для мобільників надто великі. CSS не може обмежити завантаження важких фонів. Тому можна піти двома шляхами - встановити в куки розмір екрану і на сервері пропускати всі картинки через зменшений розмір.
document.cookie = 'resolution =' + Math.max (screen.width, screen.height) + '; path = / ';
Або використовувати дві версії якості картинок і використовувати data- атрибут для зберігаючи шлях до більш якісної версії. Зрозуміло що javascript тоді повинен все картинки замінити починаючи з якоюсь ступені дозволу екрану (або швидкості завантаження?).
Більшість користувачів при скануванні очима сторінки цікавляться двома об'єктами - заголовками (де я?) І посиланнями (куди піти далі?).
<Form role = "search">
<Input name = "name" aria-required = "true" />
<Button aria-pressed = "true" />
</ Form>
Уявіть що ви їдете на конференцію. Якщо ви заходите на сайт з мобільника (і ви поспішаєте), то вам буде важливо відразу ж зверху побачити адресу, контактні телефони, календар з часом виступів і їх авторами, інформацію про паркування. А якщо ви вже приїхали, розкрили лептоп і почали вивчати детальніше, то вам цікаво стане і фото / відео учасників, архівні документи, форми по зворотного зв'язку. Все це стосується будь-якого іншого сайту. При цьому повинна бути можливість вийти за межі цієї оптимізації.
По-моєму тут стоїть велика складність. Так само як і з картинками, по-правді, недостатньо просто ховати великі блоки для мобільників. Ви все-одно вантажите js-бібліотеки на сотні кілобайт і монстоідальний DOM. Тому компанії який стикаються з цією проблемою не можуть зарефакторіть всю свою систему з нуля так, що-б DOM довантажувати через ajax в залежності від клієнта, що-б javascript теж довантажувати в міру необхідності (див. require.js ), Що-б відео і флеш довантажувати тільки коли це можливо (див. modernizr ). Природно вони просто роблять урізану мобільну версію, яка по-уродски виглядає на iPad і інших планшетника.
Див. також
Або швидкості завантаження?Copyleft © 2017 . www.info-center.od.ua Информационный центр - Всегда в центре событий