3 (de 3). Evaluación de Accessibilidad Digital

71
EVALUACIÓN DE LA ACCESSIBILIDAD DIGITAL Dr. Cristian Rusu Pontificia Universidad Católica de Valparaíso, Chile [email protected] Dr. Toni Granollers U. de Lleida, Catalonia, Spain [email protected] El taller “Evaluando eXperiencias y habilidades: Usabilidad, Comunicabilidad, Accesibilidad, User eXperience, Customer eXperience” ha sido impartido por Cristian Rusu y Toni Granollers en la ciudad de Popayán-Colombia del 27 al 30 de Septiembre del 2016 durante el 11Congreso Colombiano de Computación. Este material está sujeto a la licencia

Transcript of 3 (de 3). Evaluación de Accessibilidad Digital

Page 1: 3 (de 3).  Evaluación de Accessibilidad Digital

EVALUACIÓN DE LA ACCESSIBILIDAD DIGITAL

Dr. Cristian RusuPontificia Universidad Católica de Valparaíso, [email protected]

Dr. Toni GranollersU. de Lleida, Catalonia, [email protected]

El taller “Evaluando eXperiencias y habilidades: Usabilidad, Comunicabilidad, Accesibilidad, User

eXperience, Customer eXperience” ha sido impartido por Cristian Rusu y Toni Granollers en la ciudad de Popayán-Colombia del 27 al 30 de Septiembre del 2016 durante el

11Congreso Colombiano de Computación.Este material está sujeto a la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

Page 2: 3 (de 3).  Evaluación de Accessibilidad Digital

Índice• Normativa legal y pautas de accesibilidad• Metodología de evaluación• Ejemplos y Buenas prácticas

Accesibilidad - 11CCC

Page 3: 3 (de 3).  Evaluación de Accessibilidad Digital

Web Accessibility Initiative (WAI)• Grupo de trabajo permanente del W3C (Word Wide Web Consortium), organización internacional que trabaja en el desarrollo de estándares web

• La WAI se encarga de velar por la accesibilidad de los contenidos web

http://www.w3.org/WAI

Accesibilidad - 11CCC

Page 4: 3 (de 3).  Evaluación de Accessibilidad Digital

WAI (Web Accessibility Initiative)

• Grupo de trabajo permanente del W3C cuyos objetivos principales son:• Facilitar el acceso a la WEB a las personas con

discapacidad• Desarrollar pautas de accesibilidad (WCAG)• Desarrollar y mejorar las herramientas de

evaluación y de reparación de la accesibilidad Web • Formación y concienciación en relación del diseño

accesible (design for all, ...)

Accesibilidad - 11CCC

Page 5: 3 (de 3).  Evaluación de Accessibilidad Digital

WAI. Pautas WCAG

• WCAG (Web Content Accessibility Guidelines) • Pautas de accesibilidad que explican como

hacer el contenido Web accessible para personas con discapacidades o de edad avanzada

• Tienen tres niveles de prioridad

• Simple(Nivel A) Doble (Nivel AA) Triple (Nivel AAA)

http://www.w3.org/WAI/WCAG2-Conformance

Accesibilidad - 11CCC

Page 6: 3 (de 3).  Evaluación de Accessibilidad Digital

WAI. Pautas WCAGEjemplo de las pautas

http://www.w3.org/TR/WCAG20

Accesibilidad - 11CCC

Page 8: 3 (de 3).  Evaluación de Accessibilidad Digital

WAI. Pautas WCAGQuick Reference

• Table of Contents• WCAG 2.0 Quick Reference List

• 1.1 Text Alternatives• 1.2 Time-based Media• 1.3 Adaptable• 1.4 Distinguishable• 2.1 Keyboard Accessible• 2.2 Enough Time• 2.3 Seizures• 2.4 Navigable• 3.1 Readable• 3.2 Predictable• 3.3 Input Assistance• 4.1 Compatible

http://www.w3.org/WAI/WCAG20/quickref

Accesibilidad - 11CCC

Page 9: 3 (de 3).  Evaluación de Accessibilidad Digital

