Usé la web por un día con JavaScript desactivado

Este artículo es parte de una serie en la que intento usar la web bajo varias restricciones, que representan un grupo demográfico determinado de usuarios. Espero elevar el perfil de las dificultades que enfrentan las personas reales, que son evitables si diseñamos y desarrollamos de una manera que sea comprensiva con sus necesidades. Esta semana, estoy deshabilitando JavaScript.

Por qué importa noscript

En primer lugar, para aclarar, hay una diferencia entre admitir una experiencia noscript y usar la etiqueta noscript . En general, no me gusta la etiqueta noscript , ya que fragmenta su página web en versiones JavaScript y no JavaScript en lugar de trabajar desde la misma base de contenido, que es la forma en que las experiencias se complican y las cosas se pasan por alto.

Es posible que tenga mucho contenido útil dentro de sus etiquetas noscript , pero si estoy usando un navegador habilitado para JavaScript, no voy a ver nada de eso, me quedaré atascado esperando que se descargue la experiencia JS. Cuando me refiero a la experiencia 'sin script', generalmente me refiero a la experiencia de usar la página web sin JavaScript , en lugar del uso explícito de la etiqueta.

Entonces, ¿a quién le importan los usuarios que no tienen JavaScript? ¿Existen ya tales usuarios de noscript ?

Bueno, existen, aunque en pequeñas cantidades: aproximadamente el 0,2% de los usuarios en el Reino Unido tienen JavaScript deshabilitado. Pero mirar la cantidad de usuarios que han deshabilitado JavaScript explícitamente es perder el punto.

Me acuerdo de esta cita de Jake Archibald:

"Todos sus usuarios no son JS mientras descargan su JS".

Piense en aquellos usuarios que tienen JavaScript habilitado pero que no obtienen la experiencia de JavaScript, por una serie de razones, incluido el bloqueo local o corporativo o la eliminación de elementos de JavaScript, errores de JavaScript existentes en el navegador de complementos y barras de herramientas del navegador, red errores, y así sucesivamente. BuzzFeed reveló recientemente que alrededor del 1 % de las solicitudes de JavaScript se agotan, lo que equivale a 13 millones de solicitudes fallidas por mes.

A veces, el problema no está en el usuario sino en la CDN que entrega el JavaScript. ¿Recuerdas en febrero de 2017 cuando los servidores de Amazon fallaron? Millones de sitios que dependen de JavaScript entregado a través de CDN de Amazon estaban en serios problemas, lo que les costó a las empresas del índice S&P 500 150 millones de dólares en la interrupción de cuatro horas.

Piense también en los mercados globales emergentes; Los países aún luchan por construir una red de Internet rápida, con poblaciones que no pueden pagar hardware rápido para ejecutar JavaScript con uso intensivo de CPU. O piense en los mercados establecidos, donde incluso un iPhone X con una conexión 4G no es inmune a los efectos de una página web parcialmente cargada interrumpida por su tren entrando en un túnel.

La web es un entorno hostil e impredecible, razón por la cual muchos desarrolladores siguen el principio de mejora progresiva para construir sus sitios a partir de una experiencia central de HTML semántico, capas de CSS y JavaScript discreto además de eso. Quería ver cuántos sitios aplican esto en la práctica. ¿Qué mejor manera que deshabilitar JavaScript por completo?

Cómo deshabilitar JavaScript

Si desea recrear mi experimento usted mismo, puede deshabilitar JavaScript ingresando a la configuración en Chrome:

• Abra las Herramientas para desarrolladores (Chrome -> Ver -> Herramientas para desarrolladores, o ⌥⌘I en el teclado)
• Abra el submenú del desarrollador (los tres puntos al lado del icono de cerrar en las herramientas del desarrollador)
• Elija 'Configuración' de este submenú
• Busque la sección 'Depurador' y marque la casilla 'Deshabilitar JavaScript'

O, como yo, puede usar la excelente extensión Toggle JavaScript Chrome que le permite deshabilitar JS con un solo clic.

Crear una publicación de WordPress con JavaScript deshabilitado

