Информация и взаимовръзки

Какво изисква

Всичко, което може да се разбере с един поглед — че тази едра удебелена буква е заглавие, че тези редове образуват таблица с данни, че тази група полета е „адрес за фактуриране”, че тази звездичка означава задължително поле — трябва да бъде отразено и в кода. Екранните четци, програмите за гласово управление и механизмите за преформатиране виждат само маркапа. Ако дадена взаимовръзка е изразена единствено визуално (по-едър шрифт, по-дебела рамка, отстъп), помощните технологии не я разпознават.

Как да се изпълни

• Използвайте реални елементи за заглавия (<h1> до <h6>) в логична йерархия — никога стилизиран <div> вместо заглавие.
• Маркирайте списъците с <ul>, <ol> и <li> — не с параграфи, разделени с прекъсвания на ред, или с визуални символи за точки.
• Използвайте <table> с <th scope="col"> / <th scope="row"> за таблици с данни, заедно с <caption>, описващ предназначението на таблицата.
• Всяко поле на формуляр трябва да има програматичен етикет: <label for="...">, aria-labelledby или aria-label. Placeholder текстът не е етикет.
• Групирайте свързани полета на формуляр в <fieldset> с <legend> или използвайте role="group" с aria-labelledby за персонализирани компоненти.
• За фигури и надписи използвайте <figure> и <figcaption>. За двойки дефиниции — <dl> / <dt> / <dd>.
• Задължителните полета трябва да бъдат означени и визуално (звездичка), и програматично (aria-required="true" или атрибут required).

Чести грешки

• <div class="heading-1"> вместо <h1> — изглежда правилно, но не се обявява от екранния четец.
• Таблици, използвани за визуално оформление, или таблици с данни, изградени от <div> решетки без клетки <th>.
• Полета на формуляр с единствен placeholder вместо etикет — надписът изчезва при фокус и екранният четец може да не го обяви.
• Точки в списъци, симулирани с <p>•&nbsp;Елемент</p> вместо реален маркап на списък.
• Звездички за задължителни полета, показани в червено с CSS, без атрибут aria-required или required.
• Визуално групирани радио бутони без <fieldset> / <legend>, оставящи потребителите на екранни четци без контекст на въпроса.
• Таблици с данни, при които заглавният ред е стилизиран с удебелен шрифт, но използва <td>, а не <th>.

Защо е важно

1.3.1 е критерият за успех, цитиран най-често в одитите на WCAG след 1.1.1 и 1.4.3. Всяка страница, генерирана от CMS, всеки маркетингов landing page, всеки персонализиран компонент за формуляр обикновено не изпълнява поне една негова част. Решението почти винаги е семантичен HTML, а не ARIA — когато се посяга към role="heading" за поправяне на <div>, който е трябвало да бъде <h2>, проблемът вече е налице.