Question

On some of my pages I am setting focus on a first input element:

      $(':input:visible:first').trigger('focus');

If the first input element is a checkbox or a radiobutton it receives a focus fine but that’s not clearly visible, so it’s label is not highlighted and screen reader doesn’t recognize that, too, i.e. it doesn’t read out that field. Is there any way using JQuery to make focus on checkbox or radoibuttons more pronounced?

Answer 1

Can’t you assign a suitably clear css class to it?

  $(':input:visible:first').focus(function() {
                               $(this).addClass("superClear")
                            })
                           .blur(function() {
                               $(this).removeClass("superClear");
                           }).focus();

Also, this might be helpful:

How do I style (css) radio buttons and labels?