Después de deshabilitar JavaScript, mi primer puerto de escala fue ir a mi sitio de cartera personal, que se ejecuta en WordPress, con el objetivo de escribir mis experiencias en tiempo real.

En realidad, WordPress es muy compatible con no scripts, por lo que pude comenzar a escribir esta publicación sin ninguna dificultad, aunque faltaban algunas de las funciones de formato de texto e incrustación de medios a las que estoy acostumbrado.

Comparemos la pantalla de publicación de WordPress con y sin JavaScript:

Me sentí bastante cómodo sin las barras de herramientas hasta que necesité insertar capturas de pantalla en mi publicación. Sin el botón 'Agregar medios', tuve que ir a pantallas separadas para cargar mis archivos. Esto tiene sentido, ya que el contenido de 'carga en segundo plano' requiere Ajax, que requiere JavaScript. ¡Pero me sorprendió bastante que la pantalla multimedia separada también requiriera JavaScript!

Afortunadamente, había una vista alternativa:

Después de cargar la imagen, tuve que escribir manualmente una etiqueta HTML img en mi publicación y copiar y pegar la URL de la imagen en ella. No había forma de determinar la URL en miniatura de la imagen cargada, y cualquier pie de foto que escribiera también tenía que copiarse manualmente. Pronto me cansé de este enfoque y planeé volver al día siguiente y volver a insertar todas las imágenes cuando me permitiera usar JavaScript nuevamente.

Decidí echar un vistazo a cómo estaba el front-end de mi sitio.

Ver mi sitio sin JavaScript

Me sorprendió gratamente que mi sitio se viera prácticamente igual sin JS:

Echemos un vistazo más de cerca a esa inserción de Twitter:

Debajo del pliegue de mi sitio, también noscript algo de contenido de Instagram, que se mantuvo bien en la experiencia sin guión.

Finalmente, tengo una inserción de GitHub en mi sitio. GitHub no ofrece una inserción nativa, por lo que uso las GitHub Cards no oficiales de Hsiaoming Yang.

Tenía la mitad de la esperanza de sorprenderte con las estadísticas del antes y el después ( ¡megabytes de JS para una pequeña inserción! ¡Fin del mundo! ¡Dejemos JavaScript! ), y la mitad de la esperanza de que hubiera una diferencia muy pequeña ( ¡mejora progresiva! Predicar con el ejemplo ¡Soy un buen desarrollador! ).

Comparemos los pesos de página con y sin JavaScript. En primer lugar, con JavaScript:

Ahora sin JavaScript:

Por el bien de un tweet con estilo, una inserción de GitHub y una inserción completa de Instagram, mi sitio crece 600 KB adicionales. También tengo el seguimiento de análisis de Google y algunas funciones interactivas ocultas para nerds. A fin de cuentas, 600 KB no parece exagerado, aunque estoy un poco sorprendido por la cantidad de solicitudes adicionales que el navegador tiene que hacer para que todo eso suceda.

Todo el contenido todavía está allí sin JavaScript, todos los menús aún son navegables y, con la excepción de la inserción de Twitter, sería difícil darse cuenta de que JavaScript está desactivado. Como resultado, mi sitio pasa el nivel de validación NOSCRIPT-5, la mejor calificación posible sin JavaScript.

noscript calificación noscript: NOSCRIPT-5.

¿Qué es eso? ¿No has oído hablar del sistema de clasificación de noscript ? Me sorprendería mucho si lo hicieras porque me lo acabo de inventar. Es mi pequeño indicador útil de la usabilidad de un sitio sin JavaScript y, por extensión, es un indicador bastante bueno de qué tan bueno es un sitio para mejorar progresivamente su contenido.

Sistema de clasificación noscript

Los sitios web, o más exactamente, sus páginas individuales, tienden a caer en una de las siguientes categorías:

• NOSCRIPT-5
  El sitio es prácticamente indistinguible de la versión del sitio habilitada para JavaScript.
• NOSCRIPT-4
  El sitio proporciona paridad de funcionalidad para noscript, pero se vincula o redirige a una versión separada del sitio para lograrlo.
