Osnovy veb-dostupnosti — Sozdanie saytov dlya vsekh

Bolee milliarda lyudey vo vsem mire zhivut s toy ili inoy formoy invalidnosti. Eto primerno 15 % mirovogo naseleniya. Sredi nikh — lyudi, kotorye ne vidyat ili imeyut slaboe zrenie, lyudi, kotorye ne slyshat ili imeyut narusheniya slukha, lyudi s dvigatel'nymi narusheniyami, kognitivnymi osobennostyami ili vremennymi sostoyaniyami, takimi kak slomanaya ruka ili migren'.

Kogda my sozdayom sayty, ne uchityvaya eti realii, my ne prosto sozdayom neudobstva. My zakryvayem lyudyam dostup k informatsii, uslugam i vozmozhnostyam, kotorye drugie schitayut samo soboy razumeyushchimisya. Dostupnost' — eto ne funktsiya. Eto otvetstvennost'.

Chto oznachayet veb-dostupnost'

Veb-dostupnost' oznachayet proektirovanie i razrabotku saytov takim obrazom, chtoby lyudi s invalidnost'yu mogli vosprinim', ponyat', navigirovat' i vzaimodeystvovat' s nimi. Eto takzhe oznachayet, chto oni mogut vnosit' svoy vklad v internet.

Eto vykhodit za ramki ekrannykh diktovorov. Dostupnost' okhvatyvayet:

• Zritel'naya: slepota, slaboe zrenie, dal'tonizm
• Slukhovaya: glukhota, tugoukhost'
• Dvigatel'naya: ogranichennaya melkaya motorika, tremor, paralich
• Kognitivnaya: disleksiya, SDVG, problemy s pamyat'yu, trudnosti v obuchenii
• Vremennaya i situatsionnaya: slomanoye zapyast'ye, yarkiy solnechnyy svet na ekrane, shumnoye okruzheniye, medlennyy internet

Klyuchevoy vyvod zaklyuchayetsya v tom, chto dostupnyy dizayn polezen vsem. Subtitry pomogayut v shumnom meste. Vysokiy kontrast pomogayet pri yarkom svete. Klaviaturnaya navigatsiya pomogayet opytnym pol'zovatelyam. Yasnoye pis'mo pomogayet ne nositelyam yazyka. Dostupnost' — eto ne spetsial'nyy rezhim, a khoroshiy dizayn.

Standart WCAG

Rukovodstvo po obespecheniyu dostupnosti veb-kontenta (WCAG) — eto mezhdunarodnyy standart veb-dostupnosti, opublikovannyy W3C. Tekushchaya versiya — WCAG 2.2, organizovannaya vokrug chetyrokh printsipov, izvestnykh pod akronimom POUR:

Vospriyatiye (Perceivable)

Informatsiya dolzhna byt' predstavlena sposobami, kotorye vse pol'zovateli mogut vosprinyat'.

• Tekstovye al'ternativy: kazhdomu izobrazheniyu nuzhen atribut alt, opisyvayushchiy yego soderzhimoe. Dekorativnye izobrazheniya ispol'zuyut alt="".
• Subtitry i transkriptsii: videosoderzhimoe trebuyet subtitrov; audiosoderzhimoe trebuyet transkriptsiy.
• Adaptiruemaya struktura: soderzhimoe dolzhno imet' smysl pri udalenii stiley. Ispol'zuyte semanticheskiy HTML (<h1>, <nav>, <main>, <article>), a ne tol'ko vizual'noye oformleniye.
• Razlichimoe soderzhimoe: dostatochnyy tsvetovoy kontrast, masshtabiruyemyy tekst, nikakaya informatsiya ne peredayotsya tol'ko tsvetom.

Upravlyayemost' (Operable)

Pol'zovateli dolzhny imet' vozmozhnost' upravlyat' interfeysom.

• Dostupnost' s klaviatury: kazhdyy interaktivnyy element dolzhen byt' dostizhim i ispol'zuyem tol'ko s pomoshch'yu klaviatury. Nikakikh lovushek myshi.
• Dostatochno vremeni: yesli soderzhimoe imeyet ogranicheniya po vremeni, pol'zovateli dolzhny imet' vozmozhnost' prodlit' ili otklyuchit' ikh.
• Otsutstviye trigerrov pristupov: izb'egayte soderzhimogo, kotoroye mikayet boleye trekh raz v sekundu.
• Navigatsiya: yasnyye zagolovki stranits, logicheskaya struktura zagolovkov, ssylki dlya propuska navigatsii, vidimyye indikatory fokusa.

