#Tratamiento de títulos de página con React Autora Original: Suzanne Aitchison
Traducción: Mariela Lincoman, Ana Melisa Soria y Florencia Olcese.
Post original: Page Titles
Para desarrolladores que quieran:
- Entender lo importante que es el título de la página para las personas usuarias de tecnología de apoyo
- Trabajar los títulos de páginas con la aplicación React
- Decidir cuáles deberían ser los títulos de su página
¿Por qué es importante el título de la página?
En pocas palabras, porque el título de la página es lo primero que la persona usuaria puede ver sin tener que entrar o navegar por el contenido de tu página. Para hacerte una idea de lo que esto implica para la accesibilidad, probá activando tu lector de pantalla ahora. Vas a notar que el título de esta página se anuncia de inmediato, junto con más información relevante del navegador. Si tenés otras pestañas abiertas, probá pasar de una a otra con la tecla Tab o con un clic y comprobá lo útiles que son los títulos a la hora de saber si la pestaña contiene lo que estás buscando.
Está claro que un título de página descriptivo y conciso es fundamental para revelar tu contenido a las personas usuarias de lector de pantalla.
Cómo ponerle título a tus páginas
El W3C tiene excelentes consejos sobre títulos de páginas, que están resumidos a continuación.
El título de cada página web debe:
- Identificar el tema de la página web
- Tener sentido cuando se lee fuera de contexto, por ejemplo con un lector de pantalla, en un mapa del sitio o en una lista de resultados de búsqueda
- Ser breve
También puede ser de ayuda que el título:
- Identifique el sitio u otro recurso al que pertenezca la página web
- Sea único dentro del sitio u otro recurso al que pertenezca la página web
A menudo, es mejor que la información más importante o específica aparezca primero. Por ejemplo, es mejor:
Tratamiento de títulos de páginas: Up Your A11y
que:
Up Your A11y: Tratamiento de títulos de páginas
Configuración del título en React
Dado que React produce aplicaciones de una sola página, el título de la página nunca cambia a menos que se modifique específicamente. Esto hace que quede poco claro el tema de tu página en la que están las personas usuarias, sin haber navegado ni leído tu contenido. Sin embargo, la buena noticia es que modificar el título de la página requiere de un mínimo esfuerzo con el componente React Document Title.
Para cada página en tu aplicación, encapsulá los componentes renderizados en el componente DocumentTitle, y pasá el título de la página, por ejemplo:
class TopicsPage extends Component {
render() {
return (
<DocumentTitle title="Temas: Up Your A11y">
<main>
<TopicsList />
</main>
</DocumentTitle>
);
}
}
ver original DocumentTitleExample.jsx alojado con ❤ en GitHub
Incluso podés vincular el título de la página a alguna propiedad en el estado de tu componente si es necesario, por ejemplo, si necesitás cargar el título de una página desde una API o desde otro lugar cuando se monta el componente.
class TopicsPage extends Component {
constructor(props) {
super(props);
this.state = {
pageTitle: 'Cargando temas: Up Your A11y'>,
}
}
componentDidMount() {
// Completá las tareas que te falten antes de ponerle título a la página
this.setState({ pageTitle: 'Temas: Up Your A11y' });
}
render() {
const { pageTitle } = this.state;
return (
<DocumentTitle title={pageTitle}>
<main>
<TopicsList />
</main>
</DocumentTitle>
);
}
}
ver original TopicsPage_statefulTitle.jsx alojado con ❤ en GitHub
Esta solución va a ayudar que muchas personas usuarias naveguen en tus aplicaciones, y también le dará un diseño y un aspecto profesionales a tus páginas web.