• NOSCRIPT-3
  El sitio funciona en gran medida sin JavaScript, pero algunas funciones no clave no son compatibles o parecen estar rotas.
• NOSCRIPT-2
  El sitio ofrece un mensaje que dice que su navegador no es compatible.
• NOSCRIPT-1
  El sitio parece cargarse, pero el usuario no puede usar ninguna funcionalidad clave.
• NOSCRIPT-0
  El sitio no se carga en absoluto y no ofrece comentarios al usuario.

Echemos un vistazo a algunos sitios populares y veamos cómo puntúan.

Amazonas

Hace tiempo que le eché el ojo a una pequeña aspiradora robótica. Mi contrato de arrendamiento no permite mascotas, y esta es la siguiente mejor opción una vez que le pones unos ojos saltones.

A primera vista, Amazon hace un gran trabajo con su solución sin JavaScript, aunque falta la imagen principal del producto.

En una inspección más cercana, algunas cosas estaban un poco rotas en la versión noscript . Me gustaría revisarlos uno por uno y sugerir una solución para cada uno.

Sin imágenes de la galería

Quería ver algunas fotos de los productos, pero hacer clic en las miniaturas no me dio nada.

Asunto

Solucion potencial

Hubiera sido bueno si estas miniaturas fueran enlaces a la imagen completa, abriéndose en una nueva pestaña. Luego podrían mejorarse progresivamente en la galería de imágenes usando JavaScript:

• Secuestrar el evento de clic del enlace de la miniatura;
• Toma el atributo href ;
• Actualice el atributo src de la imagen principal con el valor del atributo href .

El enlace 'Informar información incorrecta del producto' es solo para JavaScript

¿Esta característica es realmente tan utilizada que vale la pena descargar bytes adicionales de JavaScript a todos sus usuarios para que se abra como un modal integrado dentro de la página?

Asunto

Solucion potencial

El formulario modal integrado de Amazon requiere JavaScript para funcionar. Haría que la 'función de informe' fuera un formulario independiente en una URL separada , por ejemplo, /report-product?product-id=123 . Esto podría mejorarse progresivamente en el modal integrado usando Ajax para descargar el HTML por separado.

Las reseñas solo son parcialmente visibles de forma predeterminada

Asunto

Solucion potencial

¿Por qué no mostrar la reseña completa de manera predeterminada y luego usar JavaScript para truncar el texto de la reseña y agregar el enlace "Leer más"?

Vale la pena señalar que el título de la reseña es un enlace a la reseña en una página independiente, por lo que al menos aún es posible leer el contenido.

En general, me sorprendió gratamente lo bien que funcionaba el sitio sin JavaScript. Fácilmente podría haber sido una página en blanco. Sin embargo, la falta de imágenes de productos significa que nos estamos perdiendo una función realmente fundamental: ¡yo diría que es fundamental poder ver lo que está comprando! — así que es una pena que no pudiéramos poner la guinda al pastel y otorgarle una calificación NOSCRIPT-5.

Clasificación noscript de Amazon: NOSCRIPT-3. ‍

Todavía no había decidido qué producto quería comprar, así que recurrí a Camel Camel Camel, el rastreador de precios de Amazon.

camello camello camello

Quería decidir entre iLife V3s Pro o iLife A4s, así que me dirigí a https://uk.camelcamelcamel.com/. Al principio, el sitio parecía indistinguible de la versión habilitada para JavaScript.

Desafortunadamente, el gráfico del historial de precios no se mostró. Proporcionó un respaldo de texto alternativo, pero el texto alternativo no me dio ninguna idea de si la tendencia del precio ha subido o bajado o no.

Sugerencia general: proporciona texto alternativo significativo en todo momento . No necesariamente necesito ver el gráfico, pero agradecería un resumen de lo que contiene. Tal vez, en este caso, podría ser "el gráfico histórico de precios de Amazon que muestra que el precio de este artículo se ha mantenido prácticamente sin cambios desde marzo de 2017". Pero la generación automática de un resumen como ese es ciertamente difícil y propensa a anomalías.

