Welcome, Guest
Username: Password: Remember me

TOPIC: Accessibility in your theme / template - How to

Accessibility in your theme / template - How to 11 May 2020 22:30 #56379

I somehow figured MaxiMenu would do it. Guess I might have to start using it on every site!

I'll have a play with styling the hover class (was reading all about it over the weekend while researching accessibility).

Accessibility is a BIG deal, especially over here where the Americans with Disabilities Act has become a rabid, money-making dog. There are "professionals" who do nothing but look for businesses to sue over this. So for we Yanks, getting this right ASAP (well for those of us who know or care) is of paramount importance. For what it's worth, I have attached the Word doc I wrote for our own guidelines. I think it encapsulates WCAG 2 pretty well, at least to Level AA (Level AAA is REALLY hard to attain and even more difficult to keep).

For you, as a software developer, much of the doc won't apply directly (such as alt text for images), though it may apply indirectly where you need to provide the mechanism for accomplishing said task (like alt text for images - you need to provide a field for we designers to complete).

Here are a couple of useful links that helped me formulate the doc, both from w3.org:

www.w3.org/WAI/WCAG21/quickref/

www.w3.org/WAI/standards-guidelines/wcag/

Happy to correspond more on the subject with you - off-forum or on, whichever you prefer. I thought it was going to be a dull, tedious thing, but, after working a lot of Saturday on it, I felt really empowered. Hopefully you may feel the same!!
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Attachments:

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 12 May 2020 00:20 #56380

ced1870 wrote: HI
" I don't see where this styling is applied"
>> this is the :focus pseudo class, you can style it using custom css for now, there not yet the styles for that


Given that my CSS skills are more beginner level, I went and researched how to do this, but nothing I tried changed from that blue color. I tried:

:focus {
color: #000000!important;
}

and

input:focus {
color: #000000!important;
}
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 12 May 2020 06:25 #56384

trogladyle wrote:

:focus {
color: #000000!important;
}

and

input:focus {
color: #000000!important;
}


Maybe you have not considered that you are dealing with link.
For example, in my custom.css file of TCCK I inserted:
/* selected link */
a:active {
  color: #000000;
  background-color: #ffff00;
} 

/* focused link */
a:focus {
  color: #000000;
  background-color: #ffff00;
  border: dotted 1px #000000;
}
I don't know if it can help. I hope so.

Another important point (in my opinion) is related to the effort to provide a consistent developing environment for accessible websites.
I believe there is a need for integration between developers to avoid overlapping solutions and to provide consistent solutions.
For example, the Pro version of JCE offers powerful and easy tools to achieve great results. Nevertheless, sometimes it is difficult to decide whether these results should be achieved with JCE, Regular Labs extensions, JoomlaCK extensions or Template Creator.
Aiming at the accessibility of websites, an integration between Template Creator CK, Regular Labs and JCE could achieve great results without too much effort.
Saying it is easy, doing it is difficult, I know.
But would you consider collaborating with other developers?
Do you need VirtueMart Documentation? Check VirtueMart Matters
The following user(s) said Thank You: ced1870

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 12 May 2020 14:08 #56397

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23812
  • Karma: 427
  • Thank you received: 2987

Saying it is easy, doing it is difficult, I know.
But would you consider collaborating with other developers?

that is right. To be honest, I have already contacted some developpers for few small things, this is very difficult to get a real participation
I'm opened to collaboration, if something could be done. But for sure I will not spend my time trying to contact and convince the others ;)

CEd
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 13 May 2020 21:47 #56420

ClaudioRomeo wrote: trogladyle wrote:

:focus {
color: #000000!important;
}

and

input:focus {
color: #000000!important;
}


Maybe you have not considered that you are dealing with link.
For example, in my custom.css file of TCCK I inserted:
/* selected link */
a:active {
  color: #000000;
  background-color: #ffff00;
} 

/* focused link */
a:focus {
  color: #000000;
  background-color: #ffff00;
  border: dotted 1px #000000;
}
I don't know if it can help. I hope so.

Another important point (in my opinion) is related to the effort to provide a consistent developing environment for accessible websites.
I believe there is a need for integration between developers to avoid overlapping solutions and to provide consistent solutions.
For example, the Pro version of JCE offers powerful and easy tools to achieve great results. Nevertheless, sometimes it is difficult to decide whether these results should be achieved with JCE, Regular Labs extensions, JoomlaCK extensions or Template Creator.
Aiming at the accessibility of websites, an integration between Template Creator CK, Regular Labs and JCE could achieve great results without too much effort.
Saying it is easy, doing it is difficult, I know.
But would you consider collaborating with other developers?


I tried your code Claudio, but that didn't change the border (currently in blue), but only put a yellow bar behind SOME items. I just want to change the blue border.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 13 May 2020 21:49 #56421

ced1870 wrote:

Saying it is easy, doing it is difficult, I know.
But would you consider collaborating with other developers?

that is right. To be honest, I have already contacted some developpers for few small things, this is very difficult to get a real participation
I'm opened to collaboration, if something could be done. But for sure I will not spend my time trying to contact and convince the others ;)
CEd


I'm happy to work with you as much as I'm able Ced. Really appreciate your products and your support, and I'm happy to help you make them better. As I mentioned, I've done a fair amount of reading on the whole accessibility issue. Yep, it can be a minefield, but, if one follows WCAG 2.0 then the rules are REASONABLY simple. There's just a LOT of rules!!

Let me know how I can help.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 11:24 #56433

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23812
  • Karma: 427
  • Thank you received: 2987
thank you :)
I have started to read your document
by my side I think that the most important missing feature in Maximenu CK is the keyboard navigation, but this is hard to implement for megamenus

I will try to put an online test website just with Maximenu CK, so that we can check together the accessibility. Would this help ?
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 11:37 #56434

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23812
  • Karma: 427
  • Thank you received: 2987
PS : for your blue border issue, I don't know what it is
please give us an url to check what you mean, and tell me where it occurs and how
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Accessibility in your theme / template - How to 14 May 2020 12:22 #56440

  • ced1870
  • ced1870's Avatar Topic Author
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 23812
  • Karma: 427
  • Thank you received: 2987
I have put a website here
wcag.ced1870.fr/

added Maximenu CK, just fixed few small issues i n Protostar and
W3C check : OK
validator.w3.org/nu/?doc=http%3A%2F%2Fwcag.ced1870.fr%2F
WCAG check : OK
webaccessibility.com
achecker.ca/checker/index.php
Color contrast : OK
color.a11y.com/Contrast/

so what's next now ?
Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

Last edit: by ced1870.

Accessibility in your theme / template - How to 14 May 2020 12:46 #56445

ced1870 wrote: PS : for your blue border issue, I don't know what it is please give us an url to check what you mean, and tell me where it occurs and how


www.ckdev.info/keane - this is a new site I'm doing right now, but every site I've tried behaves the same. So, when you go there, before using the mouse on anything, do what a keyboard only user would do, use the Tab key. This does correctly tab through linked items, but that's where the border appears. Image attached - this is after the first Tab key press.
A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Attachments:

Please Log in or Create an account to join the conversation.

Time to create page: 0.195 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 588 guests and one member online