{"id":33997,"date":"2024-08-29T09:25:10","date_gmt":"2024-08-29T07:25:10","guid":{"rendered":"https:\/\/www.mtp.es\/?p=33997"},"modified":"2024-08-29T09:25:10","modified_gmt":"2024-08-29T07:25:10","slug":"errores-accesibilidad-deben-evitarse-al-desarrollar-spa","status":"publish","type":"post","link":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/","title":{"rendered":"Errores de accesibilidad que deben evitarse al desarrollar una SPA"},"content":{"rendered":"

Una SPA (Single Page Application<\/em>) <\/strong>es un tipo de aplicaci\u00f3n web que se caracteriza por cargar una sola p\u00e1gina HTML inicial y luego actualizar su contenido de manera din\u00e1mica sin necesidad de cargar p\u00e1ginas adicionales desde el servidor, como sucede en las MPA (Multi Page Application<\/em>).<\/p>\n

En lugar de realizar una solicitud completa al servidor cada vez que el usuario navega a una nueva secci\u00f3n o realiza una acci\u00f3n, una SPA utiliza tecnolog\u00edas como JavaScript para cargar y mostrar nuevos datos de manera fluida y r\u00e1pida en la misma p\u00e1gina, proporcionando una experiencia de usuario m\u00e1s \u00e1gil<\/strong> y similar a la de una aplicaci\u00f3n de escritorio. Debido a esto, este tipo de p\u00e1ginas webs ofrecen varias ventajas<\/strong>, tanto en el desarrollo como en experiencia de usuario.<\/p>\n

Desgraciadamente, tambi\u00e9n hay alg\u00fan inconveniente; es muy f\u00e1cil cometer errores al desarrollar una SPA<\/strong> y generar barreras de accesibilidad que afectan a los usuarios que utilizan un lector de pantallas.<\/p>\n

Las barreras m\u00e1s comunes de este tipo de sitios son la falta de cambio de t\u00edtulos, la falta de informaci\u00f3n al actualizar contenidos y la falta de control del foco de teclado. Las desglosaremos a continuaci\u00f3n.<\/p>\n

Falta de cambio de t\u00edtulos<\/strong><\/h2>\n

En un sitio web tradicional de m\u00faltiples p\u00e1ginas (MPA), cada p\u00e1gina que se visualiza tiene su propio t\u00edtulo, el cual se encuentra especificado en la etiqueta <title> dentro del <head>. Por otro lado, como ya hemos visto, en una Aplicaci\u00f3n de P\u00e1gina \u00danica (SPA), solo existe una p\u00e1gina inicial que cambia su contenido de forma din\u00e1mica sin cargar nuevas p\u00e1ginas desde el servidor.
\nPor esta raz\u00f3n, es esencial que el t\u00edtulo de la p\u00e1gina se actualice autom\u00e1ticamente<\/strong> para reflejar el contenido actual en la etiqueta <title> del <head>. De lo contrario, los usuarios que hagan uso de lectores de pantallas pueden tener problemas para saber donde se encuentran con exactitud.<\/p>\n

Falta de informaci\u00f3n al actualizar contenidos<\/strong><\/h2>\n

Cuando se realiza una acci\u00f3n que modifica el contenido en una MPA, los lectores de pantalla tienen la capacidad de notificar al usuario que se ha cargado nuevo contenido, ya que generalmente esto implica un cambio en la URL y el navegador puede informar sobre el inicio y la finalizaci\u00f3n del proceso de carga.<\/p>\n

Sin embargo, en el caso de una SPA, como hemos discutido previamente, no se produce una carga de una nueva URL. Por lo tanto, la respuesta que experimenta el usuario que utiliza tecnolog\u00edas de asistencia es un completo silencio, lo que puede generar la impresi\u00f3n err\u00f3nea de que no ha ocurrido ning\u00fan cambio y que la p\u00e1gina web no funciona correctamente. El usuario de lector de pantalla debe explorar la web de forma activa para detectar los cambios que se han realizado.<\/p>\n

Este problema puede solucionarse incluyendo mensajes de estado<\/strong> y marc\u00e1ndolos correctamente con los atributos aria correspondientes. Por ejemplo, podr\u00eda utilizarse un <div aria-live=”polite” id=”estadocarga”><\/div> en el cu\u00e1l insertemos los mensajes o animaciones de carga. De esta forma, cuando el contenido de este <div> cambie los lectores de pantallas leer\u00e1n dichos cambios.
\nNo basta con anunciar que el contenido ha cambiado. Debe anunciarse tambi\u00e9n que el contenido se est\u00e1 modificando<\/strong>. Por ejemplo:<\/p>\n

– El usuario pulsa un bot\u00f3n de enviar.<\/p>\n

– El formulario comienza a realizar con los datos las acciones requeridas.<\/p>\n

– El contenido del div con id \u201cestadocarga\u201d cambia a <p>Enviando datos.<\/p><\/p>\n

– La p\u00e1gina se actualiza.<\/p>\n

– El contenido del div con id \u201cestadocarga\u201d cambia a <p>El contenido se ha actualizado<\/p> o un mensaje similar que indique el fin del proceso de carga.<\/p>\n

Falta de control del foco de teclado<\/strong><\/h2>\n

Cuando se actualiza el contenido de una SPA es probable que el foco de teclado<\/strong> quede perdido por la web. Esto puede ser debido a varios factores, como la desaparici\u00f3n del elemento en el que se ha pulsado para realizar una acci\u00f3n. El cambio del foco del teclado deber\u00eda adaptarse al tipo de cambio de contenido.<\/strong>
\nSi el usuario pulsa en una opci\u00f3n del men\u00fa de la SPA, el foco deber\u00e1 moverse al primer enlace de la etiqueta <body>, que deber\u00eda ser el salto al contenido. De esta forma, el usuario de teclado no se perder\u00e1 por la web y podr\u00e1 navegar eficientemente.<\/p>\n

Si el usuario pulsa un elemento de interacci\u00f3n que cambia parte del contenido, el foco deber\u00eda permanecer en el elemento que ha disparado esta acci\u00f3n, al menos que el elemento disparador desaparezca, en cuyo caso deber\u00eda moverse, como en el caso anterior, al enlace de salto al contenido.<\/p>\n

Teniendo en cuenta estas tres barreras principales, podremos mejorar bastante la accesibilidad de las SPA<\/strong>. Por supuesto, no podemos olvidarnos de los criterios de las WCAG, pues las p\u00e1ginas que conforman una SPA deben cumplirlos igualmente si queremos que nuestro sitio web sea accesible para los distintos perfiles de usuario que navegan por la red.<\/p>\n

MTP, con sus especialistas en accesibilidad de web y apps<\/strong><\/a>, puede ayudar a solucionar estos posibles problemas en los desarrollos. MTP tambi\u00e9n cuenta con un servicio de certificaci\u00f3n de accesibilidad, DInclusive<\/strong><\/a>, con el que se detecta y acredita el diferente nivel de accesibilidad que puede tener un servicio digital.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Explicamos en este post qu\u00e9 es una SPA (Single Page Application) y las ventajas que tiene, pero tambi\u00e9n advertimos de algunos problemas que para la accesibilidad pueden surgir en su desarrollo. <\/p>\n","protected":false},"author":9,"featured_media":33995,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[204],"tags":[],"class_list":["post-33997","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archivo"],"acf":[],"yoast_head":"\nSPA: errores de accesibilidad a evitar | MTP<\/title>\n<meta name=\"description\" content=\"Explicamos en este post algunos errores que pueden cometerse al desarrollar una SPA en materia de accesibilidad digital.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SPA: errores de accesibilidad a evitar | MTP\" \/>\n<meta property=\"og:description\" content=\"Explicamos en este post algunos errores que pueden cometerse al desarrollar una SPA en materia de accesibilidad digital.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/\" \/>\n<meta property=\"og:site_name\" content=\"MTP Espa\u00f1a\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-29T07:25:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/08\/MTP-Blog-SPA.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"MTP\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"MTP\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SPA: errores de accesibilidad a evitar | MTP","description":"Explicamos en este post algunos errores que pueden cometerse al desarrollar una SPA en materia de accesibilidad digital.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/","og_locale":"es_ES","og_type":"article","og_title":"SPA: errores de accesibilidad a evitar | MTP","og_description":"Explicamos en este post algunos errores que pueden cometerse al desarrollar una SPA en materia de accesibilidad digital.","og_url":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/","og_site_name":"MTP Espa\u00f1a","article_published_time":"2024-08-29T07:25:10+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/08\/MTP-Blog-SPA.jpg","type":"image\/jpeg"}],"author":"MTP","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"MTP","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/#article","isPartOf":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/"},"author":{"name":"MTP","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/1186350db6f59e8360dd481150654813"},"headline":"Errores de accesibilidad que deben evitarse al desarrollar una SPA","datePublished":"2024-08-29T07:25:10+00:00","mainEntityOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/"},"wordCount":948,"publisher":{"@id":"https:\/\/mtp.global\/es\/#organization"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/08\/MTP-Blog-SPA.jpg","articleSection":["Archivo"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/","url":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/","name":"SPA: errores de accesibilidad a evitar | MTP","isPartOf":{"@id":"https:\/\/mtp.global\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/#primaryimage"},"image":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/#primaryimage"},"thumbnailUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/08\/MTP-Blog-SPA.jpg","datePublished":"2024-08-29T07:25:10+00:00","description":"Explicamos en este post algunos errores que pueden cometerse al desarrollar una SPA en materia de accesibilidad digital.","breadcrumb":{"@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/#primaryimage","url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/08\/MTP-Blog-SPA.jpg","contentUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/08\/MTP-Blog-SPA.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/mtp.global\/es\/blog\/archivo\/errores-accesibilidad-deben-evitarse-al-desarrollar-spa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mtp.global\/es\/home\/"},{"@type":"ListItem","position":2,"name":"Errores de accesibilidad que deben evitarse al desarrollar una SPA"}]},{"@type":"WebSite","@id":"https:\/\/mtp.global\/es\/#website","url":"https:\/\/mtp.global\/es\/","name":"MTP Global","description":"","publisher":{"@id":"https:\/\/mtp.global\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mtp.global\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/mtp.global\/es\/#organization","name":"MTP Global","url":"https:\/\/mtp.global\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/#\/schema\/logo\/image\/","url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/07\/MTP-global.png","contentUrl":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/07\/MTP-global.png","width":1200,"height":400,"caption":"MTP Global"},"image":{"@id":"https:\/\/mtp.global\/es\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/1186350db6f59e8360dd481150654813","name":"MTP","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/mtp.global\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9f80fcebb065607a1066a38846083841707346cf76ca0c1df24aea7a0c5d4047?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9f80fcebb065607a1066a38846083841707346cf76ca0c1df24aea7a0c5d4047?s=96&d=mm&r=g","caption":"MTP"},"url":"https:\/\/mtp.global\/es\/blog\/author\/marketing\/"}]}},"fimg_url":"https:\/\/mtp.global\/es\/wp-content\/uploads\/2024\/08\/MTP-Blog-SPA.jpg","_links":{"self":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/33997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/comments?post=33997"}],"version-history":[{"count":0,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/posts\/33997\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media\/33995"}],"wp:attachment":[{"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/media?parent=33997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/categories?post=33997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mtp.global\/es\/wp-json\/wp\/v2\/tags?post=33997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}