ChiliProject is not maintained anymore. Please be advised that there will be no more updates.

We do not recommend that you setup new ChiliProject instances and we urge all existing users to migrate their data to a maintained system, e.g. Redmine. We will provide a migration script later. In the meantime, you can use the instructions by Christian Daehn.

Label all input field and control tags (Bug #667)


Added by Romano Licker at 2011-10-18 04:09 pm. Updated at 2011-10-28 03:14 pm.


Status:Closed Start date:2011-10-18
Priority:Normal Due date:
Assignee:Holger Just % Done:

0%

Category:User interface
Target version:2.4.0
Remote issue URL: Affected version:

Description

Accessibility flaw for blind users:
Text areas, check boxes etc. need to be labeled with a <label for="id"> tag, in order to be linked to their description.
This needs to happen for a elements if possible.


Related issues

related to Bug #659: Accessibility for blind users Declined 2011-10-13

Associated revisions

Revision af94d249
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added style to hide content from sighted users

Revision bf8de585
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added 'for' to link them

Revision 5ab9ed88
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added invisible project scope label

Revision cd7b30da
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added invisible search label

Revision bf23c06d
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added invisible labels for queries

Revision 0f5d38ca
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] linked labels to their elements

Revision 2e688efa
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] link label to element

Revision 4717a242
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] link label to element

Revision 207af215
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] set id for message_subject and linked it to label,
added invisible label

Revision 2f5cf020
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] set unique id for each checkbox and linked it
added "no-css" class to overwrite the current label style

Revision 2c0fcd3b
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added invisible labels for reassign select-tag on destroy views

Revision ecf6a963
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] linked labels to their elements

Revision 26a7ea46
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] linked label to its element

Revision 3c04b308
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added invisible label for mail notification,
linked label where possible

Revision 29729436
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added invisible label

Revision 71271e6f
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] added invisible label

Revision c77f3a0f
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] link label to element

Revision 4747cdce
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] linked labels to their element

Revision 6f5fda22
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] set ids, created invisible labels and linked them

Revision 2b472d87
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] linked label to its element

Revision fdf660e1
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] linked labels to their elements

Revision 3bd6aa35
Added by Romano Licker at 2011-10-28 05:03 pm

[#667] made labels visible as this is an accessibility issue
even for sighted users

Revision 50364780
Added by Romano Licker at 2011-10-28 05:05 pm

[#667] improved code readability

Revision e4832789
Added by Holger Just at 2011-10-28 05:10 pm

[#667] Label all input field and control tags

History

Updated by Holger Just at 2011-10-18 04:29 pm

Many labels in current forms are not marked up with the for="id" attribute but surround the element which they label, e.g.

<label>Foo <input type="text" name="foo" /></label>

AFAIK, this is also a valid (although less elegant) way for proper markup.

Finally please make sure to provide timely patches if you want to have the feature included into the core for a certain version as they still have to be reviewed.

Updated by Romano Licker at 2011-10-19 10:09 am

I noticed and I will not change these labels.
However most of the time, the label-tag is not surrounding the element. In those cases I add the "for" attribute to the label and link it.

It should be done within a few days. I will post a pull-request as soon as finished.

Updated by Romano Licker at 2011-10-21 11:26 am

I completed the task today.

This is the pull request:
https://github.com/chiliproject/chiliproject/pull/110

The last commit is optional. It adds visible labels to the column option view in issue filters.
This is an accessibility flaw for sighted users as well.

Updated by Gregor Schmidt at 2011-10-27 06:35 am

Hello Romano,

as far as I can see, this issue is ready for review. I therefore update the status accordingly.

Thanks for taking the time to go through all the code. I think this is a great enhancement for all users of ChiliProject. I always tend to click on labels and expect the focus to move to the input field. With these changes in ChiliProject, it should always work.

Thanks for your effort,

Gregor

  • Assignee deleted (Romano Licker)
  • Status changed from Open to Ready for review

Updated by Gregor Schmidt at 2011-10-27 06:37 am

@everyone:

Is there a policy about newly introduced i18n labels? Is it okay to add a bunch of untranslated labels in minor releases or should we postpone that to major releases, so that translators may have the time to do their work?

Gregor

Updated by Gregor Schmidt at 2011-10-27 06:53 am

I just ran the test suite on 1.8.7 using MySQL. Everything looks good.

Updated by Romano Licker at 2011-10-27 10:12 am

Ourclient's expert on accessibility told us that there are still problems.

A brief summary:
  • Every input/textarea/select/radiobuttons/checkboxes have to be labeled.
  • Even if there are in a fieldset, table .. they need to have an associated label-tag.
  • Although tables contain the description in the tableheader, input fields need to have separate labels.
  • the label has to be in the same td as the element that you want to label (screenreader navigation issue)
  • only exception so far: cloze texts (e.g. in issue filters) -> CHECKBOX Assignee IS (screenreader can read options) ROMANO LICKER (screenreader can read options)
    The sentence read by the screenreader still makes sense. Textfields in this cloze texts however still need a label.

I will go through all files one more time and add the labels where needed.

  • Assignee set to Romano Licker
  • Status changed from Ready for review to Open

Updated by Holger Just at 2011-10-28 03:14 pm

I merged the current state of the fixes. Please create a new issue if there are additional views.

  • Assignee changed from Romano Licker to Holger Just
  • Status changed from Open to Closed

Also available in: Atom PDF