diff --git a/a11y/role-paragraph/images/role-paragraph.png b/a11y/role-paragraph/images/role-paragraph.png new file mode 100644 index 0000000000..59f3fd991f Binary files /dev/null and b/a11y/role-paragraph/images/role-paragraph.png differ diff --git a/a11y/role-paragraph/index.md b/a11y/role-paragraph/index.md index 5f5859c438..b0da2de229 100644 --- a/a11y/role-paragraph/index.md +++ b/a11y/role-paragraph/index.md @@ -1,25 +1,69 @@ --- title: "`paragraph`" -description: "Роль, которая есть у абзаца текста." +description: "Роль абзаца текста." authors: - - doka-dog + - tatianafokina related: - a11y/aria-intro - - a11y/aria-roles + - a11y/aria-label - html/p tags: - doka - - placeholder --- ## Кратко [Роль структуры документа](/a11y/aria-roles/#roli-struktury-dokumenta) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya) для параграфа или абзаца текста. -В HTML эта роль есть у [`

`](/html/p/) по умолчанию. +В вебе параграф и абзац — одно и то же. Это блок текста, который окружён пустыми строками перед и после него. + +В HTML для параграфов используют тег [`

`](/html/p/). ## Как пишется -Задайте тегу `role="paragraph"`, лучше всего [`

`](/html/div/) или [``](/html/span/). В большинстве случаев используйте тег `

`. +В первую очередь используйте для параграфов тег `

`, в котором уже есть роль `paragraph`. К тому же `

` с самого начала отлично поддерживается браузерами и вспомогательными технологиями. + +Откройте эту доку в инструментах разработчика в Chrome и зайдите в превью [дерева доступности](/a11y/a11y-tree/). В превью заметите у каждого `

` роль `paragraph`. + +![Дерево доступности в браузере на Chromium.](images/role-paragraph.png) + +Спецификация по ARIA разрешает задавать `role="paragraph"` для [`

`](/html/div/) или [``](/html/span/), но в этом нет смысла. [Скринридеры](/a11y/screenreaders/) всё равно не объявляют роль параграфа, когда зачитывают текст со страницы. + +```html + + + + Если вообще логику признают наукой о мышлении, то под этим понимают, что + это мышление составляет голую форму некоторого познания, что логика + абстрагируется от всякого содержания, и так называемая вторая составная + часть всякого познания, материя, должна быть дана откуда-то извне, что, + следовательно, логика, от которой эта материя совершенно независима, может + только указать формальные условия истинного познания, но не может содержать + самое реальную истину, не может даже быть путём к реальной истине, так как + именно суть истины, содержание, находится вне её. + +``` + +При этом пользователи скринридеров могут перемещаться по параграфам с помощью горячих клавиш. Например, в JAWS для навигации по параграфам используют клавишу P. + +Внутрь элемента с ролью `paragraph` можете вкладывать только строки текста. Если решите обмануть систему и вложить, например, список в параграф, валидатор вас отругает, а скринридеры зачитают всё содержимое параграфа как обычный текст. + +```html + + +

+ Куда идём мы с Пятачком? +

    +
  • Секрет.
  • +
  • Магазин.
  • +
  • Поликлиника.
  • +
  • В лес покричать в пустоту.
  • +
+

+``` + +Элементы с ролью `paragraph` сочетаются со всеми [глобальными ARIA-атрибутами](/a11y/aria-attrs/#globalnye-atributy), кроме скрытой подписи [`aria-label`](/a11y/aria-label/) и дополнительной видимой подписи [`aria-labelledby`](/a11y/aria-labelledby/). + +## Как понять -Элементам с ролью `paragraph` можно задавать все [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy), кроме [`aria-label`](/a11y/aria-label/) и [`aria-labelledby`](/a11y/aria-labelledby/). +WAI-ARIA, как и любая спецификация, не всегда даёт практические советы. Роль `paragraph` нужна скорее для разработчиков, которые внедряют поддержку HTML-элементов в браузеры, API (Application Programming Interface, Интерфейс программирования приложения) и вспомогательные технологии.