aria-atomic

Свойство изменяющихся областей из WAI-ARIA. Делает часть страницы изменяющейся или «живой» областью.

aria-atomic — дополнительный атрибут, который не обязательно использовать. Указывает на объём изменений, о котором расскажет вспомогательная технология, — это вся область или только изменившаяся часть.

        
          
          <h2>Корзина</h2><div  aria-live="polite"  aria-atomic="true">  <ul>    <li>      Scream, количество — <span id="item-1">0</span>    </li>    <li>      Autumnout 78, количество — <span id="item-2">0</span>    </li>  </ul></div><button>Купить</button>
          <h2>Корзина</h2>
<div
  aria-live="polite"
  aria-atomic="true"
>
  <ul>
    <li>
      Scream, количество — <span id="item-1">0</span>
    </li>
    <li>
      Autumnout 78, количество — <span id="item-2">0</span>
    </li>
  </ul>
</div>
<button>Купить</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Добавьте к любому тегу или ARIA-роли aria-atomic с одним из двух значений:

• false (по умолчанию) — сообщить только об изменениях.
• true — рассказать обо всём содержимом в изменяющейся области.

Изменяющимся областям, кроме alert и status, по умолчанию задан aria-atomic="false". Из-за этого вспомогательные технологии рассказывают только об обновлениях в них. Однако вручную добавленный aria-atomic="false" ведёт себя немного иначе под капотом. В этом случае скринридеры не будут проверять все элементы в области и проходить по ним, как они поступают по умолчанию. Это никак не влияет на объявления содержимого.

aria-atomic со значением true изменяет поведение вспомогательных технологий. Например, пользователь добавил в список товаров два килограмма 🥔 картошки. В момент добавления товара он услышит, что в списке появилась картошка объёмом два килограмма. Если этот же пользователь добавит ещё килограмм, скринридер расскажет только о трёх килограммах и не повторит наименование товара. Благодаря aria-atomic="true" скринридер расскажет и о картошке, и о новом количестве килограмм.

Когда пригодится aria-atomic:

• элементы, в которых часто изменяются данные: игровой счёт, чаты технической поддержки и так далее;
• товары в корзине, где неплохо знать о том, что добавили ранее;
• таймеры.

aria-atomic="true" в таймере поможет сделать объявления понятнее. Так скринридеры расскажут не только про изменившиеся часы, секунды и минуты, но и про единицу измерения времени. В примере после запуска таймера в обратном направлении отсчитываются две минуты. Когда остаётся 59 секунд скринридер расскажет и о минутах, и о секундах: «Ноль минут, пятьдесят девять секунд». Без этого он рассказал бы только о минутах.

        
          
          <h2>Оставшееся время</h2><div  role="timer"  id="timer"  aria-atomic="true">  <span id="min">02</span>  <span id="sec">00</span></div><div id="message" aria-live="polite"></div>
          <h2>Оставшееся время</h2>
<div
  role="timer"
  id="timer"
  aria-atomic="true"
>
  <span id="min">02</span>
  <span id="sec">00</span>
</div>
<div id="message" aria-live="polite"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

aria-atomic часто используют вместе с aria-relevant, который сообщает о типе изменений. Например, какое содержимое добавлено или удалено из изменяющейся области.

Изменяющаяся область — это область страницы, в которой содержимое обновляется из-за внешних событий или действий пользователей. Благодаря изменяющимся областям вспомогательные технологии узнают об обновлениях на странице и автоматически рассказывают о них пользователям.