W3C Web Content Accessibility Guidelines 2.0 Conformance Logos

• Place the icon for the appropriate conformance level using the HTML source code from http://www.w3.org/WAI/WCAG2-Conformance

<a href="http://www.w3.org/WAI/WCAG2A-Conformance" title="Explanation of WCAG 2.0 Level A Conformance"><img height="32" width="88" src="http://www.w3.org/WAI/wcag2A" alt="Level A conformance, W3C WAI Web Content Accessibility Guidelines 2.0"></a>

Accesibilidad - 11CCC

Page 11: 3 (de 3).  Evaluación de Accessibilidad Digital

Estrategia Española sobre Discapacidad 2012-2020

http://www.msssi.gob.es/ssi/discapacidad/informacion/estrategiaEspanolaDiscapacidad.htm

Accesibilidad - 11CCC

Page 12: 3 (de 3).  Evaluación de Accessibilidad Digital

Plan de Acción de la Estrategia Española sobre Discapacidad 2014-2020

http://www.msssi.gob.es/ssi/discapacidad/informacion/planAccionEstrategiaEspanolaDiscapacidad.htm

Accesibilidad - 11CCC

Page 13: 3 (de 3).  Evaluación de Accessibilidad Digital

https://ec.europa.eu/digital-agenda/en/web-accessibility

Accesibilidad - 11CCC

Page 14: 3 (de 3).  Evaluación de Accessibilidad Digital

Legislación española• Real Decreto 1494/2007 de 12 de noviembre el 2007, por el que se

aprueba el “Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la Sociedad de la Información y medios de comunicación social”

• A parte de la web, trata acerca de la garantía de accesibilidad de la TDT para las personas con discapacidad (contenidos + HW)

• Por ej.: Ergonomía en los receptores de televisión digital, así como en todos sus dispositivos asociados, y, muy especialmente, en el diseño de los mandos a distancia.

• Plazos para las páginas de internet de las administraciones públicas o con financiación pública:

• Las nuevas páginas web se tienen que ajustar al nivel 1 desde la entrada en vigor del reglamento el día siguiente al de su publicación en el BOE, es decir, 22/11/2007

• Las páginas web existentes se tienen que adaptar al nivel 1 en el plazo de 6 meses 22/05/2008

• Todas las páginas, actualmente existentes o de nueva creación, tienen que cumplir el nivel 2 a partir del 31/12/2008

• Los niveles mencionados son según la Norma UNE 139803:2004

IMPORTANTE

R.D. 1494/2007: http://www.boe.es/boe/dias/2007/11/21/pdfs/A47567-47572.pdfUNE 139803:2004: http://www.inteco.es/Accesibilidad/difusion/Normativa/Descarga/DescargaUNE_139803

ATENCIÓN !!: la norma UNE 139803:2004 es anulada por la  UNE 139803:2012Accesibilidad - 11CCC

Page 15: 3 (de 3).  Evaluación de Accessibilidad Digital

Norma UNE 139803• la Norma UNE 139803:2012 es equivalente a las WCAG 2.0• Los requisitos de nivel A, AA y AAA son los criterios de

conformidad de nivel A, AA y AAA de las WCAG 2.0, a los que se referencia directamente sin reescribirlos.

• Para cumplirlos se deberá tener en cuenta también el documento: Techniques for WCAG 2.0. Techniques and Failures for Web Content Accessibility Guidelines 2.0 (W3C Working Group Note 3 January 2012)

• http://www.w3.org/TR/WCAG20-TECHS

• Ampliar detalles: • http://

olgacarreras.blogspot.com.es/2012/07/nueva-version-de-la-norma-une-139803.html

Accesibilidad - 11CCC

Page 16: 3 (de 3).  Evaluación de Accessibilidad Digital

Norma Técnica Colombiana (NTC) 5854Enero 31 de 2012

• Comité de normalización conformado por 15 entidades entre publicas, privadas y de educación

• Objeto: establecer los requisitos de accesibilidad que se deben implementar en las páginas web nacionales en los niveles de conformidad A, AA y AAA del W3C.

