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