Sugerencia específica para este caso de uso: mostrar la imagen . El gráfico en la versión con guión del sitio es en realidad una imagen independiente, por lo que no hay ninguna razón por la que no pueda mostrarse en la versión noscript .

Aún así, el contenido central debajo del gráfico me dio la información que necesitaba saber.

La tabla proporciona la paridad de características necesaria para asegurar una calificación NOSCRIPT-5. Me quito el sombrero ante ti, Camel Camel Camel!

Camello Camello Calificación de noscript de camello: NOSCRIPT-5

Productos de Google

En este momento de mi día, recibí una llamada telefónica de la nada: un amigo me llamó y me preguntó si nos reuniríamos esta semana. Así que fui a Google Calendar para verificar mi disponibilidad. ¡Google tenía otras ideas!

Me decepcionó que no hubiera una alternativa sin noscript : Google suele ser bastante bueno en este tipo de cosas.

No esperaría necesariamente poder agregar/editar/eliminar entradas a mi calendario, pero debería ser posible proporcionar una vista de solo lectura de mi calendario como contenido principal .

Calificación de noscript del calendario de Google: NOSCRIPT-0

Interesado en ver cómo Google administra otros productos, eché un vistazo rápido a las hojas de cálculo de Google:

En este caso, el sitio falla con mucha más gracia. Al menos puedo leer el contenido de la hoja de cálculo, incluso si no puedo editarlo. ¿Por qué el calendario no ofrece la misma solución alternativa?

¡No tengo sugerencias para mejorar las hojas de cálculo de Google! Hace un buen trabajo al informar al usuario si falta la funcionalidad principal de la experiencia noscript .

Calificación de noscript de las hojas de cálculo de Google: NOSCRIPT-2

¡Esta calificación en realidad no es tan mala! No todos los sitios podrán ofrecer una experiencia sin noscript , pero al menos si son directos y honestos (es decir, dirán "sí, no vamos a intentar darte nada") eso te prepara: el usuario de noscript , para cuando falla. No perderá unos preciosos segundos tratando de completar un formulario que nunca se enviará, o comenzará a leer un artículo que luego tendrá que usar Ajax para recuperar el resto de su contenido.

Ahora, volvamos a mi posible compra en Amazon. Quería ver algunas reseñas de terceros antes de realizar una compra.

La búsqueda de Google funciona muy bien sin JavaScript. Simplemente se ve un poco anticuado, como esos viejos sitios solo para escritorio con resoluciones fijas.

La vista de imágenes se ve aún más diferente y, de hecho, la prefiero en algunos aspectos: esta versión se carga súper rápido y enumera las dimensiones y el tamaño de la imagen en kilobytes debajo de cada miniatura:

Calificación de noscript de búsqueda de Google: NOSCRIPT-5

Uno de los resultados de búsqueda me llevó a una reseña en YouTube. Hice clic, sin esperar mucho. Hice bien en no emocionarme:

Realmente no esperaría que un sitio como YouTube funcione sin JavaScript. YouTube requiere capacidades avanzadas de transmisión, sin mencionar que se abriría al robo de copias si proporcionara una descarga de MP4 independiente como alternativa. En cualquier caso, ningún sitio debería verse roto. Miré esta pantalla durante unos segundos antes de darme cuenta de que no iba a pasar nada más.

Sugerencia : si su sitio no puede proporcionar una solución alternativa para los usuarios de noscript , como mínimo debe proporcionar un mensaje de advertencia de noscript .

Clasificación de noscript de YouTube: NOSCRIPT-0

¿Cual?

Hice clic en un par de enlaces de revisión más. ¿Cuál? El sitio de consejos me falló por completo.

Esta era una página que parecía cargarse bien, pero solo cuando lees el contenido te das cuenta de que en realidad te falta información clave. Esa información clave es absolutamente fundamental para el propósito de la página y no puedo obtenerla. Por lo tanto, desafortunadamente, esa es una violación NOSCRIPT-1.