• Esta norma es equivalente a WCAG 2.0

Accesibilidad - 11CCC

Page 17: 3 (de 3).  Evaluación de Accessibilidad Digital

Legislación en Colombia• Colombia dispone de unas leyes y unas normas de las más avanzadas en el área de Iberoamérica.

• ...• El 20 de noviembre de 2013 se publicó la Ley No. 1680, por la cual se garantiza a las personas ciegas y con baja visión, el acceso a la información, a las comunicaciones, al conocimiento y a las tecnologías de la información y de las comunicaciones.

• Ley 1712 de 6 de marzo de 2014, "por medio de la cual se crea la Ley de Transparencia y del Derecho de Acceso a la Información Pública Nacional y se dictan otras disposiciones“• ARTÍCULO 8o. CRITERIO DIFERENCIAL DE ACCESIBILIDADAccesibilidad - 11CCC

Page 18: 3 (de 3).  Evaluación de Accessibilidad Digital

ÍndiceNormativa legal y pautas de accesibilidad• Metodología de evaluación• Ejemplos y Buenas prácticas

Accesibilidad - 11CCC

Page 19: 3 (de 3).  Evaluación de Accessibilidad Digital

WCAG-EM Overview:Website Accessibility Conformance Evaluation Methodology

• 5 main steps:1. Define the scope of the evaluation - defining what is

included in the evaluation; the goal of the evaluation; and the WCAG conformance level (A, AA, AAA).

2. Explore the website - identifying key web pages; key functionality; types of web content, designs, functionality, etc.; required web technologies.

3. Select a representative sample - guidance on structured and randomly selected web pages when it is not feasible to evaluate every web page on a website.

4. Evaluate the selected sample - determining successes and failures in meeting WCAG 2.0; accessibility support for website features; and recording evaluation steps.

5. Report the evaluation findings

http://www.w3.org/WAI/eval/conformance

Accesibilidad - 11CCC

Page 20: 3 (de 3).  Evaluación de Accessibilidad Digital

Evaluating Websites for Accessibility

• These are particularly important resources that outline different approaches for evaluating websites for accessibility:• Easy Checks - A First Review of Web Accessibility• Involving Users in Web Accessibility Evaluation• Selecting Web Accessibility Evaluation Tools• Reporting Template

Accesibilidad - 11CCC

Page 21: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web Accessibility• checks for the following specific aspects of a web page• Page title• Image text alternatives ("alt text") in pictures,

illustrations, charts, etc.• Text:

• Headings• Contrast ratio ("color contrast")• Resize Text

• Interaction:• Keyboard access and visual focus• Forms, labels, and errors (including Search fields)

• General:• Multimedia (video, audio) alternatives• Basic Structure Check

Accesibilidad - 11CCC

Page 22: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityPage titles• Page titles are:

• shown in the window title bar in some browsers

• shown in browsers' tabs when there are multiple web pages open

• shown in search engine results• used for browser bookmarks/favorites• read by screen readers

HTML: they are the <title> within the <head>

The first thing screen readers say

when the user goes to a different web page is the

page title

Accesibilidad - 11CCC

Page 23: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityImage text alternatives ("alt text")• Text alternatives ("alt text"):

• convey the purpose of an image (pictures, illustrations, charts, etc.)

• used by people who cannot see the image• people who are blind and use screen readers can hear the alt text read

out• people who have turned off images to speed download or save

bandwidth can see the alt text

• Appropriate text alternative?• for a search button would be "search", not "magnifying glass“• Automated tests can tell you if alt is missing. To determine

if the alternative text is appropriate, you need to see the image and judge it in context

The text should be functional and provide an equivalent user experience,

not necessarily describe the image

Accesibilidad - 11CCC

Page 24: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityImage text alternatives ("alt text")

El paciente le dice al medico: Doctor, hace una semana que no como, no duermo y no tomo agua. ¿Que cree que tengo?.Y el doctor responde: Pues, hambre, sueño y sedImagen 1

