Етикети на формуляри: Основни изисквания за достъпност на полетата за въвеждане

Формулярите са основна част от интернет. От прости формуляри за контакт до сложни процеси на плащане в електронната търговия, те позволяват на потребителите да взаимодействат с уебсайтове и приложения. Въпреки това, лошо проектираните формуляри могат да създадат значителни бариери за потребители с увреждания. Ключов елемент в създаването на достъпни формуляри е правилната употреба на етикети на формуляри. Това ръководство предоставя изчерпателен преглед на изискванията за достъпност на етикетите на формуляри, като гарантира, че вашите формуляри са използваеми от всички, независимо от техните способности.

Защо са важни достъпните етикети на формуляри?

Достъпните етикети на формуляри са жизненоважни по няколко причини:

Използваемост: Ясните и кратки етикети помагат на всички потребители да разберат целта на всяко поле за въвеждане, подобрявайки общата използваемост.
Достъпност: Етикетите предоставят съществена информация за потребители с увреждания, особено тези, които разчитат на асистивни технологии като екранни четци. Без подходящи етикети тези потребители може да не успеят да попълнят формуляри.
Съответствие с WCAG: Насоките за достъпност на уеб съдържанието (WCAG) изискват всички контроли на формуляри да имат свързани етикети. Спазването на тези насоки гарантира, че вашият уебсайт е достъпен и законово съвместим в много юрисдикции.
SEO: Въпреки че не е пряк фактор за класиране, достъпните уебсайтове обикновено имат по-добро потребителско изживяване, което може косвено да подобри SEO представянето.

Разбиране на изискванията на WCAG за етикети на формуляри

WCAG предоставя специфични насоки за осигуряване на достъпност на формулярите. Ето ключовите изисквания, свързани с етикетите на формуляри:

Критерий за успех 1.1.1 на WCAG 2.1 Неттекстово съдържание (Ниво A)

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

Критерий за успех 1.3.1 на WCAG 2.1 Информация и връзки (Ниво A)

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

Критерий за успех 2.4.6 на WCAG 2.1 Заглавия и етикети (Ниво AA)

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

Критерий за успех 3.3.2 на WCAG 2.1 Етикети или инструкции (Ниво A)

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

Критерий за успех 4.1.2 на WCAG 2.1 Име, роля, стойност (Ниво A)

За всички компоненти на потребителския интерфейс (включително, но не само, елементи на формуляри, връзки и компоненти, генерирани от скриптове), името и ролята могат да бъдат определени програмно; състоянията, свойствата и стойностите, които могат да бъдат зададени от потребителя, могат да бъдат зададени програмно; и уведомлението за промени в тези елементи е достъпно за потребителските агенти, включително асистивните технологии.

Най-добри практики за внедряване на достъпни етикети на формуляри

Ето няколко най-добри практики за създаване на достъпни етикети на формуляри:

1. Използвайте елемента <label>

Елементът <label> е основният начин за свързване на текстов етикет с поле за въвеждане. Той осигурява семантична и структурна връзка между етикета и контрола. Атрибутът for на елемента <label> трябва да съответства на атрибута id на съответното поле за въвеждане.

Пример:


<label for="name">Име:</label>
<input type="text" id="name" name="name">

Неправилен пример (Избягвайте):


<span>Име:</span>
<input type="text" id="name" name="name">

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

2. Свързвайте изрично етикетите с полетата за въвеждане

Осигурете ясна и изрична връзка между етикета и полето за въвеждане, като използвате атрибутите for и id, както е показано в примера по-горе.

3. Позиционирайте етикетите правилно

Разположението на етикетите може да повлияе на използваемостта. Обикновено етикетите трябва да се поставят:

Над полето за въвеждане: Това често е най-достъпната и лесна за ползване опция, особено за текстови полета и текстови области.
Вляво от полето за въвеждане: Често срещано, но може да бъде по-малко ефективно за потребители със зрителни увреждания, които може да имат затруднения при сканиране на страницата.
За радио бутони и квадратчета за отметка: Етикетите трябва да се поставят вдясно от контрола.

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

4. Предоставяйте ясни и кратки етикети

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

5. Използвайте ARIA атрибути, когато е необходимо

Атрибутите ARIA (Accessible Rich Internet Applications) могат да подобрят достъпността на елементите на формуляра, особено в сложни сценарии. Въпреки това, използвайте ARIA разумно и само когато нативните HTML елементи и атрибути са недостатъчни.

aria-label: Използвайте този атрибут, за да предоставите етикет, когато видим етикет не е възможен или практичен.
aria-labelledby: Използвайте този атрибут, за да се позовете на ID на съществуващ елемент на страницата, който да служи като етикет.
aria-describedby: Използвайте този атрибут, за да предоставите допълнителна информация или инструкции за полето за въвеждане. Това е полезно за предоставяне на контекст или обяснение на правилата за валидация.

Пример с aria-label:


<input type="search" aria-label="Търсене в уебсайта">

Пример с aria-labelledby:


<h2 id="newsletter-title">Абонамент за бюлетин</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Въведете вашия имейл адрес">

