Comment rendre FlexSearchForm accessible (i.e conforme WAI et Section 508)

7,075 Posts

davidm Reply #1, 20 years, 4 months ago

Il y a quelques jours, je publiai côté english une modif pour rendre le formulaire de recherche conforme WAI (WCAG 3.0 pour être plus précis).

Ligne 291 à 295, changez :

$SearchForm .= '<input class="FSF_input" type="text" name="search" value="'.$searchBoxVal.'"  ';
  $SearchForm .= ($boxText)? 'onfocus="this.value=(this.value==\''.$boxText.'\')? \'\' : this.value ;" />' : '/>';
  $SearchForm .= '<input class="FSF_submit" type="submit" name="sub" value="'.$searchButtonText.'" />';
  $SearchForm .= ($xhtmlStrict)? '</fieldset>' : '';
  $SearchForm .= '</form>'.$newline;

en :

 $SearchForm .= '<label for="FSF_input"><input id="FSF_input" type="text" name="search" value="'.$searchBoxVal.'"  ';
  $SearchForm .= ($boxText)? 'onfocus="this.value=(this.value==\''.$boxText.'\')? \'\' : this.value ;" />' : '/>';
  $SearchForm .= '</label><label for="FSF_submit"><input id="FSF_submit" type="submit" name="sub" value="'.$searchButtonText.'" />';
  $SearchForm .= ($xhtmlStrict)? '</fieldset>' : '';
  $SearchForm .= '</label></form>'.$newline;

Rien de sorcier là dedans, j’ai juste modifié les classes FSF_input et FSF_submit en id, ce qui est nécessaire pour pouvoir définir l’attribut label.

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

20 Posts

robinmaster Reply #2, 20 years, 4 months ago

personnellement, tes transformations ne sont pas valides chez moi sad

(doctype xhtml 1.O strict)

par contre, en plaçant les input dans une balise de type bloc comme <p>, ça valide impec....à voir ?

  $SearchForm .= '<p><input class="FSF_input" type="text" name="search" value="'.$searchBoxVal.'"  ';
  $SearchForm .= ($boxText)? 'onfocus="this.value=(this.value==\''.$boxText.'\')? \'\' : this.value ;" />' : '/>';
  $SearchForm .= '<input class="FSF_submit" type="submit" name="sub" value="'.$searchButtonText.'" /></p>';
  $SearchForm .= ($xhtmlStrict)? '</fieldset>' : '';
  $SearchForm .= '</form>'.$newline;

Webdesign CSS, Webdevelopment and more ...http://nekodesign.net

7,075 Posts

davidm Reply #3, 20 years, 4 months ago

OK... merci du tuyaux effectivement je n’ai pas pensé à vérifier je suis en transitionnal pas en strict... par contre ton exemple de code ne contient plus les "labels" qui rendent le formulaire accessible tongue

~~Ceci dit c’est bizarre d’avoir à mettre un formulaire dans un paragraphe... un autre élément de type bloc devrait être plus approprié... je vais me pencher là dessus merci !!!~~

OK je suis stupide totalement oublié qu’il fallait changer un paramètre dans le snippet pour la validation stricte tongue

C’était donc pas liée à mes modifs mais à ce paramètre :

$xhtmlStrict = false;

qu’il faut que tu changes en

$xhtmlStrict = true;

Par contre attention dans la doc du snippet :

 // $xhtmlStrict [ true | false ]
   // If you want this form to validate as XHTML Strict compliance, then
   // this needs to be true, but IE has a fieldset bug that I don't know
   // a workaround for. So you can set this to false to avoid it.

Apparemment le mode strict provoque un bug dans IE qui n’est pas résolu...

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id