accessibility of the ezoombook platform for visually impaired people

Accessibility of the eZoomBook platform for visually impaired people

Ouattara IbrahimaTournoux Félix

PlanI. State of the art of assisting technologiesII. DiagnosisIII.InternationalizationIV. Situation & Conclusion

1. Screen Readers

JAWS Window- Eyes

VoiceOver NVDA System Acces Zoom text Chrome vox Other0

10

20

30

40

50

60

Use of screen readers

lecteurs d'écrans

Use

in %

1. Screen Readers

1. Screen Readers

Ordinateur bureau Ordinateur portable Appareil mobile0

10

20

30

40

50

60

70

80

90

Devices used with screen readers

Uti

lisat

ion

en %

1. Screen Readers

1. Dedicated stylesheets•Set a visual profile in your browser•Forces the CSS render•OrdiVision stylesheet :

▫White on black for text▫Yellow for links▫Border for tables

•Other colors•High contrast

1. Dedicated stylesheets

II. Diagnosis

2. Diagnosis•The Web Accessibility Initiative

▫Perceivable▫Usable▫Understandable▫Robust

2. Tools•User experience•Total Validator•Color contrast Analyzer

2. Diagnosis ++

Alternative textKeyboard functionalityLinear content

2. Diagnosis --

Css in linePresentation and information are not separeted Hn tag sometime are not well usedSome functions don’t work

Hn tag • <h4>@Messages("parameters.modifylanguage.header")</h4>•  • @helper.form(routes.Workspace.changeLang){• @select(langForm("locale"), options = Seq("fr" -> "French", "en" -> "English"), '_label -> "")• <div>• <input type="submit" value='@Messages("parameters.modifylanguage.submit")• <a><h5>@Messages("parameters.unsubscribenewsletter.link")</h5></a>•  • @defining(MD5Util.md5Hex(context.user.map(u => u.email).getOrElse("ezoomwiki.com"))){icon =>• <img src="https://www.gravatar.com/avatar/@icon?s=40&amp;d=identicon">• } <a href="http://en.gravatar.com/emails/">@Messages("parameters.modifyimage.link")<a>•  • ……………………………………………………………………………………..•  …………………………………………………………………………………………………..;• <div class="alert alert-info">• <button type="button" class="close" data-dismiss="alert">x</button>• @error• </div>• }else{}•  • <h4>@Messages("parameters.modifyinfo.header")</h4>

Css in line• <style>•  • .rightpannel{• position: absolute;• top: 170px;• left: 60%;• right:15%• }•  • .midlepannel{• position: absolute;• top: 170px;• right: 60%;• left: 35%;• • }•  • .leftpannel{• position: absolute;• top: 170px;• right: 65%;• left: 10%;• }• </style>

What we did…

III. Internationalization

Step 1 : conversion of views content

Step 1 : conversion of views content

Step 2 : messages glossary

Step 3 :French messages glossary

Step 3 : french messages glossary

Is it working ?•Already approximately worked•We added messages•We added all the translations•Branch of the project to be committed by

Mayleen

IV. Current Situation &

Conclusion

1. Play Bug•Sudden lauching error last month

[info] Resolving ezb-dal-play#ezb-dal-play_2.10;2.0-SNAPSHOT ...[error] Server access Error: handshake alert: unrecognized_name url=https://github.com/ezoombook/ezb-mvn/raw/master/ezb-dal-play/ezb-dal-play_2.10/2.0-SNAPSHOT/maven-metadata.xml[error] Server access Error: handshake alert: unrecognized_name url=https://github.com/ezoombook/ezb-mvn/raw/master/ezb-dal-play/ezb-dal-play_2.10/2.0-SNAPSHOT/ezb-dal-play_2.10-2.0-SNAPSHOT.pom

1. Play Bug•url not exact•Edit the path in Build.scala•Dependencies issue: Maven•Github.com: file signature : sha1 error

2. Structure•Report : List of errors from Total Validator

•Structure is good thanks to Play•Send a version to the tester team at AVH, Fernando Pinto’s association.

3. Internationalization•Currently a branch on Github•Test and commit•Complete french glossary•Easy to make other languages

Thank you for your attention !