Tíulo: Gráfica de evolución demográfica de Granada entre 1900 y 2013Podemos ver que la población pasa de 75570 habitantes en 1900 a 255000 en 1991. A partir de aquí se estanca, aunque disminuye ligeramente.Fuente: Wikipedia- Granada

Fuente: http://www.todacolombia.com/departamentos/departamentoscolombianos.html

Accesibilidad - 11CCC

Page 25: 3 (de 3).  Evaluación de Accessibilidad Digital

Ejemplo: error difícil de encontrar

Accesibilidad - 11CCC

Page 26: 3 (de 3).  Evaluación de Accessibilidad Digital

Ejemplo: error difícil de encontrar

Accesibilidad - 11CCC

Page 27: 3 (de 3).  Evaluación de Accessibilidad Digital

Accesibilidad - 11CCC

Page 28: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityText: Headings

• The heading hierarchy is meaningful. Ideally the page starts with an "h1" — which is usually similar to the page title — and does not skip levels; however, these are not absolute requirements.

people can navigate to the headings — including

people who cannot use a mouse and use only the

keyboard, and people who use a screen reader

Accesibilidad - 11CCC

Page 29: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web Accessibility Text: Headings

Accesibilidad - 11CCC

Page 30: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityText: color contrast

Some people cannot read text if there is not sufficient contrast between the text and background

High contrast is required by some people with visual impairments, including many older people who lose contrast sensitivity from ageing

Some people cannot read text if there is not sufficient contrast between the text and background

Accesibilidad - 11CCC

Page 31: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityText: color contrast• While some people need high contrast, for others (by ex. people with dyslexia) bright colors (high luminance) are not readable. They need low luminance Some people cannot read text if

there is not sufficient contrast between the text and background

Some people cannot read text if there is not sufficient contrast between the text and background

Web browsers should allow people to change the color of

text and background, and web pages need to work when

people change colors

Accesibilidad - 11CCC

Page 32: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityText: color contrast• Some tools

http://webaim.org/resources/contrastchecker

Accesibilidad - 11CCC

Page 33: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityText: Resize • Some people need

• to enlarge web content in order to read it• to change other aspects of text display: font, space between lines,

and more• (most) browsers allow users to change text size through:

• text size settings (usually through Options or Preferences)• text-only zoom• page zoom (which also zooms images, buttons, etc.)

• BUT when pages are not designed properly, they can be unusable when the text size is changed, especially when it is changed through text-only zoom or text settings. • Sometimes columns and sections overlap, the space between

lines disappears, lines of text become too long, or text disappearsAccesibilidad - 11CCC

Page 34: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityText: Resize

when text size is increased, the heading overlaps the main text,

the main text overlaps the sidebar text; and the sidebar text

is cut off at the bottom

Accesibilidad - 11CCC

Page 35: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityText: Resize

Most people cannot effectively read text

that requires horizontal scrolling,

and some disabilities make this impossible

normal-size text

larger text "wraps" to fit the width

some of the larger text is not visible without scrolling

horizontally

Accesibilidad - 11CCC

Page 36: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityInteraction: Keyboard access and visual focus• Some people cannot use a mouse and rely on the keyboard to interact with the Web.

• Some blind and people with mobility impairments rely on the keyboard or on assistive technologies and strategies that rely on keyboard commands, such as voice input.

• Websites need to enable people to access all content and functionality — links, forms, media controls, etc. — through a keyboard

Accesibilidad - 11CCC

Page 37: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityInteraction: Keyboard access and visual focus

Keyboard focus should be visible and should follow a logical order

through the page elements.

Accesibilidad - 11CCC

Page 38: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityInteraction: Keyboard access and visual focus• check for:

• Tab to all• Tab away (A common problem is the keyboard focus gets caught in media

controls and you cannot get out; it's called the "keyboard trap")• Tab order: logical reading order (e.g., for left-to-right languages: top to

bottom, left to right) in sequence• Visual focus• All functionality by keyboard: Check that you can do everything with the

keyboard; that is, you don't need the mouse to activate actions, options, visible changes, and other functionality.• A common problem is that some functionality is available only with mouse hover,

