ffoodd / a11y.css Goto Github PK

Dans les tableaux, certaines imbrications sont à proscrire.
Les tests vus dans DebugCSS sont (pour certains) extrêmement intéressants.

À relire et filtrer en fonction des tests déjà présents.

Having a single file for each level may be very useful for some users, in order to display only errors for example.

Should not be complicated.

Les messages disposent d’une hauteur automatique, ce qui pose problème lorsqu’un message est appliqué sur html ou body : le message prend alors la hauteur complète.

Un combo max-height + min-height devrait résoudre ce cas.

Merci @GaetanBt pour la remontée :)

I don't know if there is a test framework capable of keeping track of regressions for this kind of tests but maybe a simple html page implementing every case should be enough to see if counters stay consistent ?

The good reason is that some messages can hide other messages, which happens way too often (when a webpage doesn't have a defined language attribute on the html tag, for example).

Another way to show messages may be a tooltip-like interaction, for example.

Thanks to Sophie Schuermans from anysurfer.be for this one.

Hey @valeriangalliat, would you mind explaining what you had in mind perhaps? Would be nice to have your opinion. :)

Vers les nouveaux fichiers CSS + version FR / EN

Les messages devraient pouvoir être compilés en anglais pour les anglophones. Merci @hugogiraudel pour le rappel :)

Travail associé :

• proposer la documentation et le README en deux langues ;
• traduire l'ensemble des messages et commentaires ;
• ajouter un paramètre pour déterminer quels messages compiler ;
• analyser les incohérences par rapport aux WCAG 2, à la section 508 et au SGQRI.

What else ?

Les fichiers scss ont été modifiés, il s'agit de les compiler pour proposer un fichier CSS à jour :)

They are here just for alignment purpose.

Here:

/* ... */
:not(ul) > li,
:not(ol) > li {
  @include warning("invalid-list-nesting");
}

This is an incorrect test. Indeed:

• ul > li matches :not(ol) > li,
• ol > li matches :not(ul) > li.

Suggested fix:

:not(ul, ol) > li {
  @include warning("invalid-list-nesting");
}

It should work.

Suite à l’issue #6 ouverte par @7studio , les messages liés à des balises auto-fermantes ont désormais une chance d’être affichés, grâce au truchement d’un élément adjacent.

Cependant les messages injectés de cette façon ne sont pas transitionnés lors de leur apparition. C’est anecdotique, mais si une solution existe je souhaiterais l’apprendre :)

De plus le problème subsiste donc pour tous les éléments auto-fermants ne disposant pas d’éléments adjacents utiles, ainsi que pour les éléments dans le head.

Une solution «facile» peut consister à utiliser javascript pour faire apparaître les messages, mais cela entraîne une dépendance.

Qu’en pensez-vous ?

Already seen, just need to patch with a bottom. See #10 for options.

Compass isn't needed for this project. Could we safely remove the config.rb file ?

• img[src*="spacer.gif"]
• *[class^="0"](clone this from 0 to 9)
• as well as forbidden glyphs in CSS (in DebugCSS).

Imbrications could be added too:

• Tables
• miscellaneous

Anyhting else ?

I had to include the @charset thing in top of each file in order to display French messages cocrrectly (accented characters everywhere !).

While it solves the accented things, icons are double-escaped. They aren't being displayed anymore because of a double backslash instead of a simple. I think the quote function in Sass may escape characters but not sure at all...

Any help ?

L'attribut [target="_blank"] fonctionne aussi de cette manière : [target="blank"].

Je ne sais pas si cela provoque une erreur (en plus d'être laid :D ) et si son utilisation reste marginale (j'espère...) mais toujours est-il qu'il serait peut être intéressant de l'ajouter dans _advice.scss ?

Consider the following HTML:

<input type="checkbox" id="id" name="id" />
<label for="id">Label</label>

The following selector catches it as invalid:

label + :not(input):not(select):not(textarea) {
  @include warning("label-field");
}

Now I'm no accessibility expert but a checkbox followed by a label doesn't look so bad to me.

Le rouge des erreurs devrait être #911 :D

Chaque test dispose de son propre message, afin d’informer et de guider au maximum l’intégrateur en quête d’amélioration.

Cependant, je me suis bêtement aperçu que les messages qui reviennent à la ligne par manque de place ne s'affichent pas correctement.

Quelques modifications mineures résoudront rapidement ce léger désagrément :

1. Laisser le navigateur calculer la hauteur de l'élément
   height: auto !important;
2. Définir un interligne approprié aux multi-lignes
   font: normal normal 1rem/1.4 "Lucida Sans Unicode", "Lucida Sans", sans-serif !important;
