Accessibility of the eZoomBook platform for visually impaired people

Ouattara IbrahimaTournoux Félix

Plan

I. 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

lisa

tion e

n %

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 !