and is not available with keyboard focus• Drop-down lists: Check that after you tab into a drop-down list, you can

use the arrow keys to move through all the options without triggering an action. • A common problem for drop-downs used for navigation is that as soon as you arrow

down, it automatically selects the first item in the list and goes to a new page — you cannot get to other items in the list.)

• Image links: when images are links, they have clear visual focus and can be activated using the keyboard (usually by pressing the Enter key)Accesibilidad - 11CCC

Page 39: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityInteraction: Forms, labels, and errors

• Form fields and other form controls usually have visible labels as the label for a text field.

When these labels are marked up correctly, people can interact with them

using only the keyboard, using voice input, and using screen readers.

<div> <p id="namenewsletter" class="input"> <label for="mr">Mr. <input type="radio" name="t" id="mr" value="mr" title="title"></label> <label for="mrs">Mrs. <input type="radio" name="t" id="mrs" value="mrs" title="title"></label> <label for="n">Name: <input type="text" name="n" id="n" size="30"></label> </p> <p id="emailinput" class="input" style="width: 16em; float: left; margin-top: 0.5em;"> <label for="em">eMail Address: <br><input type="text" name="em" id="em" size="20"></label> </p> <p id="emailvalid" class="input" style="width: 16em; float: left; margin-top: 0.5em;"> <label for="ev">Retype eMail: <br><input type="text" name="ev" id="ev" size="20"></label> </p></div>

Accesibilidad - 11CCC

Page 40: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityInteraction: Forms, labels, and errors

• Error handling: try leaving required fields blank or entering incorrectly-formatted information (such as telephone number or e-mail address), then submitting the form.

• If you get errors, check that:• clear and specific guidance is provided to help people

understand and fix the error. • the errors are easily findable.

• Generally it is best if the error messages are before the form, rather than after the form.

• the fields without errors are still populated with the data you entered.• This is best practice, not a requirement. People should not have to re-

enter all the information in the form, except for some sensitive data such as credit card numbers.

for some disabilities, this is the only way of being

able to link the error message with the field

Accesibilidad - 11CCC

Page 41: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityGeneral: Multimedia alternatives

• Information in podcasts or other audio is not available to people who are deaf or some people who are hard of hearing, unless it is provided in an alternative format such as captions (subtitles) and text transcripts.

• Visual information in videos is not available to people who are blind or some people what have low vision, unless it is provided in an alternative format such as audio or text.

http://www.videoaccessible.udl.cat/faq.html

Text can be read by a screen reader or Braille display, or enlarged and reformatted for people

with low vision

Accesibilidad - 11CCC

Page 42: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityGeneral: Basic structure check • Web pages are often designed with multiple columns, sections, colors, and other visual aspects that help organize information for people who see the page in its default display.

• However, some people do not see the page this way. • People who are blind listen to the page with a screen

reader or read it from a Braille display. • Some people with low vision and others change the way

the page is displayed so they can read it• for example, change from multiple columns to one column,

change the text size, and more.• An important issue is how the web page works when it is "linearized" into one column and the presentation is changed.

Accesibilidad - 11CCC

Page 43: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityGeneral: Basic structure check

The order of the sections (e.g., navigation at top or bottom or elsewhere) depends on

how the web page is developed — the user usually cannot control the order

"linearized" into one column

Accesibilidad - 11CCC

Page 44: 3 (de 3).  Evaluación de Accessibilidad Digital

Easy Checks - A First Review of Web AccessibilityGeneral: Basic structure check • What to do? Get a basic

structure view of the page:

• Turn off images and show the text alternatives.

• Turn off style sheets (CSS), which specifies how the page is displayed with layout, colors, etc.

• Linearize the page or the tables (depending on the toolbar).

Accesibilidad - 11CCC

Page 45: 3 (de 3).  Evaluación de Accessibilidad Digital

Evaluating Websites for Accessibility

• These are particularly important resources that outline different approaches for evaluating websites for accessibility:Easy Checks - A First Review of Web Accessibility• Involving Users in Web Accessibility Evaluation• Selecting Web Accessibility Evaluation Tools• Reporting Template

