Accessibility of the eZoomBook platform for visually impaired people

1. Accessibility of the eZoomBookplatform for visually impaired people OuattaraIbrahima Tournoux Félix

2. Plan • State of the art of assisting technologies • Diagnosis • Internationalization • Situation & Conclusion

3. 1. Screen Readers

4. 1. Screen Readers

5. 1. ScreenReaders

6. 1. Screen Readers

7. 1. Dedicated stylesheets • Set a visual profile in your browser • Forces the CSS render • OrdiVisionstylesheet : • White on black for text • Yellow for links • Border for tables • Other colors • High contrast

8. 1. Dedicated stylesheets

9. II. Diagnosis

10. 2. Diagnosis • The Web Accessibility Initiative • Perceivable • Usable • Understandable • Robust

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

12. 2. Diagnosis ++ Alternative text Keyboard functionality Linear content

13. 2. Diagnosis -- Css in line Presentation and information are not separeted Hn tag sometime are not well used Some functions don’t work

14. 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 => • <imgsrc="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="alertalert-info"> • <button type="button" class="close" data-dismiss="alert">x</button> • @error • </div> • }else{} • <h4>@Messages("parameters.modifyinfo.header")</h4>

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

16. Whatwedid…

18. III. Internationalization

19. Step 1 : conversion of views content

20. Step 1 : conversion of views content

21. Step 2 : messages glossary

22. Step 3 :French messages glossary

23. Step 3 : french messages glossary

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

25. IV. Current Situation &Conclusion

26. 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_nameurl=https://git hub.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_nameurl=https://git hub.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

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

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

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

31. Thank you for your attention !