Удалить "роль = баннер" из HTML компонента реакции? - PullRequest
0 голосов
/ 13 января 2020

Я получаю ошибку доступности, которая говорит мне, что "ориентир баннера содержится в другом ориентире". В моем случае это в заголовке, который выглядит примерно так:

<header role="banner" class="pf-c-page__header">

Однако этот заголовок визуализируется из импортированного компонента реакции, называемого PageHeader, для которого метод возврата начинается так:

return (
    <header role="banner">
    ...

Можно ли остановить отображение баннера, просто изменив JavaScript, где я использую компонент? Я не думаю, что могу изменить фактический компонент.

например, могу ли я добавить сюда что-нибудь, что уберет атрибут "role = banner" HTML?

    return (
      <PageHeader
      />

Ответы [ 2 ]

0 голосов
/ 14 января 2020

Куда вы кладете этот заголовок?

Если вы поместите его в другой ориентир (например, <nav> или <main>), это объяснит ошибку. Вам разрешено помещать <header> внутри <main>, но вы должны использовать role='banner' только для контента всего сайта, а <main> всегда будет содержать спецификацию c для данной страницы.

Или, возможно, сам заголовок рассматривается как ориентир? Обычно неправильно добавлять атрибут роли ориентира в элемент semanti c. И <header> при определенных обстоятельствах рассматривается как ключевая роль banner, поскольку W3 упоминает :

Вспомогательная технология может передавать пользователям семантику элемента заголовка, когда она относится ко всей странице. Эта информация может дать подсказку относительно типа контента. Например, роль элемента , который в данном случае является «баннером» , может быть объявлена ​​программным обеспечением для чтения с экрана, когда пользователь переходит к элементу заголовка, который ограничен элементом body . Пользовательские агенты также могут предоставлять методы для перехода к элементу заголовка, ограниченному элементом body.

(выделение мое)

Итак, семантика <header> может совпадать с семантикой роли banner. Поэтому, если ваша <header> относится к странице (а не к разделу на странице), role=banner не требуется и должна быть опущена.

И наоборот, если заголовок ограничен разделом на странице, он (по определению) не является "контентом всего сайта", и поэтому роль banner не должна быть или.

Так что просто некорректно иметь role=banner на любом <header> элементе. Вы можете связаться с автором компонента и указать на это!

Вы можете удалить атрибуты на лету с помощью removeAttribute - есть некоторые предостережения, использующие этот метод с Inte rnet Explorer - где вам, возможно, придется установить атрибут "" перед его удалением.

Однако в целом безопаснее не связываться с атрибутами роли после их установки. Вспомогательные технологии могут запутаться, если вы это сделаете. Может существовать способ удалить атрибут из элемента в реагировать перед рендерингом. Это было бы лучше.

Если вы все еще хотите иметь go при удалении атрибута с javaScript после рендеринга элемента, я предлагаю вам сделать это как можно скорее после рендеринга и протестировать правильно для всех целевых платформ и вспомогательных технологий.

Еще лучше, свяжитесь с автором компонента и спросите его, почему они всегда ставят эту роль в первую очередь.

0 голосов
/ 14 января 2020

В спецификации указано для role = "banner" , что вы можете иметь несколько banner элементов, если вы вложили document (или application) подразделов:

Поскольку элементы document и application могут быть вложены в DOM, они могут иметь несколько элементов banner в качестве потомков DOM, предполагая, что каждый из них связан с различными узлами document, либо с помощью вложенности DOM (например, document в document) или с помощью атрибута aria-owns.

Таким образом, вы можете вставить свой реагирующий компонент во вложенный тег document

<body>
 <header role="banner" class="pf-c-page__header">...</header>
 <div role="document">
    <header role="banner">...</header>
 </div>
</body>

Это не означает, что инструмент, который вы используете для проверки вашей доступности, будет правильно с ним работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...