Контролен списък за уеб достъпност

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


Contents

Защо трябва да ви пука Достъпност?

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

  • В много територии, като САЩ, ЕС, Великобритания, Израел и Япония, е законово изискване да не се дискриминира хората поради увреждане. В САЩ миналата година, Заведени са 2235 нови дела за уебсайт ADA във федералния съд. Това е един на час.
  • Достъпните сайтове обикновено са по-добре кодирани, по-здрави и се класират добре в търсачките.
  • Обикновено са достъпни сайтове по-използваем за посетители без увреждания, което води до по-голямо удовлетворение и преобразуване.
  • Недостъпните сайтове са лоши за бизнеса. През 2019 г. а Анкета в Обединеното кралство установяват, че повече от 4 милиона души са изоставили уебсайт на дребно поради пречките за достъпност, които са намерили. Този изгубен бизнес, „Click-Away Pound“, беше 17,1 милиарда британски лири. Това е милиард. Само във Великобритания.
  • Лошо е доброволното отклоняване на потенциалните клиенти.

Общите стандарти и проблемите

За щастие, W3C (органът, който произвежда много от стандартите, на които разчита мрежата) има стандарт за това как да направи уебсайтове достъпен. Нарича се Насоки за достъпност на уеб съдържанието (WCAG). Има три нива на съответствие (A, AA, AAA), като „A“ е най-ниското ниво на достъпност. Препоръчвам ви да се стремите към ниво АА.

За съжаление WCAG е дълъг, сух и много технически прочетен, така че нека разгледаме какво можете да направите сравнително лесно и да получите най-големия удар за вашия долар. Това не е списък за всичко, което трябва да знаете; това е контролен списък на най-често срещаните грешки и грешките, за които хората с увреждания казват, са основните им блокиращи средства, с практически предложения за разрешаване на проблемите. Всички външни връзки се отварят в нов раздел.

В проучването Click-Away Pound респондентите с увреждания бяха попитани кои са основните блокове за завършването на покупките им. Ето основните бариери (бяха разрешени множество отговори):

  1. Препълнени страници с твърде много съдържание – 66%
  2. reCAPTCHA тестове – 59%
  3. Лоша четливост (контраст, оформление на текста) 56%
  4. Разсейването на движещи се изображения и графики – 53%
  5. Лоша информация за връзката – 59% (77% за потребителите на екранен четец)
  6. Попълване на формуляр 56%

Как да подобрим достъпността на уебсайтове

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

1) Прекалено много съдържание

Накратко: разбийте текст на секции със заглавия и списъци с букети. Използвайте прост език.

Известно е, че с увеличаването на броя на избора се увеличава усилия, необходими за събиране на информация и взимайте добри решения. Същото е и с твърде много съдържание – скоро става затрудняващо. Разделянето на съдържанието до същественото е отнемащо време занаят; както Марк Твен (уж) пише: „Нямах време да напиша кратко писмо, затова вместо него написах дълго.“

Скорошната книга Писането е проектиране подсказва

Хората искат да могат да прескачат дълги блокове текст, независимо от зрението или звука, така че е изключително важно да структурирате писането си с дълги форми с заглавки, кратки абзаци и други най-добри практики за дизайн на съдържание.

