Accessible Products & Guidelines | UX/UI Design | Product Design | Udacity
- Articles, Blog

Accessible Products & Guidelines | UX/UI Design | Product Design | Udacity


And what are some good examples
of accessible products?>>So one example I like to
share are Google Docs and Drive. I feel like they’ve come a long
way over the past year and a half.>>Yeah.
And what sorts do you feel like
they’ve done really, really well?>>Well, as you can see here
on the Google Docs app, there’s a lot of good things
that they have considered. One is good contrast between
the text and the background colors. They allow,
they support large fonts really well. So that when you do enlarge the fonts
on here that essential items or elements aren’t getting cut off, either
able to zoom in where you need to. And they also have really have
good screen readers support. Screen readers are interesting
assisted technologies to design for. There’s a lot to consider,
because they not only read the content, like the words that are on the screen,
but they also, read and announce the different elements that
are on the screen such as buttons and links and menus. And some of the aspects of a good
experience with a screen reader and things you need to take
into consideration are one, ensuring that the way the user
goes through the page and the screen that the elements
are in a logical order. So it kind of goes left to right,
top down, if that’s how the elements
are laid out on the screen. And but another key thing that is really
important is what we call the labels. Or how things are labeled on the screen. So again, getting back to
the notion that the buttons and links and
elements like that are read to the user. You want to ensure that those
have clear and concise labels. And they’re very contextual. I think a good example here is,
let’s say you have a screen that has, let’s say, emails, or
search results on there. And you have pagination controls,
like a next and previous button below. Instead of having the screen reader just
read out next or previous, having a bit more context, like next 50 emails,
or next 50 results, is really really beneficial and a very small change
from the designer’s point of view.>>Right.
I mean, I could imagine like maybe seeing a buy
button, but it’s like well, buy what?>>Right.
One thing that’s really important to understand is
the way screen readers work. They go through the page very linearly. And so, by the time they
traverse through the site and reach the buttons that are usually
at the bottom of the page, they might have lost some
context of where they were.>>Yeah.
So how can I work with a screen reader? Like, where would I go to use that,
or use it with a product?>>The great thing about screen readers
especially on mobile is that they are already built in. So if you have an Android or
Apple phone, you can easily go to the settings and within there,
there are accessibilities settings. And you can turn on Talk Back for
Android and in Apple, it’s Voice Over. And what I tell everybody is, turn that
on and try to use your phone for a day. And get that experience
doing your daily tasks, but only using a screen reader and the
key there is to not look at your screen. So closing your eyes or
dimming your screen for a day and just see if you can achieve
your everyday tasks.>>Wow.
That sounds pretty tough. What sort of other concerns are there
for maybe mobile accessibility?>>I think one of the unique things
about mobile is, it’s a touch screen. So one key thing to keep in mind
are the touch target sizes and ensuring that they’re large enough. And this isn’t just for
people with disabilities. We all have different shaped hands and
levels of dexterity. And so considering that, and
that ensuring that you don’t need a small pen tip to actually
focus in on a button or something like that is extremely
important and valuable.>>And what other considerations
are there for accessibility?>>Well, there’s definitely a lot more,
but I think one other important one that we touched on
a little bit before is color contrast. And I think,
it’s It is a good one to focus on, because you can focus on it early
just in the design and mock stage. And it’s an easy thing to consider. And so there is a specific Color
Contrast Ratio that you need to meet in order to achieve these standards. The great thing about this is, there’s
a ton of online Color Contrast Checkers that you can simply plug in your
hex codes of your text color, and your background color, and
see if you meet these, these standards. So it’s really easy, and again,
just something you can take care of and think about really early
on in the design process.>>Yeah.

About Ralph Robinson

Read All Posts By Ralph Robinson

Leave a Reply

Your email address will not be published. Required fields are marked *