Tres cosas que puedes hacer para mejorar la vida de millones de personas

Muy a menudo, las personas con discapacidad no pueden usar los documentos electrónicos porque presentan barreras de accesibilidad. Las tres cosas más sencillas e importantes que puedes hacer para mejorar la accesibilidad de los documentos electrónicos son:

  1. Definir un texto alternativo para las imágenes. Pero a veces no todas las imágenes necesitan un texto alternativo y una imagen puede requerir diferentes textos alternativos según el contexto.
  2. Elegir y usar colores adecuados. Los colores no están prohibidos, se puede usar cualquier color, lo que plantea problemas son las combinaciones de colores erróneas.
  3. Definir una buena estructura del documento con los encabezados. No solo ayuda a las personas con discapacidad, ayuda a todo el mundo, te ayuda a ti mismo porque facilita los cambios, ¿por qué no usas lo encabezados siempre?

Estas tres cosas no garantiza la accesibilidad al 100%, pero sí que suelen ser barreras muy comunes y muy fáciles de evitar. Un pequeño gesto puede ayudar a millones de personas, ¿a qué estás esperando?

 

Internet y la Web no son lo mismo

Cuando me encuentro cosas como este titular en el periódico El País:

30º aniversario de Internet: las 51 webs que han hecho de la Red lo que hoy es

Me sale un poco de espuma por la boca.

Cuando en otro artículo del periódico El País, Las tres amenazas que se ciernen sobre la web, escrito por el propio Tim Berners-Lee (TBL), leo barbaridades como:

  • Hoy, 30 años después de mi propuesta original para un sistema de gestión de la información, medio mundo utiliza Internet.
  • Naturalmente, con cada nueva característica y cada nuevo sitio web, la división entre los que usan Internet y los que no aumenta y hace que sea aún más imprescindible lograr que todo el mundo tenga acceso a la Red.
  • Y aunque Internet ha creado oportunidades, ha dado voz a los grupos marginados y ha facilitado nuestras vidas cotidianas, también ha engendrado oportunidades para los estafadores, ha dado voz a los que difunden el odio y ha facilitado la comisión de todo tipo de delitos.

En los que se intercambia Internet y la Web (o la Red de redes), como si fueran la misma cosa, tengo que buscar el artículo original de TBL, 30 years on, what’s next #ForTheWeb?, para asegurarme de que él no ha escrito esas barbaridades:

  • Today, 30 years on from my original proposal for an information management system, half the world is online.
  • Of course with every new feature, every new website, the divide between those who are online and those who are not increases, making it all the more imperative to make the web available for everyone.
  • And while the web has created opportunity, given marginalised groups a voice, and made our daily lives easier, it has also created opportunity for scammers, given a voice to those who spread hatred, and made all kinds of crime easier to commit.

Y efectivamente, donde TBL puso “half the world is online”, “the divide between those who are online” y “And while the web has created opportunity”, alguien tradujo por “medio mundo utiliza Internet”, “la división entre los que usan Internet” y “Y aunque Internet ha creado oportunidades”.

Afortunadamente, a veces se encuentran titulares bien escritos: No, hoy no es el aniversario de Internet, pero sí de la web.

Si estás leyendo todo esto y no sabes que Internet y la Web no son lo mismo, te recomiendo mi vídeo Internet y la Web:

Cómo estructurar una página web

En How to Section Your HTML explican muy bien cómo estructurar una página web con las diferentes etiquetas semánticas que existen en HTML5:

The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section.

Here is a brief explanation of each sectioning element and how they are used:

<nav> – Equivalent to role=”navigation”. Major site navigation that consistently appears frequently across the site. Examples include the primary navigation, secondary navigation, and in-page navigation.
<aside> – Equivalent to role=”complementary”. Content that is only tangentially related (or not related) to the main content. Think of something like a sidebar with supplementary information, a note within an article, or the outer container for a list of related articles at the bottom of a blog post.
<article> – Equivalent to role=”article”. Content that is self-contained in that it makes sense on its own when taken out of context. That could mean a widget, a blog post or even a comment within a blog post.
<section> – Equivalent to role=”region”. Content that needs extra context from its parent sectioning element to make sense. This is a generic sectioning element that is used whenever it doesn’t make sense to use the other more semantic ones.

Otro artículo sobre la divitis

La divitis es una enfermedad antigua, el primer artículo que conozco que habló sobre esta enfermedad es del año 2006: Divitis: what it is, and how to cure it

Ahora he encontrado otro artículo, Stop using so many divs! An intro to semantic HTML, que explica los siguientes problemas de la divitis:

  • Accessibility – Many a11y tools are pretty smart, and try their best to parse the structure of a page to help guide users through it in the way the page’s author intends, and to give users easy jump points to navigate quickly to the section of the page they care about. But <div>s don’t really impart any useful info about the structure of a document. The smartest a11y tool in the world still ins’t a human, and can’t be expected to parse class and id attributes and recognize all the weird and wild ways that devs all over the world name their blocks. I can recognize that class=”article-header-level-2″ is a subheading, but a robot can’t. (And if it can, get it out of my computer, I’m not ready for the AGI revolution just yet.)
  • Readability – To read this code, you need to carefully scan for the class names, picking them out from between the <div class=”…”></div> boilerplate. And once you’re a few levels deep in the markup, it becomes tricky to keep track of which </div> closing tags go with which <div…> opening tags. You start to rely very heavily on IDE features like coloring different indentation levels or highlighting the matching tag for you to keep track of where you are, and in larger documents it can require a lot of scrolling on top of those features.
  • Consistency and standards – It can be frustrating to start a new job or move to a new project and have to learn from scratch all the crazy markup conventions used across the codebase. If everyone had a standardized way to mark up common structures in web documents, it would be much easier to skim an HTML file in an unfamiliar codebase and get a quick handle on what it’s supposed to represent. If only there was such a standard…

Recetas de CSS

Muy interesante todo lo que se explica en CSS Layout cookbook de Mozilla Developer Network:

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

Las recetas que ofrece hasta ahora son:

Recipe Description Layout Methods
Media Objects A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. CSS Grid, float fallback, fit-content() sizing
Columns When to choose multi-column layout, flexbox or grid for your columns CSS Grid, Multicol, Flexbox
Center an element How to center an item horizontally and vertically Flexbox, Box Alignment
Sticky footers Creating a footer which sits at the bottom of the container or viewport when the content is shorter. CSS Grid, Flexbox
Split Navigation A navigation pattern where some links are visually separated from the others. Flexbox, margin
Breadcrumb Navigation Creating a list of links to allow the visitor to navigate back up through the page hierarchy. Flexbox
List Group with Badges A list of items with a badge to display a count. Flexbox, Box Alignment