3. Libérer la fonction de transformation grâce aux pourcentages
   transform: translateY( -100% ) translateZ( 0 ) !important;

mais il serait dommage de s'arrêter en si bon chemin.

Maintenant que notre boite est affranchie de ses limites, le must serait de pouvoir maîtriser ces sauts de ligne à l'intérieur de notre message.
Comme rien n'est impossible, voici la ligne nécessaire à cette proposition :

%message {

  &::after {
    white-space: pre;
  }

}

Il ne restera plus qu'à placer la séquence de caractères \A à l'endroit désiré pour obtenir un saut de ligne.
Exemple :

content: "#{$error-ico} Attribut [alt] manquant. Quelle hérésie.\A @see : BP1 OpQuast." !important;

et en pratique dans un Fiddle : http://jsfiddle.net/7studio/U3cb7/

En espérant que vous trouverez cela utile.

Ressources supplémentaires :

• Flexible multiline definition lists with 2 lines of CSS 2.1 par Lea Verou
• http://www.w3.org/wiki/CSS/Properties/white-space

Dans certains cas, le compteur n'est pas au premier plan.
Pour s'assurer qu'il le soit il faudrait définir une valeur de z-index.

Pourquoi pas ceci :

html::after {
    z-index: 2147483647;
}

La propriété CSS outline est judicieusement utilisée et justifiée dans ce projet :

on utilise outline plutôt que border afin de ne pas modifier les dimensions des éléments.

Cela étant, l'avantage principal dont nous profitons en utilisant cette propriété CSS n'est pas sans limites.
Dans des cas particuliers :

• gestion des débordements sur le bloc contenant à l'aide de overflow: hidden
• positionnement de l'élément contre un bord de la fenêtre du navigateur ou une scrollbar

les contours dessinés au-dessus du contenu en débordant (si nécessaire) du bloc contenant ne seront pas visibles.

Difficile alors de profiter pleinement du projet.

Afin de s'acquitter autant que possible des dépendances au contenant, je propose de dessiner les contours à l'intérieur des éléments grâce à la propriété CSS outline-offset associée à une valeur négative.
Voici les différences visibles sur un exemple simple : http://jsfiddle.net/7studio/sRExL/

Internet Explorer n'offrant toujours pas de support à cette propriété (même dans sa version 11), cette proposition devra être considérée comme une amélioration progressive (« bonus » pour les utilisateurs disposant de navigateurs plus récents ou plus évolués) du projet.

Voici la modification qui serait nécessaire :

// -- @subsection Mixins --------------------
@mixin outline( $level ) {
  outline: 4px solid transparentize( $level, .25 ) !important;
  outline-offset: -4px;

  ...

}

Qu'en pensez-vous ?

Ressources supplémentaires :

• http://caniuse.com/#feat=outline
• http://dev.w3.org/csswg/css-ui/#outline-offset

The problem with maintaining messages (@include message(...)) and selectors (@extend %placeholder) in different files is that we are likely to have different selectors in both files...

I suggest we keep the theme-based architecture (error, advice, etc.) but get rid of either messages to have everything in selectors.

If you're okay with this, I'll take care of the rework.

Hey! Great work here.

Just wondering if you've looked at my https://github.com/Heydon/REVENGE.CSS to see if there's anything you'd like to take from it?

Cheers and let me know if you need any clarification.

Why is this a bad practice ?
And also it seems that modifications concerning #19 got deleted at some point.

Message keys are quite arbitrary at this point. Could we find a way to normalize them perhaps?

À étudier : selon @goetsu il suffit d’ajouter @namespace url(http://www.w3.org/1999/xhtml ); au début du fichier CSS pour pouvoir l’ajouter simplement à Stylish.

2147483647 est typiquement le genre de valeur que l'on ne veut pas répéter. ;)

Ca permettrait aussi de rendre le code plus élégant :

$max-z-index: 2147483647;

@if $level == "forestgreen" {
  z-index: $max-z-index - 3 !important;
} @else if $level == "gray" {
  z-index: $max-z-index - 2 !important;
} @else if $level == "gold" {
  z-index: $max-z-index - 1 !important;
} @else if $level == "crimson" {
  z-index: $max-z-index     !important;
}

I'm no accessibility expert, so please forgive any mistake I might tell here but the current message related to the figure element sounds misleading to me:

L’élément <figure> regroupe une <img> et un <figcaption> : le rôle group semble indiqué, pas vrai ?

Which would be translated to:

The <figure> element gathers and <img> tag and a <figcaption>: group role sounds good, right?

As far as I'm aware, a figure is not restricted to present images. It can also contain videos, code, and blockquotes. Shouldn't we find a more appropriate message?

Along the same lines, a figcaption is completely optional which is not what you seem implying with:

Une image dans l’élément <figure> doit être liée à / décrite par un <figcaption>.

Translated as:

An image within a <figure> element should be described by a <figcaption>.

That should be very easy now :)