Ponyatnost' (Understandable)

Soderzhimoe i interfeys dolzhny byt' ponyatnymi.

• Chitayemyy tekst: ukazhite yazyk stranitsy (atribut lang). Ispol'zuyte yasnyy, prostoy yazyk, kogda eto vozmozhno.
• Predskazuyemoye povedeniye: navigatsiya dolzhna byt' posledovatel'noy. Stranitsy ne dolzhny neozhidanno menyat' kontekst.
• Pomoshch' pri vvode: chetko pomethayte polya form. Predostavlyayte poleznye soobshcheniya ob oshibkakh, ob"yasnyayushchiye, chto poshlo ne tak i kak eto ispravit'.

Nadezhnost' (Robust)

Soderzhimoe dolzhno byt' dostatochno nadezhnym dlya raboty s tekushchimi i budushchimi tekhnologiyami.

• Validnyy HTML: pravil'naya semanticheskaya razmetka, kotoruyu assistivnye tekhnologii mogut nadozhno interpretirovat'.
• Imya, rol', znacheniye: pol'zovatel'skiye komponenty dolzhny soobshchat' svoye naznacheniye API dostupnosti (cherez ARIA pri neobkhodimosti).

Urovni sootvetstviya

WCAG opredelyayet tri urovnya:

Bol'shinstvo zakonodatel'stv v mire trebuyet sootvetstviya Urovnyu AA. Eto tot uroven', k kotoromu vy dolzhny stremit'sya.

Rasprostranyonnye bar'yery i kak ikh ustranit'

Otsutstvuyushchiy al'ternativnyy tekst u izobrazheniy

Problema: pol'zovateli ekrannykh diktovorov slyshat "izobrazheniye" ili voobshche nichego.

Resheniye: dobav'te opisatel'nyy tekst alt k kazhdomu informativnomu izobrazheniyu. Dlya dekorativnykh izobrazheniy ispol'zuyte alt="", chtoby ekrannyye diktovory ikh propuskali.

<!-- Pravil'no -->
<img
  src="chart.png"
  alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>

<!-- Dekorativnoye -->
<img src="divider.svg" alt="" />

Nedostatochnyy tsvetovoy kontrast

Problema: lyudi so slabym zreniyem ili dal'tonizmom ne mogut prochitat' tekst.

Resheniye: obespech'te minimal'nyy koeffitsiyent kontrasta 4,5:1 dlya obychnogo teksta i 3:1 dlya krupnogo teksta (18px+ ili 14px zhirnyy). Ispol'zuyte instrument proverki kontrasta dlya proverki vashikh tsvetovykh kombinatsiy.

Otsutstvuyushchiye metki form

Problema: pol'zovateli ekrannykh diktovorov ne znayut, dlya chego prednaznacheno pole formy.

Resheniye: kazhdomu polyu vvoda nuzhen vidimyy element <label>, svyazannyy cherez atribut for.

<!-- Pravil'no -->
<label for="email">Adres elektronnoy pochty</label>
<input type="email" id="email" name="email" />

<!-- Nepravil'no: zapol'nitel' — eto ne metka -->
<input type="email" placeholder="Adres elektronnoy pochty" />

Otsutstviye klaviaturnoy navigatsii

Problema: pol'zovateli, kotorye ne mogut ispol'zovat' mysh', okazyvayutsya zablokirovany.

Resheniye: ispol'zuyte nativnye HTML-elementy (<button>, <a>, <select>), kotorye po umolchaniyu dostupny s klaviatury. Yesli vy sozdayote pol'zovatel'skiye komponenty, ubedites', chto oni fokusiruyemy i reagiruyut na sobytiya klaviatury. Nikogda ne udalyayte kontur fokusa bez predostavleniya al'ternativy.

Otsutstviye struktury stranitsy

Problema: pol'zovateli ekrannykh diktovorov ne mogut effektivno navigirovat'.

Resheniye: ispol'zuyte semanticheskiy HTML. Odin <h1> na stranitsu, logicheskaya iyerarkhiya zagolovkov (bez propuska urovney), landmarki (<nav>, <main>, <footer>).

Avtomaticheskoye vosproizvedeniye media

Problema: neozhidannyy zvuk meshayet pol'zovatelyam ekrannykh diktovorov. Avtomaticheskoye vosproizvedeniye video mozhet vyzvat' pristupy ili distress.

