Accessibility part 3: Layouts, navigation, and tabulation

Hi guys.

Welcome back to my series of posts on accessibility, why its important, and how to implement it.
This post, we’re going to explore navigation and layouts, as well as a small hint on tabbed navigation.
Lets jump right in.

Laying out your window:

Seems really obvious, right? Laying out a window is just, common design. Boring.
Well actually…
Its not all that common. By laying out a window, I mean laying it out in groups, using labels, and not leaving everything all over the place. This, actually, applies more to the macOS platform more than windows. The screen reader used on MacOS uses window layouts to interpret what it should be showing the user at any one time. this means that users can interact with groups, if available, and see controls within those groups. However, if designers don’t use these groups, its really, really difficult for users to find elements they’re looking for quickly. And honestly, this will just result in me not wanting to use your app.

Tab indexing is really, really important:

Have you ever been in this situation?
You’ve finished your window design for the main screen of your app. You’re ready to publish, but oh no! You’ve forgotten to add that extra special click me button! Back to the form designer with you!
So most developers/designers, in this situation, will add the button, move it to where its supposed to be on the screen, and leave it at that.
Yes, developers, because sighted users are totally the only people using microsoft word.
The thing is, if the button is supposed to come after edit box two, but before edit box three, you’re going to need to set the tab order. This means you need to physically go into properties in which ever designer you’re using, find the tab index property, and set it. Because this is important. If we’re expecting a button in a specific place, and it isn’t able to be seen there with the screen reader, we’re going to be confused. Confused users = non-users. Screen readers, as I said above, lay things out logically on the screen for us. This means that if the tab order shows edit box two, edit box three, and button, we’re not going to see button in the place where you’ve put it.

Tab controls. they are important!

This is simple. Really, really simple. Use tabs. Use them. Preference windows, mobile text-based games, hell even the app stores of certain mobile operating systems — I’m staring at you, google.
Using tabs means you’ve grouped things nicely. This means we can use the app really simply. Really, really simply.

To conclude:

Obviously, I’m not a definitive guide. But if you follow these points, you’ll have a better, more accessible navigation system within your app. This, in turn, will draw in your blind users. We want to be able to use things. We don’t like complaining — well, most of us, anyway.

If you enjoyed this, you can follow me on twitter, and subscribe to the blog. Also see down below for how you can help me out if you feel so inclined.
Thanks for reading!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s