Welcome, Guest
Username: Password: Remember me
Got a Joomla problem? Post as much detail about it as you can here to see if you can get a solution.

Help others in the community - post your Joomla tips and how-tos here.

TOPIC: Web Accessibility

Web Accessibility 3 months 3 weeks ago #8146

  • Laurie
  • Laurie's Avatar
  • Offline
  • Fresh Boarder
  • Posts: 5
  • Thank you received: 1
Hi there!

I've been working toward getting a site accessible and I'm stuck on a few final items: www.ssi.org.au .

I'm mainly relying on the FF addon AInspector Sidebar. Don't know what checkers to trust as online ones give different results.

1) Joomla category lists used for four groups of FAQ. Elements with event handlers must have roles. I'd be surprized if the Joomla core is not accessible. Don't understand the issue.

2) Youtube videos. Using AllVideos, one video on a page is OK but when there are multiple videos I get an error: www.ssi.org.au/new-roots . ID must be unique. It's not clear what ID it is.

I've systematically demolished the page on a test site establishing the problem lies with either the Youtube ID, which seems unlikely, or the article html markup.

I've tried putting each instance of AllVideos in
<div ID="video1"></div>
etc but this didn't help.

I've also tried using the Youtube iframe code inside Sourcerer brackets. Same results.

3) PhocaMaps. www.ssi.org.au/contact-us

Forms. Form controls must have labels. This relates to the Get Route function and the error is fixed if I disable this function.

Widgets and scripts. ONCLICK event handlers must have a role. Elements with event handlers must have roles.

I'm thinking that some of the errors come from within the extensions and are beyond my control. I'd appreciate a point in the right direction.

Peter Bui spoke on accessibility at a recent JUG Canberra but I don't remember him covering this sort of stuff.

Thanks,
Laurie.
On the way to being a basic Joomla user.
www.australianexplorers.com.au/
The administrator has disabled public write access.

Web Accessibility 3 months 3 weeks ago #8147

  • buipy001
  • buipy001's Avatar
  • Offline
  • Moderator
  • Peter Bui
  • Posts: 110
  • Thank you received: 24
Laurie wrote:
1) Joomla category lists used for four groups of FAQ. Elements with event handlers must have roles. I'd be surprized if the Joomla core is not accessible. Don't understand the issue.

Ok if you're trying to apply aria landmark roles:
www.w3.org/TR/wai-aria/roles#landmark_roles

That should be done in the template level and is usually unique to every website. If you apply it into Joomla core you'll end up with the additional need to do overrides if it doesn't suit, better to be done on template level.
Laurie wrote:
2) Youtube videos. Using AllVideos, one video on a page is OK but when there are multiple videos I get an error: www.ssi.org.au/new-roots . ID must be unique. It's not clear what ID it is.

That error comes up in an old version of AllVideos player that didn't support multiple usages on one page. I think in the latest version that is fixed. It also appears fixed on the page you provided as well. You're better off us using the Iframe embed code and make sure that the editor isn't stripping out the HTML and iframes is allowed.
Laurie wrote:
3) PhocaMaps. www.ssi.org.au/contact-us

Forms. Form controls must have labels. This relates to the Get Route function and the error is fixed if I disable this function.

Widgets and scripts. ONCLICK event handlers must have a role. Elements with event handlers must have roles.

I'm thinking that some of the errors come from within the extensions and are beyond my control. I'd appreciate a point in the right direction.

This is going to take work as you have to modify the code in the map output. Personally id simplify your usage there and embed the map with text direction and a link off to google maps to get dynamic directions rather than being tricky and having it all in page.

Couple of issues with the forms
<form class="form-inline" action="#" onsubmit="setPhocaDirPlgPM3(this.pmfromPlgPM3.value, this.pmtoPlgPM3.value); return false;">
[b]From Address:[/b] <input class="pm-input-route input" type="text" size="30" id="fromPMAddressPlgPM3" name="pmfromPlgPM3" value="">
<input name="pmtoPlgPM3" id="toPMAddressPlgPM3" type="hidden" value="-33.814811,151.00718000000006"> 
<input name="pmsubmitPlgPM3" type="submit" class="pm-input-route-btn btn" value="Get Route">
</form>

The issue here is the label.

From Address:

You need to have:
<label for="idofelement">From Address:</label>

You'll also need to code that dynamically as it will be an issue.

See - webaim.org/techniques/forms/controls#input

The onsubmit error validation though I believe is correct and is a valid way of doing it:
webaim.org/techniques/formvalidation/#form
Peter Bui spoke on accessibility at a recent JUG Canberra but I don't remember him covering this sort of stuff.

All to do with context and what you're using the js onsubmit for.

Presentation is here on slide share if you need it:
www.slideshare.net/peterbui5/web-accessi...-developers-71657132
Peter Bui

The only limitation is your imagination
pbwebdev.com

Twitter: twitter.com/astroboysoup
Facebook: facebook.com/pbwebdev
The administrator has disabled public write access.
The following user(s) said Thank You: ozneilau
Time to create page: 0.047 seconds
Powered by Kunena Forum