Para todos nosotros y nosotrases el referente en accesibilidad.
No conocemos a nadie quesepa más de accesibilidad y que
divulgue más la importancia de tenerwebs accesibles que Vicent Sanchis.
Adelante.
[APLAUSOS]
Gracias por la presentación, mocatriz.
Yes, and?
[RISAS]
Bueno, vamos que este curso es unpoquito denso y vamos con el tiempo justo.
Lección 1 de accesibilidad web.
Céntrate en el contenidoque WordPress hará el resto.
Quien haya podido leereso tiene superpoderes.
[RISAS]
Ajustando un poquito se lee mejor.
No es magia, es accesibilidad.
Aunque me ha presentado Ana espectacularmentebien, yo vuelvo a presentarme.
Soy Vicente Sánchez, consultorde accesibilidad web y digital.
Tengo un doctorado enoptometría de ciencias de la visión.
Soy embajador deRaiola Networks,
a quienes les agradezcoel apoyo para poder venir a
WordCamp Hogwarts... Torrelodones,a daros este curso de accesibilidad.
Me podéis encontrar en redes como@visanju, en mi página web, vicentsanchis.com
en accesiHUB.es, lacomunidad sobre accesibilidad
digital, y en un proyecto nuevo quese lanzó ayer que es accessibili.cat
Empecemos.
Requisitos para seguireste curso de accesibilidad.
Ser usuario de WordPress, obvio.
Venir a WordCamp Torre opasarte por WordPress TV, vale
Y querer hacer de Internet un sitio mejor.
Mis recomendaciones, mishumildes recomendaciones
es que utilicéis temaslistos para accesibilidad,
que sigáis yendo a Meetupsy WordCamps y pasando por
WordPress TV, porque haymuchísimo material formativo
sobre WordPress y otros temas, y quequeráis hacer de internet un sitio mejor.
Si no estáis motivados, ¿para qué?
¿Cuál va a ser el sistemade evaluación de este curso?
Pues un sistema de evaluación continua.
Porque la accesibilidades un trabajo continuo.
Si seguís añadiendocontenidos al sitio web,
esos contenidos puedengenerar problemas de
accesibilidad y tenéisque ir vigilándolo.
Bibliografía.
Pues la básica, el manual deaccesibilidad de la comunidad de
WordPress y para losestudiantes más avanzados,
las Web Content Accessibility Guidelineso como yo las llamo, las Wachas.
A ver, laaccesibilidad es difícil.
Conseguir que el contenidoque creamos digital sea accesible
para cualquier persona apesar de la discapacidad es algo
difícil, pero no tanto, porquese basa en respetar unos
estándares y un conjunto de buenas prácticasque podemos agrupar en tres categorías.
Una, el código.
Otra, el diseño gráfico, la interfaz.
Y por último, el contenido.
Podéis combinar enfunción de vuestro perfil.
Voy a asumir que somostodos usuarios de WordPress,
que solamente creamoscontenido y tenéis que elegir
diferentes combinacionespara montaros una falla.
Las quemamos el otro día, perobueno, una falla viene a ser esto.
Una base que debe de ser sólidapara sujetar lo que hay arriba.
En función de vuestroperfil, pues elegiréis las
combinaciones, pero yome voy a centrar en esta,
en que estáis usando unaherramienta buena con un punto
de partida bueno, comosería WordPress, unos temas,
accessibility ready, y por tanto vuestraresponsabilidad es crear el contenido.
Y para crear el contenido, pueshay que fijarse en una serie de cosas.
Lo primero, los temas accessibilityready, ¿dónde los podéis encontrar?
Pues os vais al escritoriode WordPress, apariencia,
filtrais por características y la primeracaracterística es listo para accesibilidad.
Esos temas están revisadose incluyen características extra
que el resto de temas nonecesariamente van a incluir.
Y con esto vamos a ver quécosas a nivel de contenido tenéis que
fijaros para crear un contenidomínimamente accesible.
Primero los encabezados,que esto sirve para
estructurar el contenidode forma visual y semántica.
La semántica es la magia quesucede detrás en el código HTML.
Hay que respetar una jerarquía de encabezadosordenados de esta manera, h1, h2, h3.
Coincide con que el aspectode cada nivel es diferente.
Y lo que hacéis todosy todas, porque es así,
es elegir en función dequé estilo me gusta más.
Pues no, eso caca.
5 puntos menos para Gryffindor.
Se tiene que respetar esa jerarquía.
Y también muy importante,tenéis que usar el bloque de
encabezado, que yo me encuentro párrafosa veces que intentan ser encabezados.
Si no usáis el bloque correcto,no se aplica la semántica correcta.
Un ejemplo, cuando estáis editando,podéis ver el nivel de encabezado.
Pero claro, si tenéis que irencabezado, encabezado
viendo el nivel, pueses fácil equivocarse.
Tenemos una forma simple.
Ahí arriba, en el resumen del documento,tenemos la vista de lista y el esquema.
Y en el esquema tenemos la jerarquía.
Aquel encabezado en color oro está mal.
Nos lo está avisandoWordPress con texto
Es fácil solucionarlo de esta manera.
Pero tampoco os fiéis al100% de esta herramienta,
porque ahí acabo de meter lagamba y me señala que hay un
encabezado que está mal, pero no hadicho el otro encabezado que está mal.
Eso lo vemos enla siguiente lección.
Lo siguiente que tenéisque controlar es el contraste.
Porque sin contraste suficiente nise ve la interfaz ni se puede leer.
Ríete tú de la capa de invisibilidadde las reliquias de la muerte.
Falta de contraste es elmejor conjuro de invisibilidad.
Podéis definir los colores,por ejemplo, en este párrafo.
Yo quiero, aquí en laspropiedades del bloque,
ponerle un color defondo, blanco, por ejemplo,
y un color de texto, puesese color así verde pistacho.
Automáticamente sale aquíun asistente, una ventanita.
Esta combinación de colorespuede ser difícil de leer.
Prueba a cambiar los colores.
No hay excusa.
No hay excusa para meter la pata en eso.
Y lo siguiente que tenéisque hacer son las imágenes.
Las imágenes, pordefinicion, son contenido no textual.
Si el contenido no estextual, no es accesible.
El texto es la moneda universalde intercambio de información.
Esto no es texto.
Es una imagen.
Ahí no hay texto.
Hay píxeles que se mueven y, oye,
pues hay gente que aún legusta usarlos, pues muy bien.
Pero eso requiere deuna alternativa textual,
que es el famoso atributo alt,que no sirve para meter keywords.
No me seáis fariSEOs, por favor.
¿Cómo se añade un textoalternativo en WordPress?
Pues insertáis una imagen yen las propiedades del bloque de
imagen tenéis aquí elcampo texto alternativo.
Describe el propósito de laimagen, la longitud de un tweet.
No hace falta mucho más.
Si lo dejáis vacío, WordPressva a interpretar que esa
imagen es contenidoornamental y, por convención,
el texto alternativodebe de ir vacío.
Así el lector de pantallaasumirá que no tiene que decir
nada de esa imagen,no molestará al usuario.
Tenemos otra forma de añadirtextos alternativos en WordPress.
Si nos vamos a la bibliotecade medios, medios biblioteca,
seleccionáis la imagen y aquítenemos el campo texto alternativo.
Tenemos otros campos más queveremos en la siguiente lección.
Vale, vamos bien de tiempo.
Así que resumen de esta primera lección.
La accesibilidad es difícil, pero no tanto.
Hay una gran responsabilidad del contenido.
No dejéis la responsabilidaden la herramienta,
sino en cómo se tieneque usar esa herramienta.
Y ahí cuando añadís contenidotenéis vuestra parte de responsabilidad.
Respetad la jerarquía de encabezados.
Asegurad un contrastemínimo y añadid alternativas
textuales en lasimágenes que lo requieran.
Y esa alternativa textualno pueden ser keywords.
No.
Recordad, 5 puntos menospara Gryffindor también.
Y empezamos con la siguiente lección.
Joer, me he quedado sin tiempo.
[RISAS]
Se siente.
Para la próxima.
Muchísimas gracias.
[APLAUSOS]