Sugerencia : si su sitio tiene Ajax en el contenido, ese contenido existe en otra URL. Proporcione un enlace a ese contenido para sus usuarios de noscript . Siempre puedes ocultar el enlace cuando hayas Ajaxed con éxito con JavaScript.

¿Cual? calificación de noscript del sitio de revisión: NOSCRIPT-1

Facebook

Eventualmente, reconozco que realmente no puedo permitirme una aspiradora en este momento. Entonces, decidí saltar a las redes sociales.

Facebook se niega rotundamente a cargar sin JavaScript, pero ofrece una opción alternativa. Este es nuestro primer ejemplo de NOSCRIPT-4, un sitio que ofrece una versión separada de su contenido para usuarios de teléfonos noscript o con funciones.

La versión móvil se carga al instante. Se ve feo, pero parece que obtengo el mismo contenido que obtendría normalmente. Fundamentalmente, tengo paridad de características : puedo lograr las mismas cosas aquí que en el sitio principal.

Clasificación de noscript de Facebook: NOSCRIPT-4

La página cargó a la velocidad del rayo:

Solo podía ver 7 elementos en el suministro de noticias a la vez, pero podía hacer clic en "Ver más historias", lo que me lleva a una nueva página, utilizando técnicas de paginación tradicionales.

Me impresionó tener la opción de 'reaccionar' a un comentario de Facebook, aunque esta es una tarea de múltiples pantallas:

No hay nada que impida que Facebook construya un menú de 'reacción' flotante sin JavaScript, pero para ser justos, esto está dirigido a dispositivos móviles que no pueden desplazarse.

Sugerencia : Sea creativo con CSS. Es posible que descubra que no necesita JavaScript en absoluto.

En poco tiempo, apareció un elemento de video en mi fuente de noticias. (En este punto, me di cuenta de cuánto menos contenido de video había visto en la versión móvil en comparación con Facebook normal, lo que significa que en realidad había estado viendo los estados de las personas en lugar de un video aleatorio que les "gustaba", una mejora importante en lo que a mí respecta!)

Esperaba que el video no funcionara cuando hice clic en él, pero al hacer clic en la miniatura se abrió el video en una nueva pestaña:

Estoy gratamente sorprendido de que toda la funcionalidad parezca estar allí en esta versión noscript del sitio. Eventualmente, sin embargo, encontré una función que era demasiado torpe y engorrosa para llevarla hasta el final: la creación de álbumes.

Quería subir un álbum de fotos a Facebook, pero en noscript esto es una tarea bestial. Implica subir una foto a la vez, pasando por dos o tres pantallas para cada carga. Intenté desesperadamente y no pude encontrar una opción de carga masiva.

La laboriosidad de esto me llegó después de la foto número tres (mi álbum contendrá muchas más), así que decidí dar por terminado el día y volver mañana cuando tenga JavaScript.

Gorjeo

Las cosas se pusieron raras cuando volé a Twitter.

Estaba intrigado por este mecanismo, así que busqué en el código fuente, que en realidad era sorprendentemente simple:

 <noscript><meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F"></noscript>

A pesar de lo maravillosamente simple que es esta solución, encontré la experiencia bastante torpe porque en el instante antes de ser redirigido, vi que una de las personas a las que sigo en Twitter se había comprometido. Su tweet no aparecía en la parte superior de la versión 'móvil', así que tuve que ir a buscarlo.

Sugerencia : Incorpore un período de gracia en su lógica del lado del servidor para que las redirecciones y las actualizaciones descuidadas no pierdan tweets interesantes antes de que haya tenido la oportunidad de leerlos.

No podía recordar el identificador de Twitter de mi amigo. La búsqueda fue un poco complicada: ¡comencé a extrañar mucho las sugerencias de autocompletar!

Afortunadamente, la página de resultados de búsqueda abrió su cuenta y pude encontrar su tweet. Incluso pude responder.

Clasificación de noscript de Twitter: NOSCRIPT-4

Esto puede parecer una puntuación generosa, dada la sensación de torpeza, pero recuerda que la clave aquí es la paridad de características. No tiene que verse hermoso.

