Web Accessibility and Joomla 
[on a budget] 
Aimee Maree Forsstrom
Accessibility 
WCAG 2.0 
WAI-ARIA 
Separate Guidelines 
Australian Government requires WCAG 2.0
Joomla and Accessibility 
http://www.joomla.org/accessibility-statement.html 
Sadly out of date 
http://ux.joomla.org/forum/Accessibility 
Accessibility Forum discussion
Joomla out of the box 
● Use Hathor 
● Image alt tags and title tags 
● Site information 
● Per Page meta-tags 
●
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
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
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
Accessibility Extensions? 
● Pretty dismal 
● Most deal with font resize 
● Only 7 extensions 
● http://extensions.joomla.org/extensions/style-a- 
design/accessibility
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
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
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
Vanilla Joomla 
● Joomla provides a lot out of the box 
● What can you get out of Joomla without third 
parties
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
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
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
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?
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
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 ...
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
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
‘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?
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
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
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
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
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/
Questions? 
Aimee Maree Forsstrom 
@aimee_maree

Accessibility with Joomla [on a budget]

  • 1.
    Web Accessibility andJoomla [on a budget] Aimee Maree Forsstrom
  • 2.
    Accessibility WCAG 2.0 WAI-ARIA Separate Guidelines Australian Government requires WCAG 2.0
  • 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.
    Joomla out ofthe box ● Use Hathor ● Image alt tags and title tags ● Site information ● Per Page meta-tags ●
  • 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.
    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.
    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.
    Accessibility Extensions? ●Pretty dismal ● Most deal with font resize ● Only 7 extensions ● http://extensions.joomla.org/extensions/style-a- design/accessibility
  • 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.
    Basically ● Don'tlook 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.
    So? ● Alot 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.
    Vanilla Joomla ●Joomla provides a lot out of the box ● What can you get out of Joomla without third parties
  • 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.
    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.
    Always use alton 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.
    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.
    Colours ● Thinkabout 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.
    Think about yourtitle 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.
    Search Engine FriendlyURLs ● 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.
    Where to fromhere ● 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.
    ‘Listen’ with thevolume 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.
    Accessed site withouta 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.
    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.
    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.
    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.
    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.
    Questions? Aimee MareeForsstrom @aimee_maree