Така:

  • Имайте само един

    на страница.

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

    , уверете се, че е предшествано от

    .

  • Използвайте маркирани списъци (като този!), Маркирани правилно в HTML като
      ,
    • . Читателите на екрана ще обявят „Списък на 10 елемента“ (и ще позволят на потребителя да прескочи върху тях).

    Използвайте обикновен английски

    Банка Монцо Ръководство „Нашият тон на гласа“ обяснява важността на обикновения език:

    През 2010 г. американският адвокат Шон Фламър проведе експеримент. Той помоли 800 съдийски съдии да се борят или с традиционен „легален“ аргумент, или с един от това, което той нарича „обикновен английски“.

    Съдиите преобладаващо предпочитаха обикновената английска версия (66% до 34%) и това предпочитание се запазва независимо от тяхната възраст или произход.

    Нотки на пламъка (PDF) от обикновената английска версия:

    Тя е по-къса с почти страница, така че очевидно елиминира ненужните изречения и думи. Изреченията му са средно 17,8 думи, за разлика от 25,2 думи.

    Той заключава:

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

    2) ReCAPTCHA

    Накратко: не карайте потребителите си да прескачат потенциално невъзможни обръчи, за да спестите време за разработчици.

    Респондентите често говореха за старо Версия ReCAPTCHA:

    версии на reCAPTCHA с неясен текст, който трябва да въведете отново

    Боря се с изображенията и се налага да въвеждам цифрите или буквите. По такъв начин, когато трябва да щракнете върху кои изображения има магазин или каквото и да е, винаги ми липсват някои или се обърквам и използвам енергия, която нямам …

    Стилът на колебливите букви на reCAPTCHA вече е оттеглен. Много по-често е да видите по-ново въплъщение, наречено „No CAPTCHA reCAPTCHA“ (известно още като „Не съм робот), което изисква от потребителя да постави отметка в квадратче, потвърждаващо, че не е робот и използва тайно вуду, за да оцени потребителя. Ако те преминат, не е необходимо по-нататъшно взаимодействие. Ако обаче не успеят, ще бъде показано допълнително предизвикателство:

    Частичен скрийншот на captcha, изискващ потребителя да щракне върху всички квадратчета, на които се виждат портокали

    Имайте предвид, че типът CAPTCHA, който изисква от потребителя да щракне върху всички квадратчета с (да речем) уличен знак, не е непременно международен. Както пише Теренс Идън, CAPTCHA не доказват, че сте човек – те доказват, че сте американец.

    Най-достъпната форма на reCAPTCHA е reCAPTCHA v3 което не изисква никакво взаимодействие с потребителя, но се нуждаете от вас да свършите повече работа, за да се справите с посещения, които не успяват на теста:

    Това е чист JavaScript API, който връща резултат, който ви дава възможност да предприемете действия в контекста на вашия сайт: например изискване на допълнителни фактори за удостоверяване, изпращане на публикация в модерация или пускане на ботове, които може да изстъргват съдържание.

    3) Лоша четливост

    Накратко: уверете се, че текстът има адекватен контраст, четлив е и не е оправдан.

    • Осигурете адекватен контраст. Един от най-разпространените блокери за достъп в мрежата е лошият контраст между текст и фон. Насоките за W3C изискват съотношение на контраст най-малко 4,5: 1, с изключение на мащабен текст и изображения на широкомащабен текст, който трябва да има контрастно съотношение най-малко 3: 1 (логовете и „случайният“ текст са изключени). Има много помощни програми, които могат да измерват коефициентите на контраст за вас; моят личен фаворит е отличната Ada Rose Cannon контрастна джаджа, която е полезна отметка в браузъра, която подчертава области с недостатъчен контраст на страницата ви.
    • Не разполагайте със заглавия на всички капитали. Има доказателства, че са по-трудни за четене, тъй като главните букви са еднакви по височина, така че не можем да разпознаем формата на обикновените думи. Освен това някои екранни четци ще изписват групи от главни букви, сякаш са съкращения (като BBC, DOJ и т.н.). Ако трябва да имате всички главни заглавия, запишете ги в нормален случай във вашия HTML код и ги трансформирайте с CSS преобразуване на текст: главни букви.
    • Текст отляво подравнете. (За страници на езици отдясно на ляво като арабски или иврит, текстът се подравнява надясно.) Не го обосновайте, тъй като това затруднява четенето на хора с дислексия. Най- Ръководство за стила на Британската асоциация на дислексията също предполага

      Използвайте sans serif шрифтове, като Arial и Comic Sans, тъй като буквите могат да изглеждат по-малко препълнени. Алтернативите включват Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Разсейващи образи и графики

    Накратко: позволете на потребителите да спрат всяко движение; спазвайте техните настройки на операционната система; не правете автоматично възпроизвеждане на видео.

    Един респондент на проучването Click-Away Pound пише,

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

    Най-основното ниво на WCAG изисква „За всяка движеща се, мигаща или превъртаща информация, която (1) започва автоматично, (2) продължава повече от пет секунди, и (3) се представя паралелно с друго съдържание, има механизъм за потребителят да го направи на пауза, да го спре или скрие, освен ако движението, мигането или превъртането не е част от дейност, където е от съществено значение. “.

    Разсеяността е досада – особено за хора с ADHD или други когнитивни нарушения. Но движението и мигането също могат да причинят гърчове, така че указанията на WCAG изискват съдържанието да не мига повече от 3 пъти за всеки 1 секунда период.

    Уважавайте избора на потребителя за анимации

    Всички основни операционни системи позволяват на потребителя да изрази предпочитание за намалено движение на екрана – може би защото има нарушение на вестибуларния спектър, задействано от движение. Вашият уебсайт може да открие дали потребителят е направил това с CSS предпочита намалено движение медийна заявка.

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

    @media (предпочита намалено движение: без предпочитания) {
    бутон {
    / * вибриращите ключови рамки са дефинирани другаде * /
    анимация: вибрирайте 0,3s линейна безкрайна и двете;
    }
    }

    Ако искате да преоборудвате сайт, който има много правила за анимация, може да направите следното спрете всички предварително обявени CSS анимации:

    @media (предпочита-намалено движение: намаляване) {
    *,
    *::преди,
    *::след {
    анимация-продължителност: 0,001s! важно;
    продължителност на прехода: 0,001s! важно;
    }
    }

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

    5) Лоша информация за връзката

    Накратко: направете връзки идентифицируеми, с уникален текст на връзката. Предупреждавайте потребителите дали връзката ще отвори нов раздел или файл.

    Една от основните причини за лошите връзки често е лошото копирайтинг. Повечето екранни четци позволяват на потребителя бързо да вижда списък с връзки на страница (в най-използвания комерсиален екран четец, JAWS, клавишната комбинация е Ins + F7; в безплатен четец на NVDA екран, същата клавишна комбинация показва списък с елементи, който съдържа връзки към страници, заглавия и ориентири).

    Ако обаче във всяка връзка има текст с надпис „Кликнете тук“ или „Прочетете повече“, без друго да ги различавате, това е безполезно. Най-лесният начин да решите това е просто да напишете уникален текст на връзката, но ако това не е възможно, можете да преодолеете текста на линка за помощна технология, като използвате уникален атрибут aria-label на всяка връзка.

    Ето един добър пример от Уебсайт на Joomla:

    Уебсайт Joomla, показващ две различни истории, всяка с идентични

    Видимият текст на връзката е просто „прочетете повече“, но Joomla използва ария-етикет атрибути, за да направи всеки уникален на помощните технологии:

    Прочетете още
    
    Прочетете още

    Заради ария-етикет текст ще бъде използван вместо текста на връзката чрез помощни технологии, W3C препоръчва стартирането на текста, използван в ария-етикет, да се използва с текста, използван в линка, тъй като „това ще позволи последователна комуникация между потребителите“.

    Забележка: Някой лош съвет, който все още виждам в старите сайтове, е да добавите обяснителен текст към връзките, използвайки заглавие атрибут:

    Прочетете повече>

    Не правете това. Най- заглавието не е изложено на повечето екранни читатели (разработчиците използваха, за да го напълнят с ключови думи за целите на „SEO“, така че доставчиците на екранен четец са го деактивирали по подразбиране), а браузърите представят атрибутите на заглавието като „подсказки“, които са достъпни само за миши потребители на курсора.

    Връзките трябва да изглеждат като връзки

    По подразбиране браузърите подчертават връзките. Най-добре е да не променяте това, но ако загубите битка на паркинга с дизайнера за това, текстът на линка трябва да има контрастно съотношение 3: 1 от околния текст без връзка и трябва да даде някакъв „неоцветен обозначение“ ”, Че те са връзка, когато ховъртете или фокусирате, например:

    a: задръжте, a: фокус {text-decoration: underline;}

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

    „Нецветен обозначаващ“ (в нашия случай подчертаване) гарантира, че посетителите със слабо зрение или цветна слепота ще видят промяната на курсора или фокуса. (Екранните четци автоматично обявяват „Връзка“ преди текста на линка.)

    Кажете на хората, ако връзката отвори нов раздел / страница

    Това може да бъде объркващо за посетител, ако активирането на връзка отваря нов раздел или нов прозорец, особено ако само някои връзки на страница правят това (например само външни връзки отварят нов раздел). Ако трябва да направите това, трябва да предупредите потребителя или в текста на връзката, или като използвате метода на ария-етикет по-горе.

    Кажете на хората, ако връзката е към файл

    Ако връзката е към файл (например PDF или видео), кажете на потребителя в текста на връзката. Не го крийте ария-етикет, тъй като това може да бъде полезно за много зрящи потребители (някои мобилни телефони не могат да отворят .docx файл, например). Ако става въпрос за голям файл, помислете за предупреждение на потребителя за приблизителния размер; може да не желаят да изтеглят голям видео файл над 3G.

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

    Годишен отчет (PDF, 240 MB)

    6) Друга грешка в дизайна: Премахване на фокусния пръстен

    Накратко: уверете се, че потребителят на клавиатурата винаги може да види къде е фокусиран в момента.

    Споменахме : фокус стилове преди. Те са безценен визуален индикатор за онези хора, които не могат да използват мишка по някаква причина: може би имат RSI или Паркинсон или множествена склероза. По подразбиране, браузърите показват пръстен за фокусиране върху текущо фокусирания елемент. Ето връзката Начало на моя личен сайт, фокусирана в браузър Chromium:

    Екранна снимка на фокусния пръстен по подразбиране на Chromium около връзка (която също е изображение)

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

    Въведете нов стандарт, създаден от Firefox, наречен : Фокус-видими. Това ще приложи фокусиращ пръстен към елемент, ако е достигнат от клавиатура или насочващо устройство без мишка, но не показва нищо на потребителите на мишката. Тъй като се поддържа само в Firefox (по време на писане), Предлага Патрик Лъке следния CSS, за да играете добре с всички браузъри:

    бутон: фокус {/ * някои вълнуващи стилове за фокусиране на бутони * /}
    бутон: фокус: не (: фокус видим) {
    / * отменете всички горепосочени стилови бутони
    ако бутонът е съсредоточен, но браузърът не нормално
    показване на стандартни стилове на фокус * /
    }
    бутон: видим фокус {/ * някои дори * още * вълнуващи стилове за фокусиране на бутони * /}

    7) Попълване на формуляр

    Накратко: дизайнерски полета на формуляри, които приличат на полета на формуляра, всяко свързано с етикет. Не деактивирайте автоматично попълване.

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

    Автоматичното попълване е ваш приятел

    Разрешаването на браузърите да попълват автоматично формулярите изисква посетителите да правят по-малко, така че е по-вероятно да попълнят формуляр и да се регистрират / купят вашия продукт. Автоматично попълване на браузъри: дълбоко гмуркане е страхотна статия от eBay за това (и те трябва да знаят).

    Също така автозавършването е единствената достатъчна техника в момента за постигане на съответствие с АА Критерий за успех 1.3.5: Идентифициране на целта за въвеждане.

    Направете формулярните полета да изглеждат като формулярните полета

    По подразбиране браузърите показват полета за въвеждане като полета. Във всеки случай ги оформете с полета, подплънки и рамки, но ги запазете като кутии. Много дизайнери следваха модела на Google за дизайн за 2017 г., използвайки един ред за въвеждане на текст от потребителя:

    Стар материал за дизайн, с хоризонтална линия, а не с правоъгълна кутия

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

    затворени текстови полета с правоъгълна (кутия) форма, изпълнявани по-добре от тези с привилегирована линия … Днес тези нови текстови полета се появяват в продуктите на Google от страниците за влизане в акаунта до формулярите на Google.

    Ако обмисляте да приемете пълната библиотека на потребителския интерфейс на Material Design, прочетете Спрете да използвате текстови полета Material Design! от Matsuko Friedland, за да видите дали отговаря на вашите нужди.

    Етикетиране на всички полета за формуляри

    Всички полета на формуляри (въвеждане на текст, квадратчета за отметка, радио бутони, плъзгачи и т.н.) трябва да бъдат етикетирани. Най-добрият начин да направите това е да използвате HTML ; както WCAG казва: „стандартните HTML контроли вече отговарят на този критерий за успех, когато се използват според спецификацията“.

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

    менте срещу реално сравнение на етикети

    Това прави фокусирането на вход много по-лесно за хора с двигателни затруднения в управлението – или може би за вас, опитвайки се да поставите отметка в малък квадрат на малък екран на неравен влак. Също така е от жизненоважно значение за потребителите на екранен четец, които ще преглеждат полета във форма (по подразбиране само връзки и полета на формулярите са фокусирани чрез табулиране); когато влязат в поле за въвеждане, екранният четец ще съобщи съдържанието на свързания етикет.

    Кодът за това е прост. В полето за въвеждане се дава уникален идентификатор и етикетът се свързва с него с помощта на за атрибут:

    
    

    Скриване на етикети

    Понякога може да не искате видим етикет. Или дизайнерът не иска и не искаш друга битка на паркинга. Както и да е, ето един пример, когато надписът с надпис „Търсене“ пред въвеждането се чувства като прекален.

    Поле за въвеждане с бутон с надпис „търсене“ след това

    Можем да свържем полето за въвеждане с текста „Търсене“, който е съдържанието на бутона за изпращане ария-labelledby:

    
    

    Можехме да използваме ария-етикет (с които се запознахме по-рано, когато говорихме за връзки):


    Но винаги е по-добре да предпочитате видим текст на страница, защото това ще бъде преведено, ако страницата се изпълнява чрез инструмент за превод, докато текстът „скрит“ в HTML атрибутите няма да бъде. (Шапка на Адриан Росели за този съвет, от прекрасната му статия Моят приоритет на методите за етикетиране на контрола.)

    Най-често срещани грешки в началните страници на милиона

    Разгледахме основните бариери пред сайтовете за електронна търговия, както са докладвани от потребители с някаква форма на увреждане. Сега нека разгледаме много по-широк набор от сайтове – началните страници за най-добрите 1 000 000 уебсайтове, автоматично анализиран от WebAIM през август 2019 г. 98% от анализираните страници имаха поне една грешка. Най-често срещаните грешки са

    1. Текст с нисък контраст (86,1%)
    2. Липсва алтернативен текст за изображения (67.9%)
    3. Празни връзки (58,9%)
    4. Липсващи етикети за въвеждане на формуляри (53.2%)
    5. Липсващ език на документа (30,5%)

    По-горе сме разгледали ниския контраст, връзките и формулярите. Сега нека разгледаме как можем да избегнем другите много често срещани грешки.

    8) Предоставяне на текстови алтернативи за всички изображения, видео и аудио

    Накратко: всяка информация, предадена чрез изображение или видео, трябва да има текстов еквивалент.

    всеки трябва да има алтернативен текст („alt text“), който може да бъде съобщен на посетители със зрителни увреждания или такива с ниска честотна лента / скъпи планове за данни, които са изключили изображенията в браузърите си. Това включва изображения на текст.

    Ето основните правила:

    • Ако изображението е чисто декоративно, то трябва да има празен alt текст: ALT = "". (Но така или иначе чисто декоративни изображения вероятно трябва да са в CSS.)
    • Ако изображението е описано в текста на тялото, то трябва да има празен alt текст (ALT = ""), за да се избегне повторение. Но внимавайте, ако е в
      – виж Как мислите? за още.
    • Ако изображението е единственото съдържание на връзка (например логото на вашата организация може да се кликне, за да отиде на началната страница), алтернативният текст трябва да описва местоназначението на връзката. Например, alt = "начална страница".
    • Не използвайте икони за шрифтове; те могат да бъдат наистина лоши за хора с дислексия. Ако все пак ги използвате, конвертирайте ги в SVG.

    Видео и аудио алтернативен текст

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

    9) Добавете подходящ език на документа

    Накратко: нека помощната технология да знае езика, на който е вашият текст.

    30% от началните страници не декларират езика, на който са написани, което може да ги обърка за потребителите на екранен четец. Това е важно, защото думата „шест“ се произнася много различно, ако изречението е например на английски или френски език.

    Лесно е да разрешите това, като добавите атрибут на lang към вашия HTML елемент:

    „Bg“ казва на четец на екрана (или софтуер за превод), че тази страница е на английски. „Es“ е испански, „fr“ е френски и т.н. За повечето езици езиковият етикет е доста лесен за определяне. W3C има ръководство за Избор на езиков маркер.

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

    Ако искате да разговаряте матадор, в някаква готина къщичка
    И се запознайте senoritas от резултата, Espana por favor

    10) Помогнете на посетител да заобиколи вашето съдържание

    Накратко: използвайте HTML ориентировъчни елементи, за да помогнете на потребителите на помощни технологии да разберат и да навигират по вашето съдържание.

    Когато зрящият посетител стигне до вашата страница, те могат лесно да я сканират визуално, за да разберат къде е навигацията и къде започва основното съдържание. Потребителят на екранен четец не може да направи това. Въпреки това, HTML5 ни дава някои нови тагове за маркиране на тези области, а помощните технологии имат преки пътища, които могат да прескачат до (или да прескачат) ориентири като удар с глава, долния, навигация и подобни.

    Ето шестминутно видео, което направих с Леони Уотсън, уеб разработчик и потребител на екранен четец, как използва своя четец на екрана, за да проучи тези семантични данни за навигиране в личния ми сайт:

    • Увийте основното си съдържание, тоест неща, които не са заглавна, основна навигация или долен колонтитул, в a
      елемент. Почти във всички случаи трябва да има само един
      на страница. Всички браузъри (IE9 +) ви позволяват да го стилизирате, а помощните технологии знаят какво да правите с него.
    • Увийте заглавката си (лого на марката, каишка, заглавието на страницата) в a
      елемент.
    • Увийте долния си колонтитул (правни неща, данни за контакт, известие за авторски права и т.н.) в a
    • Маркирайте вашата основна навигация с помощта
        увит в елемент. Това може да се вложи в
        ако това отговаря на визуалния дизайн на страницата.
      • Рекламното и несъществено съдържание трябва да бъде обвито в
      • Ако имате повече от един продукт / видео / новина / блог на страница, увийте всеки от тях в
        елемент.

      В своята проучване на потребителите на екранен четец, WebAIM установи, че 26% от потребителите на екранен четец често или винаги използват тези ориентири, когато навигират в страница.

      Освен това, опаковане на отделни части от съдържанието

      помага на Apple на WatchOS да показва дисплея оптимално. Вижте моята статия Практическата стойност на семантичния HTML за повече по този въпрос.

      11) Използвайте правилно HTML

      Накратко: разберете семантиката и поведението по подразбиране на HTML елементи; използвайте правилния елемент за съдържанието си.

      Често срещана тема в тази статия е използването на правилните HTML елементи. Използване на a етикет има вградено поведение на браузъра, което фокусира свързаното му поле за въвеждане; използвайки

      е за предпочитане пред

      защото позволява на потребителите на екранен четец да прескачат направо към важното съдържание, като същевременно са напълно ненатрапчиви за тези, които не използват екранен четец.

      Друг пример е използването на a

      Like this post? Please share to your friends:
Adblock
detector
map