This tool (http://quailjs.org/) suggested by @DelphineM is mainly javascript based, but some tests may be useful :)

And the way messages are displayed is pretty close to what i thought about some weeks ago.

Serait-il possible d'intégrer le projet à Bower ?

Dans majorité des cas ni l'un ni l'autre ne sont obligatoires ou nécessaire, exemple le titre d'une section est donnée nativement par la 1ère entete dans la section (donc sinon à minima le selecteur doit vérifier si il n'y a pas de hx descendant dans la section) autre exemple pour un champ obligatoire l'indication du caractère obligatoire peut etre dans le label voir dans un title etc

Il est possible de proposer le README et les commentaires dans les deux langues, alors autant le faire.

Please feel free to argue those selectors, and to suggest any other test cases you could think of :)

Coming from DebugCSS:

• nav:not([role])
• div[role="img"]:not([aria-label])

Coming from REVENGE.CSS :

• body > header:not([role="banner"])
• body > div > header:not([role="banner"])
• body > footer:not([role="contentinfo"])
• body > div > footer:not([role="contentinfo"])
• section [role="banner"]
• section [role="contentinfo"]
• article [role="banner"]
• article [role="contentinfo"]
• aside [role="banner"]
• aside [role="contentinfo"]
• #main:not(main):not([role="main"])
• #footer:not(footer):not([role="contentinfo"])
• #header:not(header):not([role="banner"])
• #banner:not(header):not([role="banner"])

Is there a clean way to a11y a bookmarklet? Perhaps with rel="bookmarklet" or something?

If there is, we should update the a[href^="javascript:"] rule to avoid dealing with bookmarklets.

Les balises «auto-fermantes» n’autorisent pas la génération de contenu. Ainsi les erreurs ou alertes seront marquées mais aucun message n’apparaitra au survol.

Même si les messages seront parfois consultables grâce aux inspecteurs de DOM (Chrome, IE11), il n'est pas envisageable que cela soit une solution acceptable pour un problème que je considère comme bloquant pour profiter pleinement de l'outil.

Proposition

Utiliser le sélecteur combinateur ~ qui permet de cibler des éléments suivants du même niveau dans un élément parent commun.
Ce sélecteur va permettre aux éléments «auto-fermants» de demander aux suivants (à condition qu'ils existent et puissent) d'afficher les erreurs ou alertes pour eux.
Afin de ne pas perturber (avec une information qui n'est pas la leur) les éléments qui seraient eux-mêmes en erreur, en alerte, obsolètes ou pouvant être améliorés, la gestion des messages devra être traitée uniquement lorsque cela sera nécessaire (au survol de l'élément dans notre cas).

Voici à quoi cela ressemblerait théoriquement dans le cas de l'élément <img /> :

img:not([alt]),
img[alt=""],
img[alt=" "] {
  outline: 4px solid rgba(220, 20, 60, .75) !important;
  outline-offset: -4px;
}
img:not([alt]):hover ~ *::after,
img[alt=""]:hover ~ *::after,
img[alt=" "]:hover ~ *::after {

  /* @extend %message; */

  z-index: 2147483647 !important;
}
img:not([alt]):hover ~ *::after { content: "\26D4\00A0 Attribut [alt] manquant. Quelle hérésie." !important; }
img[alt=""]:hover    ~ *::after { content: "\26A0\00A0 Attribut [alt] vide. C’est toléré pour les images de décoration uniquement. Est-ce le cas ?" !important; }
img[alt=" "]:hover   ~ *::after { content: "\26D4\00A0 Un attribut [alt] *presque* vide. C’est une blague, non ?" !important; }

J'ai également mis cet exemple en pratique dans un Fiddle : http://jsfiddle.net/7studio/X7y8e/.

Cette méthode n'est malheureusement pas parfaite et échouera (le message n'apparaîtra pas au survol) dans plusieurs cas très particuliers :

• L'élément est le seul enfant de son élément parent
• L'élément est suivi uniquement par des éléments eux-mêmes «auto-fermants»

Néanmoins cette proposition permettra de nous aider dans de nombreux cas.

Qu'en pensez-vous ?

Hi Gaël,

I would like to propose you a solution to test or visualise as you wish the elements within <head>.
This little ‘trick’ is already 4 years old but it works like a charm in modern browsers and does not need a bit of JavaScript.
I could speak a long time about it but in fact everything is in "Displaying hidden elements like <head> using CSS" by @mathiasbynens

I use this trick in an unofficial fork of your project at work and you can go further than the example from the article:

• Add color on an element which has an attribute with a value which is an empty or an unexpected string
• Draw lovely icons to distinguish Facebook Open Graph and/or Twitter Cards for example
• Hide content of <script> to only show their attributes
• etc

Here is my test (in French because I am): bichoco/debug.css

Plus, it is interesting to know that IE shows all the elements <link> when you apply display: block on the element <head>.
If you are like me and that you won't display all the elements, you will need to add this rule:

head link {
  display: none;
}

To finish, it is important to prefix all your selectors by head to be sure that no <meta> in the body will be shown (e.g.: meta used for schema.org).

I hope you will like this suggestion.

Il est possible de tomber sur des liens vers courriel incomplets ou en attente de paramêtrage.
Il peut être intéressant de les signaler en erreur au même titre que les liens vides ici.

Exemple :

a[href="#"],
a[href^="javascript"],
a:not([href]),
a[href=""],
a[href="mailto:"],
a[href="mailto"],

First test in Errors page: nothing happens when hovering the textarea.

Chrome Version 38.0.2125.122 Mac OS X Yosemite.

Since the discussion forum had been shut down, notes linking to Accessiweb 2.2 HTML5/ARIA should be updated in order to link to the deployed version (French only, sorry about that).

Thus each criteria links to success and failures in WCAG 2.0 and RGAA criterias, every existing link in a11y.css will be updated to 4 or 5 links.

Thanks for your patience !

We have two major options:

• language;
• minimum level.

To allow people to have their very custom version of a11y.css, we need a little bookmarklet generator on the site. A simple form that refreshes the href attribute of the bookmarklet upon submitting would be enough.

I have a working proof of concept here: http://codepen.io/HugoGiraudel/pen/5d00daeb2dc2abbd2d96a59b365a24c0.

Also, we would obviously need to have all different versions compiled. For now:

• a11y-fr-advice.css
• a11y-fr-obsolete.css
• a11y-fr-warning.css
• a11y-fr-error.css
• a11y-en-advice.css
• a11y-en-obsolete.css
• a11y-en-warning.css
• a11y-en-error.css

This turns out to be really easy to do thanks to our powerful brand new Sass API. ;)

Thanks to @a5e , will have to investigate.

Bonjour Gaël,

En lisant la présentation de ton projet, je me suis arrêté sur ce passage :

Concrètement, les éléments en erreur, en alerte ou obsolète seront cernés d’une bordure externe de 4px colorés:

et particulièrement sur l'utilisation des mots bordure externe.

J'ai cru, l'espace d'un instant, que le projet utilisait la propriété CSS border pour notifier un problème.

Il me semble, que l'utilisation du mot contour lèverait toutes ambiguïtés. Celui-ci étant la traduction la plus proche de la propriété CSS outline qui est utilisée dans le projet.

Encore bravo pour cette release sur GitHub !

Xavier.

https://github.com/ffoodd/a11y.css/blob/master/sass/selectors/_obsolete.scss#L107

I'm not sure what's the best way to translate them, I was wondering using a deep-map as for $messages with a structure like this:

/// This map holds configuration for all themes. Each theme has an icon, a color and a z-index and names.
/// @type Map
/// @prop {Map} theme
/// @prop {String} theme.icon  - Theme icon
/// @prop {Color} theme.color  - Theme color
/// @prop {Number} theme.index - Theme z-index
/// @prop {Map} theme.name - Theme names
/// @prop {Map} theme.name.fr - Theme french name
/// @prop {Map} theme.name.en - Theme english name
$themes: (
  'error': (
    'icon': \2620\00A0,
    'color': #911,
    'index': ($max-z-index),
    'name': (
      'fr': 'Erreurs :',
      'en': 'Errors:'
    )
  ),
  'warning': (
    'icon': \2622\00A0,
    'color': gold,
    'index': ($max-z-index - 1),
    'name': (
      'fr': 'Avertissements :',
      'en': 'Warnings:'
    )
  ),
  'obsolete': (
    'icon': \271D\00A0,
    'color': gray,
    'index': ($max-z-index - 2),
    'name': (
      'fr': 'Obsolètes :',
      'en': 'Obsoletes:'
    )
  ),
  'advice': (
    'icon': \2665\00A0,
    'color': forestgreen,
    'index': ($max-z-index - 3),
    'name': (
      'fr': 'Conseils :',
      'en': 'Advices:'
    )
  ),
);

but I was not able to modify the theme-conf function to use this, and It doesn't seem right to have translations in $themes. Any idea ?

l'attribut id n'est pas obligatoire à minima sur les champ type submit ou button. De plus pour les autres types d'input si c'est le title qui est utilisé comme label il n'y en a pas forcement besoin non plus