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

14. Beez A11y Template
[Angie Radtke / Robert Deutz Go to

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

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

19. Free Screen readers..
NVDA

20. Free Screen readers..
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]
[2]
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