Как да започнете с достъпността на уебсайтове

Когато влизах в редиците на разработчиците от предния край, никой не ми говори за достъпност. Не знаех, че можеш да нарушиш закона, като имаш недостъпен уебсайт, докато един ден клиент от университета не дойде в екипа ми за помощ при извършването на одит на достъпността. Човек бях над главата си.

Започнах да копая и да правя проучвания, но намерих голяма част от документацията за плашеща. Част от това ми беше над главата. Имаше толкова много за смилане, но в крайна сметка си проправих път. (Е, всъщност все още си проправям път).

Оттогава научих, че достъпността не трябва да бъде плашеща и дори може да бъде забавна.

Това, което би ми помогнало в началото, бяха няколко практически принципа, които да ми помогнат да разбера основите.

Така че нека да споделя с вас: принципите за достъпност на уебсайта на Бен в домашни условия.

Те не са правила.

Те са ментални промени, които трябваше да направя, когато започнах да разработвам достъпни уебсайтове.

Нека влезем в него

Принцип 1: Уеб дизайнът е повече от графичен дизайн

Когато започнах първата си работа в мрежата, ми подадоха снимка на уебсайт и поисках да я превърна в уебсайт.

След като направих това, дизайнерите след това щателно сравниха моя уебсайт с тяхната снимка на уебсайт и ми казаха всички грешки, които направих.

Линията височина трябва да бъде 18px, а не 16.
Това сиво е грешното светло сиво. Тя трябва да е светло-светло сива.
Размазването на сенника в полето е изключено от пиксел.

Такива неща. Те бяха много впечатляващи и научих тон.

Но никой от нас всъщност не смята, че мрежата не е контролиран носител. Бяхме толкова загрижени за визуалните елементи на работата, че не разгледахме как сайтът може да се представи на телефон с Android $ 99 над 3G, или за някой, който е сляп или някой, който изобщо не може да види.

И фактът, че в интернет могат да бъдат достъпни от различни хора в различни ситуации, е това, което прави уеб дизайна много повече от графичния дизайн.

Така че вместо да се съсредоточа само върху визуалните елементи, разделих работата си на три основни задачи.

Три задачи на уеб дизайн

Задача 1: Напишете добро (четене: семантично) маркиране

Първата задача е да напишете добра маркировка.

Това означава добре да организирате съдържанието на страницата. Използване на HTML начин, по който е било предназначено да се използва. HTML е достъпен по подразбиране. Така че, ако постигнем това още в началото, работните ни места са много по-лесни. Ще отделим още малко време за това малко по-късно.

Задача 2: Подобрете маркирането с CSS

Втората задача е да използваме CSS за подобряване на отличната маркировка, която сме написали.

CSS трябва да се използва, за да се подчертае значението на вашето съдържание. Трябва да го направи по-смислен, по-въздействащ. Но трябва да използвате правилния HTML за начало или работата ви ще бъде много по-трудна.

Задача 3: Интерактивност на слоя на вашия HTML и CSS с JavaScript

Третата задача е да се слое интерактивност над структурата и стила с JavaScript.

Преди и след

Преди да възприема този подход, просто посегнах към елемента, който беше най-лесен за стил и го използвах.

Имам нужда от голям текст, така че ще използвам h1.
Имам сложен интерфейс за акордеон, така че ще използвам куп divs.

Такива неща. Но това се фокусира само върху визуалните аспекти. За да изградим достъпни уебсайтове, трябва да мислим повече от това колко точно сайтът съответства на картината. Това е повече от визуален дизайн или графичен дизайн. Ето защо ние го наричаме уеб дизайн.

Това ни води до принцип 2.

Принцип 2: Бъдете ASAP (възможно най-семантично)

Ето как препоръчвам да направите това.

Всеки път, когато започнете да пишете

...

Спри се.

Погледни в огледалото.

И се запитайте.

Мога ли да използвам по-семантичен елемент?

Как да разберете дали има по-семантичен елемент, който да използвате?

Мрежата за развитие на Mozilla има страница с всички HTML елементи, организирани по тяхното предназначение. (Тази справка е страхотна - използвайте я!)

Нека разгледаме някои от семантичните алтернативи, които имаме за

s.

Алтернативи на

Ако имате самостоятелна секция на страница, помислете за използване на маркера

.

Ако имате блог, статия за новини, публикация във форума или какъвто и да е вид самостоятелно съдържание, можете да използвате

.

Имате няколко компонента от един и същи вид един до друг? Помислете да използвате подреден или непореден списък (

    или
      ).

      Имате горен раздел в публикацията в блога си със заглавие и метаданни? Използвайте

      . Имате долен раздел с тагове и такива? Използвайте
      .

      Имате странична лента? Използвайте