St George Internet Banking inputs need HTML labels

I really like using St George Internet Banking from my PC; it lets me do almost everything I need to do from the comfort of my home without having to visit a branch or call. While using their Internet banking I’m regularly reminded of a an annoyance: I can’t click on the text that describes an input to toggle, change or focus the input.

The cause of the problem is that most of the HTML inputs on the site don’t have HTML label elements. This is an issue for accessibility and usability. At the moment you have to click on the tiny check box or radio button which requires unnecessary precision. For a user of a screen reader they may hear that there is an unlabelled input; the user must then determine what it does by examining the surrounding content.

With the addition of a simple label wrapped around or associated to the input

• you would be able to click on the text label which
  • presents a larger target
  • makes the product easier to use
  • is conventional
  • faster to use, and
• provides an accessible experience for users that require it.

A sample of HTML code on the site now used for picking the frequency of a payment looks like this:

<div id="Row">
 <input
    type="radio"
    name="selectedFrequency"
    value="W"
    class="radio">
  Weekly
</div>

By simply wrapping a <label> element around the input the text is associated with the input:

<div id="Row">
  <label>
    <input
      type="radio" name="selectedFrequency"
      value="W"  class="radio">
     Weekly
  </label>
</div>

If wrapping is too disruptive you can also associate a label to an input via the for attribute:

<div id="Row">
  <input
    type="radio" name="selectedFrequency"
    id="selectedFrequency" value="W" class="radio">
  <label for="selectedFrequency">Weekly</label>
</div>

Remember, your that “users spend most of their time on other websites” (Jakob’s Law of the Web User Experience) which means they are probably expecting to be able to click on the text which means they, like me, are annoyed that it doesn’t work. I am reminded of this every time I use St George Internet Banking on my PC but it is so simple to fix.