El jardinero en casa – Tienda – Tijeras de podar modelo Acme<\/em>.<\/p>\nCon esta informaci\u00f3n una persona puede comprender d\u00f3nde est\u00e1 y qu\u00e9 contenido principal se va a encontrar en la p\u00e1gina.<\/p>\n
Declaraci\u00f3n del t\u00edtulo de p\u00e1gina<\/h2>\n
La declaraci\u00f3n del t\u00edtulo de p\u00e1gina se realiza dentro del fichero HTML en la cabecera de la p\u00e1gina (elemento <head><\/head>) y se utiliza el tag <title>.<\/p>\n
<!DOCTYPE html>
<html lang=\"es\">
\u00a0 <head>
\u00a0 \u00a0 <meta charset=\"utf-8\" \/>
\u00a0 \u00a0 <title>El t\u00edtulo de la p\u00e1gina<\/title>
\u00a0 <\/head>
\u00a0 <body><\/body>
<\/html><\/pre>\nEsta declaraci\u00f3n dentro del c\u00f3digo HTML es apropiada cuando utilizamos tecnolog\u00edas en las que tenemos total control del c\u00f3digo HTML que se env\u00eda a los navegadores web de los usuarios.<\/p>\n
En el caso de utilizar tecnolog\u00edas como las utilizadas en las Single Page Applications como React o Angular debemos hacer uso de Javascript para actualizar el valor del t\u00edtulo de la p\u00e1gina.<\/p>\n
La propiedad title<\/strong> del objeto document<\/strong> nos proporciona esta posibilidad de actualizar el t\u00edtulo de nuestra p\u00e1gina. Por ejemplo la siguiente l\u00ednea en javascript actualizar\u00e1 el t\u00edtulo de la p\u00e1gina:<\/p>\nfunction setTitlePageWithProduct(productName) {
\u00a0 document.title = \"El jardinero en casa - Tienda - \" + productName
}<\/pre>\nEsta funci\u00f3n se podr\u00eda utilizar cada vez que se vaya a renderizar el componente que muestra la informaci\u00f3n del producto de la tienda.<\/p>\n
Con toda esta informaci\u00f3n ya no hay excusas para que los desarrolladores no proporcionen buenos y accesibles t\u00edtulos en sus p\u00e1ginas web.<\/p>\n","protected":false},"excerpt":{"rendered":"
Los desarrolladores web y las herramientas de desarrollo van incorporando poco a poco elementos que van reduciendo la complejidad y la severidad de las barreras de accesibilidad presentes en las p\u00e1ginas de nueva creaci\u00f3n. Pero estos esfuerzos se centran principalmente en las alternativas a im\u00e1genes, contrastes de color y, a veces, la estructura sem\u00e1ntica de … <\/p>\n
Continuar leyendo \u00abAccesibilidad en los t\u00edtulos de p\u00e1gina\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,334,6],"tags":[11,327,437,94],"class_list":["post-1056","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-desarrollo","category-javascript","category-programacion","tag-accesibilidad-2","tag-javascript","tag-wcag","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1056"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1056\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}