[Tip] Making FlexSearchForm WAI and Section 508 compliant

7,075 Posts

davidm Reply #1, 20 years, 5 months ago

I just went through the validation of a client website. The client asked for WCAG 3.0 and Section 508 compliance.

To achieve this, the only thing I had to modify was the FlexSearchForm snippet. Line 291 to 295, change :

$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;

into :

 $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;

Basically, what I did was make the class and id for FSF_input and FSF_Submit and add labels to both inputs.
Labels can only match single identifiers (id) thus class had to be changed.

I just did the changes and went through Cynthia’s validation for WCAG 3.0 and Section 508, but if you see any errors there, please tell me.

Thought I would share grin

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

MODx est l'outil id

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 20 years, 5 months ago

Nice David... would you mind PMing kylej about this to get it added into the upcoming Ajax search implementation? Thanks!

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

7,075 Posts

davidm Reply #3, 20 years, 5 months ago

:)

Okay Ryan I’ll PM this to Kyle right now !

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

MODx est l'outil id

160 Posts

kickass Reply #4, 20 years, 5 months ago

Thanks, David!

"I’d love to change the world but I can’t find the source code . . ."

Custom ModX Templates

7,075 Posts

davidm Reply #5, 20 years, 5 months ago

You’re welcome

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

MODx est l'outil id

415 Posts

Soda Reply #6, 20 years, 3 months ago

You can put the two input field in a <p></p> and it make it valid without add <label>

the lines modified :

  $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>';

MODx Sites & Prestations: http://dp-site.fr [Last MODx Site]
MODx Repository: [HOME] [MetaTagsExtra] / Current Dev: [xFDM]

7,075 Posts

davidm Reply #7, 20 years, 3 months ago

Yes you can but I’d have to check if that makes it for WCAG 3.0... plus it’s a better pratice I think to go with the label...

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

MODx est l'outil id

MODX Staff
1,535 Posts

Garry Nutting Reply #8, 20 years, 3 months ago

Well, having been through the pain of keeping track of WCAG 2.0 drafts as part of my day job I believe that form labels will still be required.

Or, in the fantastic mind-numbing terminology that is used in WCAG 2.0, both of the below points map to checkpoint 12.4 in WCAG 1.0:

1.3.1 Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (Level 1)

4.1.2 For all user interface components, the name and role can be programmatically determined, values that can be set by the user can be programmatically set, and notification of changes to these items is available to user agents, including assistive technologies. (Level 1)

I think the key bit from that is ’For all user interface components, the name and role can be programmatically determined ...’

Garry Nutting
Senior Developer
MODX, LLC

Email: [email protected]
Twitter: @garryn
Web: modx.com