Accesibilidad - 11CCC

Page 46: 3 (de 3).  Evaluación de Accessibilidad Digital

It’s enough validating WAG ??

Accesibilidad - 11CCC

Page 47: 3 (de 3).  Evaluación de Accessibilidad Digital

Involving Users in Web Accessibility Evaluation• Range of User Evaluation

• Informal evaluation of a specific accessibility issue can be as simple as asking someone you know who uses a screen reader, someone with other disabilities, or even your grandmother, to find some data in an early draft of a data table that you are developing, observing her interaction, and discussing issues.

• Formal usability testing of a website follows established protocols to gather quantitative and qualitative data from representative users performing specific tasks. • Formal usability tests can be optimized to focus on accessibility issues.

• What type of evaluation you do depends on factors such as the stage in your project, for example, initial investigation of design ideas, testing specific areas of prototypes, or reviewing final designs.

• Readings:• http://www.w3.org/WAI/eval/users• http://www.w3.org/WAI/users/involving

Combine User Evaluation with Standards

Accesibilidad - 11CCC

Page 48: 3 (de 3).  Evaluación de Accessibilidad Digital

Evaluating Websites for Accessibility

• These are particularly important resources that outline different approaches for evaluating websites for accessibility:Easy Checks - A First Review of Web AccessibilityInvolving Users in Web Accessibility Evaluation• Selecting Web Accessibility Evaluation Tools• Reporting Template

http://www.w3.org/WAI/eval/selectingtools

Accesibilidad - 11CCC

Page 49: 3 (de 3).  Evaluación de Accessibilidad Digital

Selecting Web Accessibility Evaluation Toolshttp://www.w3.org/WAI/ER/tools

Accesibilidad - 11CCC

Page 50: 3 (de 3).  Evaluación de Accessibilidad Digital

Selecting Web Accessibility Evaluation Tools

Use at least 2 automàtic evaluators:

• http://www.tawdis.net• http://www.examinator.ws• http://wave.webaim.org/?lang=es• http://achecker.ca/checker/index.php• http://www.tenon.io

WARNIGS must be manually reviewed

Accesibilidad - 11CCC

Page 51: 3 (de 3).  Evaluación de Accessibilidad Digital

http://www.tawdis.net

Accesibilidad - 11CCC

Page 52: 3 (de 3).  Evaluación de Accessibilidad Digital

Selecting Web Accessibility Evaluation Tools

• Toolbars• Internet Explorer: Web Accessibility Toolbar For IE

• http://www.paciellogroup.com/resources/wat/ie

• Mozilla Firefox: Web Developer Toolbar

• https://addons.mozilla.org/es-ES/firefox/addon/60

• Wave toolbar: http://wave.webaim.org/toolbarThe WAVE Firefox Toolbar is no longer available ... We recommend that you install the updated WAVE Chrome extension. [http://wave.webaim.org/toolbar]

Accesibilidad - 11CCC

Page 53: 3 (de 3).  Evaluación de Accessibilidad Digital

Selecting Web Accessibility Evaluation Tools

• Tools: Chrome accessibility https://chrome.google.com/webstore/search/accessibility

Accesibilidad - 11CCC

Page 54: 3 (de 3).  Evaluación de Accessibilidad Digital

Selecting Web Accessibility Evaluation Tools

• Accessibility in Wordpress

Accesibilidad - 11CCC

Page 55: 3 (de 3).  Evaluación de Accessibilidad Digital

Evaluating Websites for Accessibility

• These are particularly important resources that outline different approaches for evaluating websites for accessibility:Easy Checks - A First Review of Web AccessibilityInvolving Users in Web Accessibility EvaluationSelecting Web Accessibility Evaluation Tools• Reporting Template

Accesibilidad - 11CCC

Page 56: 3 (de 3).  Evaluación de Accessibilidad Digital

Reporting Template• 1. Executive Summary• 2. Background about Evaluation• 3. Web Site Reviewed• 4. Reviewer(s)• 5. Review Process• 6. Results and Recommended Actions

