1 / 26

Accessibility, Joomla! Markup languages and you

Accessibility, Joomla! Markup languages and you. Joshue O Connor Senior A11y Consultant NCBI Centre for Inclusive Technology CFIT.ie @joshueoconnor. Complete The Jigsaw. The key to the web is it’s Universality. How to make this a reality?. Proper use of technology is key.

ping
Download Presentation

Accessibility, Joomla! Markup languages and you

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Accessibility, Joomla! Markup languages and you Joshue O Connor Senior A11y Consultant NCBI Centre for Inclusive Technology CFIT.ie @joshueoconnor Complete The Jigsaw

  2. The key to the web is it’s Universality..

  3. How to make this a reality?

  4. Proper use of technology is key..

  5. Open source is great..

  6. I now work for Google..

  7. So what about a11y?

  8. Joomla! is great, but has a way to go.

  9. Whats good about Joomla! and A11y • Simple • Relatively Accessible Backend • Able to combine CSS output with semantically well formed HTML

  10. What can be improved? • Colour contrast in backend. • Make the Accessible Backend more accessible (use of ARIA/HTML5) • Use WYSIWYG that help you author accessible content

  11. Andrea Tarr’s Hathor Accessible Admin Tempate

  12. Hathors A11y Improvements to 1.6 • On all pages • Skip to Content • Status Module has text • Accessible Menu • Submenus Accessible (some require *core changes) • Toolbars in a list • Appropriate structural headers • Colors pass WCAG 2.0 AA tests

  13. Hathors A11y Improvements to 1.6 • *Accordion panels can be opened by keyboard • *Titles on initial checkboxes in tabular data • WAI-ARIA Roles on structural segments • WAI-ARIA Property/States on Required & Read only form fields • *WAI-ARIA Property/States to flag invalid forms fields • *Removal of jump menu on the "number of pages to display" selection • On pages with template overrides • Appropriate structural headers • Labels for form fields • Titles on form fields for tabular data • Removal of various jump menus that jump you back to the top of the page • Removed tables that were only for layout • For more see http://community.joomla.org/gsoc2009/andrea-tarr.html

  14. Beez A11y Template [Angie Radtke / Robert Deutz Go to http://www.joomla-beez.com/]

  15. What can you do?? • Roll your own accessible template • Separation Anxiety: No Layout Tables (where possible but not a show stopper), use semantically correct HTML and CSS • Using Headings to communicate structure • Choose a suitable Colour Scheme • Ensure good Colour contrast (create a high colour contrast style switcher if possible)

  16. What can you do?? • Markup lists, data tables, form controls correctly • Use alternate text to describe functional graphics – not what they look like • Use descriptive link text • Include the document type and size in an URL for a downloadable doc [PDF, 1.1 Mbs] • Use null alt=“” values for decorative images • Use the validator but remember that validation != a11y

  17. Some useful tools.. • The WAVE Toolbar.. • http://wave.webaim.org/

  18. More tools.. • Juicy Studio Colour Contrast Analyser • Juicystudio.com

  19. Free Screen readers.. • NVDA • http://www.nvda-project.org/

  20. Free Screen readers.. • ORCA • http://projects.gnome.org/orca/

  21. A11y now and tomorrow • Follow best practice (Web Standards) • Explore WAI-ARIA [1] [2] • Start using HTML5 when, and as needed. • HTML 5 is NOT an a11y silver bullet • [1] http://www.w3.org/WAI/intro/aria • [2] http://dev.opera.com/articles/view/introduction-to-wai-aria/ • Use common sense as a guide • Get involved in the community • Use a WYSIWYG that supports a11y • Create accessible offline documents [PDF etc]

  22. What is WAI-ARIA? • It was a bridging technology • Used to supply semantics to Web 2.0 type widgets • Allows you to describe the ‘role’, ‘state’ and ‘properties’ of custom components • WAI-ARIA is now a part of HTML 5 • Well worth exploring as it has a rich set of semantics • Good support in browsers and AT (getting better)

  23. What about HTML5?

  24. HTML 5 and a11y • More semantics • <div> type elements that you use now have elements like, <header>, <footer>, <nav> (no content element) • New APIs for client side processing • There are challenges for a11y such as <canvas> • Much best practice from HTML4/XHTML 1 can be used in HTML 5, but there is a learning curve • Not great AT support yet

  25. From html5accessibility.com

  26. THANKS! Questions, Brickbats etc? Please feel free to drop me a line.. Joshue O Connor Senior A11y Consultant NCBI Centre for Inclusive Technology CFIT.ie Twitter: @joshueoconnor

More Related