From 93bc1830db05e4393338def91453a9e26694edf1 Mon Sep 17 00:00:00 2001 From: Tatiana Fokina Date: Mon, 9 Oct 2023 17:06:19 +0400 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BA=D0=B8=20``,=20``,?= =?UTF-8?q?=20`
,=20
,=20
`=20(#4709)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Причёмывает демки `` * Дополняет текст `` * Причёсывает демки `` * Дополняет текст, меняет структуру `` * Дополняет текст `
`, `
`, `
` * Исправляет неточность * Меняет высоту демок * Уточняет дополнения про доступность * Принимает правки Co-authored-by: Alena Batitskaia --------- Co-authored-by: Alena Batitskaia --- html/abbr/demos/un/index.html | 56 ++++++++++++++------ html/abbr/demos/with-dfn/index.html | 57 +++++++++++++++------ html/abbr/index.md | 21 ++++++-- html/dfn/demos/basic/index.html | 53 ++++++++++++++----- html/dfn/demos/link/index.html | 79 +++++++++++++++++++++-------- html/dfn/index.md | 49 +++++++++++------- html/dl-dd-dt/index.md | 16 +++++- 7 files changed, 242 insertions(+), 89 deletions(-) diff --git a/html/abbr/demos/un/index.html b/html/abbr/demos/un/index.html index 9ebffdefae..4de8369713 100644 --- a/html/abbr/demos/un/index.html +++ b/html/abbr/demos/un/index.html @@ -1,40 +1,64 @@ - ООН — <abbr> — Дока + Аббревиатура ООН — <abbr> — Дока - + -

- ООН — международная организация, созданная для поддержания и укрепления международного мира и безопасности, а также развития сотрудничества между государствами -

+
+

+ ООН — международная организация, созданная для поддержания и укрепления международного мира и безопасности, а также развития сотрудничества между государствами. +

+
diff --git a/html/abbr/demos/with-dfn/index.html b/html/abbr/demos/with-dfn/index.html index 67a6140788..1bf7a27e15 100644 --- a/html/abbr/demos/with-dfn/index.html +++ b/html/abbr/demos/with-dfn/index.html @@ -6,34 +6,61 @@ - + -

- - Организация объединённых наций (ООН) — международная организация, созданная для поддержания и укрепления международного мира и безопасности, а также развития сотрудничества между государствами - -

+
+

+ + Организация объединённых наций (ООН) — международная организация, созданная для поддержания и укрепления международного мира и безопасности, а также развития сотрудничества между государствами. + +

+
diff --git a/html/abbr/index.md b/html/abbr/index.md index 40c7864ac3..05fe42b67e 100644 --- a/html/abbr/index.md +++ b/html/abbr/index.md @@ -3,8 +3,11 @@ title: "``" description: "Правильный способ расшифровать аббревиатуры." authors: - xpleesid +contributors: + - tatianafokina keywords: - акроним + - a11y related: - html/dl-dd-dt - html/global-attrs @@ -19,7 +22,7 @@ tags: ## Пример -Тегу `` можно задать атрибут `title`, где будет раскрыта аббревиатура. В `title` допускается писать только расшифровку аббревиатуры и ничего больше. Также можно использовать [глобальные атрибуты](/html/global-attrs/). +Тегу `` можно задать [атрибут `title`](/html/global-attrs/#title), где будет раскрыта аббревиатура. В `title` допускается писать только расшифровку аббревиатуры и ничего больше. Также можно использовать другие [глобальные атрибуты](/html/global-attrs/). Некоторые браузеры подчёркивают текст внутри `` пунктирной линией, а при наведении выводят всплывающую подсказку, в которой будет содержимое атрибута `title`. Но не все 🤔 @@ -29,11 +32,11 @@ tags: — международная организация, созданная для поддержания и укрепления международного мира и безопасности, а также развития - сотрудничества между государствами + сотрудничества между государствами.

``` - + ## Как пишется @@ -46,9 +49,17 @@ tags: (ООН) — международная организация, созданная для поддержания и укрепления международного мира и безопасности, - а также развития сотрудничества между государствами + а также развития сотрудничества между государствами.

``` - + + +### Доступность + +Атрибут `title` для `` полезен с точки зрения вёрстки, но абсолютно недоступен для пользователей клавиатуры и мобильных устройств. Подсказка из `title` не всплывает при клавиатурном фокусе и тапе. + +Также у `title` есть проблемы с точки зрения взаимодействия пользователей мышек. Не всем понятно, что при наведении на слово с пунктирной линией всплывёт подсказка. К тому же легко забыть стилизовать аббревиатуры так, чтобы они не были похожи на ссылки. + +Если очень нужна всплывающая подсказка для аббревиатур, лучше сделать кастомный тултип с [`ролью tooltip`](/a11y/role-tooltip/). diff --git a/html/dfn/demos/basic/index.html b/html/dfn/demos/basic/index.html index 3b69dd3715..c1d78cf79e 100644 --- a/html/dfn/demos/basic/index.html +++ b/html/dfn/demos/basic/index.html @@ -6,34 +6,59 @@ - + -

- ЧАВО — сокращённая форма фразы «Часто задаваемые вопросы». Используется на русскоязычных сайтах в качестве аналога английской аббревиатуры FAQ -

+
+

+ ЧАВО — сокращённая форма фразы «Часто задаваемые вопросы». Используется на русскоязычных сайтах в качестве аналога английской аббревиатуры FAQ. +

+
diff --git a/html/dfn/demos/link/index.html b/html/dfn/demos/link/index.html index 356314f7ae..2b5f6914cb 100644 --- a/html/dfn/demos/link/index.html +++ b/html/dfn/demos/link/index.html @@ -6,42 +6,81 @@ - + -

- ЧАВО — сокращённая форма фразы «Часто задаваемые вопросы». -

-

- Перед обращением в техподдержку убедитесь, что вы прочитали раздел ЧАВО и там нет решения Вашей проблемы. -

+
+

+ ЧАВО — сокращённая форма фразы «Часто задаваемые вопросы». +

+

+ Перед обращением в техподдержку убедитесь, что вы прочитали раздел ЧАВО и там нет решения вашей проблемы. +

+
diff --git a/html/dfn/index.md b/html/dfn/index.md index 0d120d9f4e..66f2ced217 100644 --- a/html/dfn/index.md +++ b/html/dfn/index.md @@ -3,12 +3,17 @@ title: "``" description: "Расшифровываем термины и сокращения." authors: - xpleesid +contributors: + - tatianafokina keywords: - определение - термин + - screen reader + - ридер + - a11y related: + - a11y/role-term - html/abbr - - css/text-decoration - html/dl-dd-dt tags: - doka @@ -18,36 +23,28 @@ tags: Тег `` используется для вывода терминов или расшифровки сокращений. -## Как пишется +У `` есть встроенная [роль `term`](/a11y/role-term/). [Скринридеры](/a11y/screenreaders/) не рассказывают о роли, но зачитывают саму аббревиатуру и её расшифровку из `title`. + +## Пример ```html

ЧАВО — сокращённая форма фразы «Часто задаваемые вопросы». Используется на русскоязычных сайтах в качестве аналога - английской аббревиатуры FAQ + английской аббревиатуры FAQ.

``` - + -## Как понять +## Как пишется В тег `` оборачиваются сами термины, а их определения должны содержаться в ближайшем родительском теге [`

`](/html/p/), [`

`](/html/dl-dd-dt/) или [`
`](/html/section/). -По умолчанию браузеры применяют к тексту внутри `` курсивное начертание с помощью `font-style: italic;`. - -## Атрибуты - -Помимо [глобальных атрибутов](/html/global-attrs/) у `` есть атрибут `title`. Браузер обрабатывает этот атрибут по следующему алгоритму: - -- Если у элемента `` есть атрибут `title`, то значение атрибута — это и есть термин, который будет раскрываться; -- Если атрибута `title` нет, но у `` есть ровно один вложенный элемент — элемент `` с атрибутом `title` — то термином будет значение `title` тега ``; -- В любом другом случае термином считается текст внутри тега ``; - -## Пример +По умолчанию браузеры применяют к тексту внутри `` курсивное начертание с помощью [`font-style: italic`](/css/font-style/). -`` часто комбинируется с тегом `` для раскрытия смысла аббревиатуры. В примере ниже мы оборачиваем «ЧАВО» в ``, а при первом появлении нового термина добавляем ``, указывая более точное определение. Для ссылок на это определение можно использовать тег [``](/html/a/). +`` часто комбинируется с [тегом ``](/html/abbr/) для раскрытия смысла аббревиатуры. В примере ниже оборачиваем «ЧАВО» в ``, а при первом появлении нового термина добавляем ``, указывая более точное определение. Для ссылок на это определение можно использовать тег [``](/html/a/). ```html

@@ -62,4 +59,20 @@ tags:

``` - + + +### Атрибуты + +Помимо [глобальных атрибутов](/html/global-attrs/) у `` есть [атрибут `title`](/html/global-attrs/#title). Браузер обрабатывает этот атрибут по следующему алгоритму: + +- если у элемента `` есть атрибут `title`, то значение атрибута — это и есть термин, который будет раскрываться; +- если атрибута `title` нет, но у `` есть ровно один вложенный элемент — `` с атрибутом `title` — то термином будет значение `title` тега ``; +- в любом другом случае термином считается текст внутри тега ``. + +### Доступность + +Атрибут `title` для `` полезен с точки зрения вёрстки, но абсолютно недоступен для пользователей клавиатуры и мобильных устройств. Подсказка из `title` не всплывает при клавиатурном фокусе и тапе. + +Также у `title` есть проблемы с точки зрения взаимодействия пользователей мышек. Не всем понятно, что при наведении на слово с пунктирной линией всплывёт подсказка. К тому же легко забыть стилизовать аббревиатуры так, чтобы они не были похожи на ссылки. + +Если очень нужна всплывающая подсказка для определений, лучше сделать кастомный тултип с [`ролью tooltip`](/a11y/role-tooltip/). diff --git a/html/dl-dd-dt/index.md b/html/dl-dd-dt/index.md index dce1308abb..41535bb6cb 100644 --- a/html/dl-dd-dt/index.md +++ b/html/dl-dd-dt/index.md @@ -5,11 +5,17 @@ authors: - ezhkov contributors: - skorobaeus + - tatianafokina +keywords: + - список терминов + - screen reader + - ридер + - a11y editors: - tachisis related: + - a11y/role-definition - html/abbr - - css/after - html/ul tags: - doka @@ -19,6 +25,8 @@ tags: Теги `
`, `
` и `
` используются для вёрстки списка описаний («dl» означает «description list»). +У тега `
` есть встроенная [роль `list`](/a11y/role-list/), у `
` — [`term`](/a11y/role-term/), а у `
` — [`definition`](/a11y/role-definition/). + ## Пример ```html @@ -100,6 +108,12 @@ tags:
``` +## Доступность + +Скринридеры взаимодействуют с `
` по-разному, и это не баг, а фича. Например, есть разница в том, как они считают количество вложенных терминов `
`, и как пользователя перемещаются между всеми элементами внутри списка. + +Не задавайте тегу `
` явную роль `term`, чтобы исправить странности. Это плохо влияет на мобильный и десктопный VoiceOver. + ## Подсказки 💡 При вёрстке перечня метаданных (пар «ключ-значение») удобно разделитель вносить в псевдоэлемент, а не писать текстом рядом с каждым ключом: