Manual de accesibilidad y buenas prácticas para gestores de contenidos
1. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Manual de accesibilidad y buenas prácticas
-Gestor de Contenidos-
1
2. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Índice:
Manual de accesibilidad y buenas prácticas........................................................1
-Gestor de Contenidos-.........................................................................................1
Índice:................................................................................................................. ..2
.
1. Introducción......................................................................................................3
Directrices Prioridad 2...........................................................................................5
2. Crear Información ............................................................................................8
2.1 Orden y consistencia ................................................................................8
2.2 Redacción .................................................................................................8
2.2.1 Utilización de un lenguaje claro y sencillo............................................8
2.2.2 Terminología.......................................................................................12
2.3 Generar una estructura dentro de la página web ...................................12
3. Edición y formato de la información...............................................................16
3.1. Edición de texto........................................................................................17
3.1.1 Herramientas de formato....................................................................18
3.1.2 Cortar y pegar.....................................................................................18
3.1.3 Destacar un texto ..............................................................................20
3.1.4 Listas .................................................................................................21
3.1.5 Enlaces...............................................................................................24
3.1.6 Anclas.................................................................................................28
3.1.7 Página anterior y página siguiente.....................................................31
3.1.8 Tablas.................................................................................................32
3.2. Información gráfica...................................................................................37
3.3.1 Formato..............................................................................................40
3.3.2 Tamaño...............................................................................................41
3.3.3 Uso del euskera..................................................................................42
3.3.4 Etiquetar correctamente los archivos .pdf..........................................43
2
3. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
1. Introducción
El presente manual pretende ofrecer una serie de directrices y pautas a seguir, desde
el punto de vista de la usabilidad y accesibilidad, a la hora de generar información para
los sitios web de los portales de EHU/UPV.
A partir del 31-12-2008 tanto las páginas como los contenidos deben cumplir, por
ley, la prioridad 2 de la norma UNE 139803:2004 (que es compatible con la
certificación AA WCAG -Web Content Accesibility Guidelines- del W3C -Consorcio
World Wide Web-, aunque también incluye 3 directrices que en las WCAG son AAA).
Así pues, este manual recopila todas las directrices de esta norma y, las que afectan a
la edición de contenidos, enlazan a explicaciones de cómo hay que aplicarlas.
Así, debemos tener en cuenta en todo momento lo que se dice en este manual a
la hora de crear y editar contenidos.
Uso del manual:
Las directrices marcadas con N/A (No Aplicable) y gris clarito, en principio, no son
aplicables a la gestión de contenidos; las demás, tienen un enlace a la parte del
manual en la que se trata en profundidad el ámbito y aplicación de la directriz.
De todos modos, conviene leerse el manual completo de manera lineal de principio a
fin, ya que hay secciones que son necesarias para la accesibilidad pero no han sido
enlazadas desde las directrices.
3
4. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Directrices Prioridad 1
4.2.1. Se debe organizar el contenido de la página de forma que conserve su
significado si se presenta sin hojas de estilo. [ver 2.1]
4.2.2. Toda la información expresada a través del color debe estar también
disponible sin color. [ver información sobre el uso del color en el punto 3.1.3]
4.2.3. No debe provocarse el parpadeo de la pantalla. (N/A)
4.3.1. Se deben especificar, con los marcadores adecuados, un título
significativo para cada marco. (N/A)
4.3.2. En las tablas de datos se deben identificar con los marcadores
apropiados los encabezados de fila y de columna. [ver 3.1.8.]
4.3.3. En las tablas de datos que tengan dos o más niveles lógicos de
encabezados de fila o columna, se deben utilizar marcadores para asociar las
celdas de datos con las celdas de encabezado. [ver 3.1.8.]
4.4.1. Los equivalentes para el contenido dinámico deben actualizarse siempre
que cambie ese contenido dinámico. (N/A)
4.4.2. Se debe utilizar un lenguaje que sea lo más claro posible y que resulte
apropiado para el propósito del contenido. [ver 2.2 y 3]
4.4.3. Se debe proporcionar un texto semánticamente equivalente para todo
elemento no textual. [ver información sobre textos alternativos de imágenes en
el punto 3.2.]
4.4.4. Se debe especificar el idioma general de la página web. (N/A)
4.4.5. Se deben identificar con marcadores los cambios en el idioma de
cualquier texto (respecto al idioma definido como principal del documento) que
pueda ser presentado al usuario. [ver información sobre cambios de idioma]
4.5.1. El texto de los enlaces debe identificar claramente su destino y ser lo
más conciso y explícito posible. [ver 3.1.5.]
4.5.2. Se deben proporcionar mapas de imagen controlados por el cliente en
vez de por el servidor salvo que sea estrictamente necesario. (N/A)
4.5.3. Se deben proporcionar enlaces redundantes en formato texto para cada
área activa de un mapa de imagen del servidor. (N/A)
4.6.1. Las páginas deben poder utilizarse aunque los scripts y objetos de
programación estén desconectados o no sean soportados. (N/A)
4.6.2. Los scripts que ofrecen una funcionalidad importante que, además, no se
ofrece a través de otro medio accesible, deben ser directamente accesibles o
compatibles con las ayudas técnicas. (N/A)
4
5. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
4.6.3. Se debe proporcionar una descripción sonora de la información
importante de la pista visual de toda presentación multimedia. [consultar el
manual específico sobre cómo insertar contenido multimedia en la página de
documentación del proyecto web]
4.6.4. Se deben presentar los equivalentes alternativos de una presentación
multimedia de forma sincronizada con dicha presentación. [consultar el manual
específico sobre cómo insertar contenido multimedia en la página de
documentación del proyecto web]
4.7.1. Si, a pesar de esforzarse, no se consigue [...], enlace a página accesible
con información (o funcionalidad) equivalente y actualizada a la vez que la
original. (N/A)
Directrices Prioridad 2
4.1.1. Se deben utilizar las tecnologías publicadas de manera oficial por los
organismos internacionales relevantes, cuando estén disponibles y sean
apropiadas para la tarea, y las últimas versiones en cuanto sean soportadas.
[relacionado con esto, leer el punto 3.1.]
4.1.2. Se deben crear documentos conformes con la sintaxis de las gramáticas
formales publicadas de manera oficial por los organismos relevantes a escala
internacional. [relacionado con esto, leer el punto 3.1.]
4.1.3. Se debe evitar el uso de características obsoletas y desaconsejadas de
las tecnologías del W3C. [relacionado con esto, leer el punto 3.1.]
4.1.4. Se deben proporcionar metadatos para añadir información semántica a
las páginas y los sitios Web, incluidos el elemento “title”, el elemento “address”,
el elemento “meta”, la declaración de tipo de documento, el elemento “link” y
elementos “del” e “ins”, así como los atributos “title” y “cite”. (N/A)
4.2.4. Se deben usar unidades relativas en vez de absolutas en los valores de
los atributos del lenguaje de marcado y en los valores de las propiedades de
las hojas de estilo. [usuarios avanzados]
4.2.5. Se deben usar hojas de estilo para controlar la disposición y la apariencia
de los elementos de la página. [usuarios avanzados]
4.2.6. Si existe un lenguaje de marcado apropiado para transmitir información,
se deben utilizar marcadores en vez de imágenes. [ver 3.2.]
4.2.7. Las combinaciones de color del fondo y del primer plano de las imágenes
deben contrastar lo suficiente. [ver información sobre color y contraste]
4.2.8. No se deben usar tablas para maquetar, a menos que el contenido de la
tabla tenga sentido cuando se represente de manera lineal. [ver 3.1.8.]
5
6. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
4.2.9. Si se utilizan tablas para maquetar, no debe utilizarse ningún marcado
estructural para conseguir un efecto visual de formato. [ver 3.1.8.]
4.2.10. Los elementos de una página no deben parpadear.
4.2.11. Si se incluyen elementos con movimiento, el usuario debe poder
detenerlo. [consultar el manual específico sobre cómo insertar contenido
multimedia en la página de documentación del proyecto web]
4.3.4. Se debe describir el propósito de los marcos y cómo se relacionan entre
sí, si no resulta obvio sólo con los títulos de marco. (N/A)
4.3.5. Se deben usar elementos de encabezado o título para transmitir la
estructura del documento. [ver 2.3.]
4.3.6. Se deben dividir los bloques de información largos en fragmentos más
manejables por donde resulte natural y apropiado. [ver 3.1.6. y 3.1.7.]
4.3.7. Se deben marcar correctamente las listas y los elementos de lista. [ver
3.1.4.]
4.3.8. Se deben marcar correctamente las citas. No debe usarse el marcado de
citas (blockquote, q, cite) para simular efectos de formato tales como la sangría.
[usuarios avanzados]
4.3.9. Se deben proporcionar resúmenes de las tablas de datos usando los
marcadores apropiados. [ver 3.1.8.]
4.4.6. Los contenidos dinámicos deben ser accesibles. (N/A)
4.4.7. Siempre se deben asociar de forma explícita las etiquetas a sus
controles de los formularios. (N/A)
4.4.8. Los controles de formulario con etiquetas asociadas implícitamente
deben tener las etiquetas colocadas de forma adecuada. (N/A)
4.5.4. Si se definen páginas que se auto-refresquen periódicamente, el usuario
debe poder evitar el refresco automático. (N/A)
4.5.5. No deben usarse marcadores para redirigir automáticamente las páginas.
(N/A)
4.5.6. Debe evitarse provocar que aparezcan otras ventanas del navegador,
como expositores o ventanas emergentes, sin informar antes al usuario y darle
opciones para que controle esa aparición. [ver información sobre textos
alternativos de enlaces a página nueva]
4.5.7. Se debe proporcionar información sobre la estructura general de un sitio.
(N/A)
6
7. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
4.5.8. Se deben utilizar los mecanismos de navegación de manera consistente.
(N/A)
4.5.9. Se debe mantener un orden lógico de tabulación a través de los enlaces,
controles de formulario y objetos. (N/A)
4.6.5. Los scripts que ofrecen una funcionalidad no importante que, además, no
se ofrece a través de otro medio accesible, deben ser directamente accesibles
o compatibles con las ayudas técnicas. (N/A)
4.6.6. La ejecución de los scripts debe ser independiente del tipo de dispositivo
de entrada utilizado por el usuario. (N/A)
4.6.7. Cualquier elemento que tenga su propia interfaz debe poder manejarse
de forma independiente del tipo de dispositivo. (N/A)
7
8. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
2. Crear Información
2.1 Orden y consistencia
Usted maneja grandes volúmenes de información por lo que debe prestar especial
atención a la organización y orden en el que suministra su información.
Antes de empezar a editar la información defina qué va a incluir en cada apartado y
procure mantenerse fiel a sus criterios iniciales. Modifíquelos si considera, a partir
de la experiencia, que puede hacerlos aún más útiles.
Procure introducir la información en el apartado previsto para ello. No incluya una
información en un apartado que no corresponde ni repita información en diversos
apartados.
Equilibre la información de manera que no haya secciones con demasiada o poca
información.
Si una sección apenas tiene información plantéese si es necesaria o si la información
puede introducirse en otros apartados. Si por el contrario una sección tiene demasiada
información compruebe si puede dividirla en varias secciones.
La consistencia de criterios es muy importante, al usuario le gusta saber qué está
viendo y que la información se corresponda con lo que le han prometido. No incluya
elementos que no son pertinentes o que no se correspondan con lo anunciado.
2.2 Redacción
2.2.1 Utilización de un lenguaje claro y sencillo.
Algunos usuarios tienen problemas cognitivos y no entienden los textos
complejos. En la medida de lo posible, no utilice construcciones
complicadas ni lenguaje excesivamente técnico.
Procure dirigirse a todos los usuarios en lugar de a los usuarios entendidos en
la materia.
Tenga en cuenta que la lectura en un monitor de ordenador es más
cansada, incómoda y lenta que en un texto impreso. En Internet prima la
rapidez y el usuario realiza mucho menos esfuerzo sobre cada texto. Si un
texto, le aburre o le resulta complejo es probable que busque otro más útil en
otra página.
Utilice técnicas como la pirámide invertida para la construcción de los textos.
Es posible que el usuario no lea la información completa por lo que debe poner
los datos esenciales en el primer párrafo.
8
9. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
La Pirámide Invertida: este método consiste en colocar el núcleo
de la información en el primer párrafo y los detalles que
complementan la noticia se redactan a continuación en orden de
mayor a menor importancia. La pirámide invertida sirve para
ayudar al lector a seleccionar los datos más importantes de cada
información.
En el caso de que redacte hechos puede emplear la técnica de las 6W
utilizada habitualmente por los periodistas.
- QUÉ: implica los acontecimientos.
- QUIÉNES: son los personajes que aparecen en la noticia.
- CUÁNDO: sitúa la acción en un tiempo.
- DÓNDE: delimita dónde se han desarrollado los hechos.
- POR QUÉ: explica las razones de que se den los hechos.
- CÓMO: describe las circunstancias.
Los párrafos deben contener una única idea principal. Procure no introducir
demasiada información en un solo párrafo. Si un concepto es demasiado
complejo, divídalo en varios párrafos donde tratar los diferentes aspectos.
Redacción de párrafos:
Mala práctica:
Una vez finalizado el plazo de preinscripción, la Universidad hará público un
listado citando a los alumnos con día y hora para que acudan a matricularse.
Dicho listado también podrá ser conocido por Internet. El alumno, con
independencia de las opciones elegidas en su preinscripción, podrá
matricularse en cualquier titulación que en el momento de su citación disponga
de plazas libres. El listado con las horas aparecerá en Internet diez días
después de la finalización del plazo de preinscripción.
Buena práctica:
Una vez finalizado el plazo de preinscripción, la Universidad hará público un
listado citando a los alumnos con día y hora para que acudan a matricularse.
Dicho listado también podrá ser conocido por Internet. El alumno, con
independencia de las opciones elegidas en su preinscripción, podrá
matricularse en cualquier titulación que en el momento de su citación disponga
de plazas libres.
El listado con las horas aparecerá en Internet diez días después de la
finalización del plazo de preinscripción.
Contextualice la información, aporte datos sobre dónde se produce el hecho,
cuándo se produce, desde dónde publica, cuándo se publica y quién publica.
9
10. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Los usuarios pueden no conocer el lugar donde se desarrolla el hecho, la
estructura del organismo al que usted pertenece o la cúpula directiva.
Tenga en cuenta que conceptos como ayer, mañana, dentro de dos semanas,
carecen de sentido en una publicación que no se actualiza diariamente. Si no
va a actualizar diariamente utilice fechas concretas del tipo “lunes, 17 de
diciembre de 2006”.
Redacción de fechas y localizaciones:
Mala práctica:
Los alumnos podrán comenzar a inscribirse dentro de diez días hábiles en la
secretaría técnica.
Buena práctica:
Los alumnos podrán comenzar a inscribirse a partir del 10 de septiembre de
2006. La inscripción se realizará en la Secretaría de cada Centro.
Consulte aquí la dirección de Secretaria de su Centro.
No utilice expresiones locales o que comprendan sólo los expertos en la
materia. Internet abarca un gran público, de diferentes edades, lugares y
profesiones, no tienen por que conocer “las expresiones locales”. Por ejemplo
si se refiere al Guggenheim, hágalo como “El museo Guggenheim de Bilbao”,
piense que en total hay cinco museos Guggenheim en el mundo.
Considere que los usuarios pueden proceder de diferentes lugares geográficos
y diferentes contextos culturales.
Use negritas para facilitar la lectura y el escaneo de la página. Procure
transmitir la palabra o concepto esencial de un párrafo o página a través de
este efecto tipográfico. También puede emplear cursivas para indicar las citas.
Siempre que sea necesario utilice listas y viñetas para organizar la
información. Evite las listas de un solo elemento.
Redacción de listas:
Mala práctica:
Documentos necesarios: Fotocopia DNI, Carnet de estudiante, Recibo,
Solicitud.
Buena práctica:
Documentos necesarios:
• Fotocopia del DNI (Documento Nacional de Identidad).
• Carnet de estudiante.
• Recibo del pago de las tasas de inscripción.
• Solicitud cumplimentada.
10
11. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Procure no utilizar acrónimos y abreviaturas y si se ve abocado a ello debe
indicar el nombre al que se refieren la primera vez que lo utiliza en el texto: UE
(Unión Europea).
No utilice palabras en otro idioma y si lo hace ofrezca traducciones o
explicaciones del término entre paréntesis. Por ejemplo: Ferroutage (Proyecto
Europeo de Conexión Intermodal Ferroviaria).
Si utilizamos palabras en otro idioma, deberemos marcar el cambio de idioma
en el código fuente de la página, salvo en los casos siguientes: nombres
propios, términos técnicos, palabras de idioma indeterminado, y palabras o
frases que, aunque no pertenezcan al idioma general de la página, su uso esté
ampliamente extendido.
Al existir un variado número de preferencias o de circunstancias culturales o de idioma, es
importante utilizar identificadores basados en el idioma y lugar como referente para recoger
información sobre las preferencias de los usuarios. XML utiliza el atributo xml:lang con ese
objetivo.
Es importante marcar cualquier cambio de idioma que se pueda producir a lo largo del texto en
una página Web (salvo en los casos concretos mencionados anteriormente). Un ejemplo sería:
<p>Mañana empieza el congreso <span xml:lang="en">V International Conference on Science
and Technology of Composite Materials</span></p>
<p>El concierto de esta edición es una celebración del espíritu navideño a través de músicas de
todas las épocas y villancicos tradicionales de diversos países, entre ellos piezas muy populares
como <span xml:lang="eu">Aurtxo Txikia</span>, <span xml:lang="fr">Cantique de
Noël</span> o <span xml:lang="eu">Mesias sarritan</span>, entre otros.</p>
Los idiomas se especifican a través de un código estándar (ISO 639), como se aprecia en los
ejemplos anteriores.
No hay que olvidar tampoco indicar, si incluimos un enlace a otra página, el idioma en el que esa
página se va a mostrar, esta vez se indicará con hreflang
<a href="http://www.w3.org/International/questions/" hreflang="en">
Preguntas frecuentes sobre Internacionalización</a>
Utilice correctamente las palabras o frases en mayúsculas. No utilice
mayúsculas cuando no sea necesario gramaticalmente ni para aplicar efectos
de formato. Las mayúsculas dificultan la lectura de los textos.
No llame la atención del usuario mediante signos de exclamación, mayúsculas
o uso incorrecto de la puntuación (Por ejemplo: ¡Matrícula abierta!, …………
MATRICULA ABIERTA……….., M A T R I C U L A A B I E R T A,
M.A.T.R.I.C.U.L.A A.B.I.E.R.T.A, ).
No impacte a los usuarios, infórmelos.
2.2.2 Terminología
Procure utilizar siempre la misma terminología. Si se refiere por ejemplo a
un “proceso de inscripción”, utilice en todo momento el mismo término y no
11
12. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
otros como “métodos de inscripción”, “inscripción”, “fase de inscripción”.
Diferentes términos para un mismo concepto lo convierten en un proceso
complejo.
En Internet se utilizan a menudo diferentes términos técnicos y metáforas para
referirse a un mismo concepto. Así por ejemplo se utilizan los términos “la web”
o “el WWW” para referirse a Internet o “hipervínculos” para referirse a enlaces.
También es habitual el uso de anglicismos como “home” o “link”.
El uso de diferentes términos para referirse a un mismo concepto puede
confundir al usuario. No todos los usuarios hablan inglés o comprenden las
“metáforas de la web”.
Use términos estandarizados y a poder ser recogidos en el diccionario.
Defina en un documento de terminología el rotulado y la terminología a utilizar
en el sitio web. Procure utilizar términos en el idioma empleado en el sitio web
en lugar de anglicismos. Si tiene dudas con algún término consulte los
diccionarios oficiales, por ejemplo, EUSKALTERM:
http://www1.euskadi.net/euskalterm/indice_c.htm
A continuación le proponemos un ejemplo de documento de terminología:
Documento de terminología:
Usar En lugar de… Para referirse a …
Sitio web Web, página web, sitio, la web Un sitio web.
Página web La web, página. Una página, un HTML en
concreto.
Enlace Link
Más información +Info, Más…, leer más, ver más…,
sobre información
Internet internet, la web, el WWW.
2.3 Generar una estructura dentro de la página web
Al aplicar formato a un texto indicamos visualmente las relaciones jerárquicas
dentro del mismo. Así, al título principal le aplicamos un cuerpo de letra más
grande que a un título secundario. De la misma manera un párrafo lleva un
formato y una nota al pie lleva otro formato.
Los lectores de ciegos y determinados dispositivos de acceso no muestran
estas diferencias de formato que jerarquizan el texto por lo que el usuario
percibe toda la información al mismo nivel.
Para evitar esto, es necesario crear una estructura dentro de la página web que
indique que un texto actúa como párrafo normal o como encabezado. Usted
puede emplear 8 categorías para indicar la estructura de la página:
12
13. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
- Normal
- Encabezado de primer nivel
- Encabezado de segundo nivel
- Encabezado de tercer nivel
- Encabezado de cuarto nivel
- Encabezado de quinto nivel
- Encabezado de sexto nivel
- Dirección
Encabezados:
Mala práctica:
Texto normal: Proceso de inscripción. Normativa para el proceso de
inscripción. Una vez finalizado el plazo de preinscripción, la Universidad hará
público un listado citando a los alumnos con día y hora para que acudan a
matricularse. Normativa del proceso de inscripción: En el presente documento
puede encontrarse todo lo referente a la normativa del proceso de inscripción.
Buena práctica:
Encabezado de primer nivel: Proceso de inscripción.
Encabezado de segundo nivel: Normativa para el proceso de inscripción.
Texto normal: Una vez finalizado el plazo de preinscripción, la Universidad
hará público un listado citando a los alumnos con día y hora para que acudan a
matricularse.
Encabezado de segundo nivel: Información del proceso de inscripción
Texto normal: En el presente documento puede encontrarse todo lo referente a
la normativa del proceso de inscripción.
En el gestor el texto con encabezados se visualizará de la siguiente manera:
13
14. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Encabezados:
Proceso de inscripción
Normativa para el proceso de inscripción
Una vez finalizado el plazo de preinscripción, la Universidad hará público un listado
citando a los alumnos con día y hora para que acudan a matricularse.
Información del proceso de inscripción
En el presente documento puede encontrarse todo lo referente a la información del
proceso de inscripción.
Puede definir la estructura de texto empleando el segundo desplegable de la
barra inferior:
Encabezados. Menú desplegable:
No se aconseja el uso de las herramientas de formato para aplicar jerarquía a
la página web, ya que recargan el peso de la página y sólo muestran la
jerarquía visualmente. Los lectores de ciegos no diferencian un tipo de letra o
un tamaño o un color diferente:
Herramientas de formato:
Tampoco se aconseja el uso de estilos porque aplican un mismo formato a
diferentes textos pero no lo identifican semánticamente. Así un estilo “título”
define el formato que llevarán todos los títulos pero no indicará al lector de
ciegos que este texto tienen la función de “titulo”:
Estilos:
14
15. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Por razones de accesibilidad utilice los encabezados para crear una
estructura dentro de la página web y mostrar las diferentes jerarquías
dentro de la información.
15
16. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
3. Edición y formato de la información
Antes de nada, recordar que cuando generamos un documento, bien sea en
castellano o en euskera, es necesario que el título y la descripción del mismo
sean claros.
En el ejemplo podemos observar como una mala notación del título y el no
poner descripción da por resultado….
NO
…. que cuando un usuario introduzca, por ejemplo, la palabra “vivienda” en el
buscador general obtenga un resultado que le dice bien poco sobre el
contenido que se va a encontrar:
NO
Si, por el contrario, se hubieran introducido los datos con mayor precisión el
resultado de búsqueda hubiera sido mucho más rico y preciso, como se puede
apreciar en el mismo contenido una vez realizado el cambio oportuno:
Cambio en el Gestor de Contenidos:
16
17. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
SI
Resultado de búsqueda del Contenido con el buscador:
SI
Además no sólo debemos tener cuidado en designar bien un documento.
También resulta muy importante que los documentos NO tengan el mismo
nombre para evitar casos como el de la imagen:
NO
3.1. Edición de texto
17
18. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Se recomienda escribir y editar el texto directamente sobre el campo de
edición de texto. Si no fuera posible es obligatorio seguir las indicaciones
sobre cómo pegar texto de otros editores.
3.1.1 Herramientas de formato
El gestor dispone de diferentes herramientas para aplicar formato visual al
texto.
Por razones de accesibilidad se desaconseja el uso de las siguientes
herramientas de formato:
Tipografía. No genera código accesible.
Tamaño de fuente. No genera código accesible.
Color. No genera código accesible.
Subrayado. El subrayado debe ser utilizado
exclusivamente para los enlaces y debe estar
predeterminado por la hoja de estilo.
Márgenes. No genera código accesible.
Alineación. No genera código accesible.
3.1.2 Cortar y pegar
Al escribir sobre programas de edición de texto como Word, QuarkXpress,
Adobe InDesign, etc., el programa anota de manera oculta junto a los textos
etiquetas con el formato. El usuario no puede verlas, sin embargo estas
etiquetas quedan incrustadas junto al texto.
Si copiamos un texto escrito en un programa de edición de texto sobre el
área de trabajo del gestor, las etiquetas con el formato son arrastradas
junto a él. Estas etiquetas se insertan en el código HTML de la página web
convirtiéndola en una página no accesible.
18
19. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Herramientas de formato:
Texto visible:
Una vez finalizado el plazo de preinscripción, la Universidad hará público un
listado citando a los alumnos con día y hora para que acudan a matricularse.
En el presente documento puede encontrarse todo lo referente a la normativa
del proceso de inscripción.
Código del texto pegado incorrectamente:
<p style="margin: 0pt 0pt 0pt 35.4pt; textalign: left" class="MsoNormal"
align="left"><font size="2">Una vez finalizado el plazo de
preinscripción, la Universidad hará pú lico un listado
b
citando a los alumnos con día y hora para que acudan a matricularse.
En el presente documento puede encontrarse todo lo referente a la normativa
del proceso de inscripción. </font></p>
Código del texto pegado como texto plano:
Una vez finalizado el plazo de preinscripción, la Universidad
hará público un listado citando a los alumnos con día y
hora para que acudan a matricularse. En el presente documento puede
encontrarse todo lo referente a la normativa del proceso de inscripción.
Lo mismo ocurre cuando pegamos un texto que hemos copiado de otra página
web. El texto arrastra unas etiquetas de formato ocultas en el código de la
página web que pueden no ser accesibles. Las etiquetas se incrustarán en el
código de su página convirtiéndola en no accesible.
Para evitar esto, siempre que se pegue texto procedente de otras
aplicaciones, es obligatorio convertir el texto en texto plano antes de
pegarlo en el gestor.
Un método para pegar un texto como texto plano es utilizar el menú contextual,
opción pegar como texto plano (“Paste Text”).
19
20. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Pegar como texto plano:
Pegar como texto plano
Otro método consiste en utilizar un editor de texto plano como el bloc de notas
de Windows para eliminar el formato. Para ello hay que seleccionar el texto y
pegarlo en el bloc de notas. A continuación se vuelve a copiar el texto desde
el bloc de notas y se pega en el editor del gestor.
Pegar como texto plano:
Bloc de notas Editor de información UPV
…
3.1.3 Destacar un texto
Por razones de accesibilidad no utilice mayúsculas, colores, subrayados o
textos de mayor o menor tamaño para enfatizar un texto o transmitir
información (por ejemplo para marcar una diferencia o para agrupar dentro de
una categoría).
Se debe evitar el uso indiscriminado de mayúsculas en los contenidos, ya que
dificultan la lectura de los textos. Y se debe tener en cuenta que es obligatorio
el uso de la tilde en las mayúsculas.
Los subrayados se pueden confundir con enlaces e inducir a error.
Determinados dispositivos como algunos móviles, lectores de ciegos, etc. y
personas con deficiencias visuales, no diferencian los colores por lo que no
percibirán la información destacada a través del color (esto también afecta a
imágenes o iconos que informen por el color). Por ejemplo: palabras clave de
un texto resaltadas con un color concreto, verde/bien – rojo/mal...
20
21. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Si se desea resaltar un texto se recomienda el uso de cursivas y negritas.
Resaltar texto:
Mala práctica:
“Nuevo master en Relaciones Laborales. Haga clic aquí para
inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
Buena práctica:
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
Si utiliza un color de texto asegúrese de que existe suficiente contraste entre el
fondo y el texto.
Para analizar el contraste entre fondo y texto puede usar las siguientes
herramientas:
http://juicystudio.com/services/colourcontrast-es.php
http://www.wat-c.org/tools/CCA/1.1/index.html#download
Los colores y tipografías vienen definidos en el libro de estilo.
3.1.4 Listas
En el gestor de contenidos hay dos tipos de listas que pueden emplearse:
- Ordenadas: son usadas para listados en los que el orden de los elementos
es importante, como por ejemplo un listado de noticias ordenado por fecha,
un listado de documentos impresos a entregar por orden, un procedimiento
secuencial.
Lista ordenada:
Ejemplo: Procedimiento de solicitud de beca
1. Realizar la Preinscripción
2. Recibir la confirmación de admisión
3. Realizar la matrícula
4. Realizar la solicitud de beca
5. Entregar la documentación
21
22. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
- Desordenadas: están destinadas a marcar listados desordenados, en las
que sólo nos interesa resaltar el hecho de que los elementos forman una
lista, independientemente del orden de dichos elementos.
Lista desordenada:
Ejemplo: Documentación a entregar:
- Fotocopia del Carnet de identidad
- Declaración de recursos
- Certificado de la renta
- Fotocopia de la matrícula
- Fotocopia del carnet de estudiante
El gestor permite introducir listas ordenadas numéricamente y listas
desordenadas seleccionando el texto y pulsando en los iconos
correspondientes.
Iconos de listas:
Listas ordenadas Listas desordenadas
Es aconsejable que utilice las listas correctamente, es decir las listas
ordenadas numéricamente para procedimientos o procesos en los que el orden
es importante y las listas desordenadas para enumerar elementos donde el
orden no es importante.
Las listas deben poder ser leídas de forma lineal.
NO
22
23. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
SI
Los contenidos susceptibles de ir en listas DEBEN ir en listas con viñetas.
NO
23
24. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
SI
3.1.5 Enlaces
Palabras o frases situadas dentro del texto pueden actuar como enlaces.
Para que el usuario comprenda que son enlaces se aconseja subrayarlos (la
herramienta lo hace automáticamente al crear el enlace).
No utilice frases excesivamente largas como enlaces, ni demasiados enlaces
por párrafo. Si un enlace se repite varias veces basta con que lo indique la
primera vez. Procure no señalar más de un enlace por párrafo.
No redacte URL’s como enlaces ni las incluya entre paréntesis.
Redacción de enlaces:
Mala práctica:
Una vez finalizado el plazo de preinscripción, la Universidad hará público un
listado citando a los alumnos con día y hora para que acudan a matricularse.
Dicho listado(http://www.ehu.net/matricula.asp) también podrá ser conocido
por Internet. El alumno, con independencia de las opciones elegidas en su
preinscripción, podrá matricularse en cualquier titulación que en el momento
de su citación disponga de plazas libres. El listado con las horas aparecerá en
Internet diez días después de la finalización del plazo de preinscripción.
Buena práctica:
Una vez finalizado el plazo de preinscripción, la Universidad hará público un
listado citando a los alumnos con día y hora para que acudan a matricularse.
Dicho listado también podrá ser conocido por Internet. El alumno, con
independencia de las opciones elegidas en su preinscripción, podrá
matricularse en cualquier titulación que en el momento de su citación disponga
de plazas libres.
24
25. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
En otras ocasiones los enlaces se añaden como frases sueltas, generalmente
para ampliar información o indicar acciones.
Redacte enlaces suficientemente significativos y que puedan comprenderse
fuera de contexto. Tenga en cuenta que a veces los usuarios no leen los
párrafos y clican directamente a los enlaces.
Lo enlaces del tipo “haga clic aquí.” o “más información.” o “leer más.”
no son aconsejables por que no describen suficientemente el enlace. Algunos
dispositivos leen sólo los enlaces y encabezados de las páginas a la hora de
navegar, obviando el texto “normal”. Así mismo, los buscadores utilizan los
enlaces para interpretar y clasificar la página.
Redacción de enlaces:
Mala práctica:
Una vez finalizado el plazo de preinscripción, la Universidad hará público un
listado citando a los alumnos con día y hora para que acudan a matricularse.
+ info
Más…
Información
Inscripción
Buena práctica:
Una vez finalizado el plazo de preinscripción, la Universidad hará público un
listado citando a los alumnos con día y hora para que acudan a matricularse.
Más información sobre el proceso de inscripción.
Realizar la inscripción online.
Mala práctica:
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí.”
Buena práctica:
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
Cuando usted ofrece un enlace interno o externo dirige al usuario a una página
diferente. Debe por tanto indicarle correctamente donde va antes de que el
usuario haga clic en el enlace.
25
26. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Redacción de enlaces:
Mala práctica:
“Nuevo master en Relaciones Laborales. Haga clic aquí.”
Buena práctica:
“Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”
Para insertar un enlace correctamente utilice el botón correspondiente que abre
una ventana nueva donde etiquetar el enlace.
Icono de insertar enlace:
Insertar enlace
Ventana de edición del enlace:
El bloque “Tipos de URL” le permite seleccionar el tipo de información al que
enlaza.
El campo “Texto” recoge el texto del enlace, el texto que aparecerá en la
página web.
El campo “Texto alternativo” recoge el texto que aparece junto al cursor al
posarse en el enlace. El texto alternativo debe incluir información
complementaria sobre el enlace. Procure no introducir información redundante
o incompleta como texto alternativo.
26
27. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
El campo “Desea abrir este link en una nueva ventana del navegador”
ofrece la opción de abrir el enlace en ventana nueva. Se recomienda usar esta
opción cuando se enlace con documentos no web, como por ejemplo ficheros
de texto rtf o pdf o si enlaza con una página web externa a la UPV.
Texto alternativo de los enlaces:
Mala práctica:
Texto: Haga clic aquí para inscribirse.
Texto alternativo: Haga clic aquí para inscribirse.
Texto alternativo: Inscríbase.
Buena práctica:
Texto: Haga clic aquí para inscribirse.
Texto alternativo: Abre un formulario de inscripción en el master de
Relaciones Laborales.
Texto alternativo: Abre en ventana nueva un fichero PFD con un
formulario de inscripción en el master de Relaciones Laborales.
Mala práctica:
Texto: Ir al sitio web del gabinete de prensa.
Texto alternativo: www.gabinetedeprensa.ehu.com
Texto alternativo: gabinete.
Buena práctica:
Texto: Ir al sitio web del gabinete de prensa.
Texto alternativo: Acceda al gabinete de prensa para consultar las
últimas noticias de la UPV.
Si un texto alternativo no aporta nada al texto del enlace quizás esté mal
redactado. Si un texto de enlace es suficientemente descriptivo por sí mismo
quizás no sea necesario incluir un texto alternativo.
Siempre que pueda indique la información sobre la página a la que enlaza,
si hay cambio de idioma y si la página es accesible. Para considerar una
página accesible busque en ella los logotipos de la WAI.
Logotipos de WAI:
El sitio web puede haberlos “personalizado”:
27
28. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Mala práctica:
Texto: Ir al sitio web del gabinete de prensa.
Texto alternativo: www.gabinetedeprensa.ehu.com
Texto alternativo: gabinete.
Buena práctica:
Texto: Ir al sitio web del gabinete de prensa (en euskera).
Texto alternativo: Sitio web accesible.
En la medida de lo posible evite los enlaces complejos o direcciones
dinámicas. Simplifique las direcciones reenviando a la página de inicio del web
y no a páginas secundarias o temporales. Por ejemplo: en lugar de reenviar al
usuario a la página http://www.educación.net/index.php envíelo a
http://www.educación.net/
Verifique siempre la existencia del sitio enlazado y plantéese si realmente
aporta algo al usuario.
3.1.6 Anclas
Las anclas permiten enlazar con una sección o palabra en concreto dentro de
la página web.
Para insertar un ancla sitúe el cursor en el lugar donde desea insertarla y haga
clic en el botón ancla.
Icono de insertar anclas:
Ancla
A continuación se abre la ventana de edición de ancla donde puede dar un
nombre al ancla y añadirlo a la lista de anclas de la página.
28
29. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Ventana de inserción de anclas:
Puede añadir tantas anclas como sea necesario.
Una vez introducida el ancla en la página debe crear un enlace que al pulsarlo
lleve al usuario directamente al ancla. Para ello seleccione el texto que desea
que actúe como enlace, sitúe el cursor sobre él y haga clic en el botón derecho
para que se despliegue el menú contextual. Seleccione después “hyperlink”
para que se abra la ventana de enlace. En la sección “Quick Linck” puede
seleccionar el ancla a la que desea enlazar.
Ventana de enlace a las anclas:
29
30. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Las anclas se usan habitualmente para crear un menú secundario en la
parte superior de la página. Si una información es demasiado extensa puede
dividirla en secciones e insertar un ancla dentro de cada sección. Después
basta con incluir un menú con todos los títulos de sección en la parte superior y
enlazar con cada ancla correspondiente.
Buena práctica:
Información de la página web:
1.
Introducción.
(Enlace a ancla1)
2.
Marco teórico. (Enlace a ancla2)
3.
Estudios de caso. (Enlace a ancla3)
4.
Conclusiones. (Enlace a ancla4)
1. Introducción (ancla1)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus
tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.
Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas
fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus
convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin
eget, laoreet sed, sem. Morbi pharetra volutpat lorem.
2. Marco teórico (ancla2)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus
tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.
Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas
fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus
convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin
eget, laoreet sed, sem. Morbi pharetra volutpat lorem.
3. Estudios de caso (ancla3)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus
tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.
Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas
fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus
convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin
eget, laoreet sed, sem. Morbi pharetra volutpat lorem.
4. Conclusiones (ancla4)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus
tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.
Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas
fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus
convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin
eget, laoreet sed, sem. Morbi pharetra volutpat lorem.
30
31. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
3.1.7 Página anterior y página siguiente
Otra manera de organizar los textos demasiado largos es usar esta opción que
ofrecen la mayoría de las plantillas del Gestor de Contenidos.
Accederemos a la pantalla de introducción de datos y en los campos Página
anterior y Página siguiente cargaremos los archivos (páginas) que queramos
enlazar desde el primer archivo visualizado del documento. Al pulsar el botón
Browse, escogeremos el documento HTML con el nombre del archivo que
carguemos como página anterior o siguiente (en este caso:
not_soport_port.html), y pulsaremos el botón OK, como aparece en la imagen
de ejemplo.
31
32. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
El botón nos permite realizar una previsualización del contenido tal
y como se podría ver en Internet. Correspondería con el área que se enmarca
en la imagen de ejemplo. En las bandas grises podemos ver el resultado de
haber enlazado archivos (páginas) Anterior y Siguiente:
3.1.8 Tablas
La regla general es no usar tablas y en ningún caso utilice tablas para
lograr efectos de formato (columnas, entradillas, etc.). Si resulta
imprescindible, se permite su uso únicamente para marcar información tabular
(tablas de datos).
Icono para insertar tabla:
Insertar tabla
Pulse en el icono “Insertar tabla” y a continuación se abre una ventana en la
que puede configurarse la nueva tabla.
32
33. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Ventana de configuración de tabla:
“Size” permite determinar el número de filas (“rows”) y columnas (“columns”).
“Layout” establece el tamaño de la tabla (“Width”) y el alineamiento (“Horizontal
Alignment”)
“Borders” > “Border Size” establece el tamaño del borde.
“Custom Background” permite introducir un color de fondo o una imagen. No se
recomienda el uso de imágenes de fondo en las tablas porque reduce la
visibilidad del texto. Si emplea colores como fondos de tablas asegúrese de
que existe suficiente contraste entre el texto y el fondo y que los colores
que se usen estén aprobados en el Libro de Estilo.
Las tablas mal empleadas presentan especiales dificultades para los usuarios
de lectores de pantalla. Algunas aplicaciones de usuario navegan entre las
celdas de las tablas y acceden a los encabezamientos y otras informaciones de
las celdas.
A menos que marquemos apropiadamente las tablas, éstas no proporcionarán
a la aplicación de usuario la información necesaria.
33
34. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Uso de tablas:
Mala práctica:
Master en Relaciones laborales
Ya están disponibles los diferentes documentos para inscribirse en el nuevo
master de Relaciones Laborales ofertado por la Universidad del País Vasco.
Los interesados pueden consultar la documentación en el sitio web del
programa.
Otros datos de interés: Fotografía
Datos técnicos: Programa sectorial
Requisitos mínimos: Licenciatura
Calendario: 10 de septiembre a 25 de
mayo
Buena práctica:
Tabla 1: Datos educativos de Euskadi
Estudiantes por Profesores Colegios por zona
Aula
Gipuzkoa 35 45 48
Bizkaia 20 37 48
Araba 26 52 39
Titule las tablas y utilice celdas de encabezado para identificar los datos.
Utilice la alineación superior en las tablas. Algunos lectores tienen dificultad
para leer las tablas centradas vertical y horizontalmente.
Los encabezados de una tabla son las primeras celdas de las columnas o filas
y su función es identificar los datos de esa columna o fila. Así en nuestro
ejemplo los encabezados de columna son: Estudiantes por aula, Profesores,
Colegios por zona. Los encabezados de fila son: Gipuzkoa, Bizkaia y Alaba.
Ejemplo de cómo hacer las tablas accesibles:
Cuando se crea una tabla usando el editor de texto del gestor debemos entrar
en la sección de Accesibilidad y especificar si la tabla tiene encabezados
(Heading Rows y Heading Columns), rellenar el Summary (esta información no
se verá pero sirve para explicar el contenido de la tabla a los lectores de
pantalla; en el caso del ejemplo debería ser algo así: “Datos de Estudiantes por
aula, Profesores y Colegios por Zona en Gipuzkoa, Bizkaia y Álava”) y escribir
el título de la tabla en la sección Caption:
34
35. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Por otro lado, también se debe rellenar el apartado de Accesibilidad de las
celdas de encabezamiento. Haciendo click con el botón derecho del ratón
sobre el encabezado, seleccionar Table y después Cell Properties... En la
ventana que se abrirá deberemos rellenar la parte sobre accesibilidad:
35
36. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
La sección Abbreviation tiene dos usos:
• Abreviar contenidos largos: Este atributo debería usarse para
proporcionar una forma abreviada del contenido de la celda; los agentes
de usuario pueden representar esta forma abreviada en lugar del
contenido de la celda cuando sea apropiado. Los nombres abreviados
deberían ser cortos, ya que los agentes de usuario pueden
representarlos repetidas veces. Por ejemplo, los sintetizadores de voz
pueden representar los encabezados abreviados relacionados con una
celda en particular antes de representar el contenido de esa celda. En el
ejemplo que nos ocupa, podríamos usar como forma abreviada:
estudiantes, colegios... para que las herramientas no repitan todo el
texto cada vez que lean una celda.
• Expandir formas abreviadas: si el contenido de una celda es una
abreviatura, deberemos dar la forma expandida rellenando este campo.
Por ejemplo, si hemos usado L, M, X, J, V, S, D deberemos especificar
en el campo Abbreviation la forma expandida (Lunes, Martes, etc...)
La sección Categories sólo es necesario rellenarla en tablas muy complejas.
Sirve para relacionar celdas entre sí asignándoles una categoría concreta.
En la tabla del ejemplo, aunque no sería necesario usar este atributo, se podría
asignar la categoría “provincia” para la primera columna. Conviene usarlo
cuando hay muchos encabezados que interactúan, como podría ser el caso de
una tabla en la que se muestren datos por campus, centro, fecha...
36
37. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
3.2. Información gráfica
Las informaciones gráficas son las fotografías, imágenes y gráficos que se
introducen en una página para ampliar o ilustrar la información.
Procure utilizar informaciones gráficas de calidad. Evite las fotografías no
enfocadas u oscuras.
Utilice imágenes que transmitan ideas o conceptos. Las imágenes hacen
que la página pese más y tarde en descargarse. No utilice las informaciones
gráficas como decoración; asegúrese de que aporten algo a los textos que
acompañan.
Antes de insertar la imagen en el gestor tiene que redimensionarla y
ajustarla mediante un programa de retoque para asegurar la mejor calidad
visual y de compresión. El gestor ofrece la posibilidad de redimensionar las
imágenes pero no se aconseja utilizar esta opción.
No pegue la imagen directamente en el campo de edición de texto, utilice
el icono “insertar imagen” para añadir una imagen que previamente habremos
subido al servidor.
Icono de inserción de imágenes:
Insertar imagen
37
38. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Ventana de inserción de imagen:
El campo “File Selection” le permite localizar la imagen.
Las opciones de “Layout” y “Spacing” permiten redimensionarla y alinearla en
la página. Se recomienda no usar la opción “Layout”.
El campo “Title” permite introducir una descripción de la fotografía (el texto
alternativo; se puede ver pasando el ratón sobre la imagen).
Por razones de accesibilidad está obligado a describir la información de la
imagen si ésta aporta información. No está obligado a describir elementos
decorativos (iconos, fondos de menú, etc.) pero sí aquellos elementos que
transmiten información (logotipos, fotografías, etc.).
El texto debe ser suficientemente descriptivo para que los usuarios que no
pueden ver la imagen se hagan una idea precisa de la información que
transmite.
38
39. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Redacción de texto alternativo de imágenes:
Ejemplo:
Mala práctica:
Tiltle: Inscripción alumnos.
Buena práctica:
Tiltle: Alumnos de la UPV realizando el proceso de inscripción.
Si introduce un elemento decorativo (una línea, icono, etc.) no rellene el campo
Title para que los dispositivos de accesibilidad puedan saltar estas imágenes
dado que no aportan valor informativo.
Redacción de texto alternativo de imágenes:
Ejemplo:
Mala práctica:
Tiltle: Línea de separación horizontal.
Buena práctica:
Tiltle:
Si la imagen contiene un enlace a otra página, se debe incluir la leyenda
“Acceso a...”
39
40. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
3.3. Ficheros no web.
Los ficheros no web se deberán abrir siempre en una ventana nueva.
3.3.1 Formato
Si lo desea puede realizar un enlace a un fichero no web adjunto. En la medida
de lo posible intente siempre ofrecer la información en formato html a través del
gestor. Si fuera necesario incluir una información en otro formato (Pdf, Rtf,
Doc..) siga siempre las siguientes recomendaciones.
Debe usar formatos estándares no propietarios, como el RTF, PDF y los Open
Documents (documentos creados con el Open Office, versión no propietaria del
Microsoft Office). Los formatos propietarios no son accesibles para las
personas que no dispongan del visor Microsoft en cuestión instalado y para los
dispositivos de ayuda a personas discapacitadas. Debe usar formatos no
propietarios.
Si utiliza un formato RTF, DOC (formato propietario) o PDF, debe etiquetar
estrictamente todo el texto con los Estilos y Formatos ya que éstos
determinarán la estructura del documento de texto.
Como norma general, ofrezca siempre Open Documents además de los
típicos Word, PowerPoint y Excel.
Para pasar los archivos DOC, PPT y XLS a formato Open Document, sólo hay
que instalar el Open Office*, abrir los documentos con el programa que
corresponda y guardarlo en el formato estándar:
Word (DOC) OpenOffice Writer OpenDocument Text (ODT)
PowerPoint(PPT) OpenOffice Impress OpenDocument Presentation(ODP)
Excel (XLS) OpenOffice Calc OpenDocument Spreadsheet (ODS)
Si se usa algún otro programa, si se desea, se puede ofrecer un enlace a la
página de Ayuda de ehu.es donde se recogerán enlaces a todos los lectores o
reproductores que permitan visualizar todos los contenidos incorporados en las
páginas web. El texto a incorporar será el siguiente:
Si no dispone del programa necesario para visualizar este archivo puede
descargarlo desde nuestra Página de Ayuda.
No se recomienda, por tanto, incluir enlaces a los reproductores desde las
páginas de los diferentes portales sino centralizar todo este tráfico en la página
de Ayuda de ehu.es destinada a tal efecto.
Utilice nombres de ficheros descriptivos de los mismos.
Además, TODOS los ficheros adjuntos (pdf, rtf o doc, ppt, excel –no
recomendados–), cualquiera que sea su naturaleza, deben llevar entre
paréntesis el tipo de fichero y su tamaño en KB o MB.
Se puede descargar de la siguiente dirección web: http://es.openoffice.org/programa/index.html
*
40
41. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Mala práctica:
Descargar la solicitud de admisión
Buena práctica:
Descargar la solicitud de admisión. (pdf, 45 KB)
3.3.2 Tamaño
Además se indicará, entre paréntesis, utilizando la nomenclatura propuesta e
indicando el tamaño en “KB” cuando éste sea inferior a 1 Mega y “MB” cuando
sea igual o superior.
En este sentido no se debe redactar una frase referida al link, del tipo “haz clic
aquí para más información”. Escribe la frase como lo harías normalmente y
coloca la referencia de enlace en la palabra o palabras que mejor describen
los contenidos adicionales con los que enlazan.
Mala práctica:
Para ver el organigrama pincha aquí.
Buena práctica:
Organigrama del Departamento (pdf, 1,4 MB)
Se recomienda encarecidamente incluir comentarios a los enlaces, es decir,
que el usuario tenga no sólo la posibilidad de descargar un determinado
documento sino que antes de descargarlo obtenga una breve explicación sobre
su contenido. Se trata de evitar situaciones como la de la imagen siguiente:
41
42. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Buena práctica:
3.3.3 Uso del euskera
El Decreto de Modelo de Presencia en Internet de ehu.es obliga a que todos
los contenidos DEBAN aparecer tanto en castellano como en euskera. En
este sentido, todos los textos que aparezcan en la sección de euskera deberán
estar en este idioma y los adjuntos deberán estar también traducidos al
euskera.
Actualmente gran cantidad de contenidos no cumplen en absoluto con esta
norma obligatoria.
Hasta que se llegue al total cumplimiento de este punto, para los archivos
adjuntos aún sin traducir, se propone mantener el nombre en el idioma original
del documento y especificar el idioma en el que está. Por ejemplo:
Mala práctica:
Informe general, (pdf, 480 KB)
Txosten orokorra, (pdf, 480 KB)
Txosten orokorra, Gazteleraz, (pdf, 480 KB)
Buena práctica:
Informe general, Gazteleraz, (pdf, 480 KB)
NOTA: Al subir los archivos adjuntos al servidor con el Gestor de Contenidos,
ha de tenerse en cuenta que los nombres de los archivos no deben contener
caracteres extraños : blancos, @, comas, comillas, acentos, etc…
42
43. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
De no seguirse esta norma, es posible que surjan problemas para acceder a
los adjuntos, produciéndose errores al abrirlos o guardarlos.
3.3.4 Etiquetar correctamente los archivos .pdf
Al crear un archivo PDF con Adobe Acrobat hay que tener en cuenta varias
cosas para optimizar su presencia en Internet.
Por motivos de accesibilidad y para que los buscadores encuentren estos
archivos convenientemente se deben seguir estos pasos:
- Rellenar correctamente los datos que describen el archivo: en Archivo >
Propiedades de documento...
Es muy importante poner un Título coherente y significativo, ya que es un dato
público que aparecerá en muchos buscadores (google, por ejemplo, usa este
dato como título –texto azul subrayado– en sus resultados de búsqueda).
43
44. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Conviene, también, rellenar el resto de apartados de la Descripción con datos
precisos y explicativos.
Ésta será la única información visible para los buscadores en el caso de los
PDFs creados con imágenes escaneadas, así que es la única manera de que
puedan ser encontrados por los buscadores. Aún así, se recomienda no hacer
PDFs de este tipo, ya que no son en absoluto accesibles.
Si se quiere añadir aún más información al documento, elegir la opción
“Metadatos adicionales...” en la misma ventana de la Descripción y rellenar los
campos que interese.
- Lo siguiente a tener en cuenta es la especificación PDF. Parece ser que
algunos buscadores no indexan documentos con la especificación 1.6 (que
es la que en principio usa el Acrobat 7). Para comprobar esto se puede usar
el Optimizador de PDF en el Acrobat 7 Professional (Avanzadas >
Optimizador PDF...), donde se puede cambiar la versión del PDF a 1.5 ó 1.4
(Hacer compatible con: Acrobat 5.0 y posterior) para que sea compatible
con todos los motores de búsqueda.
- Si es de vital importancia que los buscadores indexen el documento por
completo habrá que tener en cuenta el tamaño del mismo, ya que algunos
motores de búsqueda dejan de leerlo pasado cierto límite, que oscila entre
los 100 y los 500 KB. En estos casos conviene partir los documentos
grandes en varios de menor tamaño. De esta manera los buscadores leerán
cada palabra del documento. Obviamente, esto sólo es aplicable a los PDFs
de texto, ya que los buscadores no pueden leer imágenes (en esos casos
sólo tendrán en cuenta los datos de la Descripción).
- Si queremos optimizar y controlar la manera en la que los motores de
búsqueda indexan nuestro documento PDF, nos interesa el orden en el que
los buscadores extraen la información de él. Esto puede ser interesante en
44
45. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
los casos en que los buscadores muestran el término buscado en su
contexto.
Lo primero que hay que hacer para empezar a definir el orden de los
contenidos es comprobar si el documento está etiquetado (en Archivo >
Propiedades de documento...):
Si pone que no, es una muestra evidente de que el documento no es
accesible.
Para etiquetarlo deberemos ir al menú Avanzadas > Accesibilidad > Agregar
etiquetas al documento.
Si queremos que un asistente de Acrobat nos ayude a comprobar la
accesibilidad del documento, en Avanzadas > Accesibilidad >
Comprobación completa... se puede crear un informe de accesibilidad que
identifique los errores y nos indique cómo solucionarlos (cómo poner texto
alternativo a las imágenes, cómo definir el idioma del documento, etc...) De
esta manera estructuraremos correctamente el PDF para hacerlo accesible.
45
46. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009
Para ver cómo está ordenado el documento, en Avanzadas > Accesibilidad,
seleccionaremos la opción “Retocar orden de lectura”.
46