Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Исправляет опечатки в статье "Что такое семантика?" #5253

Merged
merged 2 commits into from
Apr 3, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions html/semantics/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,15 @@ tags:

Дело в том, что в семантические теги уже встроены [роли](/a11y/aria-roles/), [состояния и свойства](/a11y/aria-attrs/). Роли помогают пользователям вспомогательных технологий понять, что это за элемент, и как им управлять. Состояния и свойства дают дополнительную информацию об элементах интерфейса. Например, скринридер расскажет про `<button>`, что это кнопка, а пользователи голосового управления кликнут по ней с помощью команды «кнопка, клик». У чекбоксов есть состояния `checked` и `unchecked`. Благодаря им не только визуально, но и на слух понятно, какой чекбокс выбран, а какой нет. Пример свойства — уровень заголовка. У тегов `<h1>`−`<h6>` есть свойство `level` по умолчанию. Скринридеры зачитывают уровень заголовка вместе с его ролью: заголовок первого уровня или заголовок четвёртого уровня.

Другая важная часть семантики — улучшение навигации для скринридеров. Теги вроде `<header>` и `<footer>` — ориентиры. Это значит, что пользователи могут быстро перемещаться по ним с помощью особых горячих клавиш. Дополнительно можно открыть список со всеми ориентирами со страницы, а также с заголовками, кнопками и ссылками. Кстати, перемещение по заголовкам в мире сринридерах — один из самых популярных [методов поиска информации по странице](https://webaim.org/projects/screenreadersurvey10/#finding).
Другая важная часть семантики — улучшение навигации для скринридеров. Теги вроде `<header>` и `<footer>` — ориентиры. Это значит, что пользователи могут быстро перемещаться по ним с помощью особых горячих клавиш. Дополнительно можно открыть список со всеми ориентирами со страницы, а также с заголовками, кнопками и ссылками. Кстати, перемещение по заголовкам в мире скринридеров — один из самых популярных [методов поиска информации по странице](https://webaim.org/projects/screenreadersurvey10/#finding).

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

Напоследок, не придётся оптимизировать сайт под [режим принудительных цветов](/a11y/forced-colors/). Самая популярная разновидность — режим высокой контрастности в Windows. В нём цвета в системе и на сайтах ограничиваются до небольшой палитры. Eсли кнопка свёрстана на `<div>`, в таком режиме система не заменит ваш цвет на системный.

### Поисковая оптимизация

Семантика нужна и для поисковой оптимизации сайтов, которую коротко называют SEO. Уровень доступностм сайта сам по себе — один из факторов ранжирования в поисковых системах. Правильное использование семантических тегов приводит к более доступному интерфейсу для пользователей и при этом помогает обоходить другие в поисковой выдаче.
Семантика нужна и для поисковой оптимизации сайтов, которую коротко называют SEO. Уровень доступности сайта сам по себе — один из факторов ранжирования в поисковых системах. Правильное использование семантических тегов приводит к более доступному интерфейсу для пользователей и при этом помогает обоходить другие в поисковой выдаче.

Семантическая вёрстка помогают и самим поисковым движкам. Они не понимают сам текст, его контекст и то, насколько он важен. Семантические теги дают поисковым системам нужный контекст, помогают понять содержимое сайта и проиндексировать его относительно других со схожей тематикой. При этом хорошие альтернативные описания `alt` к картинкам и закрытые субтитры к видео в `<track>` дают поисковым роботам ещё больше информации. Это поможет сайту попасть и в текстовую поисковую выдачу, и в выдачу при поиске по картинкам.

Expand Down
Loading