Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility with Joomla [on a budget]

1,743 views

Published on

Talk presented at the Sydney Joomla Day discussing some of the basics of accessibility in Joomla and how to include some accessibility approaches in your site builds.

Published in: Technology
  • Be the first to comment

Accessibility with Joomla [on a budget]

  1. 1. Web Accessibility and Joomla [on a budget] Aimee Maree Forsstrom
  2. 2. Accessibility WCAG 2.0 WAI-ARIA Separate Guidelines Australian Government requires WCAG 2.0
  3. 3. Joomla and Accessibility http://www.joomla.org/accessibility-statement.html Sadly out of date http://ux.joomla.org/forum/Accessibility Accessibility Forum discussion
  4. 4. Joomla out of the box ● Use Hathor ● Image alt tags and title tags ● Site information ● Per Page meta-tags ●
  5. 5. Javascript Myt h ● Javascript is accessible ● It depends on you code it ● Alot of examples and library's on web are written without accessibility in mind ● It is always good to test your site with javascript turned off in the browser
  6. 6. Accessibility Myth ● Accessibility dose not mean: – Bad Design – Higher development costs – No Java-script allowed – Removal of features – Hard to achieve – Not really my targeted audience
  7. 7. Third Party? ● Third party extensions and themes might not meet your standards of accessibility ● WYSIWYG code can be full of nasties use features with care ● People adding content? Formatting of content is important for maintaining accessibility
  8. 8. Accessibility Extensions? ● Pretty dismal ● Most deal with font resize ● Only 7 extensions ● http://extensions.joomla.org/extensions/style-a- design/accessibility
  9. 9. Screen Reader Module ● Includes a screen reader button no your site ● If people need screen readers they are going to have one and not need this option ● http://extensions.joomla.org/extensions/style-a-design/ accessibility/24061
  10. 10. Basically ● Don't look to extensions to help save you with accessibility ● They don't really cover accessibility needs ● There really is not one size fit all extensions for accessibility
  11. 11. So? ● A lot of it is left up to you ● There is no magic one stop solution ● Consider what level of accessibility is important to you [Gov – WCAG 2.0] ● Think about accessibility needs when choosing extensions
  12. 12. Vanilla Joomla ● Joomla provides a lot out of the box ● What can you get out of Joomla without third parties
  13. 13. Form Worries ● Forms can be troublesome ● WAI ARIA is nice but requires more complex modification ● Nice easy win is to ensure that labels are added to all form fields ● Use field groups with section names to group together areas of a longer form
  14. 14. Font Reszie Button ● Most the time they don't work ● When testing font resize you need to test at least X sizes plus and minus the default ● Browsers take care of this feature ● Test across all browsers ● Adjust CSS to handle ● Be mindful of budget restraints
  15. 15. Always use alt on images ● Built into Joomla ● Write a meaningful description ● Dont need to make it too long unles your trying to explain something in detail ● Try and use more then one word ● Make sure it relates to the image
  16. 16. Meaningful link texts ● Dont just use “read more” for more links ● “more about [title]” instead of “read more” ● Dont use “Click Here” ● “Open Brochure” instead of “Click Here” ● Use words that describe what the link is ● Try tabbing through link options does it make sense?
  17. 17. Colours ● Think about colour contrast and effects in blind people ● Look to websites for guidance on colour schemes ● Can you and your friends read it? ● Provide a High Contrast CSS option
  18. 18. Think about your title structure ● Dont just use Heading tags for styling purposes ● If you need an increased font down the page use font-size attribute ● Structure should be lineal >> H1 always first and only one then H2 >> H3 >> H4 ...
  19. 19. Search Engine Friendly URLs ● Helps Robots read your site pages ● Helps Humans of all shapes and sizes read and remember page urls ● Out of the box ● Easy to enable
  20. 20. Where to from here ● Depends on the budget ● Purchase themes that cater for accessibility ● Develop a theme that caters for accessibility ● Implement some easy fixes ● Next time... think about accessibility from the get go :D
  21. 21. ‘Listen’ with the volume turned off ● Does your website supplies subtitles or written transcripts for video and audio content? ● Do you produce video content? Can you add subtitles?
  22. 22. Accessed site without a mouse? ● Navigate through your website without a mouse ● Can you tab your way to clear navigation? ● Do the navigation titles make sense? ● Try out a screen reader NVDA – Windows, Voiceover – Mac, Built in reader – Linux
  23. 23. Budget Worries ● Use what Joomla has out of the box ● Accessibility as a first thought not an after one ● Don't be lazy use meaningful descriptions on titles, alt tags, navigation, text links ● Purchase a template that contains accessibility elements ● Go for quick wins ● Accessibility = Better SEO = Budget Win
  24. 24. SEO and Accessibly ● Content Before SideBars - generate “maincontent” part first then “left” and “right” sidebars ● Place a “Skip to navigation” at top of page ● Ensure images have alt-tags ● Use explanatory text links ● Navigate using the “tab” key only
  25. 25. Take aways ● Include alt tags on images ● Think about colour contrast ● Design with font size increase/decrease in mind ● Think of your title structure {h1, h2, h3} ● Have meaningful link text ● Search Friendly URLS
  26. 26. Check your websites ● http://wave.webaim.org/ ● HTML w3c validation ● Css HTML W3c validation ● Check the site in text mode using Lynx http://lynx.isc.org/current/ ● Read up on accessibility information http://www.accessiq.org/ ● http://www.w3.org/TR/UNDERSTANDING-WCAG20/
  27. 27. Questions? Aimee Maree Forsstrom @aimee_maree

×