{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"cu87j"},{"data":{"image":{"id":"5c6da2d20708ca00c1d47a37"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"79je7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":332,"offset":0,"style":"ITALIC"},{"length":10,"offset":0,"style":"BOLD"}],"text":"От автора: элементы figcaption и figure в HTML 5 предназначены для создания значимой структуры разметки, что обеспечивает описательную метку для части контента, которая имеет отношение к текущему документу, но не жизненно важна для его понимания. Чтобы получить более конкретную информацию, давайте рассмотрим эти элементы отдельно.","type":"unstyled","key":"2s538"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент figure","type":"header-three","key":"9krs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Часто рассматриваемый как элемент для изображений или диаграмм, figure может содержать любой контент (фрагменты кода, цитаты, аудио, видео и т. д.), который выделяется в основном содержимом документа, но не является критически необходимой информацией. Для figure должно соблюдаться правило — мы можем полностью удалить его из потока документа без какого — либо ущерба для понимания основного содержимого.","type":"unstyled","key":"d8k8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, документ, в котором описывается скорость полета ласточки, может содержать раздел, объясняющий различия между южноафриканской и европейской ласточками. Сопровождая этот контента, figure может демонстрировать параллельное сравнение этих птиц, чтобы дополнить информацию, изложенную в документе.","type":"unstyled","key":"428la"},{"data":{"image":{"id":"5c6da2d237874700af707f36"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"34hc5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот мета-пример рисунка и подписи используется со ссылкой на предшествующий контент. Если бы я не включил его, вся информация до этого момента все равно описывала бы цель figure.","type":"unstyled","key":"1v0dg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"figure может использоваться с или без figcaption. Однако без заголовка или альтернативного средства предоставления доступного имени (например aria-label) figure может не предоставлять большой ценности, передавая только семантику. В некоторых случаях он может вообще не передавать никакой семантики, если ему не задано доступное имя.","type":"unstyled","key":"59puo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент figcaption","type":"header-three","key":"6mss8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"figcaption предоставляет заголовок или краткое изложение контента, который содержит figure. Значение figcaption должно быть доступным именем для элемента figure, если вместо него для figure не используется атрибут aria-label или aria-labelled.","type":"unstyled","key":"7tr2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"figcaption может быть помещен до или после первичного содержимого figure, однако он должен быть прямым потомком элемента figure. Допустимые шаблоны:","type":"unstyled","key":"d7be7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

...

\n \n\n\n

\n \n

...

\n\n\n

\n ...\n

\n \n","type":"unstyled","key":"79u0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Недопустимые шаблоны:","type":"unstyled","key":"7sfn1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

...

\n \n\n\n

\n \n

...

\n","type":"unstyled","key":"opk6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"figcaption может содержать контент потока, который классифицирует большинство элементов, разрешенных как дочерние элементы элемента body. Но, поскольку элемент предназначен для обеспечения подписи к содержимому figure, обычно предпочтителен краткий описательный текст. figcaption не должен повторять содержимое figure или другой контент в первичном документе.","type":"unstyled","key":"enkjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"figcaption не является заменой текста alt","type":"header-three","key":"etbvc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что касается изображений, используемых внутри figure, одно из самых больших недоразумений при использовании figcaption заключается в том, что он используется вместо альтернативного текста изображения. Такая практика описана в HTML 5.2 как некорректная попытка донести значимую информацию, но только тогда, когда изображения публикуются без возможности автора предоставить соответствующий текст alt.","type":"unstyled","key":"2jma0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":190,"offset":25,"style":"ITALIC"}],"text":"Из руководства HTML 5.2: Такие случаи должны быть сведены к абсолютному минимуму. Если у автора есть хоть малейшая возможность предоставить реальный альтернативный текст, то было бы недопустимо опускать атрибут alt.","type":"unstyled","key":"elo5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"figcaption предназначен для предоставления подписи или резюме к figure, привязки его к документу, в котором содержится figure, или передачи дополнительной информации, которая может быть неочевидна при просмотре самого figure.","type":"unstyled","key":"5js01"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если для изображения задано пустое значение alt, тогда figcaption фактически ничего не описывает. И это не имеет особого смысла, не так ли? Давайте рассмотрим figure, содержащий фрагмент кода Sass:","type":"unstyled","key":"54jti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n    $align-list: center, left, right;\n\n    @each $align in $align-list {\n      .txt-#{$align} {\n        text-align: $align;\n      }\n    }","type":"unstyled","key":"op21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"This use of Sass’s @each control directive will compile to\nthree CSS classes; .txt-center, .txt-left, and .txt-right.","type":"unstyled","key":"933dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По сравнению с изображениями с пустыми alt внутри figure, это все равно, что вставить фрагмент кода aria-hidden=\"true\". Это лишит возможности программы чтения с экрана и другие вспомогательные технологии анализировать содержимое, к которому относится заголовок. Однако это, к сожалению, отражение того, что обычно происходит с изображениями в figure.","type":"unstyled","key":"boc8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«Но не очевидно ли, что заголовок должен быть текстом alt для изображения?», - подумаете вы. Есть два нюанса, относительно этого предположения:","type":"unstyled","key":"7rd02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-первых, что это за изображение? Когда изображение имеет пустой alt, оно не будет объявляться и не будет обнаружено при навигации с помощью программы чтения с экрана. Если не использовать alt для изображении, некоторые программы чтения с экрана сообщали бы имя файла изображения, но не все (программы чтения с экрана, такие как JAWS, имеют параметры для настройки этого поведения. Но поведение по умолчанию для изображений, подобных этим - игнорировать).","type":"unstyled","key":"eh6ro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во-вторых, alt предназначен для передачи важной информации, которую представляет изображение. A figcaption должен предоставлять контекст для связи figure (изображения) с основным документом или для выдачи определенной части информации, на которую следует обратить внимание. Если а figcaption заменяет собой alt, то это создает дублирующую информацию для зрячих пользователей.","type":"unstyled","key":"3qjbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существуют и другие проблемы связанные с неправильным использованием figcaption вместо alt изображения. Но чтобы выявить эти проблемы, нам нужно понять, как программы чтения с экрана распознают figure.","type":"unstyled","key":"f1vr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"figure и программы для чтения с экрана","type":"header-three","key":"b9hfs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда у нас есть представление о том, как следует использовать figure и их подписи, давайте рассмотрим, как эти элементы распознаются программами чтения с экрана?","type":"unstyled","key":"8boj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В идеале figure должен объявлять роль и содержимое figcaption, как доступное имя. Человек должен иметь возможность переходить в figure и независимо взаимодействовать с содержимым figure и figcaption. Для браузеров, которые не полностью поддерживают figure, таких как Internet Explorer 11, ARIArole=\"figure\" и aria-label могут использоваться для увеличения вероятности того, что разметка будет распознаваться некоторыми программами чтения с экрана.","type":"unstyled","key":"3fupm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот обзор того, как протестированные программы чтения с экрана с настройками по умолчанию предоставляют эту информацию (или не предоставляют) в разных браузерах:","type":"unstyled","key":"1ijvd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JAWS 18, 2018 и 2019","type":"header-three","key":"1f990"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JAWS имеет лучшую поддержку для объявления собственно figure и их подписей, хотя поддержка не является совершенной или постоянной в зависимости от браузера и настроек JAWS.","type":"unstyled","key":"7bqbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"IE11 требует использования role=\"figure\" и aria-label или aria-labelled, указывающих на figcaption, чтобы воспроизвести нативные объявления. Неудивительно, что IE11 не поддерживает нативный элемент, так как рейтинг браузера IE11 в HTML5 Accessibility не улучшается. Но, по крайней мере, ARIA aria может предоставить семантику.","type":"unstyled","key":"f87bn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Edge не будет объявлять о присутствии роли figure вообще, независимо от того, используется ARIA или нет. Скорее всего, это изменится, когда Edge переключится на Chromium.","type":"unstyled","key":"dbqqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Chrome и Firefox предлагают аналогичную поддержку, однако JAWS (с настройками по умолчанию) + Chrome будет полностью игнорировать figure (включая содержимое его figcaption), если изображение имеет пустой текст alt или атрибут alt отсутствует.","type":"unstyled","key":"a6v0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это означает, что те подписи, которые сопровождают изображения в различных статьях Medium, полностью игнорируются JAWS в паре с Chrome. Если настройки JAWS обновляются для объявления всех изображений (например, изображений, в которых не указан атрибут или значение alt), то JAWS с Chrome должен объявлять эти подписи к рисункам.","type":"unstyled","key":"fbqdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JAWS с Firefox, в отличие от Chrome, все равно будет объявлять figure и figcaption, если изображение содержит пустой alt или alt отсутствует, но, так как изображение будет полностью игнорироваться, человек с помощью программы чтения с экрана просто сделает вывод, что основным содержимым этого figure было изображение.","type":"unstyled","key":"1bnii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"NVDA","type":"header-three","key":"c2898"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При тестировании NVDA версии 2018.4.1 с IE11, Edge, Firefox 64.0.2 и Chrome 71 figure не определялся. Самым близким признаком того, что что-то здесь может быть, было то, что NVDA + IE11 объявлял «редактировать» до объявления изображения или содержимого figcaption (хотя это «редактировать» не имело никакого смысла…). Шаблоны тестирования с role=\"figure\" не изменили это поведение. Содержимое figure по-прежнему было доступно, но связь содержимого и подписи не передавалась.","type":"unstyled","key":"6q9d9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"VoiceOver (macOS)","type":"header-three","key":"ak9ng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тестирование проводилось с Safari (12.0.2) и Chrome (71.0.3578.98) на macOS 10.14.2, с VoiceOver 9.","type":"unstyled","key":"5u42f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Safari","type":"header-three","key":"adhdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При тестировании с Safari, роль figure объявлялась. Роль figure не объявлялась если он не имеет доступного имени (например, нет figcaption, aria-label и т.д.). VoiceOver может переходить в figure и взаимодействовать с основным контентом figure и figcaption отдельно.","type":"unstyled","key":"9cet0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Chrome","type":"header-three","key":"38lj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя инспектор доступности Chrome отмечает, что семантика figure раскрывается, а доступное имя обеспечивается его заголовком, VoiceOver не обнаруживает и не объявляет о присутствии figure, как это происходит в Safari, если figure специально не содержит aria-label. Использование aria-describedby ИЛИ aria-labelledby для figure, чтобы указать на figcaption не выявляет figureв для VoiceOver. Для правильной передачи данных в VoiceOver с помощью Chrome потребуется следующая разметка:","type":"unstyled","key":"2sabd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n  \n  \n    Figcaption content here.\n  
\n
","type":"unstyled","key":"orji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При добавлении элемента role=\"figure\" к элементу figure или другому элементу вместо figure, все равно требуется aria-label, чтобы сделать роль доступной для VoiceOver с Chrome.","type":"unstyled","key":"f4uqb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"VoiceOver (iOS 12.1.2)","type":"header-three","key":"8m0jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При тестировании VoiceOver как с Safari, так и с Chrome, не объявлялись ни figure, ни связь содержимого figure с его заголовком. И шаблон figure, и role=\"figure\" дали одинаковые результаты.","type":"unstyled","key":"8q02f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"TalkBack (7.2 на Android 8.1)","type":"header-three","key":"ct965"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При тестировании как с Chrome (70), так и с Firefox (63.0.2) не объявлялись ни figure, ни связь содержимого figure с его заголовком. И шаблон figure, и role=\"figure\" дали одинаковые результаты.","type":"unstyled","key":"1gtj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Narrator & Edge 42 / EdgeHTML 17","type":"header-three","key":"c8rj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Narrator вообще не объявляет роли figure. Тем не менее, нативный элемент role=\"figure\" действительно влияет на способ объявления содержимого figure. Когда figure имеет доступное имя, содержимое figure (например, текст alt изображения) и доступное имя figure (содержимое figcaption или aria-label) будут объявлены вместе. Если изображение имеет пустой alt, figure и его figcaption полностью игнорируют.","type":"unstyled","key":"9ccd8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"4f68m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основываясь на предполагаемых вариантах использования для figure и их подписей, а также на текущей поддержке программ чтения с экрана для этих элементов, следует рассмотреть следующий шаблон разметки, если вы хотите, чтобы семантика передавалась как можно более широкой аудитории:","type":"unstyled","key":"13pmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n  \n  \n    Caption for the figure.\n  
\n
\n\n","type":"unstyled","key":"c0457"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот шаблон гарантирует, что следующие пары будут объявлять роль figure и его заголовок:","type":"unstyled","key":"5k24h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4sl15"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JAWS с Chrome, Firefox и IE11.","type":"unstyled","key":"ad9s5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"macOS VoiceOver с Safari и Chrome.","type":"unstyled","key":"e5e16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Edge с narrator будут создавать связь, но не объявлять роль figure.","type":"unstyled","key":"f1hut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В настоящее время мобильные программы чтения с экрана не будут объявлять figure, кроме случаев использования Edge с Narrator или любого браузера в сочетании с NVDA. Но пусть это не удерживает вас от использования элементов в соответствии с их спецификациями.","type":"unstyled","key":"7aopo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С переходом Edge на Chromium, поддержка, скорее всего, в ближайшем будущем улучшится. И хотя NVDA и мобильные программы чтения с экрана не объявляют семантику, контент остается доступным. Регистрация ошибок - лучшее, что мы можем сделать на данный момент, чтобы добиться изменений в этих пробелах.","type":"unstyled","key":"e5u0c"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":26,"offset":10}],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Источник: https://www.scottohara.me/","type":"unstyled","key":"9lod2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"TUfmwCK8QzRmqj1nQFAK"}],"entityMap":{"0":{"data":{"href":"https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html","url":"https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}