Probé un par de sitios de redes sociales más que, a diferencia de Twitter, no alcanzaron las vertiginosas alturas del cumplimiento de NOSCRIPT-4.

Otras Redes Sociales

LinkedIn tiene una bonita pantalla de carga hecha a medida. Pero nunca se carga, así que todo lo que pude hacer fue mirar el logo.

Clasificación de noscript de LinkedIn: NOSCRIPT-0

Instagram me dio literalmente nada. Una página en blanco. Un sabor completamente diferente de NOSCRIPT-0.

Calificación de noscript de Instagram: NOSCRIPT-0

Me sorprendió que Instagram fallara tan espectacularmente aquí, dado que la inserción de Instagram funcionó a la perfección en mi sitio de cartera. Supongo que con una inserción nunca se sabe cuáles son las expectativas de soporte del navegador del tercero, pero como estoy visitando el sitio directamente, Instagram está feliz de hacer la llamada para dejar el soporte.

noticias de la BBC

Me dirigí a la BBC para obtener mi dosis de noticias.

El menú está un poco desfasado y la columna es bastante estrecha (definitivamente un patrón que veo en muchos sitios: ¿por qué "sin JavaScript" significa "dispositivo móvil"?) pero puedo acceder al contenido.

Hice clic en la pestaña "Más leídos", que me lleva a otra parte de la página. Con secuencias de comandos, este enlace de anclaje se mejora progresivamente para lograr el comportamiento real de la pestaña, que es un hermoso ejemplo de construcción a partir de un núcleo HTML sólido.

Hasta ahora, este es el único ejemplo de un enlace de anclaje que he encontrado en mi experimento, lo cual es una pena, ya que es una buena técnica que ahorra una carga de página adicional y evita fragmentar el sitio en muchas micropáginas.

Sin embargo, parece un poco extraño, la lista ordenada CSS significa que tenemos un error de numeración doble aquí. Hago clic en una de las historias.

No puedo acceder al contenido del video, pero debido a problemas de derechos, sospecho que la BBC no puede proporcionar un video independiente por separado como lo hace Facebook. Sin embargo, una transcripción sería buena, y beneficiosa para más que solo usuarios noscript .

Sugerencia : Proporcione respaldos textuales para el contenido audiovisual.

Para ser justos, el contenido del artículo básicamente resume el contenido que aparece en el video, así que no me estoy perdiendo información.

El artículo y las páginas de índice se cargan a la velocidad del rayo, aproximadamente 300 KB (principalmente imágenes). Echo de menos las imágenes en miniatura de los otros artículos de la página y la capacidad de hacer un uso completo de mi espacio en pantalla, pero eso no debería obstaculizar la calificación.

Clasificación de noscript de la BBC: NOSCRIPT-5

GitHub

GitHub se ve casi exactamente igual que su contraparte habilitada para JavaScript. ¡Guau! Pero supongo que este es un sitio desarrollado por desarrolladores, para desarrolladores.

Hice un poco de limpieza en GitHub, busqué repositorios y eliminé ramas antiguas. Por un tiempo realmente olvidé que estaba en la versión sin JavaScript hasta que me encontré con un pequeño error:

Luego me pregunté: "¿Cómo manejará GitHub la aplicación de etiquetas a los problemas?" así que le di una oportunidad.

No pude crear un problema y agregarle etiquetas al mismo tiempo. De hecho, no pude encontrar ninguna forma de agregar la etiqueta incluso después de crear un problema en blanco. Es una pena que el sitio cayera en el último obstáculo porque era casi una comparación perfecta con la versión con guión.

Calificación de noscript de GitHub: NOSCRIPT-3

Si bien GitHub se ve increíble, nunca hubiera sabido que mi JavaScript estaba apagado, no poder usar la misma funcionalidad clave que la versión con script es un fastidio. Incluso un sitio sin guión de aspecto noscript obtendría una puntuación más alta porque la funcionalidad es más importante que la forma.

Banca en línea

