Доступные заголовки в React
Четкие и лаконичные заголовки страниц помогают пользователям с ограниченными возможностями понять содержание и общую цель веб-страницы. Заголовки определяют текущее местоположение, не требуя от пользователей чтения или интерпретации содержимого страницы. Без заголовков пользователи с ограниченными возможностями могут либо потерять из виду страницу, на которой они сейчас находятся, либо не понять цель страницы.
Что делает доступным заголовок
Доступный заголовок дает достаточно информации, которая четко и быстро определяет цель и содержание страницы. Добавление одного слова для описания страницы в качестве заголовка не соответствует потребностям человека с ограниченными возможностями.
Пример часто встречающегося названия - «Магазин». «Магазин» просто не дает достаточно общих сведений о цели страницы. Давайте рассмотрим несколько способов сделать заголовок более доступным:
- Плохо: Магазин
- Лучше: Магазин Марка - Магазин
- Лучшее / доступное: Магазин Марка - Магазин - Носки
Наиболее доступный заголовок содержит такие детали, как название сайта, цель страниц, которая заключается в совершении покупок, а затем конкретный товар, который они покупают.
Почему это проблема в React
В React заголовки страниц - это забытая часть разработки приложений. На это влияет несколько факторов. Во-первых, это заблуждение, что изменение заголовков страниц может быть очень трудным. Во-вторых, хотите верьте, хотите нет, из-за того, что React является одностраничным приложением, некоторые разработчики считают, что вы вообще не можете изменить заголовок страницы!
Оба эти утверждения просто не соответствуют действительности. В React есть множество различных способов реализовать эффективные и доступные заголовки страниц между маршрутами в вашем приложении!
Пакет response-document-title
Пакет response-document-title позволяет вам легко добавлять заголовок страницы к вашим компонентам страницы React с помощью настраиваемого тега HTML под названием «DocumentTitle», который обертывает ваш компонент страницы. После добавления просто используйте атрибут title в теге, и вы можете установить заголовок своих страниц.
Пример использования
render() {
return (
<DocumentTitle title="Mark's Store - Shop - Socks" >
<div>
<h1> Shop Socks </h1>
</div>
</DocumentTitle>
);
}
Declarative, nested, stateful, isomorphic document.title for React - gaearon/react-document-title
React Helmet
Пакет react-helmet будет управлять всеми вашими изменениями в заголовке документа. Хорошая новость этого пакета в том, что он позволяет использовать базовый HTML.
Теги для установки всего содержимого. В нем вы также можете использовать это, чтобы установить заголовок вашей страницы!
Пример использования
render () {
return (
<div className="main">
<Helmet>
<meta charSet="utf-8" />
<title>Mark's Store - Shop - Socks</title>
</Helmet>
...
</div>
);
}
A document head manager for React. Contribute to nfl/react-helmet development by creating an account on GitHub.
Жизненный цикл компонента
Используя жизненный цикл компонента Reacts, вы можете установить заголовок документа после рендеринга компонента с помощью document.title. Это отличный метод для команд, которые не хотят использовать стороннюю библиотеку для создания доступных заголовков.
Пример использования
class PageTitle extends Component {
render() {
return (
<div>
<h1> Shop Socks </h1>
</div>
);
}
componentDidMount() {
document.title = "Mark's Store - Shop - Socks";
}
}
В итоге
Написание доступных заголовков в React не так сложно, как предполагалось. Использование любого из вышеперечисленных методов для добавления заголовков к компонентам вашей страницы, а также обеспечение четкости, краткости и описания общих целей страниц сделает ваше приложение более доступным для всех!