• Interpretative summary of review results• Detailed results, structured according to WCAG Checklist• Describe or point to a suggested program of on-going

monitoring of Web site accessibility, re-evaluation of authoring tools, etc.

• 7. References• 8. Appendices

http://www.w3.org/WAI/eval/template.html

Accesibilidad - 11CCC

Page 58: 3 (de 3).  Evaluación de Accessibilidad Digital

ÍndiceDefinicionesTecnología asistencial Accesibilidad y documentos digitalesNormativa legal y pautas de accesibilidadMetodología de evaluación• Ejemplos y Buenas prácticas

Accesibilidad - 11CCC

Page 59: 3 (de 3).  Evaluación de Accessibilidad Digital

http://webaim.org/resources/evalquickref/evalquickref.pdf

Accesibilidad - 11CCC

Page 60: 3 (de 3).  Evaluación de Accessibilidad Digital

• 10 Quick Tips (http://www.w3.org/WAI/quicktips)

1. Images & animations: Use the alt attribute to describe the function of each visual.

2. Image maps. Use the client-side map and text for hotspots.3. Multimedia. Provide captioning and transcripts of audio, and

descriptions of video.4. Hypertext links. Use text that makes sense when read out of context.

For example, avoid "click here“.5. Page organization. Use headings, lists, and consistent structure. Use

CSS for layout and style where possible.6. Graphs & charts. Summarize or use the longdesc attribute.7. Scripts, applets, & plug-ins. Provide alternative content in case active

features are inaccessible or unsupported.8. Frames. Use the noframes element and meaningful titles.9. Tables. Make line-by-line reading sensible. Summarize.10.Check your work. Validate. Use tools, checklist, and guidelines at

http://www.w3.org/TR/WCAG

Buenas prácticas de diseño web

Accesibilidad - 11CCC

Page 61: 3 (de 3).  Evaluación de Accessibilidad Digital

Simular discapacidades i altres eines• Simulació discapacitats visuals

https://chrome.google.com/webstore/detail/see/dkihcccbkkakkbpikjmpnbamkgbjfdcn

• Visión (Visual Impairment Simulator): http://vis.cita.uiuc.edu/downld.php• Simulació daltonisme

https://chrome.google.com/webstore/detail/chrome-daltonize/efeladnkafmoofnbagdbfaieabmejfcf

• Nocoffee Visual impairment simulator (Chrome extension): https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl

• NC state university palette accessibility evaluator: http://accessibility.oit.ncsu.edu/tools/color-contrast/

• Contrast finder: http://contrast-finder.tanaguru.com/ • Per testejar les APIs d'accessibilitat

http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/• Valid XHTML YouTube embed code generator: http://

www.tools4noobs.com/online_tools/youtube_xhtml• http://www.webaim.org/simulations/distractability-sim.htmlAccesibilidad - 11CCC

Page 62: 3 (de 3).  Evaluación de Accessibilidad Digital

Accessible and beautiful Web designs http://www.csszengarden.com

Accesibilidad - 11CCC

Page 63: 3 (de 3).  Evaluación de Accessibilidad Digital

http://webaim.org/resources/designers

Accesibilidad - 11CCC

Page 64: 3 (de 3).  Evaluación de Accessibilidad Digital

Algunos proyectos• In-TIC (Integración de las Tecnologías de la Información y las Comunicaciones en los colectivos de personas con diversidad funcional)

http://www.proyectosfundacionorange.es/intic/index.php

Accesibilidad - 11CCC

Page 65: 3 (de 3).  Evaluación de Accessibilidad Digital

Algunos proyectos• Tur4All Turismo para Todos

http://aspacenet.aspace.org/tabletas-apps/item/tur4all-turismo-para-todos

Accesibilidad - 11CCC

Page 66: 3 (de 3).  Evaluación de Accessibilidad Digital

“Como discapacitados, cuestionamos la idoneidad de las ayudas técnicas o de los arreglos que se han hecho para hacer una zona accesible Diseño Centrado en el Usuario ???

algunas de las rampas para acceder a los pasos de peatones tienen demasiada inclinación

se requiere aún de más empuje y mucha maña cuando se trata de salvar pequeños socavones en el asfalto en los que las ruedas quedan encalladas justo antes de subir a la acera

Subir por las rampas de varios metros con la silla de ruedas es toda una odisea

Los semáforos son otros de los obstáculos … no por cuestión de altura o pendiente, sino porque el tiempo para cruzar es demasiado escaso y a menudo nos quedamos en medio de la calzada cuando ya está en rojo para los peatones

¿Es suficiente?

Accesibilidad - 11CCC

Page 68: 3 (de 3).  Evaluación de Accessibilidad Digital

http://www.webaim.org/articles

Referecias destacadas https://delicious.com/tgranollers/accessibility

http://accesibilidadenlaweb.blogspot.com.es

http://www.ilr.cornell.edu/edi/webaccesstoolkit/index.cfm

• Tecnología asistencial:• http://www.taservicios.com• http://www.tecnoaccesible.net

• Responsabilidades:• http://www.w3.org/community/wai-engage/wiki/Accessibility_Responsibil

ity_Breakdown• http://wet-boew.github.io/wet-boew/demos/arb-rra/arb-rra-en.html

http://olgacarreras.blogspot.com.es/2009/04/dos-anos-de-usable-y-accesible.html#accesibilidad

Accesibilidad - 11CCC

Page 69: 3 (de 3).  Evaluación de Accessibilidad Digital

Pro HTML5 Accessibility

Professional ApressJoshue O Connor

March 26, 2012 | ISBN-10: 1430241942

Clark, Joe. Building Accessible Websites. Indianapolis, Ind: New Riders, 2003. http://joeclark.org/book/sashay/serialization/

Thatcher, Jim Web Accessibility: Web Standards and Regulatory Compliance. Friends of Ed: 2006, ISBN: 1590596382

http://uiaccess.com/understanding.html

Slatin, John M, Sharron Rush Maximum accessibility : making your Web site more usable for everyone ; Boston : Addison-Wesley, cop. 2003 xliv, 588 p. ISBN 0-201-77422-4

Kara Pernice Coyne and Jakob Nielsen Beyond ALT text: making the web easy to use for users with disabilities Fremont, CA : Nielsen Norman Group, 2001

Edición online gratuita

Edición online gratuita

Bibliografía

Henry, Shawn Lawton Just ask: integrating accessibility throughout design,

February 2007Language: EnglishISBN-10: 1430319526http://www.uiaccess.com/accessucd

Accesibilidad - 11CCC

Page 70: 3 (de 3).  Evaluación de Accessibilidad Digital

Estudio de accesibilidad a la red

Romero Zúnica, Rafael, Francisco Alcantud Marín, Antonio M. Ferrer Manchón

http://acceso.uv.es/accesibilidad/Estudio

Guía de acceso al ordenador para personas con discapacidad Madrid

Candelos Arnao, Amparo, Manuel Lobato Galindo

IMSERSO, 1997 ISBN 84-88986-71-8

Informática y discapacidad: fundamento y aplicaciones

México: Novedades Educativas, 2000 ISBN: 987-538-002-4

Sánchez Montoya, Rafael Ordenador y discapacidad: Guía práctica de apoyo a las personas con necesidades educativas especiales Madrid:Cepe,2002http://www.ordenadorydiscapacidad.net/

Sloan, David Tangram Model For Web Accessibility, QA Focus briefing document no. 101, UKOLN,[http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-101/]

Bibliografía

Strategic IT Accessibility: Enabling the Organization

Jeff Kline

Live Oak Book Company (August 18, 2011)

Accesibilidad - 11CCC

Page 71: 3 (de 3).  Evaluación de Accessibilidad Digital

Gracias por su

atención !!!

Toni GranollersEscola Politècnica SuperiorUniversitat de Lleida (UdL)C/ Jaume II, 6925001 – Lleida

(+34) 973 [email protected]

@DCU_MPIUAslideshare.net/DCU_MPIUA

@

Accesibilidad - 11CCC