CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site
This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using Profiles (Moderator: Dave Greenberg) »
  • Radio buttons, labels and screen readers
Pages: [1]

Author Topic: Radio buttons, labels and screen readers  (Read 2145 times)

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Radio buttons, labels and screen readers
January 21, 2011, 11:27:56 am
Our site is for a blind organization and they are having the hardest times with the forms. Screen readers cannot read the labels of the radio buttons. Is there a way to change all radio buttons to be select lists instead? Also the Yes/No we'd need as a checkbox ideally, help!

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
January 21, 2011, 11:58:44 am
Alternatively, another idea would be to add the label of the question to each answer. For example, we have radio buttons for "US Service Veteran?" with answers Yes or No. Can we make it so the Yes and No become "US Service Veteran? Yes" and "US Service Veteran? No"? Any idea what template file to look in?

We'd need to do the same thing with checkbox options as well, thanks anyone who can help!

Donald Lobo

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Radio buttons, labels and screen readers
January 21, 2011, 02:22:17 pm

You might want to talk to Steve K and potentially collaborate with him/his org to make Civi more screen reader friendly. Here's his recent post:

http://forum.civicrm.org/index.php/topic,18054.msg74833.html#msg74833

(and he'll also be doing a more detailed blog post soon)

Can u elaborate a bit more on:

* Why screen readers cannot read the labels on radio buttons? is it a bug in that software? do we need to add some more "html code" to make radio buttons more friendly?

Changing all radio buttons to be select lists is possible. You'll need to hack the core QuickForm code to do so. Ping us on IRC and we can get you started

lobo
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
January 21, 2011, 03:39:42 pm
Right on, do you know where that code might be? I jumped on irc but don't see anyone :( The easy fix for these seems to be adding the label to each option so if there's an easy way to do that these guys would be so happy! Let me know, thank you! Feel free to ping me on AIM drubage2000.

Donald Lobo

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Radio buttons, labels and screen readers
January 21, 2011, 05:06:41 pm

most likely u'll need to modify the code here:

packages/HTML/QuickForm/radio.php

lobo
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
January 24, 2011, 01:49:47 pm
Thank you! I was able to put something together for them!

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
February 16, 2011, 01:56:52 pm
So I looked a little more, it appears that all RADIO buttons on CiviCRM forms like this are missing the for="" part in the <label> tag. Checkboxes are also missing the for part of the label but other fields have the for set. Any idea why this bugs exists and where I can find the spot where those labels are generated? It is not in the above file although I did make some updates with that file per client needs.
« Last Edit: February 16, 2011, 02:01:13 pm by drubage »

Donald Lobo

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Radio buttons, labels and screen readers
February 16, 2011, 03:34:13 pm
the code for those are generated in the QuickForm php files

packages/HTML/QuickForm/radio.php
packages/HTML/QuickForm/checkbox.php

check the function toHtml

lobo
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
February 17, 2011, 08:10:05 am
I do not think that is correct, or something seems very strange. I had to modify that function per above to add the full labels to each option presented to the user. The labels I am talking about are the ones on the left hand side of the table on the signup page here:

http://www.aincolorado.org/user/register

See a label like Gender:

<label>  Gender
   <span title="This field is required." class="marker">*</span>
</label>

Versus the one for Household Size:

<label for="custom_63">  Household Size
   <span title="This field is required." class="marker">*</span>
</label>

The labels in radio.php and checkbox.php are for the checkboxes/radio buttons on the right, I am talking about the left hand labels. The lack of 'for="XXXX"' there is causing problems.

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
February 21, 2011, 10:40:36 pm
Any other ideas? This really seems like a bug with the CiviCRM code to be missing those labels but I am not sure where to look...

Donald Lobo

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Radio buttons, labels and screen readers
February 21, 2011, 11:51:33 pm
After way more time than it should have taken and going down multiple false paths, i finally figured where it was generated:

CRM/Core/Form/Renderer.php, function _elementToArray

the problem is that radio box / chekboxes (Gender, Privacy etc) are basically a "group of elements" and hence the top level does not have a specific id associated with it. hence the for part is not generated

I'm not very sure what the solution for this is.

lobo

Update: Maybe these fields should not have the associated label element around them? Not sure whether this is a good solution. However after reading: http://www.w3schools.com/tags/tag_label.asp seems like this is the right solution

« Last Edit: February 22, 2011, 12:01:28 am by Donald Lobo »
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
February 22, 2011, 06:40:14 am
The fields on the right were fine it was just the labels on the left. I re-wrote that function like this, I see the for="XXXX" now on the labels that were missing it but am waiting for confirmation from the screen readers:

    function _elementToArray(&$element, $required, $error) {
        self::updateAttributes($element, $required, $error);

        $el = parent::_elementToArray($element, $required, $error);

        // add label html
        if ( ! empty($el['label']) ) {
              $id = $element->getAttribute('id');
            if ( ! empty( $id ) ) {
                $el['label'] = '<label for="' . $id . '">' . $el['label'] . '</label>';
            } else {
               $id = $element->_name;
                $el['label'] = '<label for="' . $id . '">' . $el['label'] . '</label>';
                //$el['label'] = "<label>{$el['label']}</label>";
            }
        }

        return $el;
    }

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
February 22, 2011, 01:25:14 pm
I talked to the people who make the screen readers and it looks like the Yes/No options are the real problem. There is a label in front of each yes/no like this:

<input value="1" type="radio" id="CIVICRM_QFID_1_Yes" name="custom_76" />

There is more than 1 yes no in our form and they all have those labels with the SAME ID. I hate to do this but where in the code is that generated? There needs to be something like this on there:

<input value="1" type="radio" id="CIVICRM_QFID_1_Yes[custom_76]" name="custom_76" />

Thank you SO MUCH for anyone that can help!

xavier

  • Forum Godess / God
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4453
  • Karma: 161
    • Tech To The People
  • CiviCRM version: yes probably
  • CMS version: drupal
Re: Radio buttons, labels and screen readers
February 22, 2011, 01:44:43 pm
Hi,

For my own education, why is the id useful/important for a screen reader ? I thought the "for" in the label matches with the name, doesn't it ?

X+
-Hackathon and data journalism about the European parliament 24-26 jan. Watch out the result

drubage

  • I post occasionally
  • **
  • Posts: 32
  • Karma: 0
Re: Radio buttons, labels and screen readers
February 22, 2011, 02:11:22 pm
Well first the company that makes the screen reader software thought the form was super complicated, so it may not need them under normal circumstances I am not sure. HTML in general does not like more than 1 ID on the page.
Pages: [1]
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using Profiles (Moderator: Dave Greenberg) »
  • Radio buttons, labels and screen readers

This forum was archived on 2017-11-26.