Resheniye: nikogda ne vosproizvodite zvuk avtomaticheski. Yesli video vosproizvoditsya avtomaticheski, ubedites', chto po umolchaniyu zvuk otklyuchen i predostavleny elementy upravleniya pauzoy.

Odnogo tsveta nedostatochno

Nikogda ne polagaytes' tol'ko na tsvet dlya peredachi informatsii. Uchityvate:

• Pole formy s krasnoy ramkoy dlya oshibok takzhe trebuyet ikonki oshibki ili tekstovogo soobshcheniya
• Grafik s tsvetnymi liniyami takzhe trebuyet uzory, metki ili legendu
• Ssylka v tekushshem tekste trebuyet podcherkiraniye ili drugoy vizual'nyy signal, a ne tol'ko izmenenie tsveta

Primerno 8 % muzhchin i 0,5 % zhenshchin imeyut tu ili inuyu formu narusheniya tsvetovogo zreniya. Proektirovaniye s uchotom etogo — ne redkiy sluchay, a bazovaya inklyuzivnost'.

Testirovaniye dostupnosti

Avtomaticheskoye testirovaniye

Avtomaticheskiye instrumenty obnaruzhivayut primerno 30-40 % problem dostupnosti. Oni khoroshiy pervyy shag, no ne polnoye resheniye.

• axe DevTools (rasshireniye brauzera) — skanruyet stranitsu i soobshchayet o narusheniyakh WCAG
• Lighthouse (vstroen v Chrome DevTools) — vklyuchayet audit dostupnosti
• WAVE (veb-instrument) — vizual'noye nalozheniye, pokazyvayushcheye problemy

Ruchnoye testirovaniye

Mnogiye problemy dostupnosti trebuyut chelovecheskoy otsenki:

• Testy klaviatury: otkluchite mysh' i pereydite po vsemu saytu s pomoshch'yu Tab, Enter, Escape i klavish so strelkami. Mozhete li vy dobrat'sya do vsego? Logichen li poryadok fokusa?
• Testy ekrannym diktovorom: poprobte VoiceOver (Mac), NVDA (Windows, besplatno) ili TalkBack (Android). Imeyet li soderzhimoe smysl pri chtenii vslukh?
• Testy masshtabirovaniya: uvel'ch'te masshtab brauzera do 200 %. Rabotayet li maket? Est' li obrezennoye ili nakladyvayushcheyesya soderzhimoye?
• Umen'sheniye dvizheniya: vklyuchite "umen'shit' dvizheniye" v nastroykakh operatsionnoy sistemy. Uvazazhayut li animatsii etu nastoyku?

Testirovaniye s pol'zovatelyami

Naibolee tsennyye otzyvy iskhodyat ot lyudey, kotorye deystvitel'no ispol'zuyut assistivnye tekhnologii v svoyey povsednevnoy zhizni. Yesli vash byudzhet pozvolyayet, vklyuchite lyudey s invalidnost'yu v svoy protsess testirovaniya.

Dostupnost' — eto spektr, a ne galochka

Dostupnost' — eto ne razovyy proyekt s finishnoy chertoy. Eto nepreryvnaya praktika. Sayty menyayutsya, soderzhimoye dobavlyayetsya, i novye bar'yery mogut poyavit'sya pri kazhdom obnovlenii.

Tsel' — ne sovershenstvo. Tsel' — nepreryvnoye uluchsheniye i iskrennyaya zabota o lyudyakh, kotorye ispol'zuyut to, chto vy sozdayote. Nachnyite s naibolee effektivnykh izmeneniy — tsvetovoy kontrast, al'ternativnyy tekst, klaviaturnaya navigatsiya, metki form — i stroyite na etom.

Kazhdyy bar'yer, kotoryy vy ustrarayete — eto dver', kotoruyu vy otkryvayete.

Bystraya kontrol'naya tablica

• Vse izobrazheniya imeyut osmyslennyy tekst alt (ili alt="" yesli dekorativnye)
• Tsvetovoy kontrast sootvetstvuyet WCAG AA (4,5:1 dlya teksta, 3:1 dlya krupnogo teksta)
• Vse polya form imeyut vidimye metki
• Sayt polnost'yu dostupen s klaviatury
• Zagolovki sleduyut logicheskoy iyerarkhii
• Indikatory fokusa vidny
• Yazyk stranitsy ukazan (atribut lang na <html>)
• Nikakaya informatsiya ne peredayotsya tol'ko tsvetom
• Video imeyut subtitry
• Animatsii uvazhayut prefers-reduced-motion