Accessibility as part of the DNA

I’d like to congratulate Derrick and the Debut team for creating a website that’s accessible with my screen-reader JAWS (Job Access With Speech) on my computer, and VoiceOver on iPhone. I used TalkBack from 2009 to 2014, but the experience differs from device to device, and the iPhone is more of a hit in the blind comunity.

Since we now have a roadmap, we need to ensure accessibility is built into the principles at the design stage, and getting actual users involved in the testing process.

I’ll be using VO for VoiceOver and TB for TalkBack to indicate the screen-readers on iOS and Android.

  1. DO the buttons have clear labels and VoiceOver/Talkback hints? Note: these hints are not displayed on screen, but tell the user what for example, Home tab is where all your balances are, with an explainer hint. Or, double tapping your name would open your Debut account management settings.

  2. Is the app ifficient to navigate? You can build in great accessibility, however it won’t work if there is great ifficiency for the VoiceOver/TalkBack user. Two issues as follows:
    In iOS below 16.0, when I go to the updates tab to check for app updates, I’d get the app name, version number, and release notes. However after upgrading to iOS 16 I now have to make three swipes, past the Open button, then swipe again to get to the release notes, which slows me down.
    Similarly, when adding a pizza in the Dominos NZ app, I find a pizza, then swipe right to find the add button. But there must be a design flaw, as VoiceOver is skipping over the add button, and sending me to the next pizza. Another swipe right eventially puts me on the Add button, but that’s for the first pizza, which VO just reads as Add in both instances, causing confusion. In other words, there is no clear definition of what add button is for what pizza, and they’re both grouped together after subsequent swipes.

Each item’s “Add” button must be associated with that item. To resolve this, you need to tell the assistive technology which item that button belongs to, as well as putting each into separate containers. Apple and Google have this information in their developer documentation.
The Actions rotor lets you put a limited number of actions into the VoiceOver/TalkBack Rotor, which enables the user to do things such as add a quantity of a product such as apples to a cart in three actions, swipe down with one finger until you hear, “Add 1 to cart” then double-tapp to add the apples to cart, which is more ifficiant and takes less steps. VO Rotor actions can be found on Apple Developers.

  1. Does VO/TB speak too little or too much? E.G. When creating a button, do NOT put the word “Button” in front of the label, as modern API versions automatically tells VO/TB what the control is. On the other hand, every button must have an associated text label, which tells VO/TB what it does, “Save” would be used when saving account information, “Settings” would open the “Settings” page.

  2. Can the interface be enlarged or shrunk? Low vision users need to enlarge the text to see it clearly.

  3. Are the colours too dark or too bright? People with autism could have issues with sensory to bright colours and lights, so you need to ensure the user can tone then up or down as they please.

I hope this is usefull to ensure accessibility is included in Debut’s DNA, as everyone benefits when implemented during the design of the product, rather than rushing a release and trying to fixissues after.

As an endnote: I like how I can press Control Enter to post, which is what I’m going to do now.

1 Like

Yes!! :muscle: That’s so great to hear the website is compatible with JAWS. I agree completely, @DHarvey. Accessible design tends to provide a better experience for all.

Could you share an example of an app or website that has done this really well in your opinion?

Who make JAWS has accessible design.

An app I use is Mettatext, a client for Mastodon where former Twitter users are now going.

I’ve noticed the New and Unread topics sections I have to scroll past all the topics first. It would make navigation more efficient if they are before them, because that’s the first thing I check.

1 Like

Thanks! I’ll see if I can tweak that.

That’s because those topics were moved to the new Roadmap area on the forum. They will filter out organically after a while.

You can click the “unread” filter at the top of the page or add: /unread to the end of the address to see only the unread posts. Alternatively, just go straight here: https://community.makingdebutbank.co.nz/unread

You got me thinking. Put each category with own URL, /roadmap, /general, etc.

When I go to a topic in the forum, the only way for me to go back is to remove the topic names from the URL leaving .co.nz. Having a Back button would be useful to go back to the previous screen.

Hi Derrick: i’ve noticed your posting videos on YouTube and Instagram, but they aren’t audio described.

1 Like

Thanks for pointing that out David. I’ll make sure I get the captions on the YouTube Shorts updated so they can be used with screenreaders.

The interviews should be listenable though.

I’ve set up a new topic for this in the Site Feedback area. Back Button for Topics

I’d like to congratulate Debut for coming up with this concept, as digital wallets and online only banks are norm in some parts of the world.
The Debut website is in good shape accessibility wise, however when I go to open up the top menu, the spotlight blog and forum links aren’t there. The only way to get to them is to scroll all the way to the bottom, which takes some time and lots of swiping.
As The app is now publicly available, what I can say it is accessible with VoiceOver, but there are some glitches with buttons not properly labelled, and an issue where I have to turn VO off, tap the screen, and hoping focus lands in the field that will bring up the keyboard, then turn it back on again, hoping The keyboard comes up, as this takes me several attempts.

Steps to reproduce:

  1. Turn on VoiceOver by triple tapping the side button, or go to settings, accessibility, VoiceOver then turn the switch on. VO uses a different gesture set, Tapping an item will speak the item under your finger, double tap will activate it. For example, navigate with your finger around the screen until you hear the Debut app icon. Wait a few seconds then double tap to launch the Debut app.
  2. To demonstrate this problem, we are going to add money. Find the add money button in the middle of the screen, or, using the swipe method, place one finger near the top of the screen and you’ll hear your account balance. Swipe right once until you hear, add money button, then double tap it.
  3. Find the online transfer button, then double tap it.
  4. Go to the middle of the screen until you hear, deposit amount. With VO running, observe what happens.
  5. Now turn VoiceOver off by asking Siri, turn Voiceover off. For me, I have a triple tap on the back of my iPhone 13 pro which turns VoiceOver on and off quickly, and this is how I am able to get around the issue.
  6. Now that VoiceOver is off and Debut app is still in focus: the usual single tap gestures apply, so find the deposit amount field, then single tap.

Current result, VO makes popping sound, doesn’t put focus into field and opens up the keyboard.
Expected result: double tapping fields VO focus into them, and opens up the keyboard ready for typing.

We are now going to demonstrate where normal focus behaviour is happening.

  1. Go to the more tab, then Make a Withdrawal
    Transfer money to your own bank account.
  2. Go to the withdrawal amount field, then observe with VoiceOver on, and off what happens when you enter withdrawal amount.

With my experience, there is a slight popping sound, but when I lift my finger, the keyboard does open up, as it should when I double tap the withdrawal amount field.

The newest feature, pay a friend on Debut. Find the Pay a friend on Debut. Send money to a person also using Debut area, double tap with VO on, single tap with it off. Next, grant permission to access Contacts then, find the search for contact field. My observation is VO places focus into it, then brings up keyboard. It also does the same thing when I find the field, then lift my finger.

That is my observations with the public version of the app, and what I can say since the public launch. I want to record some audio demos, and possibly do a manual from a VO perspective, but I might have to get approval from the team first.

Debut is for everyone: and we need to get more people with varying accessibility needs involved as we build. As the winner of the card competition. This is a fantastic start. As when I got my physical card, everything on the card, from the D in Braille to the notch on the left-hand side, it’s very useful, even though I only used it once to activate, and at a dairy on Symonds Street which doesn’t have contactless.

This is just the beginning, and the start of a change where we can build the smartest, inclusive, accessible bank in New Zealand.

1 Like