I am working on an accessible website and want to make sure that my forms are accessible as well. For that reason, I would like to move the asterisk that indicates a required field inside the field label rather than having it displayed after the field itself.

I also would like to repeat the validation errors that are displayed above the form below the submit button. The cursor doesn't move up to the validation messages. So having the errors repeat below the submit should help out screen reader users, I would think.

How can I accomplish the two changes?

Some more details:

What I need to do is to update the BFQuickMode.php in the administrator folder. I am trying to move the asterisk inside the label tag. I successfully moved the associated code BEFORE the label, but that creates extra space which makes the input fields that aren't required line up incorrectly compared to required fields (because now I have asterisk width plus label width in some cases and label width only in other cases.

What I am trying to do in essence, is to put:
if($mdata['required']){
echo '<span class="bfRequired">*</span>'."\n";
}
inside the label tag on line 385:
echo '<label for="ff_elem'.$mdata['dbId'].'">'.$labelText."</label>\n";

I don't understand javascript enough to make this happen, so I am really stuck. I already updated .bfRequired in the css to float left, but so far I only got the span with the asterisk to move before the label rather than inside, which causes said alignment issues.

Did you ever accomplish this?

Thx ~ debi

I would like to move them as well. They don't line up very well on the right side.

I still would like to change the position of these to run along the left side. I have some sticking out in the middle of the page. Why?

Yes, I actually did.
Here's what I did (I think - it's been a while).

On page BFQuickMode.php (in administrator/components/com_facileforms/libraries/crosstec/classes) I changed the following:

Remove the following code from line 693-695:


Insert right before the following (line 393):



the replacement code:


I added the if-else statement to line up the labels that don't have an asterisk with the ones that do.


My style for the asterisk is (in components/com_facileforms/themes/quickmode/qmtheme/theme.css):


I don't remember if I had to make any other style changes. Let me know if this doesn't align correctly, and I look more into it.