Back to Code Examples

Enter yourSecurity Number

This is the unique 5 digit number you use to log in to Mobile and Online Banking. This is something only you know and not sent by SMS

Two versions presented. They may look similar but they provide very different VoiceOver experiences

(If you're on a Mac, press command F5 to toggle VoiceOver on/off)

So, what's poor about this VoiceOver experience?

  • The close "button" is not an actual button, which cannot be found from the keyboard.
  • The close "" button is not read out which is confusing.
  • The logo is missing an alt text and consequently reads out the filename. Other screen-readers may read the entire file path.
  • The separate digit inputs are clumsy to navigate, with repeated information and instructions.
  • Automatically moving from one input to the next is an unexpected behaviour which would be confusing to someone who cannot see what's happening.
  • The explanatory text follows the input rather than preceeds it.
  • The "Continue" button should tell a screen-reader user why the button is disabled (that the inputs are not complete).
  • The "Continue" button, while disabled, doesn't appear in the keyboard keychain and cannot be found by keyboard alone. It magically appears once the input has the correct number of digits.
  • Using a shadow to outline the "Forgotten details?" button may look trendy but it gives barely enough contrast to distinguish the tapable area and doesn't work at all in high-contrast mode.

Have patience while video connects

So, what's better about this VoiceOver experience?

  • The close ("") button is identified as a button and is read out as "Close".
  • The logo has a descriptive alt text: alt="Santander".
  • A single input is a lot easier to interact with than 5 individual inputs.
  • When the input is focused, the explanatory text is also read out, though idealy it would be placed before the input.
  • Interacting with the disabled "Continue" button informs the reason: "Continue button is disabled until the 5 digit security number is entered."
  • The "Continue" button, while visually disabled, can still be found by keyboard.
  • The disabled "Continue" button passes minimum colour contrast.
  • The "Forgotten details?" button has a border which passes contrast guidelines.

Have patience while video connects