Improve accessibility of mailform and searchbox

[cmb]

Hello Community,

maverick.ffm reported accessibility issues regarding the searchbox and the mailform. I suggest to apply the following patch to cmsimple/classes/Mailform.php for CMSimple_XH 1.6.5:

Code: Select all

Index: Mailform.php
===================================================================
--- Mailform.php	(revision 1397)
+++ Mailform.php	(working copy)
@@ -271,27 +271,35 @@
         $o .= tag('input type="hidden" name="action" value="send"') . "\n";
 
         // fields before textarea
-        $o .= '<div>' . "\n" . $tx['mailform']['sendername'] . tag('br') . "\n"
+        $o .= '<div>' . "\n" . '<label for="xh_mailform_sendername">'
+            . $tx['mailform']['sendername'] . '</label>' . tag('br') . "\n"
             . tag(
-                'input type="text" class="text" size="35" name="sendername" value="'
+                'input type="text" class="text" size="35" name="sendername"'
+                . ' id="xh_mailform_sendername" value="'
                 . XH_hsc($this->sendername).'"'
             ) . "\n"
             . '</div>' . "\n"
-            . '<div>' . "\n" . $tx['mailform']['senderphone'] . tag('br') . "\n"
+            . '<div>' . "\n" . '<label for="xh_mailform_senderphone">'
+            . $tx['mailform']['senderphone'] . '</label>' . tag('br') . "\n"
             . tag(
-                'input type="tel" class="text" size="35" name="senderphone" value="'
+                'input type="tel" class="text" size="35" name="senderphone"'
+                . ' id="xh_mailform_senderphone" value="'
                 . XH_hsc($this->senderphone).'"'
             ) . "\n"
             . '</div>' . "\n"
-            . '<div>' . "\n" . $tx['mailform']['sender'] . tag('br') . "\n"
+            . '<div>' . "\n" . '<label for="xh_mailform_sender">'
+            . $tx['mailform']['sender'] . '</label>' . tag('br') . "\n"
             . tag(
-                'input type="email" class="text" size="35" name="sender" value="'
+                'input type="email" class="text" size="35" name="sender"'
+                . ' id="xh_mailform_sender" value="'
                 . XH_hsc($this->sender).'" required="required"'
             ) . "\n"
             . '</div>' . "\n"
-            . '<div>' . "\n" .  $tx['mailform']['subject'] . tag('br') . "\n"
+            . '<div>' . "\n" .  '<label for="xh_mailform_subject">'
+            . $tx['mailform']['subject'] . '</label>'. tag('br') . "\n"
             . tag(
-                'input type="text" class="text" size="35" name="subject" value="'
+                'input type="text" class="text" size="35" name="subject"'
+                . ' id="xh_mailform_subject" value="'
                 . XH_hsc($this->subject).'" required="required"'
             ) . "\n"
             . '</div>' . "\n"

I'm not sure what to do with the textarea of the mailform and the text input of the searchform. It might be sufficient to add alt/title attributes (which might require new language strings). I'll try to verify this ASAP.

Furthermore I suggest that we check the full standard distribution wrt. to accessibility (plugin developers and template designers may consider to do this also for their extensions). See http://www.w3.org/standards/webdesign/accessibility for an introduction on this topic.

Christoph

[cmb]

I'm not sure what to do with the textarea of the mailform and the text input of the searchform. It might be sufficient to add alt/title attributes (which might require new language strings). I'll try to verify this ASAP.

According to WCAG 2.0 H91 a title attribute should be sufficent. So I suggest the following patch in addition to the one mentioned above:

Code: Select all

Index: cmsimple/classes/Mailform.php
===================================================================
--- cmsimple/classes/Mailform.php	(revision 1397)
+++ cmsimple/classes/Mailform.php	(working copy)
@@ -300,7 +300,8 @@
         // textarea
         $name = $this->embedded ? 'xh_mailform' : 'mailform';
         $o .= '<textarea rows="12" cols="40" name="' . $name
-            . '" required="required">' . XH_hsc($this->mailform) . '</textarea>';
+            . '" required="required" title="' . $tx['mailform']['comment'] . '">'
+            . XH_hsc($this->mailform) . '</textarea>';
 
         // captcha
         if (isset($cf['mailform']['captcha'])
Index: cmsimple/languages/en.php
===================================================================
--- cmsimple/languages/en.php	(revision 1397)
+++ cmsimple/languages/en.php	(working copy)
@@ -175,6 +175,7 @@
 
 $tx['mailform']['captcha']="Please enter this number (spam prevention)";
 $tx['mailform']['captchafalse']="Please enter anti-spam code";
+$tx['mailform']['comment']="Comment";
 $tx['mailform']['mustwritemessage']="No message has been entered";
 $tx['mailform']['notaccepted']="Please fill in the required fields";
 $tx['mailform']['notsend']="The message could not be sent";
@@ -238,6 +239,7 @@
 $tx['search']['found_1']="\"%s\" was found in one page:";
 $tx['search']['found_2-4']="\"%s\" was found in %d pages:";
 $tx['search']['found_5']="\"%s\" was found in %d pages:";
+$tx['search']['label']="Search terms";
 $tx['search']['notfound']="\"%s\" was not found.";
 $tx['search']['result']="Result of your search";
 
Index: cmsimple/tplfuncs.php
===================================================================
--- cmsimple/tplfuncs.php	(revision 1397)
+++ cmsimple/tplfuncs.php	(working copy)
@@ -286,7 +286,10 @@
 
     return '<form action="' . $sn . '" method="get">' . "\n"
         . '<div id="searchbox">' . "\n"
-        . tag('input type="text" class="text" name="search" size="12"') . "\n"
+        . tag(
+            'input type="text" class="text" name="search" title="'
+            . $tx['search']['label'] . '" size="12"'
+        ) . "\n"
         . tag('input type="hidden" name="function" value="search"') . "\n" . ' '
         . tag(
             'input type="submit" class="submit" value="'

The language strings and maybe their keys could most likely be improved. Any suggestions?

[cmb]

Furthermore I suggest that we check the full standard distribution wrt. to accessibility

If somebody finds the time...

Otherwise: done (r1411).