Si hay un lugar en el que esperaba que se requiriera JavaScript, era en el sitio web del banco NatWest. Me equivoqué.

No solo funciona, sino que también es difícil distinguirlo del sitio normal. La pantalla de inicio de sesión es la misma, la única diferencia es que el enfoque no avanza automáticamente a través de cada campo a medida que lo completa.

Clasificación noscript de NatWest: NOSCRIPT-5

Diverso

Encontré algunos sitios más a lo largo de mi día.

FreeAgent, el sitio de software de impuestos que uso para mi trabajo independiente, ni siquiera intenta una alternativa noscript . Pero bueno, eso es mejor que mostrar un sitio web roto.

Calificación de FreeAgent noscript : NOSCRIPT-2

Y CodePen, comprensiblemente, también tiene que ser un NOSCRIPT-2.

Clasificación de no script de noscript : NOSCRIPT-2

Tonik, el proveedor de energía, no me permite iniciar sesión, pero esto parece más un descuido que una decisión deliberada:

Calificación noscript : NOSCRIPT-1

M&S Energy me permite iniciar sesión, solo para decirme que necesita JavaScript para hacer algo remotamente útil.

Clasificación noscript de M&S: NOSCRIPT-1

Ahora llego a mi captura de pantalla favorita del día.

Uno de mis colegas me recomendó una vez un curso de Accesibilidad para el diseño web, que marqué como favorito. Decidí echarle un vistazo hoy y me reí de la ironía del texto alternativo:

Con el texto alternativo de "Personas: Accesibilidad para el diseño web", no estoy muy seguro de lo que me estoy perdiendo aquí: ¿es una imagen? ¿Un video? ¿Un PDF? ¿El curso en sí?

Sugerencia : en realidad es un video, aunque debe iniciar sesión para verlo.

El texto alternativo realmente no respalda su propósito, en parte porque se completa automáticamente. Nosotros, como comunidad de desarrolladores, necesitamos mejorar en este tipo de cosas. No creo haber leído ningún texto alternativo útil hoy.

Resumen

Empecé este experimento con el objetivo de ver cuántos sitios se implementan mediante la mejora progresiva. Solo he visitado un pequeño puñado de sitios aquí, la mayoría de ellos grandes nombres con grandes presupuestos, por lo que es interesante ver la amplia variación en el soporte sin JavaScript.

Es interesante ver que los sitios relativamente simples (Instagram y LinkedIn en particular) tienen un soporte noscript tan pobre. Creo que esto se debe en parte a la creciente popularidad de los marcos de JavaScript como React, Angular y Vue. Los desarrolladores ahora crean "aplicaciones web" en lugar de "sitios web", con el objetivo de recrear la apariencia de las aplicaciones nativas, y usar JavaScript para administrar el DOM es la forma más manejable de crear tales experiencias.

Existe el peligro de que cada vez más sitios requieran JavaScript para representar cualquier contenido. Afortunadamente, generalmente es posible crear su contenido de la misma manera amigable para los desarrolladores, pero renderizado en el servidor, por ejemplo, usando Preact en lugar de React. Tomar la decisión consciente de preocuparse por noscript brinda los beneficios de una experiencia central como se describe al comienzo de este artículo, y también puede hacer que el tiempo de carga se perciba más rápido.

Puede ser bastante desalentador pensar en una aplicación desde cero, pero una experiencia central decente generalmente es posible y, en realidad, solo implica ajustes simples en muchos casos. Una buena experiencia central es indicativa de una página web bien estructurada, lo que, a su vez, suele ser una buena señal para el SEO y la accesibilidad. Por lo general, es una página web bien diseñada , ya que el diseñador y el desarrollador dedicaron tiempo y esfuerzo a pensar en lo que es realmente fundamental para la experiencia. La mejora progresiva significa experiencias más sólidas, con menos errores en producción y menos peculiaridades individuales del navegador, porque estamos dejando que la plataforma haga el trabajo en lugar de intentar escribirlo todo desde cero.

¿A qué clasificación noscript se ajusta su sitio? ¡Cuéntanos en los comentarios!