WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: UX design query for a11y and screen reader user

for

From: Brandon Keith Biggs
Date: Oct 18, 2019 9:34AM

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 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
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> <EMAIL REMOVED>
> Sent: Thursday, October 17, 2019 9:30 PM
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] UX design query for a11y and screen reader user
>
> 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
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Tim
> Harshbarger
> Sent: Thursday, 17 October 2019 11:25 PM
> To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] UX design query for a11y and screen reader user
>
> 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
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Brandon Keith Biggs
> Sent: Wednesday, October 16, 2019 9:11 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] UX design query for a11y and screen reader user
>
> 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 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
> >
> >
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > at
> http://webaim.org/discussion/archives
> >
> > > at
> http://webaim.org/discussion/archives
> >
> > > at
> http://webaim.org/discussion/archives
> >
> > > > >