6. Групирайте свързани елементи на формуляра с <fieldset> и <legend>

Елементът <fieldset> групира свързани контроли на формуляра, а елементът <legend> предоставя надпис за fieldset-а. Това подобрява структурата на формуляра и улеснява потребителите да разберат връзките между различните полета за въвеждане.

Пример:


<fieldset>
  <legend>Информация за контакт</legend>
  <label for="name">Име:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Имейл:</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Предоставяйте ясни съобщения за грешки

Когато потребителите правят грешки при попълване на формуляр, предоставяйте ясни и информативни съобщения за грешки, които обясняват какво се е объркало и как да се коригира грешката. Свържете тези съобщения за грешки със съответните полета за въвеждане, като използвате ARIA атрибути като aria-describedby.

Пример:


<label for="email">Имейл:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Моля, въведете валиден имейл адрес.</span>

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

8. Използвайте достатъчен цветови контраст

Осигурете достатъчен цветови контраст между текста на етикета и цвета на фона, за да отговорите на изискванията на WCAG. Използвайте инструмент за анализ на цветовия контраст, за да проверите дали съотношението на контраста отговаря на минималните изисквания (4.5:1 за нормален текст и 3:1 за голям текст). Това помага на потребители с намалено зрение да четат етикетите по-лесно.

9. Осигурете достъпност чрез клавиатура

Всички елементи на формуляра трябва да бъдат достъпни само с помощта на клавиатурата. Потребителите трябва да могат да навигират през формуляра с помощта на клавиша Tab и да взаимодействат с контролите на формуляра с помощта на клавиша Spacebar или Enter. Тествайте вашите формуляри обстойно с клавиатура, за да осигурите правилна достъпност чрез клавиатура.

10. Тествайте с асистивни технологии

Най-добрият начин да се уверите, че вашите формуляри са достъпни, е да ги тествате с асистивни технологии като екранни четци (напр. NVDA, JAWS, VoiceOver). Това ще ви помогне да идентифицирате всякакви проблеми с достъпността, които може да не са очевидни при визуална проверка. Включете потребители с увреждания във вашия процес на тестване, за да получите ценна обратна връзка.

Примери за внедряване на достъпни етикети на формуляри

Пример 1: Прост формуляр за контакт (международна перспектива)

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


<form>
  <label for="name">Пълно име:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Имейл адрес:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Държава:</label>
  <select id="country" name="country">
    <option value="">Изберете държава</option>
    <option value="us">Съединени щати</option>
    <option value="ca">Канада</option>
    <option value="uk">Обединено кралство</option>
    <option value="de">Германия</option>
    <option value="fr">Франция</option>
    <option value="jp">Япония</option>
    <option value="au">Австралия</option>
    <!-- Добавете още държави -->
  </select><br><br>

  <label for="message">Съобщение:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Изпрати">
</form>

Обърнете внимание на използването на „Пълно име“ вместо просто „Име“ за по-голяма яснота, особено за култури, където фамилните имена предхождат личните.

Пример 2: Формуляр за плащане в електронна търговия

Формулярите за плащане в електронната търговия често изискват чувствителна информация. Ясните етикети и инструкции са от решаващо значение за изграждането на доверие и осигуряването на достъпност.


<form>
  <fieldset>
    <legend>Адрес за доставка</legend>
    <label for="shipping_name">Пълно име:</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Адрес:</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Град:</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Пощенски код:</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Държава:</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Изберете държава</option>
      <option value="us">Съединени щати</option>
      <option value="ca">Канада</option>
      <!-- Добавете още държави -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Информация за плащане</legend>
    <label for="card_number">Номер на кредитна карта:</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Дата на валидност (ММ/ГГ):</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="ММ/ГГ"><br><br>

    <label for="cvv">CVV:</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Поръчай">
</form>

Използването на fieldsets и legends ясно организира формуляра в логически секции. Заместващият текст (placeholder) предоставя допълнителни насоки, но не забравяйте, че той не трябва да се използва като заместител на етикетите.

Пример 3: Регистрационен формуляр с ARIA атрибути

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


<form>
  <label for="username">Потребителско име:</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Парола:</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Псевдоним (по желание):</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Този псевдоним ще се показва публично.</span><br><br>

  <input type="submit" value="Регистрирай се">
</form>

Атрибутът aria-describedby свързва полето за въвеждане на псевдоним с елемент span, който предоставя допълнителна информация за това как ще се използва псевдонимът.

Инструменти за тестване на достъпността на формуляри

Няколко инструмента могат да ви помогнат да оцените достъпността на вашите формуляри:

Accessibility Insights: Разширение за браузър, което идентифицира проблеми с достъпността в уеб страници.
WAVE (Web Accessibility Evaluation Tool): Онлайн инструмент, който оценява уеб страници за грешки в достъпността.
axe DevTools: Разширение за браузър, което извършва автоматизирано тестване на достъпността.
Екранни четци (NVDA, JAWS, VoiceOver): Тестването с екранни четци е от съществено значение за идентифициране на проблеми с достъпността, които може да не са очевидни при автоматизирано тестване.

Заключение

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

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