The latest articles on DEV Community by Juan Carlos Aravena Esparza (@joanca). https://dev.to/joanca https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F181221%2F995d3423-bdbf-4e18-a7ce-3e50400ddab3.jpg https://dev.to/joanca en Juan Carlos Aravena Esparza Sat, 29 Feb 2020 05:18:06 +0000 https://dev.to/joanca/mejoras-de-accesibilidad-con-lighthouse-1ico https://dev.to/joanca/mejoras-de-accesibilidad-con-lighthouse-1ico <p>Es un poco vergonzoso comentar esto, más cuando este sitio se trata de accesibilidad, pero es bueno ser honestos y, como siempre, las mejoras en este aspecto son siempre bienvenidas.</p> <p>Han oído hablar de <strong>Lighthouse</strong>? Es una herramienta creada por Google para realizar un assestment de accesibilidad a un sitio, en otro post hablaremos sobre como utilizarlo e integrarlo en nuestro desarrollo. Por ahora sólo quiero hablarles sobre unas mejoras que he hecho al <a href="https://gitlab.com/joanca/hugo-theme-biblioteca">tema biblioteca</a> que fueron detectadas por esta herramienta.</p> <h2> Antes de los cambios </h2> <p><a href="https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fipfs.aravena.me%2Fipfs%2FQmZ2RRcUbgTHnz3TuYTed7GYHFETQFCfDQNWi8q2H9wWUV%2F&amp;strategy=mobile&amp;category=performance&amp;category=accessibility&amp;category=best-practices&amp;category=seo&amp;category=pwa&amp;utm_source=lh-chrome-ext"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RCpn6OUh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://koan.cl/static/img/lighthouse-previous.png" alt="Resultado de Lighthouse antes de los cambios"> </a></p> <h4>Resultado de Lighthouse antes de los cambios</h4> <p>La imagen anterior nos muestra el resultado de lighthouse sobre koan, y bueno, los números no son muy alentadores, siendo todos ellos de un color naranja, denotando problemas. En performance nos muestra 71 sobre 100, en accesibilidad obtenemos 70, en buenas prácticas 85 y en SEO 82.</p> <p>No son los mejores números, pero nos deja claro que hay mejoras que debo aplicar para que este número suba.</p> <h2> Después de los cambios </h2> <p><a href="https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fkoan.cl%2F&amp;strategy=mobile&amp;category=performance&amp;category=accessibility&amp;category=best-practices&amp;category=seo&amp;category=pwa&amp;utm_source=lh-chrome-ext"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8Qp0D4mz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://koan.cl/static/img/lighthouse-after.png" alt="Resultado de Lighthouse después de los cambios"> </a></p> <h4>Resultado de Lighthouse después de los cambios</h4> <p>Luego de aplicar las mejoras que el assesment nos dio, subimos rápidamente a tener 100, puntaje máximo, en cada uno de los puntos nombrados anteriormente. Puedes <a href="https://gitlab.com/joanca/hugo-theme-biblioteca/-/compare/5ff7120b33fa07800e999e945359bc67c1ac5ac5...master">ver los cambios en que hice en el tema de Hugo</a>.</p> <p>En otro artículo veremos más de cerca los cambios, en particular el hacer que los videos de youtube carguen en “lazyload”, responsive y accesibles.</p> a11y lighthouse test Juan Carlos Aravena Esparza Wed, 02 Oct 2019 04:11:58 +0000 https://dev.to/joanca/se-escribe-accesibilidad-no-discapacidad-1in4 https://dev.to/joanca/se-escribe-accesibilidad-no-discapacidad-1in4 <p>Hace un tiempo tuve la posibilidad de escuchar la presentación “It’s spelled ‘Accessibility’, not ‘Disability’” de <a href="https://twitter.com/scottdavis99">Scott Davis</a> y creo que vale la pena presentarla acá. Muy importante el como habla sobre <strong>diseño universal</strong> y como <em>“la accesibilidad mejora la experiencia de todos, no sólo aquellos con una discapacidad”</em>.</p> <p><iframe width="710" height="399" src="https://www.youtube.com/embed/jTxX_Vkyw6Y"> </iframe> </p> <p>Lamentablemente está en inglés, espero poder traducir el contenido en algún momento, con la aprovación de Scott, por supuesto.</p> <p>Pronto vamos a escribir sobre diseño universal y como aplicarlo sobre desarrollo de interfaces.</p> talk a11y