accessibility of the ezoombook platform for visually impaired people
DESCRIPTION
Accessibility of the eZoomBook platform for visually impaired people. Ouattara Ibrahima Tournoux Félix. Plan. State of the art of assisting technologies Diagnosis Internationalization Situation & Conclusion. 1. Screen Readers. 1. Screen Readers. 1. Screen R eaders. 1. Screen Readers. - PowerPoint PPT PresentationTRANSCRIPT
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&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 !