E-mail List Archives
Thread: UX design query for a11y and screen reader user
Number of posts in this thread: 6 (In chronological order)
From: mhysnm1964
Date: Wed, Oct 16 2019 7:15PM
Subject: UX design query for a11y and screen reader user
No previous message | Next message →
All,
As I am a screen reader user and now I am directly working with UX designers
and product teams. I need to have a conversation with any other screen
reader user / blind A11y expert in how you handled wireframes and other
terminology, tools, etc used in this space. AS my role now is working at the
early stages of development of digital assets for mobile and web.
Sean
From: Brandon Keith Biggs
Date: Wed, Oct 16 2019 8:11PM
Subject: Re: UX design query for a11y and screen reader user
← Previous message | Next message →
Hello Sean,
I use AccDC <https://github.com/WhatSock/bootstrap-react> for wireframes.
I'm wrapping AccDC into react components, so you just need to do something
like:
<Tabs>
<Tab title="Item1">This is text in item1.</Tab>
<Tab title="Item2"><h1>Heading for item2</h1><p>Text for item2</p></Tab>
</Tabs>
Which makes wireframes extremely fast. There is default CSS, and to add CSS
it's extremely easy.
If you need more components built than what is there, then open an issue,
and we can make it.
HTML is the best way I've found to view and make wireframes. Then it's very
quick to add the services for connecting to the server once your wireframe
is ready to become an app.
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Wed, Oct 16, 2019 at 6:15 PM < = EMAIL ADDRESS REMOVED = > wrote:
> All,
>
>
>
> As I am a screen reader user and now I am directly working with UX
> designers
> and product teams. I need to have a conversation with any other screen
> reader user / blind A11y expert in how you handled wireframes and other
> terminology, tools, etc used in this space. AS my role now is working at
> the
> early stages of development of digital assets for mobile and web.
>
>
>
> Sean
>
>
>
> > > > >
From: Tim Harshbarger
Date: Thu, Oct 17 2019 6:25AM
Subject: Re: UX design query for a11y and screen reader user
← Previous message | Next message →
Sean,
You will probably want to start with finding out what artifacts/deliverables
the teams receive when they create a UI design and what kinds of
artifacts/deliverables they create during their design process.
For example, you will want to find out if they have branding requirements or
use a design library or have to follow specific design guidance. If they do,
you will want to become familiar with those things and figure out what the
accessibility ramifications of those requirements are on design. For
example, if the branding requires a specific color palette do all those
colors meet color contrast requirements for something like SC 1.4.3? If
not, which color combinations are problematic?
When the teams create their designs, what artifacts/deliverables do they
create and how? A broad range of tools can be used during design and some
artifacts/deliverables may not be directly accessible to you. However, I
have found that if the artifact/deliverable isn't accessible that they are
sometimes created in a process that is--for example, team members might meet
to discuss and create the design or to review it.
Spend time reading books about designing UI's--particularly if they are
books that your designers recommend or have read themselves.
If your role in the process is as an accessibility SME, view your role also
as being their teacher. In the beginning, you ask a lot of accessibility
questions which you also end up answering--but your goal is to reach a point
with the team where they anticipate all your questions and already have
answers.
If at some point you need sighted assistance to review a design, try to get
that sighted assistance from whoever is designing the UI. While that helps
you do your job, it is also a great opportunity to educate that person on
the types of things you are looking for and how they can spot those issues
earlier.
If you are not the person testing the app for accessibility later in the
process, be sure to get a copy of any test results and use that to improve
the design process in the future.
If you are the person testing the app's accessibility later, be very careful
about tester's bias. When you have worked along side a team building an
app, it can become tempting to overlook some accessibility issues and try to
justify it a number of ways--however, you won't be doing the team any favors
by doing that and you definitely won't be helping the end users.
Good luck with working on design. It can be quite an enjoyable process to
participate in--especially as you watch the team become more aware of how
accessibility fits into design.
Thanks!
Tim
From: mhysnm1964
Date: Thu, Oct 17 2019 8:29PM
Subject: Re: UX design query for a11y and screen reader user
← Previous message | Next message →
Tim, Thanks for the info. I have started to read some UX books. Our team is
developing the design principles to be used in the organisation and I am the
lead for accessibility. I will not be doing the audit for accessibility thus
far. I could be doing spot checking. All the points you have mention falls
in my lap plus more. AS this is the 4th day in the job, I am still feeling
my way with the expectation. From one of the workshops I have attended for
mobile. The designers and UX call some visual features a different term than
what I would. This is primarily due to how VoiceOver or Talkback informs the
screen user of the role. For example: If a visual effect called a card
appears on the screen, Voiceover apparently calls them buttons. Thus
communication gaps of terminology occurs. I don't think a UX book would help
with this. But your point in discussing with the designers is a good point.
A lot to learn.
Brandon, thanks for the tool. I will earmark it to check it out.
Sean
From: Tim Harshbarger
Date: Fri, Oct 18 2019 9:08AM
Subject: Re: UX design query for a11y and screen reader user
← Previous message | Next message →
Between the UX books and discussions with designers, you should be able to
get a good understanding of what the patterns are and why they use them.
One of the things you bring to the table is helping them figure out how to
best express that UI and the information and functionality it provides in a
manner that is accessible.
Cards are a good example. What functionality and information is the card
providing? Is that functionality and information adequately communicated
through the current implementation? Would there be a better way to
implement it accessibly? How do users expect it to work?
I think you will greatly enjoy the work. Design is a great place for
accessibility because you frequently have access to understanding why the UI
is designed the way it is--and that can make it easier to figure out what is
key to making the UI accessible.
Thanks!
Tim
From: Brandon Keith Biggs
Date: Fri, Oct 18 2019 9:34AM
Subject: Re: UX design query for a11y and screen reader user
← Previous message | No next message
Hello,
My philosophy is that there are a very limited number of widgets that are
used in UIs.
The team may have their terms they use, but ask what the functionality is
and match the functionality to the widgets in HTML or AccDC. You should
never need to go out of those widgets.
Separate the functionality that you experience with the visual
appearance they have of a widget. Visual appearance means nothing to the
functionality of a widget. Those cards may look like a card, but in
reality, they are a button that has a picture or CSS that make it look like
a card. it acts like a button, therefore it is a button.
Once I was told the design team had a component that was a filing cabinet.
When you clicked on a drawer, the drawer would open and content would show
somewhere on the page.
They thought this was some fancy new thing they made that had never been
seen before. But I broke down the functionality to:
click on item and content shows.
This is either a Tab List or a set of Accordions.
After that it is just deciding what UX you prefer on that page.
Have your whole team read:
https://24ways.org/2016/what-the-heck-is-inclusive-design/
Which is a fantastic article by Heydon Pickering that really summarizes
what a good design process is. I just tell people that this is my process,
and it works best for creating interfaces that are usable to the most
people.
Tip 2 is what I'm talking about in this email.
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Fri, Oct 18, 2019 at 8:08 AM Tim Harshbarger < = EMAIL ADDRESS REMOVED = >
wrote:
> Between the UX books and discussions with designers, you should be able to
> get a good understanding of what the patterns are and why they use them.
> One of the things you bring to the table is helping them figure out how to
> best express that UI and the information and functionality it provides in a
> manner that is accessible.
>
> Cards are a good example. What functionality and information is the card
> providing? Is that functionality and information adequately communicated
> through the current implementation? Would there be a better way to
> implement it accessibly? How do users expect it to work?
>
> I think you will greatly enjoy the work. Design is a great place for
> accessibility because you frequently have access to understanding why the
> UI
> is designed the way it is--and that can make it easier to figure out what
> is
> key to making the UI accessible.
>
> Thanks!
> Tim
>