Re: [Liste GTA] Apparence de checkbox customisée via CSS et ARIA
Merci pour l'exemple. En effet, dans le 10.3 du RGAA 3, il n'y a pas de test sur la désactivation des images. La surcharge de rôle du label via ARIA (checkbox)est-elle conforme ? Et globalement, le code évalué est-il conforme ? -Original Message- From: Aurélien Levy aurelien.l...@temesis.com To: liste_gta@list.accessiweb.org Date: Thu, 11 Dec 2014 18:34:09 +0100 Subject: Re: [Liste GTA] Apparence de checkbox customisée via CSS et ARIA Bonjour, pour ce genre de chose tu n'as pas besoin de passer par aria, exemple : http://blog.temesis.com/post/2014/03/18/cases-a-cocher-personnalisees-accessibles [http://blog.temesis.com/post/2014/03/18/cases-a-cocher-personnalisees-accessibles] Le problème ici est que tes cases à cocher sont faites via des images de fond donc si tu les désactives / mode fort contraste / css utilisateurs / problème de chargement, elles disparaitront ce qui perturber les utilisateurs voyants et malvoyants. A noter, lors de l'appel à commentaire au GTA sur le RGAA 3, la majorité a demandé le maintient de la prise en compte de ce cas de figure mais ils semble cf la version béta que la DISIC ce soit ranger à l'avis contraire. Aurélien Bonjour, voici un nouveau cas lors de mon éval qui me laisse perplexe. Le code suivant permet d'afficher ses propres images, via CSS, pour représenter la case à cocher. input type=checkbox value=Afficher name=TYPE checked=checked class=checkbox-mobile id=presentationModeDemarrage label role=checkbox tabindex=0 aria-checked=true for=presentationModeDemarrage id=xxxAfficher les astuces au prochain démarrage/label La classe checkbox-mobile fait un display:none. La restitution par Jaws par prise de focus est bonne : Case à cocher Afficher les astuces au prochain démarrage Cochée Par contre, la sélection/désélection n'est pas notifiée. Le détournement via ARIA du rôle natif de l'élément label est-il conforme ? Si non, quel critère permet d'invalider ? Comment implémenter la notification ? Merci d'avance pour votre collaboration. FRÉDÉRIC BERNIER-MALCOIFFE ___ liste_gta mailing list liste_gta@list.accessiweb.org [mailto:liste_gta@list.accessiweb.org] http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org [http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org] -- Aurélien Levy Temesis___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
Re: [Liste GTA] Apparence de checkbox customisée via CSS et ARIA
Merci pour l'exemple. En effet, dans le 10.3 du RGAA 3, il n'y a pas de test sur la désactivation des images. La surcharge de rôle du label via ARIA (checkbox)est-elle conforme ? oui à partir du moment ou tu reproduit bien l'ensemble des comportements natifs (prise de focus visible, activable au clavier de la même manière que la case à cocher native, etc) et que cela fonctionne quand tu teste le rendu dans la base de référence RGAA3 notamment le rendu du nom/intitulé, du role et de l'état. (chez moi en tout cas sur safari et voiceover ça fonctionne pas) Et globalement, le code évalué est-il conforme ? cf point précédant tu dois tester le rendu. Aurélien -Original Message- From: Aurélien Levy aurelien.l...@temesis.com To: liste_gta@list.accessiweb.org Date: Thu, 11 Dec 2014 18:34:09 +0100 Subject: Re: [Liste GTA] Apparence de checkbox customisée via CSS et ARIA Bonjour, pour ce genre de chose tu n'as pas besoin de passer par aria, exemple : http://blog.temesis.com/post/2014/03/18/cases-a-cocher-personnalisees-accessibles Le problème ici est que tes cases à cocher sont faites via des images de fond donc si tu les désactives / mode fort contraste / css utilisateurs / problème de chargement, elles disparaitront ce qui perturber les utilisateurs voyants et malvoyants. A noter, lors de l'appel à commentaire au GTA sur le RGAA 3, la majorité a demandé le maintient de la prise en compte de ce cas de figure mais ils semble cf la version béta que la DISIC ce soit ranger à l'avis contraire. Aurélien Bonjour, voici un nouveau cas lors de mon éval qui me laisse perplexe. Le code suivant permet d'afficher ses propres images, via CSS, pour représenter la case à cocher. input type=checkbox value=Afficher name=TYPE checked=checked class=checkbox-mobile id=presentationModeDemarrage label role=checkbox tabindex=0 aria-checked=true for=presentationModeDemarrage id=xxxAfficher les astuces au prochain démarrage/label La classe checkbox-mobile fait un display:none. La restitution par Jaws par prise de focus est bonne : Case à cocher Afficher les astuces au prochain démarrage Cochée Par contre, la sélection/désélection n'est pas notifiée. Le détournement via ARIA du rôle natif de l'élément label est-il conforme ? Si non, quel critère permet d'invalider ? Comment implémenter la notification ? Merci d'avance pour votre collaboration. FRÉDÉRIC BERNIER-MALCOIFFE ___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org -- Aurélien Levy Temesis ___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org -- Aurélien Levy Temesis ___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
Re: [Liste GTA] Apparence de checkbox customisée via CSS et ARIA
Bonjour à tous, Reproduire le comportement en JS d'une checkbox en JS n'est pas si simple si l'on souhaite que cela soit robuste. Je préconise d'utiliser un input checkbox et de le customiser avec CSS comme ceci : http://jsfiddle.net/korigan/xy1cfd35/ -- Steven Mouret Le 15 décembre 2014 15:05, Aurélien Levy aurelien.l...@temesis.com a écrit : Merci pour l'exemple. En effet, dans le 10.3 du RGAA 3, il n'y a pas de test sur la désactivation des images. La surcharge de rôle du label via ARIA (checkbox)est-elle conforme ? oui à partir du moment ou tu reproduit bien l'ensemble des comportements natifs (prise de focus visible, activable au clavier de la même manière que la case à cocher native, etc) et que cela fonctionne quand tu teste le rendu dans la base de référence RGAA3 notamment le rendu du nom/intitulé, du role et de l'état. (chez moi en tout cas sur safari et voiceover ça fonctionne pas) Et globalement, le code évalué est-il conforme ? cf point précédant tu dois tester le rendu. Aurélien -Original Message- From: Aurélien Levy aurelien.l...@temesis.com aurelien.l...@temesis.com To: liste_gta@list.accessiweb.org Date: Thu, 11 Dec 2014 18:34:09 +0100 Subject: Re: [Liste GTA] Apparence de checkbox customisée via CSS et ARIA Bonjour, pour ce genre de chose tu n'as pas besoin de passer par aria, exemple : http://blog.temesis.com/post/2014/03/18/cases-a-cocher-personnalisees-accessibles Le problème ici est que tes cases à cocher sont faites via des images de fond donc si tu les désactives / mode fort contraste / css utilisateurs / problème de chargement, elles disparaitront ce qui perturber les utilisateurs voyants et malvoyants. A noter, lors de l'appel à commentaire au GTA sur le RGAA 3, la majorité a demandé le maintient de la prise en compte de ce cas de figure mais ils semble cf la version béta que la DISIC ce soit ranger à l'avis contraire. Aurélien Bonjour, voici un nouveau cas lors de mon éval qui me laisse perplexe. Le code suivant permet d'afficher ses propres images, via CSS, pour représenter la case à cocher. input type=checkbox value=Afficher name=TYPE checked=checked class=checkbox-mobile id=presentationModeDemarrage label role=checkbox tabindex=0 aria-checked=true for=presentationModeDemarrage id=xxxAfficher les astuces au prochain démarrage/label La classe checkbox-mobile fait un display:none. La restitution par Jaws par prise de focus est bonne : Case à cocher Afficher les astuces au prochain démarrage Cochée Par contre, la sélection/désélection n'est pas notifiée. Le détournement via ARIA du rôle natif de l'élément label est-il conforme ? Si non, quel critère permet d'invalider ? Comment implémenter la notification ? Merci d'avance pour votre collaboration. FRÉDÉRIC BERNIER-MALCOIFFE ___ liste_gta mailing listliste_...@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org -- Aurélien Levy Temesis ___ liste_gta mailing listliste_gta@list.accessiweb.orghttp://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org -- Aurélien Levy Temesis ___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org ___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
[Liste GTA] Apparence de checkbox customisée via CSS et ARIA
Bonjour, voici un nouveau cas lors de mon éval qui me laisse perplexe. Le code suivant permet d'afficher ses propres images, via CSS, pour représenter la case à cocher. input type=checkbox value=Afficher name=TYPE checked=checked class=checkbox-mobile id=presentationModeDemarrage label role=checkbox tabindex=0 aria-checked=true for=presentationModeDemarrage id=xxxAfficher les astuces au prochain démarrage/label La classe checkbox-mobile fait un display:none. La restitution par Jaws par prise de focus est bonne : Case à cocher Afficher les astuces au prochain démarrage Cochée Par contre, la sélection/désélection n'est pas notifiée. Le détournement via ARIA du rôle natif de l'élément label est-il conforme ? Si non, quel critère permet d'invalider ? Comment implémenter la notification ? Merci d'avance pour votre collaboration. FRÉDÉRIC BERNIER-MALCOIFFE___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
Re: [Liste GTA] Apparence de checkbox customisée via CSS et ARIA
Bonjour, pour ce genre de chose tu n'as pas besoin de passer par aria, exemple : http://blog.temesis.com/post/2014/03/18/cases-a-cocher-personnalisees-accessibles Le problème ici est que tes cases à cocher sont faites via des images de fond donc si tu les désactives / mode fort contraste / css utilisateurs / problème de chargement, elles disparaitront ce qui perturber les utilisateurs voyants et malvoyants. A noter, lors de l'appel à commentaire au GTA sur le RGAA 3, la majorité a demandé le maintient de la prise en compte de ce cas de figure mais ils semble cf la version béta que la DISIC ce soit ranger à l'avis contraire. Aurélien Bonjour, voici un nouveau cas lors de mon éval qui me laisse perplexe. Le code suivant permet d'afficher ses propres images, via CSS, pour représenter la case à cocher. input type=checkbox value=Afficher name=TYPE checked=checked class=checkbox-mobile id=presentationModeDemarrage label role=checkbox tabindex=0 aria-checked=true for=presentationModeDemarrage id=xxxAfficher les astuces au prochain démarrage/label La classe checkbox-mobile fait un display:none. La restitution par Jaws par prise de focus est bonne : Case à cocher Afficher les astuces au prochain démarrage Cochée Par contre, la sélection/désélection n'est pas notifiée. Le détournement via ARIA du rôle natif de l'élément label est-il conforme ? Si non, quel critère permet d'invalider ? Comment implémenter la notification ? Merci d'avance pour votre collaboration. FRÉDÉRIC BERNIER-MALCOIFFE ___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org -- Aurélien Levy Temesis ___ liste_gta mailing list liste_gta@list.accessiweb.org http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
