Атрибут lang тега <button>
Описание
Атрибут lang указывает язык текстового содержимого внутри кнопки. Это важно для:
- Правильного отображения символов и шрифтов
- Работы скринридеров и инструментов доступности
- Автоматического перевода в браузерах
<button lang="en">Click me</button>
<button lang="ru">Нажми меня</button>
<button lang="ar" dir="rtl">اضغط هنا</button>
| Аспект | Описание | Примеры значений |
|---|---|---|
| Формат | Языковой тег согласно BCP 47 | ru, en-US, zh-Hans |
| Наследование | Дочерние элементы наследуют язык | Если не указан свой lang |
| Доступность | Помогает скринридерам с произношением | Разное произношение для "я" (ru) и "я" (uk) |
Практические примеры:
1. Многоязычный интерфейс:
<button lang="en" onclick="changeLanguage('en')">English</button>
<button lang="es" onclick="changeLanguage('es')">Español</button>
<button lang="fr" onclick="changeLanguage('fr')">Français</button>
2. Смешанное языковое содержимое:
<button>
<span lang="en">Save</span> /
<span lang="ru">Сохранить</span>
</button>
Особенности работы:
- Если lang не указан, наследует значение от родительских элементов
- Лучше указывать для каждого текстового элемента
- Влияет на выбор кавычек, переносов и типографики
- Может использоваться вместе с dir для RTL-языков
Рекомендации:
- Используйте правильные языковые коды (ru, en-GB, zh-Hant)
- Для иконок без текста lang не требуется
- Сочетайте с aria-label для сложных кнопок
- Проверяйте с инструментами доступности
Примечание: Хотя lang часто упускают из виду, правильное указание языка улучшает пользовательский опыт и доступность вашего интерфейса, особенно для многоязычных сайтов.