amazonv: (Default)
 So

things to do BEFORE you decide to move to another country

start digging for the following data:

every location (address) you have ever lived, period, the start and end dates, and with whom potentially

every place you have ever worked, exact dates, their address, how many hours per week you worked, how much you made annual or hourly, be prepared to call and try and get statements affirming that fact (in the US most company's wont' do this for some damn reason and outsource to 3rd parties which canada says they will not accept, so also be prepared to have W2's and offer letters and possibly even paystubs, yes for 20 years ago)

if you were ever married, the start and end dates and the paperwork

if you got any certificates and degrees, have the original damn papers and you'll need to buy sealed transcripts often mailed directly to someone

keep every single bank account statement of every type every month, forever
-savings
-checking
-investment
-retirement
-anything!
-credit cards

you are going to need to know when you opened each account, the maximum in each account each year, the average in each account each year, and get letters from said financial institutions stating such! plus random statements!

also 100% be sure to snapshot the exact value of all accounts on the date you get your residency as well as the date you get your visa/permit

you'll need to enjoy finding the value of everything you own, fair sale price, and documenting it all if you want it to come with you

i highly suggest selling any property (real or not real) over 100,000$

Oh! and start looking up all your international travel dates (date left, date returned, where you were in between, flight numbers etc)

and as soon as you apply record VERY precise travel log, forever, because as a visa holder they will kick you out if they think you aren't in country enough.


amazonv: (Default)
LESSON LEARNED - IMPORTANT
 
TAKE A SNAPSHOT OF THE AMOUNT OF MONEY YOU HAVE IN ALL ACCOUNTS IN ALL COUNTRIES OF ALL TYPES ON THE DATE YOU BECOME A PERMANENT RESIDENT OF CANADA - AND THE DATE YOU BECOME A RESIDENT OF CANADA
 
this is true of
checking
savings
investment
retirement (401k, ira etc)

also note you are going to get fucked on having saved for retirement!
 
amazonv: (Default)
You need to campaign
 
Think about

what skills do you have to serve on a board
 
what skills do you need to serve on a board
 
what is my value proposition
(b2b b2c vertical, industries, APAC, M&A?, types of business, startup etc)
 
board bio useful but not make or break
 
it's about your network
 
what relationships do you have
what relationships do you need
 
how are you spending your time
 
People to network with:
  • VC
  • Investment Capital
  • recruiters for boards
  • activists* (could be effective but dangerous b/c antagonistic)
  
private vs public boards
  • -lot more fun on private boards
  • -spec board
  • -pre-ipo
  • -can be more involved, less confined by a governance standpoint
physical location matters
geography and industry matter
 
one board 35 meetings in a year!
  
you need to know
  • industry
  • competitive landscape
  • underlying dynamics and trends
  • genuine interest
  
culture of the board
ceo leadership style
good east west style
is it collegial? transparent? mature?

have you own list of people with similar profiles to deflect people to when you are busy and so they can do the same
  
never signed up for a site where she had to pay to be a member
  
interview VERY different - you are NOT an operator
  
job: protect long term interest of shareholders, hire/fire ceo, management better decisions
  
ask right questions, right way, right time, right tone
open conversation not shutdown
encourage transparency
  
keep eye out for activitsts
  
keep eye on groups governing company / perception
  
first independant among VCs is difficult

Compensation
set, no negotiations, public in the proxy - cash and equity - and vesting schedule

bank boards 11/year and committee pay not commensurate with work

rough/bad year more meetings
sec investigation, m&A, ceo transitions, activities

private broader spectrum
some options still
heavy on equity, light on cash
why most people do when retired

can't sell willy-nilly
must own certain number of shares as base

have to sell under blind plan, never can benefit from non public info

pay taxes at vest, and then stock declines, it sucks, not capital loss just a loss

who do you know are brokers if no one on boards?

investment banking team

advisory board option at younger stage

a networking institute kingsley aikins
  
  
Someone else's' notes

https://onmogul.com/stories/here-is-our-recap-from-yesterday-s-event-how-to-get-on-for-profit-board-seats-996f2453-cbbd-4f67-b883-edecdc07bc3c?utm_medium=email&_hsmi=106698237&_hsenc=p2ANqtz-9ERj3cqLmysnhsGz43z3Pf1QRQZzcddWBALm0hjqy4qElF5GViNVvzYCfkPl9FQpaOZndt-95hJcRz2JvPya8ZLDULvQ&utm_source=hs_email

Here is our recap from yesterday’s event: “HOW TO GET ON FOR-PROFIT BOARD SEATS”

We hope you had an amazing time at yesterday’s event led by the amazing Dr. Anita Sands! 

Here are our key takeaways from this event:

  1. Nonprofit board experience is great for acumen and emotional intelligence, but the governance experience isn’t translatable to a for-profit board. 

  2. There isn’t a lack of qualified diverse board candidates, but rather the recruiting process has traditionally failed diverse individuals. Generally speaking Board recruitment is all networking with one’s own network, which is typically homogenous to the individual. As the rate of change in business increases, this is forcing boards to look outward for those with different backgrounds and experience. 

  3. Board bios are great, but don’t get caught up in creating the perfect bio.

  4. Board recruiting is not traditional recruiting. Think about it as a campaign for yourself, and ask yourself the following questions:
    -What skills do you have that would be attractive to a Board?
    -What skills do you need to better serve on a Board?
    -What is your value proposition? What do you bring to the table? What kind of Board would you add value to?
    -What relationships do you have that would help you get a Board seat?
    -What relationships do you need?
    -How are you spending your free time? Is it helping you in your goal to get a Board seat?

  5. Focus on geography, industry, and organizational culture as you look for Board opportunities.
     

What were some of your key takeaways? What questions do you still have? Leave a comment below to share! 
  
amazonv: (Default)
 Axe-con was wonderful!
 
if there is one talk you watch - watch Keynote
Difference Drives Innovation & Disability Inclusion Benefits All of Us
Haben Girma
notes: https://amazonv.dreamwidth.org/1202729.html
 
full notes: https://amazonv.dreamwidth.org/tag/axe-con
 
recurring themes echo'd that of devsecops
 
shift tests left so devs can see it early on (in IDE / tool, linters, etc)
 
focus on a subset of higher priority items - overwhelming devs makes them ignore it
 
build in accessibility to your design library
 
accessibility thinking early on in design makes. abetter product for everyone
 
building a champion per team is the only way to scale
 
you have to provide training and tools (to test and experience)
 
building empathy is a very important part of being successful and making it *stick*
 
some people have multiple challenges to their access, for example being both blind a deaf. when they are not blocked they still wish to use your product or even be on your team. color, text descriptions, and variable modes are all important. 
 
when presenting as a speaker describe your images!
 
things current employer is doing well but help everyone!
-keep language simple - 5th grade
-links should be specific about what is next (i.e. not more information but information about X)
 
Things current employer could improve
-don't overwhelm people with questions
-mobile first most low income people only have a mobile phone
amazonv: (Default)
 ## Panel - Opening Remarks with Emcee Hannah Bertiger, Product Manager at Walmart Experience
 
<details><summary>Click to expand</summary>
 
Hannah Bertiger, Her Product Lab, Lina Bedi, Monica Rozenfeld
 
Join us for highlights for the day plus an introduction from the founders of Her Product Lab, Lina Bedi and Monica Rozenfeld.
 
### NOTES
They see themselves as a community and about networking and relationship and bring you into the slack channel. this conference seems to be an annual event for the community. This kickoff is self congratulatory and how-to instead of a real inspiring keynote. 
 
https://www.herproductlab.com/
 
</details>
 
## Panel - Building Winning Products at Glossier and Goop
 
<details><summary>Click to expand</summary>
 
MZ Goodman, Hannah Bertiger, Her Product Lab
 
MZ Goodman will provide lessons learned in product management from her career at Glossier, Goop, The New York Times and now at Charity: Water.
 
### NOTES
- she compares being a Pm with being a diplomat
- give away credit, take responsibility
- she says to "when goals are met, eschew celebration, continue to iterate, look to the next milestone" i strongly disagree
- she says everyone has imposter syndrome because we are all charting new territory every day
- she stresses to focus on north star metrics
- product manager is not a project manager for the founder's ideas
- step back and consider ROI - sometimes mandates from the top aren't actually going to move the needle
- Being a PM in service of the business (service platform) vs platform products (to consumers) are very different - GM (general management) path vs CPO path
- find an environment that aligns with your values so that you have empathy - which is important
- [4 types of corp. culture - clan, adhocracy, market, hierarchy](https://builtin.com/company-culture/types-of-organizational-culture)
- don't judge a founder until you are one (being i have founded companies, and so has my mother and grandmother, yes ok fine but, no)
- look for opportunity vacuums - identify gaps so that you can fill or that offer opportunity to learn a new skill, solve a new problem
  - linkedin 2016 study "experience in one additional functional area improved...odds of becoming a senior executive as much as three years of extra experience"
  - linkedin 2016 study "working in four different functions...same impact as getting an MBA from a top-five program"
- [Why Women Make The Best Product Managers](https://svpg.com/why-women-make-the-best-product-managers/)
 
</details>
 
## Panel - Going Beyond the 'Why' to Validate Your Product Idea
 
<details><summary>Click to expand</summary>
 
Selena Hadzibabic, Carlee Murray, Her Product Lab
 
Selena Hadzibabic from The Knot Worldwide will cover how to go beyond the Whys to suss out whether you have a product idea worth pursuing and how to enlist non-product teammates to help you vet customer ideas and interest.
 
### NOTES
 
- never forget to question your assumptions, sometimes it's hard
- always have a customer need "gracefully moonwalk people back to a customer need"
- always try to ask "what happens if we don't do it" "how could we screw it up"
\@dzishn
 
</details>
 
## Panel - Conducting Meaningful Customer Interviews to Understand the Needs of Your End Users
 
<details><summary>Click to expand</summary>
 
Nina Foroutan, Harika Thambirredy, Her Product Lab
 
In her talk, Forbes' Director of Product Nina Foroutan will share what her background in journalism taught her about interviewing skills to better understand the customer and to pivot quickly to address the needs of the end user.
 
### NOTES
 
- she learned that news is a business, sometimes you have to give people fluff, and sometimes you squash news because it's a big advertiser (!!!!!!! and she was chill with that and just decided to swap to the $ side as a result)
- people are learning journalists make great pms (uh duh? the ability to ask good questions is an amazing skill - for PM, User Research, interviewing....)
- fires are everywhere - stores are everywhere and if you don't chase them it will chase you
- know your audience - in media we are only as good as our content
- follow the money - your end users are your viewers and readers but they are also your advertisers and partners
- know your purpose - why are you there? what is your objective?
- having empathy for who you are talking to, which helps build personas
- she leverages the same Who (is this for), What (is the problem), where (does this take place), when (did/should this happen), why (should they care) as she did in news in product
- "in seeking the truth you have to get both side of a story" walter cronkite (she looks up to him and says because he was dedicated to truth and service yet she was chill with not reporting on tainted hamburgers at mcdonalds because they were an advertise?)
- \@MOSTLYNINA 
 
</details>
 
## Panel - Developing a Product Strategy that Made Investing Accessible to Women
 
<details><summary>Click to expand</summary>
 
Alexandria Stried, Hannah Bertiger, Her Product Lab
 
In this Keynote Talk with Chief Product Officer at Ellevest, Alexandria Stried, will provide an inside look into how her company develops a product strategy to achieve its mission: to make investing accessible to more women.
 
### NOTES
 
- focus on talking to customers frequently and building their product around that
- https://www.ellevest.com/
- strong focus on persona of elle
- focus on the opportunity that women are different than men (live longer etc)
- not a investment platform (stocks) but a money management subscription
- product has changed since they started
- "members are at the center of everything we do" "can't empathize enough" saying vs putting into practice is different - require monthly participation i user research
- PMs works closely with customer experience (support) team
- they focus on unhappy (i personally disagree - i prefer to look at HXC https://medium.com/@shengyuchen/high-expectation-customers-hxc-86e9ce60eac4)
- standup twice a week about the metrics/data as a company
- create test plan to research questions about data
- They leverage RICE (like we do)
- engineers are an asset to help create creative solutions to worthy opportunities
- read "hacking growth" book as a team
- they test a lot, quickly (200 thousand versions of the onboarding site!) but have checks and balances in place
- evergreen mindset - we make our work last so that our future metrics and members will thank us - things should be reuseable for a longer self life
- resources will always be a problem so build experiences that last
 
Code Whm2021 https://www.ellevest.com/
 
</details>
 
## Panel - Guided Networking Session to Build Meaningful Relationships
 
Alexandra Ballensweig with Her Product Lab
 
Join us for a breakout session with Alexandra Ballensweig, founder and CEO of humhum, a platform for conscious connection and dating. Through humhum, Alexandra is on a mission to shift the paradigm of how we relate to one another— shifting our outcome oriented relationship to engaging, to a process and growth-oriented one by changing the container within which we connect with one another.
 
note: Some kind of hybrid yoga and prep for networking
 
## Panel - Negotiation Skills for Product Managers
 
<details><summary>Click to expand</summary>
 
Jackie DeJesse, Carlee Murray, Her Product Lab
 
Keynote talk with Jackie DeJesse, Product Manager at Google, on a framework to help you negotiate and build productive relationships with stakeholders throughout your organization to develop winning products (plus a few examples of relationship fails).
 
### NOTES
 
- she has applied this framework across multiple jobs and companies
- Quorum - launching later this year
- relationships are fundamental to product success
- she has a tendency to ruffle feathers
- she applied the same communication style with everyone, which led to roadblocks "it's not me it's them" but "thats not an effective or a very mature way view communications" 
- stoplight framework - red-yellow-green
- important to use consistently over time
- quickly parse and bucket people you work with
- hopefully you can convert reds
- red - range from actively unhelpful (passive aggressive) to possibly toxic
- yellow - neutral, most frequently, don't go out of their way to help or harm you
- green - allies - will open doors, provide opportunities, increase visibility, hope to find as soon as possible to orient you, help you thrive
- this is not good vs bad
- recognize your own bias
- 1. the frustrated director example
  - come in with a solution to a director but kept getting blocked on implementation
  - how were they speaking? what were they saying? what was their communication style?
  - what other projects was he working on?
  - at first seem red, more of a yellow
  - go with the problem, give them a chance to offer solutions, would possibly have gone better
- 2. supportive eng manager example
  - at times contradicting responses to exec's, yellow
  - setup weekly 1:1 to stay aligned, over communicate
  - realized they had less viz into higher up direction, gave them more insight with that
  - suddenly an additional project took their time (PM) neglected eng mgr
  - started getting defensive when asked for additional data /updates
  - shared they were overwhelmed - eng came back with much more directed clear requests, hadn't reassessed they had become green
- 3. serial email ignorer - example
  - bad at giving recognition to peers
  - only replied to 1 in 10 emails
  - they only care when the person is potential value to them
  - same project so couldn't ignore them
  - decided to establish boundaries - what i would work on and where theirs began - have to avoid the "it's not getting done i need to do it" trap - created their own visibility, authoring their own docs and being clear about what was working on, asserted themselves (ran meetings, spoke up for themself), it took time but then went red to yellow
 
/@burnquorum
 
</details>
 
## Panel - Panel Discussion on Building Successful Digital & Non-Digital Products
 
<details><summary>Click to expand</summary>
 
Maya Brooks, Sonia Kedzierski, Courtney Brand, Her Product Lab
 
This conversation will cover how to leverage digital tools when selling physical items and how to engage customers online and off. On the panel is ​Sonia Kedzeirski, Director of Product at Etsy and Maya Brooks, Product Manager at IFundWomen. Moderated by Courtney Brand, founder of thelighthouse.
 
### NOTES
- Maya - got into product wanted a more active roll in building and impact - considered software engineering but ended up in product
- Sonia - had most institutional knowledge at etsy working on selling to brick and morter so when pm left took over
- Courtney - ?
- Maya - most important things 1. deep understanding of the customer 2. drive value at every step of the process 3. hyper ideating around solution 4. understanding customer analytics and engagement 5. conviction - spin up fast MVC and getting it out
- 1. deep understanding of the customer
  - sometimes we jump to the solution but don't really consider the need (why) resulting in work that was not valuable
- 2. drive value at every step of the process 
  - need to meet the customers where they are at every step along the way not just where we need them to be
- 3. hyper ideating around solution 
  - feelings not features - how do we make them feel like they are rewarded, satisfied, encouraged
  - reading (books, blogs, podcast etc) a lot to have lots of ideas, use "how might we" questions, don't bring in constraints when ideating
- 4. understanding customer analytics and engagement 
  - using "customer outcome statements" that can be measured by metrics, that map to KPIs
- 5. conviction - spin up fast MVC and getting it out
  - when you toss together whatever you can to get the product out there, you will hit a point you can no longer scale, but you should use that time to learn your customers so you know where to focus
  - test as much as you can before you write any lines of code
 
</details>
 
## Panel - Starting From Scratch- Tools for Becoming a Resilient Product Manager
 
<details><summary>Click to expand</summary>
 
Osnat Fainaru Benari, Hannah Bertiger, Her Product Lab
 
Keynote Talk with Osnat Fainaru Benari, VP of Products at WeWorks Labs.
Topics cover: Resilience, planning, visioning, learning mentality, allyship and mentorship and mental wellness.
These are the human requirements to Start from Scratch and ones that allowed me to start a new team, ideate new blue ocean products or restart my career while working for the same company.
 
### NOTES
- to be resilient is to focus on your target
- listen to your itches - internal and external, to lead you to your next place - but look back and to the future, don't hurry / rush, have you done what you came to do?
- listens to blinkest before committing to a whole book
- always be learning, books, podcasts, blogs, etc. about your vertical, profession, customers, anything you can connect to or feel passionate about (she is leaning about age tech due to her parents)
- build a personal board of directors, it should be diverse (gibson biddle ex-netflix personal board of directors)
  - https://www.gibsonbiddle.com/
  - https://www.linkedin.com/in/gibsonbiddle/
  - https://gibsonbiddle.medium.com/hacking-your-product-management-career-cce227a9c39a
  - https://www.youtube.com/watch?v=pvvnREBrW68
  - https://www.youtube.com/watch?v=V5jfM5mC9rw
  - https://www.youtube.com/watch?v=NugaIdtukMA
 
sadly then the a/v cut out
 
I personally expected the talk to be more like these:
- https://www.youtube.com/watch?v=NWH8N-BvhAw
- https://www.youtube.com/watch?v=Q7vYuKvpneM
- https://www.youtube.com/watch?v=tP4qKqvB8pc
- https://www.youtube.com/watch?v=Jba4XDnDXuY
- https://www.youtube.com/watch?v=dgk7nmI_nXI
- https://www.youtube.com/watch?v=bBlmvAITMrg
- https://www.youtube.com/watch?v=fPMqMJMiBiA
 
</details>
 
## Panel - Collaborating with Design to Build More Engaging Products
 
<details><summary>Click to expand</summary>
 
Veronika Druce, Monica Rozenfeld, Her Product Lab
 
VP of User Experience Veronika Druce at Goldman Sachs will share her strategy for product managers to collaborate with design and content to build more engaging products along with her case study of a product released to 48 million!
 
### NOTES
- keep things as real as possible so users will give best feedback
- choose your words wisely, words can need as much iteration as design
- synch after meetings - everyone attending a user meeting may come away with something different after
- grow together - cross functional teams - share the same context and align
- be open minded - psychological safety is important, everyone needs to be heard (improve - yes and, no but)
 
</details>
 
## Panel - Building a Virtual Conference Platform During A Global Pandemic
 
 
Xiaoyin Qu, Chelsea Masterson, Her Product Lab
 
A chat with Xiaooyin Qu, Founder & CEO of Run The World, who will share her journey of how she build a virtual conference experience platform that is thriving during a global pandemic. Xiaoyin was recently named Forbes' '30 Under 30.'
 
- Self congratulatory fluff (i run a conference, them wasting time to talk about this day of feels like a waste of my 99$, do a free panel after FFS)
 
## Panel - Incorporating Self-Care In Your Workday + 10-Minute Yoga Sesh
 
Danielle Fineberg with Her Product Lab
 
With remote work, it's easy to jump right into email without taking any time for ourselves throughout the day. In this talk, the Founder of Redefining Healthy will provide some easy ways to take much-needed breaks throughout the day to keep our energy levels up and avoid burnout. Also be sure to stay for the yoga session at the end.
 
- what it said on the tin, i like there was a yoga break
 
## Panel - Meet the Women Behind the Her Product Lab Incubator!
 
Abbe Cohen, Grace Margol, Erna Alfred , Dicko Sow, Her Product Lab, Monica Rozenfeld
 
Hear how four participants from our first-ever cohort went from ideation to pitch in 7 weeks' time. We'll also announce how to apply for the next cohort to launch your own product!
 
- was just about people's experience of being part of an incubator
 
</details>
 
## Panel - How a Cancer Diagnosis Led to Launching My Own Product
 
<details><summary>Click to expand</summary>
 
Melissa Telzer, Monica Rozenfeld, Her Product Lab
 
Join us as we chat with Melissa Telzer, Founder of inKind Space, who will share her personal journey launching her own lifestyle platform to support women like her who have been diagnosed with cancer.
 
### NOTES
- in kind space (launching soon)
- behind how there is no consideration for patient care after experiencing cancer - there is information but unless you look for it it's not given to you
- so building a platform for the human in the room - from a customer experience background
- went through a pivot to go b2b to b2c
- you have to work your network, you need to ask
- you need to have some version of your product to show people, women have to do even more to get funding
- women lead their VC pitch with heart, but VCs want to know how they are going to make money
- every time you are pitching you are learning
 
</details>
 
## Panel - Building Career Confidence: Your Success Depends On It
 
<details><summary>Click to expand</summary>
 
Nada Lena Nasserdeen, Lina Bedi, Her Product Lab
 
Are you constantly doubting yourself and getting in your own way? Does the thought of self-promotion make you want to cringe? Is the negative self-talk in your head getting louder and louder, limiting your overall success in life? With years of coaching men and women on career confidence and leadership strategies, Nada has recognized the top four challenges for professionals. These include imposter syndrome, self-promotion, climbing the career ladder, taking risks. Through this transformational talk, Nada dives into her science-based methodology, C.O.R.E., and breaks down the four essential elements that are vital to building your success and confidence.
 
### NOTES
- she founded https://www.riseupforyou.com/ - riseupforyou.com/confidencekit
  - https://www.ted.com/talks/nada_lena_nasserdeen_commit_to_workplace_transformation_people_vs_profits
  - https://www.youtube.com/watch?v=dPF_HnT1evw
  - https://www.youtube.com/watch?v=mJHJU5Ryb7o
- She would get ahead of more qualified people - because of their perfectionist mindset
  - you need to be confident and put your best foot forward
  - external is not sustainable
  - internal is needed
- what is confidence?
  - a feeling or consciousness of one's powers or of reliance on one's circumstances
  - faith or belied that one will act in a right, proper or effective way
  - the quality or state of being certain
  - a relation of trust or intimacy
- inner confidence
  - the thoughts and beliefs in your mind
  - the conversations and self-talk you constantly have with yourself
  - what perception of yourself is
  - how you show up and treat people
  - your response, reactions, and communications to others
- finding your macro confidence
  - belief in your ability
  - growth mindset
  - challenge = YAY!
- micro level
  - a specific thing like career, speaking, networking, relationships, selling, speaking up
- if you only build micro you can't sustain that without macro
  - we lose our identity or our ability to pivot when we lose the source of a micro confidence (their job)
  - things outside of you are always changing and shifting
  - you are not your job
- Growth mindset
  - failing is exciting
  - enjoy growth and development
  - want constructive feedback and challenge in your life
  - success is determined by your growth not by external factors
    - improving at a skill
- the sky is not the limit, it's the mind
- most people believe they are less worthy than others or believe in their own abilities
- most people believe that confidence is challenge for them
- top 4 challenges
  - self promotion or advocacy
    - sleazy, not worthy, do i have something to offer?
  - imposter syndrome
    - i'm a fake, why should i be here, what gives me the right
  - taking risk
    - accepting failure
  - getting to the next level in their career
    - accepting rejection, learning new avenues
- attributes
  - growth mindset
  - self-talk
  - trusting your intuition
  - setting boundaries
  - self-promotion
  - taking risk
 
 
</details>
 
## Resources
 
- generated a book club during the event! https://docs.google.com/spreadsheets/d/1v7mnf2bhzWfb9-L3qIjFNc25cjN74DsJX5bX2WU-EVU/edit#gid=0
- A slack group everyone from prior events and the current joined.
 
## Notes
 
- The platform sound kept dropping, even for the recordings
- the platform kept popping things in a new window
- i am disappointed the platform trimmed/lost the end of most recordings as some were worth a re-watch
amazonv: (Default)
Accessibility Libraries: How Design Can Start the A11y Conversation Early
Type: Breakout
Track: Design
Often accessibility is overlooked till the last minute, requiring more effort and time to find, report, and remediate problems. By creating a shared library of accessibility specs, designers can avoid creating inaccessible products from the start and build awareness of accessibility within UX and their broader organization. This talk will cover why you should use an accessibility library, what teams at Indeed are using, and how it’s impacted conversations about accessibility across the company.
 
 
 
CART provider is standing by.
>> If you require captions, they are below the video.  If they are distracting to you for any reason, use scrolling to manage whether they are in your view or not.  The session will be recorded.  And the accessible PDF version of the presentation is on a session page just below the video and the captions content near Stephanie's profile.  I'm going to turn off my camera.  All yours, Stephanie.
>> Me?  Awesome.  Thank you, Travis.  Hi, everyone.  Thank you so much for staying through the past two days.  I promise you'll get through this and then separate.  It's been so awesome to be a part of Axe Con.  I was watching Steven's last talk on gaming.  I loved that.  I'm really excited to talk to you about accessibility libraries and essentially how designers can start talking about accessibility and inclusion earlier in the process and why that's a good thing.  A little bit about myself.  My name is Stephanie Hagadorn.  I'm a certified accessibility activist.  Shout out to Texas.  A lot of people repping Texas.  I have two dogs that you might hear.  A warning if they pipe up.  They are out there.  I love all things like movies, TVs, video games, and so when I'm not watching Star Trek or leading an Animal Crossing, you might have heard of Indeed.  We're at the world's leading job site.  We have a motto.  We help people get jobs.  Got it on my shirt here.  It is really a core tenant of Indeed's ethos and baked into all that we do.  It is one of the reasons that I love my job.  Jobs can literally be life changing.  I get to help people find work that brings them meaning and makes them want to get out of bed in the morning.  You might think I'm over exaggerating, but it really is part of everything that we do at Indeed.  Whether it is across every piece of merchandise and it is always leading the crowd of Indeedians at Pride parades across the globe.  You'll see it on all of our signs at career fairs and hiring events that Indeed holds.  We also have pictured here is the little orange chairs.  In every conference room in Indeed when people went into the office we had physical orange chair.  Now we have work from home friendly desk-sized orange chairs.  That's a visual reminder that the job seeker has a literal seat at the table.  We take thinking about our users super seriously here.  And if you are not familiar with indeed, it is seen a lot of change over at the years.  In the past we were focused on all of the jobs.  The Google for jobs.  We optimized the site through thousands of AB tests, user research, monitoring, metrics, data, analyzing data, and you have the Indeed that you see here today on the right.  Part of had my hand in a little bit of that.  While we always put the job seeker first we haven't always considered all of the different kind of job seekers out there and the unique challenges and barriers they face when trying to use indeed.  With the unfortunately record unemployment right now, it's been more important than ever to focus on the job seeker needs.  That's especially true for people with disabilities who experience joblessness at higher rates than the general population.  For the past year Indeed has made accessibility one of the top priorities.  We had a mandate and this mandate was supported by senior leadership and champion and managed by our amazing diversity inclusion and belonging team and this mandate really allowed our teams across Indeed to be able to dedicate more time and effort to addressing these accessibility issues.  But now that we have kind of the permission or availability for the work the big question was how do we do it?  How does a company like Indeed with massive amounts of content and pages begin to tackle accessibility?  It is a good question, Stephanie.  Well, we started like many companies do.  We started running audits both internally and with awesome vendors like Deque.  We conducted site-wide audits with the flow across the site and common actions that user takes applying for jobs, creating accounts, uploading resumés, and captured all of the violations and potential barriers and issues that users would face using our product.  Those issues that we share back with Teams.  They were across marketing and UX, product engineering, and over the year we remediated over 5,000 issues.  We've added transcripts, captions, and audio descriptions to almost 400 video and updated 500 templates.  Indeed sends a lot of e-mails.  You probably have some in your inbox.  Sorry.  Being the data driven company that we are, we looked at all of the violations across the site and tried to figure out where they were happening and what was causing the violations and a lot of them came down to really simple things.  Not meeting color contrast and really visual interaction-related bugs that could have been addressed or caught earlier in the design phase.  So missing these easy fixes early meant costly remediations and 5,000 issues and time spend down the line documenting and fixing those issues.  In fact, IBM did a report about estimating the price of addressing violations after release can actually be 30 times more expensive than if you just fix them in the design phase.  That's a little money.  And so while these issues can be easily fixed, we realize that we needed to address the accessibility fluency to help avoid making the same mistakes other and over and over.  To put it in UX, how might we help designers better understand the accessibility requirements and start designing more inclusively.  So to tackle the gap in knowledge we drafted our own version of WCAG guidelines.  If you, I think many people here are extremely familiar with WCAG.  And are very familiar with the cryptic, verbose, intentionally vague wording.  And so we set out to really translate those declines into easier to understand checklists for designers and developers.  We then -- so you can see the example on the right here of where we've taken the 1.1.1 nontext content rule and wrote it to help our designers and developers better understand it.  So we created a web site internally and actually put together a big training webinar for the whole company.  I know we gave the training to over 2,000 people at company.  We were able to share the new guidelines, examples, and really frequently asked questions in the training sessions.  That really helped to establish a base-line level of understanding and shared language.  Our designers and developmenters were very receptive and eager to learn more about WCAG and accessibility.  When we asked for feedback on the training and guidelines, we kept hearing a sort of similar sensement.  That was, okay, cool.  I'm really glad I have this information.  How do I do it?  The guidelines and training sessions built more awareness of accessibility, but it didn't really give them a clear way of applying accessibility concepts to the work.  They knew what to do, but not how to do that.  So designer, architect, and all around super smart dude said if you want to teach people a new way of thinking, don't bother trying to teach them.  Give them a tool, the use of which will lead to new ways of thinking.  Or sometimes more commonly I refer to a lot as praxis or learning through doing.  By doing something and using the tool we can actually learn more about a concept or idea.  So by providing designers with tools to engage in accessibility practices, we're helping them apply their knowledge and develop a greater understanding of accessibility.  It is kind of like teaching a small army to fish by giving them really awesome fishing poles.  So at Indeed, we primarily use Figma and libraries and plug ins to streamline the work and maintain consistently across products.  For those in the chat or watching who might be unfamiliar with Figma libraries or components, they are little reusable pieces of design that you can easily drag and drop into a file and reuse and modify over and over.  The example to the right is a small animation gif explaining how designers might use these components.
>> Hey, Stephanie.  Can I jump in and bug you for just a second?  Can you move back and recenter yourself just a little bit the way we were before?  .
>> Am I off screen?
>> I'm so excited.  I'm sorry.
>> That's cool.  Sorry to interrupt.  Go for it.
>> All good.  So meanwhile with the WCAG2.1AAA mandate they are being asked to make sure the design meet the requirements beforehanding them off.  Why not make a Figma library that makes the handoff -- there's my dogs -- that makes my handoff easier.
[dogs barking]
>> And simultaneously helps build an understanding of WCAG.  So we did exactly that.  We created an accessibility red line library with a variety of components and callouts to help designers highlight key parts of the page to developers.  If you are unfamiliar with bread lines they are design files to make sure designs are made according to specification.  They are called red lines.  They refer to the red lines they use to communicate the specks.  But in this case accessibility considerations.  As opposed to WCAG, the library's is organized by different elements or content types.  If you are familiar with WCAG, it is organized by perceivable, operable, understandable, and robust, or pour.  It is more focused on the end users of WCAG.  Which are users with disabilities or barriers when using products.  Instead we reframed the guidelines to be focused on the people using them.  For designers and developmenters.  Things are grouped by headings, images, and video, things like that.  To make it easier to know what distinctions or call outs to make in the file.  For example, if I have an image on my page, you can go and grab my image.  I need to include the alt label here so my developer knows what the image should be.  That doesn't leave the developer to say what should this be?  I don't know.  I'm going to call it screen shot.  It is not helpful for anyone.
All of the components are free filled with the protect CSS or HTML elements.  Designers don't have to remember things like autocomplete values.  I know for one the street field you don't have to remember just grab it.  And landmark for footer is content information.  I need to grab the footer and it ensures they are using the right value and as well as not having to guess where landmarks fall on the page.
[dogs barking]
>> Sorry.  I can mute for a sec.  Or what the intent of the page or pattern should be.  We also included this part gets me really excited.  But these little labels for indicating different types of styling whether it is for states of elements or any keyboard mapping for custom elements.  Using the magic of Figma and auto layout and things like that, you can quickly make the table for what the right keyboard mapping should be for the custom component.  I'm a big Figma nerd.  I love that.  Along with the library we also included a handy walk through of all of the components.  How to use them and linked to the relevant WCAG guidelines.  If you are wondering how you should use the image tag or how you could use the auto complete labels, you could look through the guidance and better understand the components.  We also offered step by step examples of how to go about redlining the design with the accessibility library components.  Here an example of a success screen after you submit the application on Indeed.  Now we can label the heading elements and for complicated components like the rating we can say where things might need labels and where other labels might be part of the design and should really get to the Aria label.  How additional operations.  Then we share the library with designers across Indeed.  It wasn't a requirement to use the tool.  Just out there for designers to use it as another tool in their design tool belt.  It took off really quickly.  It is exciting and flattering.  We soon started seeing more and more designers coming to our ally office hours or coming to the slack channel with questions about how to resolve problems with reading order or considerations for custom UI patterns.  Things that designers aren't really come to us with questions about.  It made us think maybe they weren't thinking about before the library.  So one team working on the carousel pattern realized they needed to think through the focus order to make it more accessible for screen reader users.  This lead them to reference for carousel and create a pattern more consistent with accessible carousel functions across the web.  So many teams started making changes not just to new projects or features but as a way to see their existing product through a new lens.  And another team, our messages team, used it to rethink the heading structure of the entire messages experience and that lead them to create a more semantic and easier to navigate page for keyboard users.  The library was also a refresher.  Seeing the guidelines made it click really well for me.  The idea of being able to practice and have the tools to be accessible and think inclusively helped them develop the guidelines.  It shapes how we approach the design practice altogether.  They are thinking more intentionally about how their work impacts persons with disabilities and tools like the library have enabled them to reevaluate work flows to be more inclusive from the start.  For example the design manager said accessible by design initiative to have new ideas from indeed that are accessible from the start.  I'm sorry.  When someone says that it makes my heart jump and so happy.  Each quarter we'll continue to strive for accessibility and keeping at the speed that the engineering partners value.  It really just driving home the point of how building these tools can shift people's mental model.  It is really interesting.  Right.  While having tools like the red line library is helpful in speeding things along, creating tools, practices, and processes with the accessibility first mindset has a far reaching impact beyond just getting the product to market.  The more we think about accessibility the more we are helping the designers think about it earlier and the more we are making it normal part of the practice.  More important from the benefit, it is the affect that it has on the job seekers and employers on Indeed.  In accessible in Indeed means more jobs for more people.  That's my talk.  Super short.  Excited to answers questions.  I'm also -- Travis if we have time, I can always show a deep dive of the library for people to get a glimpse.
>> I think we have a ton of time.  Thank you so much.  There's a lot of curiosity around the library itself just like we talked about before we went live.  There's a bunch of people asking if you are ever considering making that available in the Figma community or otherwise.  I hinted that you were working that out internally with legal.  If you want to speak to that and maybe dive in a little bit more.  That would be great.  I think we have plenty of time.
>> Yeah.  This talk kind of coincided with an article we wrote on Indeed and released on the median blog.  We're working right now in order to publish.  We have to get legal to approve.  It is an intellectual property question.  It becomes creative commons for everyone.  We're hoping to get and needing to check all of the legal boxes.  When that's available I'm definitely going to be tweeting it out.  If you follow me at Steph underscore Hagadorn on Twitter or follow the Indeed design blog on medium or follow anyone on LinkedIn you'll see it there as well.  I can share some of the things that we have here.
>> There's a lot of consensus of deep dive into the library, if you would like.
>> Cool.  Cool.  Cool.  Cool.  From my friend and other folks.
>> I think it is easy to talk about.  You can see what the tools are.  I just updated to support variants.  I'm excited about that as well.  We -- I do have a couple of intro slides.  If you've ever used any of the other kind of Figma-community files, you can just -- they will be set up like a slide show presentation.  You can press the end key and it will flip between the slides.  What is the library for and how to use it.  Accessibility is everyone's job.  100% agree.  Yeah.  Just how to use the kits if you are not familiar with how to use the components in Figma.  We kind of just go element by element on what is the element and how to use it.  We also include a link to the WCAG guidelines.  That's all of the knowledge that you could have for the guidelines.  Here we have made a simple title callout.  At Indeed we have a special one that includes -- we've sort of default set it to end in hyphen Indeed.com.  When you have a title page, they can remain consistent.  They are build with auto layout.  I'll back out to show.  Maybe I can just drop one of these in real fast.  You can see my asset panel here on the left.  I can just grab my little headings chip.  Beep.  I can say actually in the component properties to the right.  This is an H4.  Really it needs to point down.  Then I can just, you know, boop.  Pop that little boy there.  They are all built to point all of the different directions that you need.  I also added a lot of arrows.  For communicating things like labels where you want something to be problematic associated.  I like to use the dash because it is an implied relationship as opposed to -- thanks, Google.  Someone is adding me.  Sorry that it popped up.  You can use the different arrows here.  I can drop one in.  It needs to be an S bend or just a square or any kind of thing.  If you are used to using wire framing or annotation libraries on Figma, right now this is similar.  Depending on maybe the different color of label that you are using.  There's a different color arrow.  You can choose solid or dashed.  That's really convenient.  For things like labels, a lot of times we might have not a visual label but we rely on the Aria label on whether the form is icon or location maker or things like that.  It might be a complicated -- this is an example in your resumé or Indeed profile when you have to say how long you worked at the company.  We want to make sure the to and from labels and specifically the month and date are all problematically associated.  As you are navigating through tabbing through as a keyboard user, you can still get the context that's kind of displayed visually here.  We would hear month from time period.  Whatever voice that you chose for your screen reader.  Mine is an Australian lady.  She's delightful.  Here's an example of auto complete.  You can grab your label.  You can set is that an auto complete label.  Yup.  It is.  It becomes an auto complete.  Then I can choose is it a city, company, country, current password, new password, job title, user name.  I'm always really bad at trying to remember all of the different auto completes that there are.  But this is a nice kind of helpful list.  It includes the correct attribute name for the developers.  You should indicate all of the information on the left before you could read something like save this job or dislike this job.  That came at the end of the card.  Even though visually it looks like it might appear after something like the title or company name.
>> There are quite a few questions, not maybe specifically about the library.  But there's a few that are pretty popular.  If you want to field some of those.
>> Sure.
>> Would you recommend other organizations look into creating their own version of the web content accessibility guideline documentation as Indeed did to help your developers better understand the success criteria required to make an accessible web site.
>> Yeah.  I didn't share some of the examples, but by creating our own, we were able to demonstrate the different guidelines.  If it was about a lot of times forms.  Forms are super big in the apply product and resumé products.  We could use examples from there.  Which I think really helped the developers see how these guidelines applied to their work when we were literally showing their work with.  And I think it was just an interesting process even for the accessibility team to better understand some of the nuances in WCAG and I know people myself that worked together to create the documentation.  I thought the guideline meant this and that.  I had a lot of interested discussions.  It could be redundant.  In a way to help others process, creates a new understanding on its own.
>> Great.  Let's see.  Here's one that came up a little while ago.  I know this person is up very late at night.  Can you talk about the e-mail templates?
>> We have a lot of e-mails at Indeed.  Different kinds of content.  If you are a user, you might be familiar with job alert e-mails.  You'll get a list of jobs in your e-mails.  You might get e-mails directly from employers.  We have templates for employers to put I saw you on Indeed.  Apply to my job please.  That's just the job seeker side.  We have the employer audience for small and medium businesses as well as larger enterprise clients.  There's lots of marketing e-mails that go out to the business side of the house as well as just e-mails that go around internally.  We have lots of templates.  How that looks is not dissimilar from how you might mock up a web site.  Very similar looking.  Just limited HTML CSS capabilities in e-mail.
>> Great.  I'm going to break my uploading rule for a second.  This one came in and it dove tailed into one of the other responses.  Did y'all share your written accessibility guidelines meaning can we use yours?
>> Not publicly yet.  I know we looked at a lot of the other companies who had done similar things.  Expedia has a public version of accessibility guidelines.  My former company IBM has a lot of documentation on accessibility.  We don't have them public yet.  Mostly just I think we've been so focused on serving our internal audiences.  I think now that we're at a better place accessibility-wise, we want to be more advocates.
>> Not yet.  There are others out there that have shared.
 
 
>> Yeah.  I would recommend just off of the top of my head the Expedia one and I would look at IBM and -- I think even just the U.S..com.  Their branding has a lot of -- design system has -- is all accessibility.
>> There were -- there's been a couple of different questions about sketch and alternatives for Figma and can you talk about that for people who might not have the budget?  Is there -- I believe there's a freish version of Figma, if I'm not mistaken.  Can you talk about different budgets and how they might be able to achieve some of this?
>> Figma has versions, I think, where you can send the file to anyone.  So they can view it.  I think even if they don't have a true account.  They will still get things like the inspect panel which will have CSS for certain attributes or for each part of the design.  That can be helpful.  If you use sketch, sketch has components.  You can do the same thing.  They have -- I haven't used sketch in a few years.  I don't know if they have the same capabilities that Figma has recently come out with, a variants.  I know the plug-in community and sketch product have a lot of design components.  Even in the Adobe landscape you have symbols.  It might be more cumbersome or not flexible.  I think you could also -- this is a great challenge.  I think I might take this on.  I bet you could do something in Google slides or PowerPoint.  Just like you make the templates for your company to use, you could make grouped objects that you could easily demarcate parts of your work in.  I think ideas or pieces of this you can take and apply in ways that work.  Almost like reusable, like a little sticker sheet to just grab even just PNGs.
 
 
>> Great for sketch.  I've seen them annotate the designs.
>> Even acrobat or PDF and you don't have the luxury of all of the components built.  Designers are taking more ownership in screen reader navigation and I think we need to start thinking about that part as accessibility as usability.  We should be more thoughtful and intentional there.
>> Very cool.  Let's see.  I'm going to cherry pick this one.  Do you provide the developers code or does each team create their own code based on the design speck?
>> We have an awesome design system team.  A lot of these designs that you see here are made up with the design system components.  We have a huge library.  The team has worked to create parody between Figma and the design -- coded design system.  So they also work closely with a lot of the accessibility advocates at the company to make sure that when those designs are coded, they are accessible.  A lot of maybe keyboard functionality is already baked into those components and part of the library.
>> All right.  Let's see.  Where is that question?  Here we go.  This one is pretty popular as well.  How do you approach revisions to the components in the library and how do you update the designers and developers on what was updated or change?  Version and change management question.
>> Sure.  If you are familiar with publishing libraries and Figma here you can see all of the versions of the components they are put into variants like I mentioned here.  And I recently just updated this.  They were just kind of nested components.  Any time you make a change to the variants or symbol in Figma there's the library icon tool.  All you do is hit publish.  You can see we're hard core library users.  There's hundreds to choose from.  You can public that.  When you publish it, it will automatically update the files that other people are using the same library.  Their components will automatically be updated.  We also are big slack users at Indeed.  For things like the design system or when I announced I made them variants.  I just posted in are you S channel and ally channel and to say there was an update.  We kind of -- it is like ad hoc broadcasting.  But the way Figma manages library in Teams is chef kiss.  Really nice.  They will automatically update in your file.  Occasionally that breaks it and we try to be really cognizant of breaking changes and especially announce that to people.  Probably before we publish.
>> Great.  Okay.  Here's a really popular question.  I'm curious about this one as well.  How did you get funding for this project and how long did it take you to complete the entire project?  Complete.  I'm sure it is ongoing.
 
 
>> This is one of my personal pet projects.  This is something I wished I had.  So I was like I think I'll go make it.  I mean Indeed is just a really wonderful company to work with.  If you think something should be made, we have a lot of hack-a-thons, and even project teams are kind of in charge of deciding what they should do on their product or what the team should be doing.  So as someone interested in accessibility and designer of the company, I just wanted to create the tools and kind of free time and my availability put this together.  Oh my gosh.  I'm sure Christine is listening.  She will keep me honest.  I would say from initial conception and documentation probably -- because we already had a lot of the guidelines rewritten, I would say two or three weeks.  Then it is just ongoing maintenance.  Adding in components for list elements and tables.  That wasn't something that we discussed before.  We can add that in as time allows.  So we're sort of a do things go fast get permission later as I'm sharing this and it is not like legally publishly available yet.  Yeah.  That's kind of how we roll at Indeed and also another perk and benefit of.
>> Very goo cool.  I think my CEO might be listening too.  We do that as well.  Here's a question that has come up a couple of times.  And I -- I know a little bit about this.  I don't think I'm allowed to speak to it.  Maybe you can.  And that's -- accessibility of Figma itself.  Do you have a read on that or can you talk at all about that?
>> Yeah.  That's a really good point.  I don't -- I do a lot of screen reader testing and just try things out.  I don't think I've ever tried to do Figma screen reader and I mean I think unfortunately just historically design tools have probably been geared to -- you know, just not catering to probably specific audience like audiences like people who might have visual disabilities or impairments, things like that.  So I can't personally speak to Figma's accessibility.  That's a really good question.
>> Yeah.  We'll say I know they care and are looking at it.  I can't say much else.
>> Yeah.
>> It is definitely something on their awareness radar for sure.  So that was a great question.  Another fun one based on your library, how much time in your day is spend in Figma?
>> The design system team would laugh at you.  I'm going to Zoom in so you can check out the keyboard tables.  They are really fun.
>> This ties into some chatter in the chat as well.
>> Cool.  How much?  This depends.  I'm a UX design lead at Indeed.  I would say my day is split between Google making presentations in G slides, being in Figma, and sitting in a million Zoom meetings.  It is probably broken up like that.  All of the awesome user sessions that I get to watch.
>> Very cool.  Yeah.  That's certainly important.  This is all great.  You got to see people interact with it.
>> 100%.
>> This is a good one.  Did you encounter any pushback with the rollout of thaccessibility guidelines or the library?
>> The library, no.  Accessibility, we tried to make it a thing at indeed.  Ultimately the company is like OKR metric driven.  Until that mandate from leadership and making accessibility part of our quarterly, okay, our goals and things like that.  Until it was part of that product management process and kind of how things work at company.  Teams wanted to be accessible, but just they couldn't balance the workload of being accessible and trying to meet the goals that were set.  Until accessibility was prioritized as a goal through the awesome work of the diversity inclusion and belonging team.  That is how -- that was the kind of pushback that we got.  People wanted to do it.  People understand why being accessible and inclusive was important.  No one wants to be the bad guy that says you can't use my web site.  Especially because we care a lot about our job seekers.  It wasn't prioritizes.  Getting buy-in from leadership and having leadership understand why accessibility is important and why you have to do it immediately or yesterday.  A lot of it comes down to no one wants to be sued.  No one wants the bad press that comes with being sued for the lawsuits.  As well as it is just, like, the right thing to do.  It is going to save you money in the long run as well.  When it comes down to the business brass tax.  It is the right thing to do.  When leadership says to do it, people are incentivized to do it.
>> Okay.  Let's see.  We have time for a couple more.
>> I talk really fast.  Here's a question what are the things that you mark to hand them over to the designers?  Heading and tab and region.  You spoke to this a little bit.  Maybe elaborate on that.  Does it all account in the single page or multiple pages?  And I'm deciphers if that means the annotations or the information that you are handing over.
>> 
  
  >> Yeah.  It could be quite a lot.  If you had all of the annotations on at once.  Designers handle it differently.  Some people will have multiple copies of the page or file or flow.  They might have one that's specifically has traditional red lines that shows things like margins and specks calling out the specific colors and things like that.  And then next to it they might have, you know, here's all of the labels and things here's kind of what should be a button and something that we've included in any of the interactive stuff like links or buttons are the target area components so you can specify if you have a 32 pixel or 24 pixel icon that you can have a proper 44 pixel target area around it.  We want to communicate that to developers.  And you could have that in different panels.  Something that I like to do and had in sort of the example documentation was grouping each element.  You'll see the components group here.  I would put in all of my headings and group my headings to turn on and off the visibility of those.  Depending on what part of the design and content the developer was working on, they could turn on and off those individual layers.  In the description of how to use this file, it is really -- whatever is necessary to communicate.  You don't need to always -- you don't have to indicate every element.  It is really like where is something that might need special consideration?  Can we be more thoughtful or intentional with custom components do I need to include this is what and how the keyboard should work with it and this is the focus order.  As necessary.  Really just a starting point for designers and developers to talk about it.  If this is more of them talking about accessibility, that's a win in my book.
>> Absolutely.  We're at time.  I want to squeeze one more question in.  I think it ties all of this together.  This is from Phil who says so that you mentioned your approach to the usage of the accessibility library is use it or don't.  Is this because you are confident that word of mouth will be sufficient to see high adoption levels or something else behind that?
>> I mean I think no one wants to be told what to do.  I think if you build it, they will come.  No one was doing it because they didn't have an easy way to do it.  There's a psychology theory the more difficult something is the less they want to do that.
>> Right.  Right.
>> How easy it is to do it and how motivated I am.  If there's a lot of motivation to the accessible, people were doing this on their own.  If they weren't motivated and it wasn't easy to do, it was just being skimped.  Just making it easy and now that they are kind of expected to be held accountable, this is just another tool they can use.  It is not -- I mean I don't know if people use it or not.  I can still sleep at night.  It is just one of the many things we try to make available and improve about our practices.
>> Awesome.  TV >> With that we're not only at time, we're closing down the Axe Con.  Thank you to everyone that attended.  You took your slides down.  Your Twitter.
>> One moment.
 
amazonv: (Default)
Accessibility in a Product with Thousands of Pages (TurboTax)
Type: Breakout
Track: Development
Learn how engineers at Intuit tackled accessibility issues across thousands of screens in their tax-filing product, TurboTax. Attendees will learn how the team used axe to pinpoint high impact issues, ultimately reaching zero violations in the product’s core interview experience.
 
all righty, I think we'll go ahead and get started. Hi everyone. My name is Grace Kirkly, with the Deque team here. It's my pleasure to be moderating accessibility in a product with thousands of screens with our special guests, Kendall and Tyler Krupicka. I'm going to go over a couple of housekeeping notes. This will probably be the last time you hear them. I'll go ahead and get through them. Today's session will be recorded and the recording will be hosted on demand for everybody to enjoy and watch again on this same presentation page.
Second, these slides for today's session are available also on the presentation page where it says download the documentation in a nice blue button  there. If you don't see them, you might have to refresh the page. Finally, we are going to save the last 10 minutes of today's session for Q&A so please if you have questions, post them in the SLIDO Q&A section that's located next to the chat. Also, next to the video screen. And I recommend sorting your chat by recent so new comments scroll dynamically to the top. So with that, I will turn things over to Kendall and Tyler to get us started.
>> Thanks so much for the introduction, Grace. I'm Kendall and I'll be speaking with Tyler. If you're joining us today, thank you. We know we're the last conference of the day so thanks for taking your personal time, probably not work hours, to join us on accessibility in a product with thousands of screens.
So a little bit about Intuit. We're the makers of TurboTax, QuickBooks and mint. Our headquarters are in mountain view but both Tyler and I are from the San Diego area. We were founded in 1993 and we're about 9400 employees with 50 million customers worldwide. For our agenda, we'll be focusing first on the scope of the problem, the routes we took to solve that problem, hitting strides to cleanup our code and where we are today and the progress we've made.
>> So over the course of this talk we are going to be talking about a project that took place over the last like couple years working on TurboTax, which is a product maybe everyone on this call might not be familiar with. What is TurboTax?
TurboTax is an online tax preparation product that is primarily used in the United States and  Canada. So what that means is every year people have to go and submit some paperwork to the government for their taxes. And TurboTax helps customers go ahead and fill out those forms in what is hopefully an easy and intuitive way. People aren't going on to a website and filling out all the forms that the United States Government put together. The product is kind of taking those and breaking them down into simple questions that hopefully are a lot more intuitive to navigate and on top of that, the product's doing a lot of work to either help you import documents or also figure out what forms you even need to fill out and file. Hopefully you're only answering the questions that you actually need to answer. When referring to that style of experience, we call that the interview experience. And it's kind of mirrored after an interview thaw might have in person. If somebody is asking you questions about your past year, that's kind of what the whole product tries to feel like. So the whole goal of that is it's more personal, more conversational. But with that interview experience comes a lot of complexity. In order to kind of express all of this tax code and all of these different forms as a bunch of broken down, simple questions, it takes thousands and thousands of possible screens. And some of those screens are hit by almost every customer. And some of them are only hit if you have very specific things happening in your tax return. Maybe there's a specific form for boats or something and so only a subset of customers that that applies to are actually going to see that screen. And kind of on top of that screens can get dated or they're updated less frequently if the tax code around them is also updated less frequently. If you think about what teams are actually focusing a lot of their time on in the interview, a lot of them is focused on the screens everyone sees and also the things that we need to refresh to match new tax code. So you have got thousands and thousands of possible screens, you have got these teams working across it. Some of the screens may not have been worked on in the last year or two. And with all of that, a lot of the same product constraints that every other has applies. When somebody is going through TurboTax, ideally it will be a consistent experience that feels like it was built by one company and one team of designers and developers. So there's a lot of complexity with making all these screens feel like one cohesive experience even if there's a bunch of people working on it and they may not have worked on that screen in a long period of time. To manage a lot of that complexity, we treat a lot of the central interview experience as a design system where it's all managed and deployed centrally. So the page is built out of components like input fields and radio buttons and other common patterns that appear in the forms or in our question-and-answer experience. And so those will all be designed and updated centrally and even a screen that hasn't necessarily been updated by a team in the last year will still get the latest designs.
And on top of that, in order to kind of make that system work, we've also built out about 500 of what we call mocks which are basically example screens of the common patterns you'll see. So even though we might not run a test that touches all of the thousands of different tax scenarios that are possible, we hope that we're testing all the different normal UI patterns that might appear on those screens.
And so over the course of this talk we are going to be going through a project that we did to actually be a lot more proactive and fix a lot of the problems in the interview experience with regards to accessibility. And so taking you back in time to kind of the beginning of the project and where we were when we started, we have this huge number of screens. There's a team of anywhere from like three to five people actively working on managing the central set of designs for all of those screens. We have some accessibility physics that we're doing but we're doing those mostly through bug reports. And bug reports tend to skew towards really common screens like the ones that everyone hits, more people either tell us that there's an issue or more of our QA resources go towards those so it's easier to find them. We didn't really have any necessary processes in place from the development or the design side to kind of proactively audit issues from our end. It was mostly a feedback loop where we would put out new releases and then hear back from the different quality teams about things we needed to fix. So scoping the whole accessibility problems in the space was pretty difficult because we knew we had all these screens but we really didn't have great visibility into how good we were doing on accessibility.
So with that, we put together some goals for being what we call proactive about accessibility. So taking a more active role in our design and development process to, one, figure out how many problems do we actually have, and then two, how do we build a solution for all of this so we can be proactive about accessibility and integrate it into our developer workflow and get rid of issues that may not have been found yet. The first goal for that that we knew had to be in there was using automation. This was just due to the constraints we have. We have a huge number of screens and a small number of people to work on this so we need some sort of tools to help us focus in on what's important. We wanted to make sure that as a first step we tried to stop developers from introducing any new accessibility issues into the interview experience. That would come before actually learning more about what issues we have out there and starting to fix them over time.
And then we wanted to be able to focus in on the most widespread issues first. Since things that occur on almost every screen will have such a huge benefit for customers if we can go ahead and fix it as opposed to fixing the experience on just one screen. We also went into the project knowing this would be a long-term thing to learn more about the accessibility of the product, go ahead and fix it and maintain it long-term. We wanted to be able to track our improvement over time and have that as a benchmark to keep us focused on continuing to solve problems. With that, I'm going to head over to Kendall, who will talk about automation.
>> Thank you, Tyler. We had our goals and knew we had to find an automated -- a way to automate accessibility so we began looking at a few options. After looking around a bit we settled on Axe core. It fulfilled most of our requirements. Zero false positives, for example. Axe will not any accessibility testing rules unless they're sure they will not create false positives. You might not cover every single test case using Axe, but you'll be able to look through the errors and output and be sure they are all accurate results and all are errors showing up. It was important to us to find something that's easy to integrate into our system. Axe for us, being able to add that into our builds, we weren't changing much. We were able to seamlessly and have it work. We began integrating into our code. We wanted to utilize the fact that we were running cross-browser testing already. After each automation test that ran on a browser, we ran Axe before leaving the web page. Once we gathered results we compiled them together to provide feedback. And with that, we got our initial results. After integrating Axe core we found that we had approximately 2000 violations in 500 of our mock screens. This was the number of violations after we turned off some rules that we were saving for later in our accessibility story such as color contrast and duplicate ID. And then we began recording those violations on every PR. This way we can ensure that we are not introducing new bugs as we're implementing and eliminating them. We determined that many of the violations were caused by 13 high impact components components such as links and buttons, common components that were used a lot in our design system. And therefore, by focusing on those high impact components we were able to eliminate many bugs on several different pages that we were seeing.
And then after initial result we wanted to create a process for documenting these test cases. We began adding Axe into our PR pipeline. We categorized those results to showcase our biggest failures and where we needed to spend the majority of our time. We only added features and bugs that would improve accessibility, not hinder it. If a PR had a violation, we would wait to merge it until that violation was fixed. We provided links to the screens that were causing bug failures so we knew where those bugs were happening and therefore they were easier to fix for  us.
>> On the right side of the screen here, we have kind of an example of that. Basically this is what would be shown to a developer. So in their actual PR flow, a bottle come in and comment and say hey, here's the accessibility report for your changes, here's a number of screens or text topics, and here's the number of errors that were found in master, in like the main branch of the code base, and here's all of the errors that were in there with your change. So at a glance, the developer can get an idea of any of the things that may have been impacted. So that kind of goes back to what Kendall said about like helping the developers narrow in on individual pages that were impacted by the change.
>> Thank you. And then charting our progress. So when we were going through this process, we wanted to chart the progress and show our effects on the  product. So we created a script that would collect the Axe violations every release and we could track the number of violations over time and ensure we were making improvements and showcase the work we had been doing on our products.
To the right we have a little chart showing just like an idea of what our charts might look like.
>> So after laying all of that groundwork for finding out we have 2000 violations across all of these screens, we've identified some high impact components and have things in place to actually chart progress over time, we actually started to go in and start addressing issues proactively.
So the first month we were actually able to fix a surprising number of the issues. I think this was a huge take away for the project was that when you have issues that are really widespread, fixing very small trivial things that are mistakes but fixing them can have a really huge impact across the entire product and it definitely multiplies as your product gets more complicated and has more screens. In the first month we were able to fix 1350 out of the approximately 2,000 violations which is a huge amount. When you breakdown some of the fixes we started doing, it makes sense. One of the things is links. Links are something that appear on most screens in the product. They're very small and fundamental but you need to make sure you're doing them properly because a violation in your core like link component is going to be reflected on every screen. For us there were some minor ARI attributes so it was really important to fix those. That got rid of almost 500 violations. Another really big example for us was tables. Inside of TurboTax you can encounter screens that might have a table grid with a lot of inputs in it. Those kind of relate back to a little bit more of the forms that are going into the tax return. So with those it's really important that we're using all of the proper roles to allow people to navigate within a table grid but it's also important that we're linking every input to the rows and columns and making sure they're all labeled because when they're just floating in the center of a table that might be a little bit confusing for a screen reader without all the context on the rest of the page. Those were a fairly common pattern and going in and addressing those issues could have a widespread impact as well. And probably the last thing that I'll address on this topic is hidden labels. Sometimes as we would be resizing screens or things like that, you might hide some of the labels on the screen because they might be duplicated based on different section headings or things like that. It just makes it more clearer visually when using a mobile device. But when we do things like that, we have to make sure that all of the labels were still available and linked and routed properly using the ARIA attributes so screen readers wouldn't suddenly have their label disappear. Those were core standard changes that we fixed. And that drastically contributed to the over half of violations that we were able to remove. It's also worth noting in that time that due to the checks we put in place to stop people from adding new  violations, there were none added. And another side effect was around color contrast. As Kendall mentioned in our reports for developers we turned off the color contrast rules initially. That was two pieces. One was there was a lot of color contrast. So our whole reports would be flooded with them if we turned it on. But the other piece was in order to fix that it requires a full design approach for that that refreshes a lot of the designs through the product to have better contrast. And that's not something we would necessarily be addressing on the development side of things. But we still wanted to push that project forward and we had a lot of great design partners who were working on actually doing those refreshes. So now that we had reports available we could turn on color contrast and generate a report to start talking with our design partners on where to prioritize their work to improve the contrast.
And so even though in the first month we were able to get rid of over half the violations, that became increasingly slower as time went on. As you can imagine, we were addressing the widespread problems first which means the last things we were addressing might only be occurring once in the entire product and they require specialized tweaking and debugging to figure out what's actually going on. And in fact the final 15 violations that we solved were a problem that occurred only on a single page and so it just required as much development time to solve one Axe violation as it did to solve 500 in the early part which makes it a bit harder. But even with that we were able to reach zero Axe violations in about five months. And that was just with some constant work each sprint to focus on whittling away at remaining problems and prioritizing it. One thing I would note is over time we did find more violations because we would update Axe and Axe would actually have new rules available and it would find new violations, which is great, but it would also mean our numbers would go up and we would have to address those as well. And one of the things that did help make this process easier is as we were going along we were also doing development work to introduce new designs or refresh designs in the product. So as we were taking on those tasks, we could come into them and make sure that we were also addressing some accessibility issues at the same time or making sure that any new designs we added had no Axe violations. So that kind of helped us with that while including accessibility and other work streams as well. In order to make sure we were tracking along the project along the way we made sure we took time each sprint to create Axe reports. And what we were kind of going through and solving those problems we found a few things that made it easier along the way. One thing was it really helped to publish a build of the TurboTax UI every time somebody was making a code change in such a way that you could go on different devices or different team members could easily navigate to our URL and test out your change and see what happened. Why this was really helpful is like for example, if we're testing in multiple screen readers as well, those might require windows, some of our developers might be on Windows versus Mac and you want to be able to quickly send a URL either to another computer you have or to another teammate or QA and have them pull it up and take a look. And that also helps you with some screen size testing and things as well. And also on the development side we focused on adding a few linting rules that could help us be more accessible and find accessibility problems inside of our code editor instead of getting all of our results from Axe once it's actually on the page. One of the tools that was helpful for that was a package called  ES lint plug inJSX accessibility. That one helps you find issues or have hints in accessibility in react. We also added another one in CSS called style lint accessibility. And one of the things that was really helpful in that plug inis over time we started to make sure we had reduced motion support across the product. And the style lint accessibility product let us warn developers anytime they had CSS animation that they made sure to account for reduced motion.
>> So yeah, we have some kind of outcomes of this and our thoughts on automation in general. Do you want to go to the next slide?
So automation covers about one-third of all accessibility violations. It's important to lean on it but also not to solely use it when you're testing accessibility. Automation can fall short in areas that are subjective rules for example, maybe things that are harder to test. And it's important to do manual testing such as visual, keyboard nav and screen reader testing as well.
And expecting things to change. Guidelines are always being updated to improve user experience. We're learning things every day about users and better ways to display information on the web so expect new versions of rules and automated tools to align with those guidelines and it's important to stay up to date on those.
And accessibility should start at the design level, not at the development level. Overall, if you design -- if your designs are accessible, you'll save time during the development stage and not having to go back and forth with the design later. And one way we found that we can help that is we encourage accessible design by creating tools to make design easier to produce. An example of this was adding a color contrast checker that pulls into it color schemes and allows design to check those colors that they select from the Intuit design library to make sure that they meet color contrast.
Right here we have on this slide an image of our old version of TurboTax. We have a lot of things happening here that are kind of hard for users to be able to see so we have buttons that have very light coloring as well as text that's not very dark and it's hard for users to be able to find those on the page and be able to navigate to them. So from our Axe automation we were able to make a different display if you go to the next slide. We increased color contrast. We used a darker teal in our library. And we increased typography sizing as well as changed the colors. So again, ongoing process, but we're trying to update designs just to reflect what Axe is showing us on the automation side.
I think you're muted, Tyler.
>> So as we get towards the end of the talk, we would like to point out a couple of open source projects that we created along the way doing all of this work. If you're doing a similar sort of work on your projects, then maybe these would be helpful for you and could help you also integrate some of the things we talked about. The first project here is called proof. It is available on the public GitHub for GitHub.com/Intuit/proof. And what it does is it's a test return for a project called story book. Story book is a very popular project for documenting your user interface. So if you're building react components or Vue or anything, there's a chance you're using story book for your documentation site. If you're doing that, this test return can let you go run tests against your documentation. It includes a plug in for Axe which we use on our projects and that will generate the report for Axe violations. You can tell it go grab every story on our documentation site and go run Axe on it and give us the results and compile that. That's really handy if you have the same workflow as us.
And the second project which was released very recently, actually only in the last week, is called accessibility snippets. And it's an extension for the Visual Studio code editor and it adds a bunch of ARIA snippets that help you quickly piece together an accessible interface if you're using react. It's got a lot of the common pieces of code that you would put in as you're building out react components. Since this was only released very recently, it might not be in the distributed versions of slides, but we'll try to make sure that the link is posted in the channel. And it's free and open source. So with that, it looks like we're done a little bit early, but we're happy to take some time with questions and feel free to drop those in.
>> All right. Thank you so much, Tyler and Kendall. Let's get into some questions. Just a reminder, you can use the little thumbs up icon in the Q&A if there's a particular question that you would like to see answered.
So I'll kick it off with this first question  here. How did you identify the 13 high impact components that you referenced?
>> That's a great question. So that was actually a little bit more difficult. Actually that's probably something we could have covered a little more. When we started running Axe against our pages, we could kind of see a few things that helped us group and identify that. One was we already kind of had grouping of our types of pages. So it was pretty easy to start to like pick out more violations are happening on this type of page, so we can start to zero in on that. And then part of it too was when Axe was giving us results, it would give us invalid like ARIA owns property or something and we could see there was a ton of them. With that we could drill in and say what's causing this. Okay, that is coming from links or something like that. So it was kind of a two pronged approach to that. We would look at types of screens that had a high number and drill into the number of components manually by looking at the screen. We would look at Axe violations by number and try to figure out why is this one so high. And sometimes that could be multiple components involved and you kind of have to figure that out through a manual review. But often if there was one rule really sticking out it was a chance it was a widespread component that had that particular issue with it.
>> Awesome. Thanks for the clarification on that. Next question here is how do you consolidate accessibility reports from different teams/product?
Do you do it manually or is there any tools you have that helped automate that?
  
  
>> That's a great question. Luckily for us, like the set of mock screens that we use for testing as well as some of the other screens in the interview experience, all of those kind of span a large number of teams already so we don't necessarily have to coordinate as much down to specific teams as we're doing the design refreshes. But I know like there is some different work that goes on with maybe the marketing sites or something and we don't necessarily have combined sets of data for all of them, but there is kind of an internal community of people who are working on accessibility across products at Intuit. So between the different teams and the representatives who are involved with accessibility, then we have more visibility into issues. But definitely not a perfectly solved problem, but yeah, it's something that's always ongoing.
>> Yeah, to touch on that, with our design systems we do know which teams are using which components. We are able to find metrics on which teams our components show up in. Recently we had found an accessibility violations and were able to look at our metric and 20 repose are using our component and we need to get on and update it. The nice part is we make the fix in the design system and all it takes is the team updating the version.
>> Awesome. All right. Next question here has a couple of parts. How did you prevent new accessibility bugs from being merged?
Automated testing on PRs that prevented them from being merged while there were violations?
What did you do about developers saying I don't know how to fix this if they didn't have accessibility skills?
>> The nice thing is we're a smaller team so for us it was fairly easy. We were a team of four and we were adamant about not adding more violations. I definitely think at different companies you'll have a project and it varies like lots of people are working on it. I guess it falls the same under tests in general. You don't merge code that has a failing in automation, right?
This is the same thing. So you're not going to merge the code if a new Axe violation is showing. Granted, if you have 2000 violations and [Away from mic] can't tackle all 2,000, that's understood. We focused on not introducing new ones and making sure that count was pretty consistent. And again, the results did show up on our PR, so when someone's reviewing your PR on the team can easily see that it was two thousand violations before and now it's 5000, you have a problem. That's kind of an exaggeration.
 
 
>> To add-on to that, it wasn't necessarily perfect. We used it through GitHub so in GitHub it would stop you from clicking the button while there was an outstanding thing. It would look at how many violations a specific screen had before the change and after. Technically you could get where you fix a few and someone fixes a few. I don't think that happened but it was a possibility. The other thing to answer the third part, I think that's come up a bit more in the design system work as we've expanded that where there's more developers who are involved creating new components or maybe they did a design and they're contributing that design to the central system as something new and then our test might pop up and say hey, there's accessibility violations, you can't  merge. It does happen where we have people who aren't too experienced with any of the ARIA attributes or maybe aren't experienced with HTML and JavaScript and this is the first thing they're implementing so it does require a bit of training. One thing that's really helpful is Intuit has a kind of community group for accessibility called the accessibility champions that is run by Ted Drake, the accessibility lead for the company. So if our team was ever unable to kind of come in and help and answer questions, there are other people who have time around the company to kind of step in and help people. Ultimately the change won't go in until we feel like everything's been addressed but hopefully the developers who are contributing feel like they're getting the resources they need to actually address the problem up front.
So the goal is that everyone comes away from it learning something with a positive experience as opposed to we just blocked them to fix it and they're retrying until it works. It's very much a collaborative process.
>> Accessibility is a team sport, right?
>> Yeah.
>> Fantastic. So this question asks Kendall mentioned that automation tools may generate just a fraction of the actual WCAG violations. What percentage of the effort up to now was put into automated testing versus manual testing, would you  say?
>> Gosh, I guess [Away from mic]. For us when we first added Axe into our repo, we really wanted to focus on those violations, we still add new components and features are checking the keyboard nav and visual and screen reader testing. I don't know. Tyler, what do you think percentage-wise?
I guess we're really focused on both.
>> I would say up front like almost all of our time was spent on fixing those automated violations because, as Kendall mentioned, Axe doesn't really have false positives so we knew zero was a target that was like somewhat reasonable. And we knew that those were real issues that we needed to solve. In tandem to that though, as we're fixing those issues we're getting more accustomed to what kinds of things can come up. We also were kind of discovering new areas of product or things that could use a bit more of a manual touch to kind of review all of it. I would say more like it's definitely shifted towards the opposite now. If the project has zero violations now and like a component is added or something, it might get three issues or something. Those are pretty easy to fix. But we are still fixing more and more accessibility violations and most of those are coming from some sort of manual review and we treat the automation as a strict baseline for we should be addressing all of those and then beyond that we can improve. And one good example of that is we just did a pass-through a lot of the different interact developments and said is there anything on this page that is describing this interact development that isn't properly linked with a described by or something like that. Because it might have a description on it, but there might be visually three or four things describing it on the screen. So the automated tool is just checking that. You have the script development, we want to make sure it's including all of them. That's something you have to do a bit more manually, but because we had the baseline of making sure everything was described, we could start to identify yeah, it's described but really there's a section header that's also describing it that isn't included so let's loop back and fix that. It started 100% automated and it's flipped to probably 80% manual now because we can trust the automation.
>> And yeah, more of the subjective things that are harder to check through automation, like is your description accurate?
Does your button just say click me, because that's not helpful. Those things can't be checked with automation but we want to make sure that that's still being tested.
>> Absolutely. That's a great point. And I just wanted to call attention, I believe I starred this in the Q&A for our audience here, but Glenda the good witch Simms did chime in, she had a presentation which you can catch on demand that some recent data that Deque has pulled together shows that 57% of a site's total number of WCAG issues can be found with automation. Just the fact that you're covering your base side with automation, that goes a very long way, plus manual testing on top of that.
>> Yeah, that's great context. I didn't have any realize it had gotten up that high.
>> Yeah, same.
>> So I pinned her message in Q&A if anybody wants to check that out.
We have plenty more questions to get into and plenty of time so I'll keep rolling.
 
 
>> That's great.
>> Here's our next question. How did you track the violations and resolution of them and generate the accompanying charts?
>> Yeah. Originally it was very crude, actually. We used Jenkins for our build pipeline and Jenkins has a built in charting mechanism. It's not the most beautiful chart you've ever seen and it could only do page level granularity, not Axe violation level granularity. But originally our charts were just through that because it was very easy to hook in. After that we switched over to a more specialized third-party charting application that was already in use inside the company for actually charting some traffic metrics and things like that. We really wanted a line chart and a lot of the analytics stuff is very good for line charts. So that was kind of it. One thing that was kind of tricky to get all of that information displaying properly is we were running Axe on different pages as we were testing them and each individual page could have multiple Axe violations. You could have a page with 10, you could have a page with one. And initially the way a lot of our reports worked was each page just got marked as in violation or not. We found that wasn't completely accurate to what we were actually addressing because we were focusing on trying to solve the most Axe violations, not fix the most screens, necessarily.
And so we did adjust our reporting to do that. And basically we'd compile out every Axe issue per page and then we would go and tally that up and just at the end of every release build, go ahead and publish that metric so it becomes available.
But I will say as kind of low fidelity as the  Jenkins build output was, it still did the job and it took almost no development work so we had something even at the start so there was nothing wrong with  that.
>> Definitely.
This person says I've used TurboTax for the last 10 years or so and sometimes I see different components/patterns on different pages. For example, one link opens a modal, another opens side draw. Is this because of remediation at work?
>> That's a good question. And I think probably the best answer is that the links work that way just because of different features that were added over time, not necessarily a lot of decisions being made right at this moment. I don't know if you would add anything, Kendall, to that.
>> No, like it's definitely we have a design system we're trying to get everyone on to the design system, but there's a few different pages that are just a little more legacy that we're still trying to update. That's great feedback. We still have trying to update.
>> I will say like any piece of software, there are pieces of a product that may not use our design system. Like some of the states haven't necessarily been rolled over to that since it's an ongoing process almost to keep everything up to date. You may encounter things on there and people are still focusing on accessibility for those areas, even if they're a legacy system, so it's still an okay experience. If you have issues, definitely report  them.
>> Yes, absolutely.
>> things are always in motion with software, right?
>> Right.
>> Can you speak a little bit more to how you're using story book?
This question is asking are you able to check accessibility in story book using Axe.
>> Yeah. yes, we create components. We will put a component in story book by itself, say a button, so we have a bunch of stories just related to buttons and we're really easy to test keyboard interaction. We utilize one of the plug ins, the Axe plug in on story book to check it's meeting those requirements and it's been a great tool to get that component by itself on a page and be able to really focus right there and see what that component's creating issues for, making sure that's robust enough for a lot of spaces on platform.
>> To build on top of that, the way we actually run the tests is this project that I mentioned a couple slides previous called proof, and it's an open source test runner that we built. We build all of our components in story book and we test them with Axe using the Axe plug in in story book and then we test it on Axe on CI using proof. And when the components actually make it into the products, that's when our experts are test Suites going on top and running Axe again and making sure on the integration level once a page and built, we know the button is accessible on its own but once a page and built with it, is it still accessible and is everything labeled properly and things like that. There's multiple levels to it but story book is how we've been able to document component level changes.
>> Fantastic. And just for our audience, you did provide a link in the SlideDeck to the proof open source is that correct?
>> Yeah, it's in the last slide in the provided slides.
>> Awesome. All right. I think we have time for one more question before we wrap. So you did mention if people run into bugs or issues that they should report them. This question is just asking what are some common bugs that users might report.
>> Yeah, that's a great question. Do you want to give an example of something you're working on recently, Kendall?
  
  
>> Yeah, a recent bug that came up was actually [Away from mic] it was using our progress bar. We have a progress bar in TurboTax and we have it interactive so you can go down and see buttons inside the progress bar. And it was at the time very hard to interact  with. We had a progress bar that made it ARIA read only. So we had to script the progress bar from role progress, rethink it, make it still sound to a screen reader like a progress bar because it really was a progress bar but still allow it to be interactive and not read only. So being able to utilize ARIA labels and get those how many steps are in the progress bar and be able to showcase that without using an ARIA rule, that was one of the recent bugs, I guess.
 
>> Excellent. Thank you for that example,  Kendall. And at that we are at time. Tyler and Kendall thank you so much for your awesome presentation. Thank you so much to our audience who has stuck around for our final but definitely not least presentation of the evening. I just put a link in chat to fill out a survey. We're raveling off a thousand of these tees so please do fill out the survey about how Axe-Con went for you and we will be greatly appreciative of that. Thanks again to our presenters, our interpreter  Daniel, wonderful. All right, everybody have a wonderful rest of your evening. Thank you so much.
 
Link to a11y snippets: https://marketplace.visualstudio.com/items?itemName=accessibility-snippets.accessibility-snippets&ssr=false
 
Link to A New Intuit Open Source Release Medium Article: https://medium.com/intuit-engineering/accessibility-snippets-ea82a7439bbe
 
Here's more information on Intuit's accessibility champion program: http://www.last-child.com/intuits-accessibility-champion-program/ and https://www.intuit.com/blog/technology/lessons-learned-from-an-intuit-accessibility-champion/
 
Did u see Deque big data research shows 57% of a site's totally # of WCAG issues can be found w axe-core? & the 15 most frequently failed SC account for over 94% of all issues found? link to my pres https://axe-con.com/event/accessibility-testing-coverage-automation-and-intelligent-guided-testing/
 
amazonv: (Default)
Designing Accessible Games
Type: Breakout
Track: Design
Designing accessible games covers a lot of the same principles as designing for the web. But as a highly interactive medium, there‚Äôs a lot to consider in how to make a game accessible to your users. In this session, we‚Äôll go over techniques for designing accessible games, including color-contrast, subtitles, and remappable controls. We‚Äôll also be talking about game difficulty and how to provide different levels of difficulty based on your users’ needs (while still being true to your intent). You‚Äôll walk away with a solid understanding of the principles of accessibility in games and how to design your games with accessibility in mind.
 
 
>> We're going to get started momentarily.
All right.  I think we're going to go ahead and get started here.  Thank you, everyone, so much for joining.  This has been an absolute thrill.  I'm Josh McClure from Deque.  I'm going to be moderating designing accessible games brought to you by Stephen Lambert.  Virtual round of applause please.  I'm going to take care of a few house keeping things.  Today's session is being recorded.  And it will be hosted on demand for registrants.  The slides are currently available if you look down under this video feed there's a link to download the slide to follow along.  We're also going to have live captions that is listed below.  Definitely stay tuned.  We're going to save the last ten minutes today for Q & A.  Most any questions that you may have in Slido's chat.  Definitely join in on the conversation.  Share your experiences and thoughts.  I would love to hear from you.  With that, we're going to go ahead and start.  Steven, all you.
>> Thank you for being willing to come.  Second to last presentation on the last day.  I know it's been a really long past couple of days.  I'm glad that you took the time to come to this one.  This is designing accessible games.  We're going to talk about techniques for color contrast, and controls.  We're talk about game difficulty and different levels of differenty based on the user needs and still being true to the games intent.  I'm Steven Lambert.  I'm a senior developer.  I love creating games.  My e-mail is  Steven@SKlambert.com.  You can go find me afterwards.  Connect.  I would love to hear from you.  Also if you would like not only are the slides downloadable in the PDF form, there's a Google Doc at the Bitly.  You can get to here any time.  So like I said I'm a developer.  I love developing in HTML5 and Java script are my primary tools.  As a side project I developed a couple of hobby and things like break out or ramp heart.  I did Pacman recently.  I'm working on my first commercial game called Keridwen.  There's a free puzzle that you can play.  So that's all about me.  Let's get into what you came for which is designing accessible games.  What does it mean to make a game accessible?  This goes beyond just adding keyword support or screen reader information.  What does it mean to the players to make a game accessible?  So that means that for the player we are allowing them to play your game in a way that works best for them.  There are four common problems that stop most players that playing a game that works best for them.  These are taken from something called a game accessibility guidelines.  There's also a favor topic which is game difficulty and accessibility.  That appears every time a very hard game like dark souls comes up.  And everyone talked about how difficulty settings is and is it true to what the difficulty game should be.  We'll go over that in the end and talk about the fun stuff there.  First we're going to talk about controls.  Remappable controls are one of the best value accessibility.  This is a direct quote.  It allows them to use whatever setup that works best for their needs.  Players can play with the sticks, one-handed, and Xbox accessibility and custom configurations with buttons and foot pedals.  They can play in a way that works best for them.  You should provide a way to remap all players actions.  Lets player map the actions in the most convenient position on whatever setup they have for them.  We have an example here is an image from the counterstrike global offensive.  They are controlling the map settings which allows every action the player can prefer can be remapped to the different control.  Things like walking and shooting and aiming can be remapped.  Going beyond just actions in the game if you have any hot keys in your game which is very common for realtime strategy games.  You should also provide a way to customize the hot keys as well.  In the example we have star craft two.  You have a screen of all of the different hot keys that can be used for the play person it allows you to remap each of the hot keys for the building actions or the unit actions to fit your needs.  Here we have a great example.  This is over watch.  There are many different heros that have their own play styles and abilities.  The overwatch allow you to remap the individual character settings and better suit the play styles of each character.  This also includes in the image not only actions but things like red cool and change what you want for each individual character.  It is also important not to forget to change the in-game prompts.  We have the Batman image of the letter A prompt showing him what he can do.  A game that didn't do this quite so was a Lego Ninjago.  We noticed when you switch to co-op and played single controller none of the tutorial prompts showed it changed position.  It was still vertical.  We had to figure out the right button and bottom button because the controller was different.  And now players can often switch between multiple inputs during the game.  Common between switching between keyboard or controller or game pad.  You can use both at the same time.  You should allow all actions to be remapped between the keyboard and controller as well as mouse inputs as well.  And in the game no man sky pictures here in the controller settings they have a column for keyboard and mouse as well as separate columns for all of their actions.  Part of the control settings is to also help with the sensitivity of those controls.  You should allow users to adjust sensitivity of mouse movement or controller configurations.  This includes not only the mouse movement and things like camera movement and dual stick controllers as well as controller rumble settings and juice effects.  If you are not familiar with the term juice effects, that's things that we add to the game for the feel.  Screen shake or camera bloom.  Those things should also have their own settings to help the user.  Lastly you should provide options.  If you can simplify it to maybe just a few buttons, that helps a lot of players.  You should allow to change between things like press and hold to toggle or skips quick time events with just a single button press.  This should include ways for a user to play with just a single, one-handed controller rather than having two dual stick controller setups.  You can just map things.  A great example of this was the new Spider-Man game.  This simpler control screens and being able to skip them can benefit users who experience fatigue or strain injury or other types of disability use that needs them in order to play comfortably.  To recap we want to allow players to map the controls and don't forget any end game prompts.  We want to allow them to change the sensitivity and allow for simpler control schemes or skipping for realtime events and toggle to press.  Next we want to talk about for face accessibility.  The first and most important key to interface accessibility is don't make your text so smell they can only read it when it was on the computer screen a foot away.  The new game had a problem.  Their text was pretty small.  It was hard for a lot of players to be able to read it.  Especially when they were sitting on their couch 10 feet away from their TV.  They came out with a patch to fix the problem and improve it.  It only helped a little bit.  So Amazon TV has a good recommend that they use for captions that we can apply to text in the game.  It is about 20 pickets font minimum for viewing 10 feet away at 1080P.  You should increase the spacing between the sentences as well so your text message is also important.  In conjunction with a legible font size you should also have an easy-to-read font that's sans-serif, mixed case.  That's not to say you always have to have an easy-to-read font.  If you allow your users to customize the font, that lets them decide what's legible to them.  You can keep a personality in your game with a nice unique font and provide an option to replace the font with a much simpler one, if the user so designs.  Another way to help is add options to increase the font size or interface or hud.  This includes things like font size and prompts and images used for the game and borderlands and the font size and everything in the game that you could interact to increase as well.  You can also add options to customize the UI style.  Capacity and color and you can go further and customize position of the UI elements.  They are common in games such as MMO and RPGs.  You have lots of information in the screen.  And this is in the hud for the fall out fort.  They have settings for the RBG scale and as well as the capacity.  To recap you want to use large, easy to read font in your game.  You want to design that from the beginning.  It is always harder to implement larger font if you didn't take it into account later.  You want to customize the font size and style for users.  You want to be able to provide options to customize the UI in the position or size or style or capacity.  Next we have color.  Let's first talk about color deficiency.  If you are unaware, a red, green color deficiency is the most common form and affects about 5% of the world population.  There's a high probability that someone in the call or watching the video has a form of color deficiency.  The key takeaways is colors tend to look similar if you have a color deficiencies.  Reds and greens and oranges could look yellowish or pinkish and really green could look blue.  The most important thing is all means of color is lost when you have a come already deficiency.  We have the example of the match three game.  If you have to match three squares of a similar color in order to clear the board.  In the bottom right corner it is full color.  You can make out the different colors like red, green, blue, yellow, purple.  In the top left it is shown in the same image but with a Deuternopia.  All of the shades look the same.  Good luck being able to match three colors if all you can see is go out of the five that are shown.  The important takeaway is don't use color alone to convey meaning.  All meaning is lost if you can't perceive the color.  How do we make that work for games?  Well, first we can add a non-color identifier.  Such as an icon or pattern to distinguish between the colors.  Here we have a couple of images.  We first have the game Hue.  If you are unfamiliar it uses a color wheel for the color of the game itself.  That will reveal different things.  Either a door blocks your way and change the color to make the background the same color as the door and the door vanishing and you can walk right through.  To help with color deficiencies, they added similarrables to each of the colors and all of the objects.  Instead of having to color match, all you have to do is symbol match.  We have the game faster than light.  When your ship is damaged in certain areas or not enough oxygen, it goes from light red and darker red shade.  Enemies health of people that can board your ship and you have the crews health and the crews health was green and the enemy's health was red.  They enabled color deficiencies instead of being a shade of red to a darker red they had patterns.  They had alternating colors of red vibes to help indicate the level that it was.  They applied a pattern to it.  They changed the enemy health to blue to help distinguish between a red/green color deficiency.  Not only do you have good colors, they contrast well against the backgrounds.  This includes the text colors.  The common recommendation was 4.5 to one.  They had the world that was dark tile and lava and volcano and part of the objects were spikes.  It was a dark black.  The background was light gray.  You could kind of make them out.  The harder part is when they are down.  There's a red square in the top right corner.  You can barely make it out there are some spikes that are sitting in the ground.  If you weren't aware of that, that can cause you problems in trying to solve the puzzle.  This is very important that you keep in mind the background to the game.  Something that you can do is provide an option to change the contrast.  This is epic Eric.  You you can add an black layer between the background and foreground elements.  You can adjust how the capacity of the layer.  You can also make it completely white.  That can allow your users to determine what looks best to them in the background to help contrast with the foreground objects.
Another example is to just remove the background completely and make it black.  And street fighter four they had the option where you could just disable the background.  Instead of showing the colorful background of whatever world or arena, it just become a black box.  To help remove the distractions from the background and make sure the foreground players contrasted well.  Another option is to add outlines.  Here we see eagle island.  There's an image of the player who has wings on the back of the air.  He's shooting out the eagle.  And the player and the eagle he throws and the bats all have a thick, white outline to help them contrast against the blacker background of the cave.  Lastly if you want you can also just allow full customization of colors in the game.  This is more common in games that have distinction colors or teammates or enemies.  You can customize them.  They allowed full RGB for the enemy player and neutral player color.  To recap for colors, you can first don't use color to convey the meaning.  Use icon or patterns to distinguish between the meaning and colors for the players.  You can provide an option to decrease the contrast and provide options to customize the color ifs that makes sense for your game.  Next we can talk about subtitles.  There's a chance more players play with subtitles than you think.  More 60% of the players, turned them on.  They were turned off by default.  60% went to turn them on.  Because of that, they turned them on for default.  95% of people left them on.  As the game industry, we don't always do well with subtitles.  Start with easy to read.  Otherwise you end up with something like this.  I can't remember the name of the game.  They have very tiny text that I can barely make out what it says.  I'm right in front of it.  It is whatever the caption the person is saying.  It is possible to read.  Or you can end up with problems of contrast.  In this game there's a room and a main lobby of the hotel.  Somebody is saying something about the staff.  It makes the white text completely disappear against the white windows from the outside light.  Those are very common problems we can encounter with the subtitles.  Instead we want to do better.  The best approach is to add a dark, transparent background behind the subtitles.  The other option is to add an outline to the white text.  Like the black outline.  It is more common in usually a better approach to add a black background.  Some players can't read the subtitle even with the background.  This is showing on the glass and the subtitles have a black background while the player is speaking.  Not only should you add the black background but a setting to change the opacity.  Letter players decide if they want it or they don't or how dark it is.  Also it is very important that we don't over run the screen with a bunch of text.  In the image it is one of the screens where the leader of the council is talking to your commander.  It is just a paragraph of texts that takes up the bottom third of the whole screen.  This not only makes it hard to read, but the scrolling text.  Instead use only two lines per subtitle.  About a max of 40 characters per line.  The game hit man did this really well and one of the hit man levels and the person talking about hit man's goal and objective is just two lines of subtitles and 40 characters we are line.  Then the next time they talk they will update the subtitles.  Also when a player is talking or character in the game is talking, you should show the characters name.  As they continue speaking, you can drop the name for future blocks.  It is assumed they are continuing to talk.  As soon as a new market starts talking, you'll have to show that characters name again.  That lets the person know that a new person is now talking in the subtitles.  Again a game that shows this is showing a police officer talking and his name is Redwater.  In the caption it says REDWATER:
It covers more than just spoken words.  They provide a lot of information through audio cues.  Things like enemies yelling they threw a grenade or player with a special ability or gunshots happening in a person direction.  They should be conveyed in subtitle.  The players can receive the same audio information that others received.  The game half-life two in the image did that really well.  In the image they are shooting a bunch of things in the ware house or garage.  And the captions not only show the person being talked to, but also shows things like shattering glass and pistol shot or they can't use sound so that someone knows the thing they are trying to interact with isn't useful.  That information should also be conveyed to the player.  Going further we can also add direction to our audio sources.  Here we have Minecraft.  If you are walking across the ground or swimming in the later or something else is swimming in the water, they will have a caption to the left or night.  Fortnite which takes the 360 around the player and shows the sound that it came from.  You know exactly about where it came from and they go further showing an icon and the color of what that sound was.  Whether it was gunfire or foot steps of things of that nature to help make sure if you don't have the sound on for whatever reason or you can't hear it, you get the same information that audio cues provide.  Of course when in doubt, TV standards have been doing captioning and subtitles for years.  They have lots of standards.  Go to the BBC.  Netflix has their own guidelines to go to read more about how TV handles the best practices to subtitles.  So to recap you want to use large, easy-to-read text.  You want to keep your subtitles to a few lines of short text each.  You want to show the speakers name and you want to caption the audio cues in your name.  Last we're going to talk about game difficulty.  Now game difficulty can be a controversial topic.  Some players like difficulty and don't think a project is less difficult.  Other players want to play difficult games, but they aren't able to, because it is too difficult.  The common argument is they shouldn't include the difficulty option because it keeps to the creators intended way to play.  I'm not going to talk about any of that.  We're going to try not to be controversial here.  We're going to focus on what difficulty in the game means and why it is important to a player to have it.  So first I'm going to misquote Keita who said games can be as difficult as they like so long as they are fun.  What exactly do we mean by game difficulty and being fun?  When we talk about game difficulty, what we're actually talking about is a single access of a graph of a players experience with the game.  So we have on one axis is the difficulty on that game.  On at the other is the skill or ability of that player.  So when compared to the players skill and ability if the game is too challenging for the player, they will experience frustration.  They will have a greater chance of just stopping or abandoning the game because it is too frustrating.  But if the player skill or ability is far greater than the difficulty, you'll experience boredom.  And they have a chance to stop playing at the game because it is not enjoying or difficult for them.  So what we have then is the very narrow channel in the middle between the difficulty and skill ability that we call the flow zone.  The flow zone is where the player is neither overly frustrated nor overly bored.  What we want is the player to remain in this flow zone.  When the game presents the difficulty that's just above their skill level.  They learn to meet that challenge and get a new difficulty that keeps them in the ebb and flow of the flow zone.  The flow zone is not just a straight line.  It is more of the curve up and down between thing that is are difficult and their difficult and difficulty in the game.  When we talk about game difficulty, what we really want to be talking about is the relative challenge to the players current skill level.  The reason for the challenge can be due for the physical or mental disability or for the player reaching the top of what their skill level is.  No amount of play or practice will get them beyond that ability.  If it is too difficult, they become frustrated.  They abandon your game.  The goal of any game should be to keep that player in the flow zone.  Present them challenges that they can over come no matter what their skill level is.  How do we keep players of varies skills in the flow zone to avoid challenges they can't over come.  One thing you can do is so some form of difficulty options in your game.  These are different settings that say easy, medium, hard, or some of the things that will cater to the skill level those players need.  We have an example of the old game Doom.  They have an option screen for skill level from the top down from easy to harder.  I'm too young to die.  Ultra violence.  And nightmare.  Don't make fun or belittle your players with your difficulty options.  It doesn't help and it is not funny.  It will only make the players upset who need to choose those options for them to enjoy the game.  You also want to give the players the right expectations for those different difficulty setting.  Don't just list it out.  What does hurt me plenty in terms of the meaning of the difficulty the game will provide.  I don't know.  I have to soon because it is at the top the bottom one is nightmare.  Nightmare sounds rough.  Top must be easier.  You should describe what difficulty option can change in the game.  Whether that's enemies get more health and do more damage or less damage.  In this example we have an imagine of the game.  When you start a new game it has four different options for difficulty, we'll say.  The first survival.  You can also have a game called freedom.  That removes the health and -- it removes the food and the water need and keeps you with just health and oxygen.  Then you have another one called hard core which adds all four and adds permadeath.  That's creative.  It has none of the options.  You don't have to worry about them.  It is very obviously what each of the settings will change to help you as a player decide what it is you want your play style to be.  You don't have to think of difficulty in terms of different settings like easy, normal, heart.  You can just have a group of settings.  In the game Celeste, there was an assist mode.  You can change the game speed and whether you have visibility or not.  These were amazing.  Because these four options alone for Celeste which is a very difficult platformer game would allow lots of different people that wouldn't play to play.  I'm going to play a video for a minute.  We're going to watch someone use voice control to play Celeste.  They are not using a keyboard or controller.  Just voice.
>> They have the ability to play quite a bit more quickly.  Yes.
>> Right.  Jump six.  Up.  Jump.  Jump.  Jump.  Up.  Front.  Dash.  Right.  Dash up and up.  Run and jump.  Okay.  In the video we saw the player going through the beginning of levels and it has them do a bunch of different long jumps and dashes.  There's strikes on the ground.  Because the player was able to turn on the invincible and because they could have infinite stamina, they were able to use the voice controls.  They weren't perfect.  They had a lot of spikes.  For the player that couldn't play the game as it was written for the normal controllers, this allows them to play.  It was hard for them.  This was their first time they were able to get in under five minutes.  They were trying to play as fast as they could on the level.  It took lots of tries.  I think it was to to 30 tries.  With these settings to do that.  Game difficulty settings allow players with all sorts of abilities to enjoy the game at a level that works for them.  And you can also not only just have individual settings, but customize different aspects of the difficulty and create their own experience through configurable settings.  This is called passive fist.  They have individual controls for the enemy strength and how much encounters that you'll have and how much -- the combo master that you need to get and resourcefulness.  Excuse me.  How much resources, I think it was that you can encounter.  Each of those can allow the player to choose the difficulty for them.  Of course difficulty settings don't have to be sliders or switches.  You can think outside of the box.  In the example is super giant game, their difficulty settings were the idols or the lenders and other games that you could enable at any time.  They increase @ difficulty of the game in the single aspect making enemies harder and making more health.  You could mix and match those different difficulties to create the experience that you had most fun with.  Of course doing that also then rewarded extra experience points for the users.  It gave them an incentive to try things that were harder to increase that difficulty.  Here are just kind of the short list noncomprehensive of different examples of difficulty settings.  You you could have a practice mode or allowing players to go and over and over and over.  Think about the road where you have to go many, many times in the first part just to get to the later parts.  If you keep dying at the later parts, then all you have to do is the beginning parts over and over and over again.  So your skill you can master those beginning parts really well.  You'll quickly become bored of them.  It is the end part that you need well.  20 minutes of things that you mastered can be really boring.  That can help someone.  You can have an exploration or story mode that removes all difficulty settings and just for them to have fun and explore the world.  Great for dialogue heavy where the action but more of the story progression is the theme.  Things manual save points allow them to save right before tricky things and be able to reset right to the point without having to go through all of the other stuff that they did.  World skips and sort of like a world save but allow players to skip to different parts quickly if they've gotten and done the beginning.  There's also adjust the game speed.  Make it faster or slower to help give people more reaction time to what they are doing.  We saw that in the  Celeste video to say their input.  Invisibility is a practice mode that lets players have fun without worrying about death.  You can increase their stats giving them more health, more endurance, stamina, or do the same for the enemies.  Give them less health.  Any of the numbers that your game has to determine what happens, you could make a difficulty setting.  It is great about difficulty settings is that players will naturally play at a difficulty above their skill level.  That's because that's where the fun is.  Players don't want to be bored.  They don't want to experience frustration.  They find what works best for them to experience the game in a way that's fun.  To recap there's a lot of information.  Provide difficulty options for your players.  Allow players to fine tune their experience.  You can -- through different difficulty settings or have more settings that expose different knobs.  Think outside of the box.  You don't have to do sliders or you don't have to do different settings.  You can have things like super giant games.  If you want more information, go to gameaccessibilityguidelines.com and accessible.game/accessible player-experiences.  If you haven't heard of him he does fantastic game design and taking current games and past games.  He did entire series on accessibility in games.  He can further get more information from.  All right.  Let's put that all in the practice.  Let's try to make it a game accessible with just a couple of minutes that we have left.  Here's Arkanoid.  It is like breakouts.  You have a ball on the bottom of your screen that you pass off to hit different bricks.  The bricks have different colors.  The colors represent the points that you'll get for knocking them down.  And sometimes those bricks can't be knocked down.  The color like the gray ones you can't use the ball.  They will bounce right off.  They don't break.  So what -- everything that we've learned, what are some things maybe we could do to make the game more accessible?  So first we could, you know, applying the color contrast and make sure that maybe that light blue brick color doesn't contrast really way.  We can change the color of the brick to make it contrast better.  Maybe we could have an option for the darker overlay to make the blue standout of the brick better.  Because the bricks have different colors that represent different points or whether you can or can't break them, we should also make sure those colors aren't their own way of conveying those meanings.  Maybe we add icons to each of the bricks or color pattern that help let the player know which bricks they can break and which bricks they can't break.  If we were talking about controls, maybe the game was designed to use WASD.  We want to make sure to allow them to do something that works best for them.  Things of the nature.  We can also make sure they have some enemies on the top of the screen.  It is hard to see as well.  They are multishaped circular blobs.  They don't stand out so well.  Maybe we add a white outline to the enemies to help them contrast.  This is a very old game.  There's lots of things we can do to help improve it.  Let's try a more modern game.  Breath of the wild.  Here they have a puzzle.  Where you have to make -- if you are familiar with the old Marvell game labyrinth.  You have to take the knobs through the game.  Zelda did this.  We'll make you familiar.  They had the player example the puzzle and then they have controls which are tilting the entire game itself.  The switch pad that you'll tilt that and that tilt motion is reflected in the labyrinth puzzle moving the marble and the blocks and the circular orb that you are trying to get to the end goal through the game.  There's lots of little holes and no walls on some of the edges that you can follow through.  So what could we do for this game to make it more accessible?  Well, for one because the game relies on the input to tilt to move the labyrinth.  We can make that better.  If that doesn't work, let's rematch the controls to the arrow keys or the controller key pad or thumb stick or whatever.  Make sure if the player isn't able to tilt, that means they can still play the puzzle.  Other things we can do is maybe the walls aren't exactly the most apparent.  Make sure they have good contrast against the background.  Make sure the player understands where the walls are.  Maybe we can help them again add an outline to the walls so that players understand where the boundaries are compared to the game and floor and the outside.  If the -- they did a pretty good job there.  The ball is a bright orange color.  You can see it against that background.  There's always something.  If we look a game, I'm sure there's something we could do.  Maybe the font size for the control captions is pretty small.  We could have an option.  There's all things we can do.  If we look at the game from the design point of view and keep all of what we learn in the session in mind, there are always ways to improve the accessibility for someone to help them play a game that works best for them.  We're going to end five minutes early.  If you have any questions, post them in the Q & A chat.  If you want to connect with me, there's my contact.
>> Excellent.  That was so good.
>> I developed the HTML elements that mimic what the game has itself.  If you are using unity or go dot or whatever the game frameworks, they may have their own tools.  You'll have to go investigate.  I'm not familiar with all of them.  Specifically for accessibility.
>> So what you are saying is this sounds like an opportunity for somebody out there, the community, to build some tools; right?
>> Probably.  I only development in a couple.  I know there's lots of tools.
>> I'm with you on that.  That's awesome.  So I think we are right at time, everyone.  I'm sorry we couldn't get to every single question here.  There were so many great questions.  Each out to Steven.  He has his social profiles linked there.  Do reach out.  We would love to hear from you.  Thank you so much, Steven.  That was great.  I really appreciate everyone joining today.  Thanks.
>> Thank you for having me.
 
amazonv: (Default)
Making Your JAMstack Site Accessible.
Type: Breakout
Track: Development
Let’s talk about the JAMstack. It’s cutting-edge. It’s performant. But what about accessibility? Answer: It’s as accessible as you make it. In this talk, we will explore the JAMstack ecosystem and introduce the tools that exist to ensure that your sites are accessible as can be.
 
Accessible Slides: https://axecon.latte.dog/
 
 
>> We have got some people chiming in saying they're very excited for this session. Well, I think we're ready to get started here. Hello, everyone. We're so excited you're here. My name is Brandy from Deque.
>> Hello everyone, we're so excited that you're here.
>> So sorry, everyone. Having just a little bit of technical difficulty. I think we're good now. We are going to go ahead and get started. As I was  saying, I'm Brandy from Deque, I'll be moderating the making your JAMstack accessible. First, today's session is being recorded and will be hosted on demand for registrants. Second, slides are available for today's session on the web page by clicking the link above the video session here. If you require live captions for today's session, you can also find those just below the video screen. Lastly, we'll save the last 10 minutes for Q&A so please post your questions in SLIDO's Q&A section located on the right-hand side of this video. No need to wait to post your questions until the end. You can post them during the presentation and give the other attendees the ability to up vote or like them. With that, I'm going to turn it over to Kyle.
>> Hello everyone!
Hello hello hello!
Thank you so much for coming!
I actually just got out of Maria la madder oh's talk from the last session. Oh my goodness!
It was so good. I seriously can't wait to go to work tomorrow and putting together these widgets that we talked about. Thank you so much for coming to this talk. Over quarantine I had a little of a domain purchase that I was really excited about. My puppy, his name is laity. And I found out that Leddy.dog was available. It was available available. No auction or anything. I looked around and I was like are you serious?
I purchased it. Now my dog has a vanity domain name. He's not like an actor or anything. This was purely for fun for me. I have been putting a lot of work into it. I got him a little home page and it's much more than just a landing page. There's a little biography written by me. A little blurb about his parents, myself and my partner Daniel. There's also a little bit of photos from this modeling shoot we did when we first got him. It's a little prize possession of mine. I know a lot of folks might be thinking,  okay, Kyle, what is the text that -- I have to say it's on the JAMstack. The JAMstack has been around for a few years now. It's fair if you haven't heard of it yet. I expect a lot of folks might have heard about it on the blog sphere or Twitter or have used it before. For those of you who might not be familiar with it. The JAM in JAMstack stand for JavaScript, APIs and markup. The whole idea is chances are you're using at least one of those tools. You're probably using JavaScript, API or some markup. But I like to think of JAMstack in terms of static and dynamic sites. I like to think of JAMstack as being a static site that's created dynamically. So to talk a little bit more about what this means, what does it mean to be a static site that's created dynamically, I want to dive into these different definitions of dynamic and  static. A dynamic site from like a big overview, a generalization of what a dynamic site is is when I make a request to an app server to one of the  websiteses that's so awesome about the 21st Century where the app server will do a lot. It can make calls to APIs and databases and maybe a content management system to know what text to return to the user. After it gets all these responses from all these external data points it will put together a very customized response and return it to the user. I think this is really cool. It's really personalized. You can give the user a highly flexible response but not only that, it's something that is going to take a little bit more time. There's a little bit more latency. There's more latency because these requests to content management systems, to databases, to APIs they are going to take a little bit of time. They are not instantaneous. There's the other side of the coin, static sites. Static sites are really cool because while they are not as dynamic as a dynamic site, when I request something like let's say the about page, what the static site host will do is say all right, let me find the static site, found it. This is me with my filing cabinet of HTML page. And it finds the page and returns it to the user. It's a lot simpler and a lot faster and a lot of times you can host them  serverlessly. What's cool about being serverless is you don't have to scale up or down your servers depending on an influx of traffic. Serverless websites a lot of times are cheaper. But there is the downside of static sites not being as flexible as a dynamic site. For example, I can't imagine a static site that's being driven by a content management system. What would that look like?
Well, this is where the JAMstack comes in. The JAMstack kind of combines these two ideas by bringing in something that we call the build. The build is going to look a little bit different depending what static site generator you use. There's quite a few of them, there's nex, inaction, Gatzby, 11ity and there is a ton. There's more coming every month. The main goal is to generate a static site but they all get there in a slightly different way. However, they all generally take the same steps I'm about to talk about. The first step in this build is that it collects external data from APIs, content management systems and databases. So these are the API calls that used to happen on the fly during run time for dynamic sites. On a JAMstack site these same API calls are made but they're pushed to the build. They're made ahead of time before a user even makes a request. What this ends up looking like a lot of times is the JAMstack site crawling the API. For example, if you give your JAMstack site a WordPress API, the JAMstack site during the build will crawl that API. If it's WordPress, it will grab all the blogs, all the posts, times, authors, tags, categories, all the metadata for your posts. It will grab everything that it can and stuff it locally in your local memory. And it will pass it to your JavaScript app. And it will use some sort of Central State management of some sort. A lot of times it's ravQL. At this point you have a massive massive JavaScript app and your static site generator is going to take that JavaScript app and chop it up into a bunch of static -- it's going to be a static website. At this point you're going to have a website that's created using external data or APIs or markup and at the end of the day you have a static website that you can upload to some sort of static web host, for example, S3, [Away from mic] is another popular one, verisell, you can upload your HTML files to some sort of static site. Now, I really find that cool. And that's what really excites me about the JAMstack, but the jack stack goes one step further and it gives us some really neat optimizations.
Here's what that looks like. One of the optimizations that we are going to talk about is the link optimizations, how we navigate through the website. So I want everyone to think for a second. What can we hypothesize if a user is using a keyboard, what if they hover or activate a link?
What can we hypothesize will happen?
They might click it. They might want to go to the next link. They might want to click through to the link. In order to render that next page, usually there's going to be more requests to be made. Maybe the images, the CSS, HTML, the text that needs to be loaded. What the JAMstack does is says okay if the user is hovering over a link, they might click it so why don't we pre-fetch these resources they will need before they click the link so when they do we already have the resources and all we do is a quick rerender instead of an entire page reload. Here's how that works. On my page we have a video, it doesn't have -- we are going to see when I hover over these links, the network tab is going to get requests. These are the pre-fetched resources.
Right now my cursor hearing officer over story, over family and over photos. Each time it hearing officer over a link, those resources are pre-fetched. Now this optimized navigation that is a part of many JAMstack sites is revolutionary. It takes what we know about routing and it turns it on its head. When navigating a JAMstack site we're no longer loading an entirely new page when clicking on a link but doing a rerender instead. This is awesome for performance and for SEO, but not so much for accessibility.
In this talk we are going to explore a couple of these truly awesome optimizations the JAMstack gives us but we are going to look at them critically with a keen focus on accessibility. We are going to question decisions that have improved important aspects of the web, such as performance, SEO, et cetera, but might have left accessibility behind in the process. most importantly we are going to explore how to overcome these accessibility issues and how we as developers can fix them without compromising any parts of the website. So I want to welcome everyone to accessibility and the JAMstack. I'm Kyle Boss and I live in Hollywood, California, with my puppy late who you already met and my partner Daniel. We met on  Tinder which also happens to be where I work. We have a bunch of -- we have one for swipe night which is our inapp choose your own adventure series. Equally as important, maybe not as exciting, but is the policies page, our policies page is also on a JAMstack site. And last but not least, probably my favorite project that Tinder has worked on is the interracial emoji couple. We couldn't represent interracial couples because we had to choose one skin tone. Tinder decided they wanted to see this changed so we created the interracial emoji project and put a petition out. You can find it at emoji.tinder.com. A quick shame less plug, if throughout this talk you see a project you want to work on and if you find yourself wanting to work for Tinder, from a 9 to 5 for a day job, I would love to hear from you. We're always looking for awesome great people to work on our team and we're always hiring. Please feel free to reach out. My email I'll post at the end and also my -- the Twitter handle is posted at the bottom of the slide. This is a good point to mention too. I want to mention that I myself am not an accessibility expert nor do I pretend to be. I myself am learning more and more every day because I think it's important to make this web a beautiful place that's more open and inclusive and accessible to everyone. So I'm giving this talk here today because the more we ensure that new technologies are accessible, hopefully more people joining in on this mission to help us make this web an accessible place for everyone.
Where were we?
Accessible navigation. I mentioned that the JAMstack has amazing optimizations. A lot of times you'll get link optimizations depending on your static site generator that you'll use. But sometimes this might lead to navigation issues when it comes to accessibility. And here's what I mean. Here in this video you're going to see me go to a link. We are going to do a link navigation with my voiceover screen reader turned on. I want everyone to observe what happens.
(Video playing).
>> Oh, no!
So we changed the links. I clicked on the family link and I was on the home page and we changed URLs, we changed pages, but there was no announcement. I want to do this one more time. Let's play it one more time and see if you can notice that.
That's not good. So folks who are navigating our website who might be sighted will be able to see this feedback. They will be able to see we've changed  pages, right?
However, folks who might be visiting our website who have low vision or visual impairments might not get that same exact feedback that the page has  changed. A link was clicked but we are not getting that feedback that we're on a new page. So this is a big issue. Assistive technologies don't notify a user of a page change mainly because the browser itself doesn't know that the page has changed. Remember, we're doing a rerender, not an entire page reload, so the browser isn't going to alert assistive technologies that we're on a new page. This is a big problem. And how can we fix it?
Well, we are going to fix it using something that I like to call a route announcer. And we are going to be introducing this route announcer react component. And we are going to go through this code really  slowly. We are going to go attribute by attribute. And we are going to pair a program together and if you're anything like me when I go to a talk and I see a lot of code, I get a little anxious because I feel like I have to understand the code and listen to the presenter. So we are going to go through this attribute by attribute and hopefully make sure that we don't run into this. Let's do this. The first thing that I want to show everyone is the base of the route announcer. We are going to be using a P tag, a paragraph tag. And inside of that paragraph tab is the page name component prop. The whole goal is whenever the page name changes, we want that page name to be announced to the screen reader or other assistive technologies. We want the screen reader to announce the page change whenever the page changes. We are going to do that with ARIA attributes. They stand for accessibility rich internet applications and I like to think of ARIA as a way that we as developers or PMs or designers can let assistive technologies know exactly what certain parts of our website represent. We're the developers, we're the PMs the designers and we know what this website does and we want to make sure that we can allow assistive technologies to also be able to know the content of things, what certain API elements or -- we are going to go through  few. ARIA live will get us about -- what ARIA live does is communicates updates. It will communicate anything that changes within that HTML element. Alerts, progress bars, timers, and we are going to use one of the values that it accepts. There's three values. The first one is  off. ARIA live equals off. That will turn off updates from the ARIA live region. This is usually  temporarily. But honestly our ARIA live route announcer is announcing anything right now so we probably don't want that one. The next ARIA live attribute that we can use is ARIA live polite. ARIA live polite communicates updates but it does it politely. Here's what I mean. Let's add it to our route announcer. I'm typing into the paragraph tag, ARIA live equals polite. When I put that into  late.dog, let's observe what happens. When I clicked on family, we got to the family page and the route announcer announced some things. It announced family, link, list four items and lattey's family. Lattey's family is the -- I do see things I want to change. The first is if you can see there's latte's family rendered in the top corner of our page. We don't want our route announcer rendered. I don't have too much of an issue about that but just in case we do, we want to hide that from being rendered. Also we have family link list four items being announced before latte's family. What's happening here, it's really subtle but family link four items, that's describing the button on the previous page that I clicked. What the screen reader is doing is announcing everything that it's going to announce and then it tax on latte's family at the end. This might seem subtle now but if it was reading a paragraph before, it might be a lot of time before it actually receives our new route so we want this feedback to be a little bit more immediate. Here's how we can do that. There's that third value, ARIA live equals assertive. ARIA live equals assertive will communicate that update immediately. It will tell the screen reader hey, stop what you're doing, we need this to be announced right now.
So I want to give that a try and I have a hunch that will fix this issue.
So I'm going to change ARIA polite in our route announcer to ARIA live equals assertive. And let's see what happens.
So I'm going to click on family and let's  observe. Latte's family. Yay!
That's so exciting!
That's exactly what we wanted to happen. We wanted latte's family to be announced immediately because that page has changed and we don't want to keep giving feedback about the previous page. Now I mentioned that ARIA live is great for announcing a few things such as timers, progress bars, alerts. It's always helpful to be able to let assistive technologies know exactly what this element  represents. For example, if we're using a P tag right now, which there's nothing wrong with that. The P tag is amazing but we're doing so much more here than just a P tag. The role is going to be slightly different. Is it an alert?
Is it a progress bar?
Is it a marquis?
And to give our screen reader and other assistive technologies this context, we are going to be using another ARIA attribute called role. And role's main job is to communicate the UI element that a node represents. There's quite a few roles for ARIA live attribute for ARIA live that I've seen. The first is marquis. This indicates scrolling text. While marquis has been deprecated in HTML five there's still times scrolling text is used. Stock tickers, news tickers and that is a perfect opportunity for using role equals marquis. ARIA value min, value max and value now if you're using progress bar. Also there's role equals timer for count down and clocks. And also I have seen role equals log quite a bit. This is great for things like chat messages. And usually role equals log is used politely. It's not usually a message that needs to be announced immediately. It's something that can wait so I see it a lot with ARIA live equals polite. Very similarly is role equals status. I see that a lot with non-urgent posts or status updates. Very similar to log I see it paired with ARIA live equals polite quite a bit. None of those really scream to me what a route announcer represents or what it feels like. But this next role I think really fits the bill.
Role equals alert. So an alert role communicates that this is an element that's like a flashing error message or maybe a pop-up or something that just needs to be announced right away, now, that it's super urgent, the user should not move on before they understand what this alert says. So a lot of times we see this paired with ARIA live equals assertive just because it's so important. I think the route announcer is a good candidate for role equals alert so I'm going to add it in to give our assistive technologies a little bit more context.
All right. So we are almost done here. I want to remind everyone of one of other issues that we mentioned. The route was rendered in the top left hand corner of our page. And we would like to hide this. So I'm going to add a style here display none directly into the P tag. So we have style equals display none as an inline style. Let's see what happens here.
I'm going to click on family.
Oh no!
Nothing happened!
I navigated to latte's family and no alert was given. I also don't see the route being rendered anymore but that announcement we were getting earlier completely stopped. Let's try one more time.
Yeah, that's not good. Okay. So I want everyone to hypothesize why this might be. I'm going to take a drink of tea really quickly.
So what does display none represent?
It means at least from what I gather, what I usually use it for, the user shouldn't know this element exists. It's hidden. And if it's hidden, the screen reader and other assistive technologies aren't going to want to interact with it either because it's not rendered, it's not shown to the end user, so why should assistive technologies give feedback that it exists?
Why should it be interacting with it because it's display none?
The same thing for capacity zero, because it's hidden, assistive technologies are not going to interact with it or give feedback to the user that it exists.
Now we're in a very interesting case here though. We're in a case where we don't want this text to be rendered, however, we do want assistive technologies to be able to interact with it and let the user know that it exists. So we are going to do something that I do quite often here. We are going to add a visually hidden class to this P tag. Now, the goal of this visually hidden class is to hide the text visually but still allow assistive technologies to be able to interact with the text. Now, if you stare at the CSS long enough if you haven't seen it before, you might be able to convince yourself this will hide the text. You just copy and paste it with every project I work on. I carry it with me in my toolbox and I use it whenever I want a screen reader to be able to interact with something that's hidden. You also might see a lot of people use SR/only, or screen reader only. Let's replace that display none style with this visually hidden class on our route announcer. On our route announcer we have ARIA live assertive, role equals alert, style display none. And I'm going to remove style display none and add class name equals visually hidden. And let's see what happens with the route announcer now that we have this visually hidden class.
>> Latte's story.
>> I clicked on the story link and latte's story was announced. Yay!
We did it!
This is awesome!
Not only was it announced, but it wasn't rendered on the home page. This is great. Everything worked out fine. And I want to pause here and let's take a look back at everything we did to make this route announcer a reality.
So the first thing we did was we added ARIA live. And ARIA live took us really far. It announced the page name whenever the page name changed. Also, we added ARIA live equals polite, but if you remember, what that ended up doing was announcing the route name but it did it much later in the process. The screen reader was like ARIA I'm reading everything off now that's already in my queue and I will push this new message on to that cue. We changed that. We said ARIA live equals assertive and what that does is tell the screen reader stop, stop what you're doing, if page name changes, please, please please announce the page name.
So that's why we have our ARIA live equals assertive. Role equals alert was to give a little bit more context to assistive technologies that this is, yes, a P tag, but it's so much more. It should represent an alert. And then finally, our route was rendered on the front-end and this was no bun oh, so what we wanted to do was remove it. We wanted to not have it rendered but at the same time allow assistive technologies to be able to interact with it. We tried display none first but that took it away for everyone, screen readers and the browser was not rendering it. So we added a class, visually hidden, that had some styles that would hide this element to this route announcer from being rendered, but at the same time it's not the screen readers and assistive technologies are still going to be able to interact with it.
So I want to pause here and I want to give some big big kudos. This route announcer was inspired by the works of two very important people in both the accessibility world and the JAMstack world. Marcy Sutton and Madeline Rose. Marcy Sutton -- several issues with a lot of JAMstack sites and also gave some recommendations. And ARIA live regions and route announcements was one of the problems that bubbled up from there. Also, Madeline Rose made a very, very impactful PR into the Gatzby core. That included this route announcer. This was a simplified version of Madeline Rose's work inside of this very, very important PR. Kudos where kudos is due. Huge shout out to these two and everyone else who's been working on accessibility in the JAMstack.
I want to move on to the next optimization that the JAMstack makes, which is equally cool in my opinion. Images. So when the JAMstack does its build, it's going to take your images and optimize them. It's going to make different versions of them so if you have a user on a mobile device, they are going to get a mobile version of the image. Also as you scroll down your page, these images are going to be lazy loaded. You get this lazy loading for free, which is really, really cool. I think that's really important because when you're loading the page, you want your time for the person to interact to be as fast as possible. Here we have the network panel open. What I'm going to do is scroll down latte's photo page and as photos are about to enter the view port, you're going to see requests for these new images being made. This is the lazy loading happening in action. Take a look. So I'm scrolling down and more photos are entering the view port. And as every photo enters the view port we get new network calls and these network calls are images coming in. I'm going to share that one more time. As we load we see these images. Take a look at this. We see the width and the quality. We see these different URL prams that are given to us too. How do we get the images to work?
Do we get them for free?
The one tradeoff you have to do is use a higher order component called image. Or it might be capital  IMG. Also it's important to note that some static site generators might not do [Away from mic]. It depends on the SSG you're using. A lot of them use a certain higher order component that wraps an HTML 5 image element. A good example looks like this. This is one way to use -- using it with source tag, takes usually the same props that the image attribute, the image tag does. So we are going to the source here and it will output a lazy loaded optimized image. Now, what accessibility issue does this introduce, Kyle?
Very good question. It actually doesn't introduce any issue, however, I really, really like this higher order component pattern that we're using here and I think we can use it to solve a big issue that we see on all websites. And that is what happens when no alt tag is put on an image. Take a look. So here's what happens when a screen reader focuses on an image that doesn't have an alt tag. Oh no!
Not only does the user not get helpful descriptive information about what this image represents, it actually provides quite a jarring experience. Assistive technologies announce an image's file name if no alt is produced. That means that a file name is going to be announced and it's quite jarring and it's very unhelpful, especially nowadays when we have a cache tag appended to file names with a whole bunch of random letters. We don't want this to be announced if there's no alt tag. A great way to overcome this is by of course always always adding an alt tag. Sometimes, as we mentioned, these sites are created dynamically. If we're pulling from a blog CMS like WordPress and maybe the content creator didn't add an alt, we should add a back up. We should add an empty string if no alt tag is able to be produced. What empty string will do is skip that image. Yes,  sadly the user is not going to get descriptive information about this image but they are not going to get that jarring experience of the file name being read which potentially could be many, many characters long. Here's how I propose we fix this issue.
I want to create my own higher order component for my JAMstack website that puts in an alt tag that's an empty string if no alt tag is provided. Here is the code. We're importing that static site generator  image, that higher order component that the static site generator gives us, and we're wrapping it in our own component.
And I want basically to take in the alt tag and set a default for it. Let's just pass this alt tag from our props and pass it into our static site generator's image. And of course, we want to default it to an empty string. If one of them exists, let's pass to an empty string. If no alt tag is given, at the very least it will give the alt -- won't be read the file name at this point. There's more attributes to be passed in. Let's grab the rest of the attributes and pass them down to the static site generator component. I'm going to call it rest of props and I'm using this flat to grab the rest of them. I'm going to -- into our static site generator's image component. Now we have a higher order component wrapping a higher order component that will output an HTML image. Kind of wild having it chained to higher order components. Let's observe what happens when we use this element, this image that we just created, on latte's website with photos that don't have an alt tag.
I'm highlighted on family.
There's an image under family, latte's family and below it there's another header called Kyle. The goal is when we go to the next element, Kyle will be read off and the file name of this image will not be read off. Everyone ready?
I'm crossing my fingers.
>> Kyle.
>> Hey!
It announced Kyle!
This is exactly what we wanted. We did not want this image file name to be read off. I think it's important to mention too that this paradigm is also used for images that are designs. Images that are used more for design purposes, that probably shouldn't be read off by the screen reader. So if you have maybe like an image that's a horizontal bar that divides two paragraphs, for example, you could also add an empty string as the alt tag. That's a good trick I like to use. I want to give kudos by the way to everyone who joined. Thank you so much for being such great pair programming partners with me and navigating through some of the improvements that we can make on all of our JAMstack sites. Again, certain site generators will give -- some will not give you accessibility issues, some will. If you do run into them, it's totally fine, it's nothing we can't fix. It's only not fine if we don't fix it, right?
Before we go, I do want to share a quick little story if that's okay with everyone. Tea time.
So on ru Paul's drag race, every few episodes the drag queens are asked to create their own wardrobe based on a certain theme. Ru Paul will be like category is summer swar a. These queens are amazing. They go into a work room, a room with a whole bunch of fabric and supplies and they grab as much fabric as they can that they think will make the look they're going for. It's so impressive because they take these fabrics and put them into a sewing machine and make the thing in their head a reality. And kudos to them because I don't know how to use a sewing machine. Also some of these queens -- you can tell sometimes when they take out the glue gun and start gluing fabrics together and sometimes even gluing the garment on themselves. What I think when I see that is that is so brilliant, good for them, they're using the resources the best of their ability. Sometimes the judges say that look is crafty and they use the word crafty in the way we say hacky. But again I say at least it works. Sometimes in the accessibility world what I've noticed is that the solutions aren't always going to be elegant. We might have problems that we might need to be a little bit crafty for. And you know what?
That is okay. We saw that visually hidden class, right?
We didn't use the CSS style for it. We had to do a whole bunch of CSS styles, some might call it  crafty, some might call it hacky. You know what?
That is totally fine, at least your website is more accessible and making this world a more open place for everyone. That's what matters. Not the elegant code, not the elegant solutions. Just keep trying. If you find an accessibility issue and you have a solution, go for it. That's all, everyone. Thank you so much. I will be here for questions. Also, again, if Tinder seems like a place you would like to work, feel free to send me an email. Also, I'm always open for questions. My DM, my in-box is always open. Feel free to send me a DM. My email is always open. Send me an email. I'm here too for everyone here live. Thank you everyone. Take it away, Brandy.
>> That was so awesome, Kyle!
Thank you so much for such a good session. Looking at the chat here it looks like everybody else really enjoyed it. We had some people chatting in and liking saying this was so well presented. This was such a great demo and that they always love a Kyle Boss presentation. Amazing job!
Everyone seems to love it. We do have a couple questions. The most up voted question is wondering if latte can make an appearance.
>> Yeah, he's right here.
Here he is.
>> Oh my goodness!
That honestly is one of the cutest puppies I've ever seen.
>> Thank you. He's such a sweetheart.
>> He made the attendees super happy. That was up voted 10 times. Thank you for bringing latte in.
>> absolutely.
>> Another popular question was asked what technologies do you recommend for a good JAMstack, what static site generator and what did you use for latte.dog.
>> For latte.dog I used nex JS. They're all different. The way they output static sites is unique to each individual one. They all have their pros and cons. All the ones that I mentioned, nex, inaction, Gatzby, 11ity and Redwood, those all have amazing Docs so it makes it really easy to adopt. But it really just depends. I know that's an answer that's not as satisfying. It just depends on your use case.
>> Great. Thank you.
>> Absolutely.
>> Another question just came in that said thank you for comparing crafty and hacky. What are common mistakes you see people make when overusing ARIA labels or what are some limits to The Crafty  solutions?
>> Absolutely. Thank you so much. I think I have been to a talk here at the conference and I forget who said it for the life of me. I'm so sorry I'm going to quote someone and not give them credit. Someone said that ARIA labels are great, but the best way to use ARIA attributes is to something along the lines of don't use them, use the HTML elements that are given to you. For example, of course we've heard of an example of people using a span with an on click and giving it the role equals button, why not use the button HTML element. That's the limit I would use. I'm sorry, there was a second part about limits. I forgot what the last part of the question was.
>> They asked or what are some limits to the crafty solutions?
>> Yeah, that's a good question. Whenever I introduce crafty solutions, you do want to make sure that you're not adding too much technical debt. Technical debt does add up over time. However, when it comes to accessibility, I don't think I've seen a time where a crafty solution is going to be turned down because at the end of the day being accessible is really important. Someone else at this conference said accessibility is a civil right and I totally agree with that. If you can do anything to make your site more accessible, go ahead and do it. I haven't seen a time yet where it was too crafty for me to say no.
>> Awesome. Another question, this one's a little more specific. They asked when you added the role equals alert to the route announcer component, did that HTML element then have two roles, alert and nav?
>> Did it have two roles, alert and nav?
It wasn't a nav. It was not a nav component. It was -- I'm sorry, nav element. It was a P element. Oh, can I ask back like is the idea like is it a nav role and a alert role?
I would say no. I would say that it's a single role and that role is alert because we're telling it, hey, this is an alert and screen readers will see that role equals alert and be like this is an alert. It's not going to mistake it for a nav. I hope I answered that accurately. If not, feel free to send me a DM and I'll try to clarify.
>> Awesome. I think we have time for one more. The original asker said exactly. So I think you answered it correctly.
>> Oh, perfect!
Thank you. Absolutely.
>> And then time for one more question.
>> Yeah.
>> This one says I worry about keeping my HTML semantic when creating small components since lots of static site generators wrap pieces or pages in DIVs. Any tips for ensuring your components are semantically written?
>> That is a very good question. It really depends on the static site generator because, yeah, like you mentioned, some of them are going to add  DIVs. They are going to wrap your whole site in a DIV with an ID. And I think your best bet would be to just download it, try it out and see if it introduces any accessibility issues because the answer is going to vary widely depending on what static site generator you're using.
>> Awesome. Well, we are just at time here. This will conclude our session for today. Thank you so  much, Kyle and for bringing in latte to join us. And thank you so much for everyone that has attended the session. I hope you all have a great night. Thank you so much!
>> Bye!
amazonv: (Default)
Micro Interactions, More like Micro Aggressions
Type: Breakout
Track: Design
For a Neurotypical person, an attention-grabbing, movement driven feature can be a friendly nudge alerting to a new enhancement or a welcomed hint that a chat is available if they have questions. Unfortunately for someone with attention-related disabilities, or Neurodivergent, that distraction can and often is the end of the road for a task. With the popularity of micro-interactions on the rise as mobile technology continues to grow, the barriers they create for people with attention-related and other cognitive disabilities rise along with it. In this talk Shell Little will discuss the difficult place we are at with these standard-less patterns that help some and block others using a variety of examples including in-the-wild patterns with a focus on mobile-based micro-interactions, all to answer the question ‘what is micro enough?’.
 
>> We're going to get started soon.  Thanks for your patience.  We'll get kicked off here shortly.
Hello to everyone that's already in the chat from all over the world.  That's really exciting.
Once again thank you, everyone, who is trickling in here.  We're going to get started in three minutes.  I'm Travis Marsca.  From Deque.  There are some questions about the availability of the slides.  Are those going to be available?
>> Yes.  I plan on making them available after the event.  I'm slow at getting slides out.  They will be.
>> No problem.  I wanted to be able to answer that.  We're about two minutes from start time.  Let's go ahead and go over a few things.  Again thanks, everyone, for joining.  My name is Travis.  I'll be your moderator.  We have Shell Little your speaker today.  Just a couple of housekeeping items to go over today's session will be recorded.  You'll have access to that as attendees as soon as it is available.  The slides once they are available to us and we make sure they are access will be up on the session page.  Just a little bit about the user interface that you are interacting with.  Just to the right of your video stream you'll see the Slido component for Q & A and chat.  A lot of you are already interacting in the chat.  For questions that you want us to get to at the end will be -- I strongly recommend the uploading feature so we can get an uploading feature to get an idea of what the most popular questions are.  We've got a lot of people here.  I'm sure there are going to be a ton of questions.  That will help me get the right questions asked.  If you would prefer to use captions, that should be depending on the size of your monitor below your video screen.  You have to scroll.  I encourage you to interact with that and adjust the font size and things like that to your liking.  I think that's about it.  Feel free to interact with each other in the chat.  If you have questions that you would like to be asked, use the Q & A portion of Slido.  There's also a couple of settings there if you want to filter by most popular or most recent based on your preference.  And right half past I'm going to hand it over to your speaker and go off camera.  Thanks, everyone, for joining.  Shell, take it away.
>> I think you are muted.
>> I can just give a talk to myself in the house.  Thanks.  If you are looking at microinteractions at the right place.  Without further ado, I know there were other talks that you could go to.  I know it is late on the east coast.  I appreciate that.  I want to note that.  I really do.  Let me start my timer.  And we're off.  Cool.  All right.  So when I give talks I typically like to have a road map.  This is setting expectations for the talk.  On the screen I have my road map.  The first bullet point is intro, microadepressions, number three is standards, and number four is microinteractions, and then the last can conclusion.  On the collide numbers, 1, 2, 3 are quite close together.  A little bit after is four and 50% of the road map is going to be for microinteractions.  It to set those expectations.  Let's get going with the introductions.  I'm Shell Little.  I'm very active on Twitter.  I don't check my LinkedIn.  I work for Wells Fargo for the retail side of the bank.  I work in corporate.  If you go out and get a credit card, you are not working with my stuff.  In my job I'm on the accessible user experience team where I'm in the design and mobile lead.  I have a lot of cognitive disability and evangelism feels weird.  I live in Seattle.  I'm partnered.  My kids all have tails.  If you know me, I have ADHD.  If you don't know -- it is who I am as a person.  On top of having ADHD I have a lot of other really words that go with how my rain works.  I have a large set of words to show how overwhelming to have all of different names.  I have a traumatic brain jury, chronic migraines, nerve damage, time blindness, brain fog.  There's a lot of stuff that goes when you have a cognitive disability.  It is all bun thing and a myriad of others.  I like to say I'm neurodivergent.  What does that mean?  It is not cognitive challenged.  I am not challenged by my brain.  I'm challenged by Sod oku.  It is not cognitive defects.  I didn't come off of the line defective.  Not special needs.  They are what everybody has and everybody needs.  Let's remove those.  Now to move on to defining the term that means having a brain that functions in is way that's different than the dominant societal standard of normal.  Normal is relative.  We have statistics.  This is going by a neurodivergent activist.  Whenever I give a talk I have to talk about spoon theory.  You really can't understand what it is like having a cognitive disability unless you understand what spoon theory is.  Let's jump in to talking about spoon theory.  To define it, if you haven't heard it before, it is a metaphor created by Christine used to describe the daily amount of mental or physical energy a person has and the toll of being disabled has on energy.  Basically your spoons are a measurement.  They can only hold a finite amount of stuff.  They are a universal tool.  Being a disabled person living in an ableist world it takes more spoons to exist.  Not only does it take more spoons to exist as an disabled American an ableist world, you also get less spoons back from sleep.  It is all about -- it is a balancing game.  That's what we do as disabled people is we balance energy.  We balance our spoons.  On the screen right now I have a chart.  I'm going to tell a quick story.  We're going to pretend that you have ten spoons.  The first line is for someone that's not disabled.  It takes one spoon to get out of the bed.  That takes one spoon.  They work all day.  Job is pretty hard.  It takes three spoons out of them.  Next transit back home another spoon.  When they get home at night, they have four spoons left to pay bills, make cool, grocery shop.  Pick up the kids.  When they rest, they are back to ten.  Now let's talk about somebody who has chronic pain.  Potentially nerve damage.  Morning routine showers suck and hurt when you have water running over parts of your body that have nerve damage, it hurts.  Getting up and getting move can be difficult.  Transit is difficult.  Someone bumps into them on the bus.  They are uncomfortable and jammed.  Feeling anxious.  Work it is hard for them to get food.  All of their co-worker's go out.  They are having a high-pain day and maybe they have to order food or go out of their way.  Transit home.  They had a rough day.  Instead of just taking transit home, they pay for a Lyft to go home.  To save spoons they had to spend money.  Next when they are home, they don't have any spoons left.  They have one left after the day.  Unfortunately they don't have spoons to pay bills or do laundry.  And they have to order out.  So again they have to spend more money to save spoons.  Because they had a high-pain day, they get 7 spoons when they rest.  Being disabled is expensive.  It is hard to take care of yourself and make sure you are giving yourself everything that you need.  Ability is a sliding scale.  What you can do in the morning and what you can do at night are little things.  I had two into graphics on the screen what you can do in the morning versus when you get home and you are drained after being bombarded with the cognitive strain and the lights and sounds and feels and the tastes of, you know, being outside and smelling the air.  It can be a lot for people with cognitive disabilities.  What you can do at the end of the day is quite different.  My barriers come from purposeful design.  My barriers come from the design decisions.  The biggest one for me is movement.  In the morning something that's bothersome is a poke.  At night it can feel like a slap.  I'm trying to pay bills.  In morning.  It is easier especially medication windows rather than at night.  To quote Jamie knight from a couple of hours ago, distraction is a process that builds on barriers such as memory and decision making.  Distractions can quickly stack into an unrecoverable barrier.  All righty.  Let's move into microaggressions.  When we have the barriers, we're being pulled and pushed.  It is draining us of spoons.  Microaggressions come into the play.  It is a statement, action, or incident regarded as indirect, subtle, or intentional discrimination regardless of intent.  Doesn't matter if you meant it or if you were trying to be nice.  Microaggressions is a common part these days.  When which is hard when you are part of the group of people.  I have a screen shot on it of a woman of color who is being just bit by mosquitoes.
The concept they push forward that I enjoy is microaggression is like mosquito bites.  It is not just one.  It is the fact that you get them all day.  It is totals up.  People grabbing at you and touching your wheelchair and grabbing your cane.  One is not the end of the world.  It is a systemic problem that builds until sometimes you explode.  In the disability space, you are so brave.  I'm just getting coffee.  I'm outside.  I didn't do anything brave.  I'm just ordered Starbucks.  You are too beautiful to be stuck in the wheelchair.  The person who delivers that believes it is a compliment.  It is one I get a lot.  They learn about my cognitive disabilities.  You are so articulate.  Thanks.  I have heard of friends who have disclosed and been told you are really smart for having cognitive disabilities.  Those kinds of comments are examples of verbal microaggressions.  They say you are welcome here and you are not understand here.  Who you are and what you represent is something that people don't get.  An example on the microaggression on the web is clubhouse.  There's an app called clubhouse.  People have been buzzing about it.  It is an audio-based app that has no room for any sort of the asistive technology in their minds for captioning or nothing for transcripts, and also the fonts are not adjustable.  So if you have low vision.  And according to clubhouse, it is done by design.  So they want to be elite and exclude on purpose.  You are not welcome here.  Another one microaggressions on the web when people use overlays that are not accessible.  You can not slap on Java script and call it accessible.  They went to the web site that's using overlay.  The screen reader is not working.  They are not welcome on the site.  Even though the person who got this is using an overlay thinks they are doing the right thing, it is still a microaggression.  I have screen shot just for a random sample.  For people with cognitive disabilities, the Internet can be a downright hostile place.  I know we talk about vestibular and people with seizures.  The Internet can be scary.  There's a type of microaggression that I would like to talk about.  So I gave a talk it was two years ago now.  2020 didn't exist.  But basically things that are to trick and manipulate users.  People with cognitive disabilities, especially people who are low on spoons are very susceptible and high risk.  It is considered a microadepression.  Hostile or hijacking patterns.  Pick me.  Pick me.  People with cognitive disabilities do fall prey to that kind of pattern.  Unavoidable motion and flashing content.  People with ADHD and attention-related and people with autism speak about how difficult the web can be because of those things.  Protection from cognitive microaggressions.  Read only mode.  Ad blocker.  Eric Bailey wrote a really great article for reader mode the button to meet.  It is a great one and has a ton of resources built into it.  People use things like ad blockers.  And so on the screen right now I have a screen shot.  We see her using an ad blocker.  I need an ad blocker to use the site.  Am I just not welcome here?  On the screen right now I have a tweet from a person saying sometimes I do want to turn off the ad blocker when a site that I like.  I want to support, usually I have to turn it back on.  The ads are too distracting.  I didn't have allocated space.  It slows everything down.  There's multiple reasons why people use ad blockers.  They are just not welcome on the sites.  Are they are doing on time?  Crushing it.  Sweet.  Next up we're going to talk about standards.  WCAG.  I have a love/hate.  If you know me personally, I have a lot of feelings.  I respect how far we've been able to come.  We need to go forward.  WCAG we only have a couple of standards.  A lot of them are AAA.  Cognitive disabilities are really complicated.  The biggest thing I like to tell people a fix for one cognitive disability is barrier for another.  And that's really true.  You can't do a one-size.  Fits all which is why inclusive design is so important.  Because you could be unintentionally creating barriers when you think you are fixing it for one user group.  Thinking holistically is important.  That's what standards are for.  They give you a testable solution or guidance.  It is really difficult to write standards for things that are so nebulous.  Looking at WCAG2.is my favorite.  I said I would get a tattoo of 2.2.2 on my body.  I guess I'm really overdue for that.  It is basically at the criterion that says moving stuff that starts automatically, last longer than five seconds, presented in parallel to other content has to have a way to be paused, stopped, or hidden.  Caveat being unless it is essential.  And the other animation related criterion is animation from interaction.  It is similar to pause, stop, hide.  Motion animation triggered by interaction can be disabled unless it is essential.  How relevant it is in the United States depending on your organization.  We always strive and push for AAA.  It is tough to test for.  When it comes to the standards there's just gaps.  That's just how it is.  Especially when -- anything that's essential to the function is exactly the rule.  But essential depends on who you ask.  If I'm trying to pay my bills, it is essential that I pay my bills.  If you ask the company they are paying bills, they might want me to sign up for a new service.  It is a new things, and they want new users.  For them me paying bills is a secondary.  They want me to sign up for the thing.  Next for the gaps can be paused.  Equals is it possible to do so.  Not you can continue and complete your task.  Can it be?  If that thing pops in your face and you have moving ads.  If you can close it, it passes.  Unfortunately with cognitive, it is the slap.  You are done.  There goes your train of thought and working member that you were holding on to that little bit of information in your hands gone.  Like I was saying dismissible animations and auto play.  You can dismiss them eventually.  I like to say where WCAG stops that's where the cognitive barriers start.  That a difficult place to be.  We don't have standards for microinteractions.  We bareically -- people barely respect pause, stop, hide as it is.  To ask and push us further to talk about microinteractions, I would really like for us to great at some point.  Which is why I wrote this talk.  All right.  We're at section four.  This is the bulk of the talk.  I'm going to jump into talking about microinteractions now.  Awesome.  Defining microinteractions.  It is any single task-based engagement with a device.  That's from Carrie Cousins.  It is a pretty, nice, simplified expression of what is microinteraction is.  Depending on who you ask, people have different opinions.  From UX design their definition is microinteractions are used to communicate meaningful feedback to users because a user has to constantly know what's happening when an action is performed.  So it is the dance between the user and the device or the -- or the computer.  When it comes to communication.  So from -- I never said their name out loud.  An end group, you know who I'm talking about.  I'm so sorry.  They had a good article about microinteractions and breaking it down.  There are microinteractions that are user based and microinteractions that are system-based.  Animations and things that happen when you interaction with the web site or web app or application.  It is either you are initiating them or the system is initiating them.  Basically they come in different forms.  Talking microinteractions in terms of the motion.  Next up is feedback and metaphor and navigation and signifier and attention grabbing and attention hijacking.  There are for things like communicating space changes and metaphors of navigation.  They are for the types of thing.
These are really important to people with cognitive disabilities.  I have sensory processing disorder.  I get tunnel vision.  When I need to do an action and the device is giving me proper feedback and it's done in a tasteful way, it really, really helps.  That's the tough thing.  What is too much and what is not enough for them.  Let's get going on breaking down the different uses of microinteractions.  First off feedback.  An animation is used to communication an action that has been recognized by the system.  It is feedback.  It lets you know the thing that you just did worked.  On the screen I have an interaction of what Spotify has on their like button.  You can like a song and it adds to the like play list.  For those of us who are sighted, keep focus on that.  The interaction, the heart when you toggle it off shakes.  When you toggle it back on, there's an animation of little hearts coming off of it and circles going outward.  It shows the user what be you just did worked.  It also has cute animations to say you liked it.  It is just a great example of what feedback is.  Next up is state change.  That's an important thing to communicate to the user.  It is used to communicate the action has been recognized by the system.  I forget to change the slide screen text.  Something has changed.  Something is different.  You need to be aware of it.  The example that I have on the screen right now is Twitter.  They have a blue button that's sticky on the bottom righthand of the application.  When you are on your feed it is a plus sign with a quill to write a Twitter.  When you toggle over to the messages, the button moves and switches over to the message icon.  Create a new message.  You can Twitter something to you are going to message someone.  To handle that, they have an action button.  I'm going to push play on that.  We'll check it out.  How it works is the button spins and toggles back and forth between the different settings and versions.  That's a state change.  We're going to move on.  Thank you.  Cool.  Spatial metaphors.  This is really important for people with cognitive disabilities as well.  Having animation to communicate the thing and mode is coming from the action button.  Those kinds of communications are really important.  On the screen right now I have just a menu from Google.  Just hitting a menu.  It is supplemental cues for the direction they are moving within a process.  Think about the phones when you swipe from left to right.  You have a cube effect.  It is just giving that feeling of transition.  I'm going to push play.  It is just a menu.  Like a hamburger menu expanding with animation.  Nothing too fancy.  It just goes out.  And it goes back in.  It is communicated the user the menu lives over here.  Which is important.  Awesome.  Next is signifier it teaches them how to act.  It shows them if you pull this, I'm going to do something, if you swipe this, I'm going to go away.  Thinking about Tinner and Bumble and you are able to swipe a card.  I have Apple music.  When you select the song it allows you to pull down and dismiss.  It gives the user that feedback to say I'm dismissible.  Last but not least attention hijacking.  This is a dark pattern.  Often times it is used for evil.  If you did not get Eric's talk today, it ties into the content for looking out for the dark patterns like attention hijacking.  It is a landing page of the video editing app.  I'm going to push play.  It is chaos.  Everything is moving.  There's an edit button that toggles.  It flips like a card over and has animation inside of it.  There's a crown that represents their premium shaking and moving.  Then at the -- they have some content sections below for creative videos.  They are all moving as well.  I'm going to push play.  It is pandemonium.  Getting on the page and trying to figure out what you are trying to do is difficult.  It is shining and moving and live edit.  It is so much.  That crown moving and bumping is like pick me.  Please pay me money.
Awesome.  Let's tie this into the cognitive accessibility part.  Cool.  Just checking time.  What makes a cognitively accessible microinteraction?  That's a great question.  After doing research, all I can say, it is complicated.  It is tough.  There are some things that you can look out for.  There are some points that you can takeaway when you are having to find a way to communicate to users that's good, because you are trying to communicate something important to them.  It is not too much.  So the points that I would like to talk about in the cognitive accessibility microinteraction stuff is relevance to task, size, location, speed, and intrusiveness.  Which is a word that I like.  So when it comes to relevant of task, asking yourself as a designer is the task that I'm asking at the user to do in the work flow or am I pulling them to the banners or to the rails on the side?  Is it relevant to what they are doing right then and there?  Is it something the user wants the system to know?  We have the new feature you'll probably never use.  We want you to know, because we worked really hard on it.  Those kinds of interactions can be jarring when you are trying to get something done.  When it comes to relevance of task, who determines what the task is when there are so many different things you can do.  Are you really going to pay your bills or check your credit score?  What are you trying to accomplish?  I had the thing that if I could look at.  Your task has changed.  Remembering you are not your user.  Access lab has a really great resource about tweets and stuff.  I snagged a couple from them.  One of them says assuming ADHD counts, it is hard to locate content or overly busy pages and animations are a nightmare of distraction.  In terms of distraction is it relevant to flow and task?  Is it user initiated or system initiated?  That changes a lot.  If it is something the system is doing rather than the user doing it, it changes the feeling of the interaction.  System initiated stuff, you are being pulled.  You are being yanked.  You are being called.  There's a bell ringing on the corner.  You are being pulled away.  You don't know where it is.  On the screen it has a channel point where you are able to watch and support a streamer and rack up channel points.  The screen box next to the channel box shakes until you act on it.  You have to click it and select it in order to claim your points.  It passes pause, stop, hide, because you have doing something with it.  What if you don't want to collect them?  I have another tweet on the screen.  Anything that moves without me initiating that movement is so distracting.  I'll be unable to read what I same to do on the site.  Basically the attention grabbing is to effective I can't use the site.  Is any of the stuff that happened relevant to your task at hand?  I highly doubt it.  Another example for wondered is the system applying to the action or you just being on the page?  I have a really bad screen shot.  I was angry.  I was on Jera.  This is a menu on the side.  They have a purple button or badge.  It has a ring around it that pulses.  It goes in and out.  I could not dismiss it.  I was trying to work on the ticket that was critical.  I've got the thing buzzing over here.  I really don't care about custom channels.  I'm trying to answer the ticket.  By moving it pulled the distraction and made it harder.  ADHD if there's a subtle animation running, I cannot focus.  Biggest offender is blog.intercom.com.  This is another I snagged.  Those kind of concepts.  Is it interaction something to help the user or pulling them away for something else.  That thing you were working on six weeks ago it is overdue or notifications, toast, things like that.  Not everybody wants those.  Next up is size.  Animation shouldn't take up more than one third of the screen size.  On the screen right now I have a lovely example of the restaurant web site.  It is not one third of the page.  It is everywhere.  This can be so jarring and it can make you ill.  I got dizzy taking the screen shot myself.  It wasn't great.  Animations cannot take up that much of the screen.  The thing is animations add up.  To size.  If you want to look for really bad experiences, go on mobile and look up any recipe.  Recipe sites are riddled with madness.  The screen shot has a banner that has pancakes and fluffy Greek yogurt.  Next is an ad for the car I don't want to drive.  You have the add choice maybe if you click that it will show the X button.  Maybe it won't.  Then there's part of the article.  Above is a pop-up add for makeup and beslow the Verizon.  Every single thing on there moving.  At the best part is on the right hand is to heart button to save it.  A heart button and you have to see it is updating.  Hearts shoot out.  It is a lot.  This web site is basically useless at this point.  Next up is location.  So how far are you from pulling the user from their task?  On the screen right now I have an add to cart and shopping cart.  I'm going to switch to the next screen which is animated.  When you -- in the example when you select add to cart the button shrinks and jumps over into the cart.  And badge comes up.  This is an example of right there with the user.  They are doing it.  It is showing them the thing that you just did has been simply add to the cart.  I've seen ones that go up and across the screen.  If you are adding 30 things to the cart, maybe the animation is not so great.  In general things like this that are in your proximity and work flow can be beneficial to users.  Next up is in terms of location is the animation and context with the content.  Is it a full overlay forcing the user to watch the screen and add.  It is not really in context.  It is annoying and jarring.  It takes you away from your task.  If you were holding on to the number or something, that's gone.  It is not in content or in parallel with the content.  So, you know, if you have to have something moving, out of context is way better.  Next is speed.  When it comes to showing, it is too fast.  The button pressed that changes state.  If the user moves too fast, they won't understand.  We had UXR for doing authentication processes.  We got feedback from the users the authentication was too fast.  They didn't believe it was working.  Because of that we slowed it down a little bit.  So users could think.  It is really thinking about logging us in.  It is really checking that security.  Because it moved too fast they were unable to see the load, and they didn't believe it worked.  On the flip side they will use that connection you are showing them with the microinteractions.  If you push the button to expand something and it is over ten seconds, user might forget they pressed that button or which one?  I can't remember.  In general the rule for hydrointeractions is typically one second.  300 or 400 milliseconds to give an instantaneous response.  This thing you did worked.  I'm loading the page.  One second still gives them a seamless experience.  There's a sense of delay.  The thing is thinking.  Ten seconds versus what I already would feel like five seconds.  They are praying to the Gods it is going to work and not going to crash and go through.  Studies have shown that anything plus ten seconds or anything user memory is way too long.  Keep that in mind.  Last but not least on the section.  I know I'm running short on time is intrusiveness.  Going back to the example of the switch thing.  Is it endless until the user interactions?  How easy is it dismissed?  If you have to be a hacker to put your hood up and sunglasses on.  I don't know.  Sometimes they have a hammer in their hand of people who are hacking.  You shouldn't have to be a stock photo hacker to figure out how to get your animation to stop moving.  Intrusiveness is how much effort?  Anything that interferes with my ability to see at the high contrast and highlights as I read makes the page harder to read.  A lot of custom UI widgets seem to interfere with this.  They are hovering over things and moving and popping.  Imagine if there are links in the text.  When they hover over the links, they are moving and popping.  Maybe it looks cool.  For this person that's a barrier.  On the screen right now I have an example of -- I think it is Word Press.  It has a save function.  Auto saves.  And it auto saves.  And it auto saves.  So you are constantly seeing the save drafts and then the second you stop typing the cloud icon toggles.  It is moving so I can't stop it.  There's a flashing animation of the auto saving.  It says saving and then flashes and says saved.  It does it over and over and over.  A user has no way to stop that animation.  Tweet on the screen says I'm so glad you can hide media preview on Twitter iOS app.  As a person showing ADHD symptoms, it is a lot less distracting.  Twitter has it, Pinterest has it, and giving them that option to not have auto play.  For settings this is the recommendation slide.  This is a big one.  Use logic.  Sometimes stopping animation is good.  Other times simple things like turning off auto play is giving you the setting to do that outside of the preferred motion on the computer level on your site like Twitter or Instagram -- not Instagram, like Pinterest.  In the reduced motion sense fading is so much less intrusive than sliding in.  Things like being able to turn off animation on hover is really important.  Limit the user required dismissal of animations.  Those better be tied to the cuff.  Allow ad blockers.  We have to stop.  We're in a war right now between how annoying can we make our ads and how much people will download ad blockers.  It is just spinning.  Let me run through my last couple of conclusion slides.  Listen to, hire, and ask disabled people.  Shouldn't be hard.  But it is really is these day.  Nothing about us without us.  Nothing should be done without asking and bringing people in and paying them for their time.  Ability is a sliding scale.  Design with that in mind.  What bugs them and bothers them at 10 could like me bothers them Google did a thing and I couldn't e-mail anybody.  Ability changes.  Microadepressions exist on the web and they tell disabled users they are not welcome.  Takeaway number four, standards are never going to be enough.  They are just the start.  Let's take the standards that we have apply them where we can and push them further.  Second to last microinteractions and animations add a lot of accessibility for cognitive disabilities.  We're talking about pairing things, complex interactions, pushing buttons and getting that live feedback right there knowing what I did worked.  Those kinds of interactions have a lot of plus for cognitive disabilities.  On the flip side the microinteractions if abused can create barriers with users of cognitive disables.  I have one more slide.  Surprise.  Number seven.  Give your users settings.  Give them settings.  They know what they need better than anybody else.  Give them the ability to decide how they want to have receive notifications.  If they have toast, they don't want to see that right now.  They toggle that off.  Their badge still updates.  Imagine if Twitter hit you with a toast notification every time.  How overwhelming.  That's it for me.  That's it for me.  Thank you for your time.  I'm a little over.  Thank you for your time.  Thank you.
>> Thank you so much.  You did great.  We've got eight or so minutes left to take some questions.  Let's jump into that.
>> Yeah.  Sure.
>> Thanks for everybody that's been participating and submitting questions and uploading them, et cetera.  We'll get right to it.  Here's one that says what advice would you give to someone with the cognitive disability when they feel invalidated bit fact that people don't perceive their differences or don't believe them because they use all of the spoons putting up a socially acceptable front?
>> Masking is exhausting.  I feel this person.  It is tough.  Empathy -- the hardest part about being in the marginalized community is unfortunately because of the systems that's been built around us based off of racism and sexism and ableism, we are forced to be the teachers.
It is not our job to teach people to be inclusive.  Unfortunately that is where we get pigeon holed into.
>> More spoons.
>> Yeah.  More spoons basically.  What my recommendation would be is lean on the disability community.  On Twitter -- I don't know if they are a Twitter user.  There's a fantastic, robust, brilliant disability community that has resources and articles that explain.  Black girl lost keys has a fantastic blog.  It talks about how difficult it is.  Things like rejection dysphoria can be enough to end your day.  See what they have to save spoons.
>> Great.  Thanks, Shell.  Here's one that I was reading through earlier.  I think it is about session timeouts.  Do you have any strategies for conveying countdown it is or eminent timeouts that don't hijack a users focus or create unnecessary stress assuming there's some security requirement that requires the app to that have type of timeout?
>> Yeah.  I'm so against timers.  I hate them so much.  I have on my screen right now the time and I have the seconds hidden.  There are very few instances where users are going to benefit from seconds.  Ordinariered tickets and stock prices.  Those things change rapidly.  When we're talking about timeouts giving if the user the warning and you have five minutes rather than four minutes.  A giant ass timer on the screen.  Just do away with seconds.  You've increased the accessment for cognitive a ton.
>> Don't introduce anxiety.  I'm going to break my uploading rule.  This just crept in.  Do you have any recommendations for who to follow on Twitter to learn more about cognitive disabilities?  Aside from this one right here at the bottom of our screen.
>> I typically have a ton of people to recommend.
>> You haven't submitted your slides yet.
>> I'm going to tweet out a list.
>> That was anonymous.  Start by following Shell.  Sometimes I completely miss important conveyed by the microinteractions.
It is called bright girl blindness.  It is eye tracking software.  Users don't see them anymore, because we've learned to block them out.  Same with carousels.  Time and time again nobody interactions and nobody cares about carousels.
>> It is a bunch of people fighting.
>> Different spaces.  All I'm saying is there's research out there that shows people don't look at those.  I think that is a conversation that they don't want to have anyway.  Inviting them to realize that there are users who want -- who don't mind ads and have to block them because they move.  It is a downward spiral.  The ads get more aggressive and they get even more ad blockers and they get more aggressive.  There's a lot of great resources.  Niemann Marcus to look into the spiral and know the non-moving ads are more likely because people aren't block them.
>> Interesting.  Unfortunately we're at time.  Thank you, everybody, so much.  Thank you, Shell.  Again the slides will be made available.  I suggest everybody follow Shell on Twitter.  She tweets a lot of cool stuff.  You promised that list of people to follow.
>> I wrote it down.  Thank you so much for attending.  I appreciate your time and attention.  I hope everybody has a great rest of the day.  I'll let you continue the signout.
>> That's all.  The AV guys will tell us when we can go off air.
>> All right.
amazonv: (Default)
Reusable Widgets That Work!
Type: Breakout
Track: Development
Vue.js is an amazing framework that allows you to quickly build reusable components. We can leverage this to build accessible reusable widgets with the help of ARIA (Accessible Rich Internet Application). Using ARIA roles and attributes, we can improve the accessibility of certain elements by providing additional semantics. In this talk, we will go over how to follow the specifications and build accessible and reusable tabs, accordions, toggle buttons, and modal dialogs that work for everyone!
  
>> If you want to put where you're joining us from in the chat, that would be awesome and I'll share as we go.
>> We have people joining us from all over the world. A few from Detroit, that's where I'm near, Seattle, Boston, Nashville, Los Angeles, Surry UK. Thanks everybody for joining.
>> Actually, let me open up that chat on my other wi
>> Hello to everyone who's just joining. We are going to give it a couple more minutes so we start on time. If you're looking for reusable widgets that work with Maria Lamardo, you are in the right spot.
Some folks are joining us from Seattle, San Francisco, Germany, night in Germany. Thanks for joining. Pittsburgh, Cleveland, awesome.
>> Nice.
>> We'll just give it another minute here.
>> All righty, it is 30 minutes past the hour. Welcome everybody to reusable widgets that work with Maria Lamardo. My name is Grace Kirkly from the Deque team and it is my pleasure to be moderating this session with Maria. Before we get started I'm going to go over a couple of housekeeping notes. If you've attended the other sessions these will probably sound familiar but I'm going to go over them anyway. The session is being recorded and that recording will be hosted on demand to view later after the session has completed when you come back to the same presentation page.
Live captions are available below the video window on the screen. And Maria's slides will be available most likely in a day or two on the same presentation page as well.
So finally, we will save the last 10 minutes or so of the session for Q&A. And if you have any questions during Maria's presentation please feel free to put them in the Q&A module. You don't have to wait until that last 10 minutes. And we will get to as many as we can at the end. One other thing, I also recommend sorting your chat by recent, so new comments as they come in will scroll to the top automatically. With that it is my pleasure to introduce Maria for her presentation.
>> Thank you so much. Hello, everyone, my name is Maria Lamardo. I am a digital design accessibility manager at CVS health. Today I'm here to talk to you about reusable widgets that work and I'll be doing this with Vue JS. I'll be covering modals, toggles, accordions and tabs. Kind of getting started, looking at modals, and if we go ahead and take a look at the modal why ARIA practices, we can see this gives us a lot of details about what the modal should look like, what should it behave and a lot of the technical considerations we have to keep in mind. And sometimes this can be a little bit overwhelming for some people to read through, especially when you have a lot of other widgets to consider. So I've broken this down to a more consumable piece. Here we have the design considerations for modals. We want to make sure that all your modals have a button that closes the  dialogue. We also want to make sure that you're obscuring the content outside of this dialogue with some visual styling. So sometimes you'll see that grayed out background. That grayed out background should prevent users from interacting with any content outside the dialogue. For example, if you have a modal dialogue open you shouldn't be able to interact with elements that are behind that modal or even tab to those. So not only for mouse but also you have to keep in mind keyboard is also prevented from accessing that content. And there's also a couple of things that they mention in the guidelines. Of they also talk about how focus should be handled. There's a couple of things to watch out here. When a modal opens, focus can be set to a couple of places. Number one, the most preferably is for it to be moved into the first focusable element inside the dialogue. If there's no focusable element or if it makes more sense to, you should move it to any static element on top of the dialogue. This will ensure that your content is easy to read and nothing is out of view. For example, let's say your first focusable element is scroll down and kind of take some content out of view. If you do that, users might lose some of the content. You want to make sure that all the content remains in view. You also want to make sure you're moving focus into something that is not a destructive action. For example, let's say this modal is to delete a bank account and it opens and it's like are you sure you want to delete this bank account. Your focus shouldn't be on the confirm button right away because users might mistakenly press it and delete their bank account and there might not be a way to retrieve it. Also, you might want to move focus into the most used element. For example, if the button is just continue, if it's an informational dialogue, then that makes sense also.
Let's talk a little bit about what are the interactions that we should expect for when the modal closes. When you close the dialogue, we want to make sure that the focus moves back to the element that opened the dialogue or if that's no longer available, then we want to make sure that the focus moves to an element that has a logical workflow. So maybe the next step in that process.
Or if reopening that dialogue is not really common, so you might want to move it to another element.
Now, looking at the keyboard interactions that are expected, we expect tab to move focus to the next tabbable element inside the modal. And if you're on the last element, it should loop you around to the first element. If you press shift tab it should move you to the previous tabbable element and loop you around the modal as well. This ensures that you are not accessing any content behind that modal with your keyboard as well. We also want to make sure that your escape key will close off that dialogue. Let's take a look at some of the technical considerations that they list. So I'm going to go back to the site. These can be found -- we've talked about keyboard interactions and some of the details there, and these technical considerations are going to be found in this section here and these are the why ARIA rules states and properties on the why practices. The dialogue container must have a role of dialogue for that container. Then it must also -- so you could see that here, role of dialogue. On the right you could see some of the code. We also want ARIA modal equals true. That will ensure that some technology will be prevented from going behind that modal or outside that modal. Then we also want to make sure that we have an ARIA labeled by or ARIA label if ARIA labeled by is not feasible. If you have the content that's inside the dialogue can provide a description, you could also set the role of dialogue to have an ARIA described by and pair it to that description. All elements that are required to operate the dialogue should be decedents of this container that has the role of dialogue. Let's take a look at some examples. Here in the modal dialogue example, this is what it looks like. This is what a modal should behave. I'm going to tab to it. And I actually have this very helpful indicator for where my focus is so it's going to be green for me. I'm going to tab to it, enter. And you can see this opens up a modal. And right now I have it set to focus on the outer dif and I can tab through and you can see I can't move to content behind that modal. And if I shift tab, you can see it kind of moves backwards. And my focus is not allowing me to get to content outside of that. If I press escape key, it closes that dialogue and my focus returns to the button that opened it. Let's take a look at the code for this. I'm using Vue for this. What I've done is set the modal here. And it will only display if the modal is open felt actually, let me open the home page. So this one, examples. So you can see here that the modal is this component here. It's actually opened through this button and it's toggled with this can function here. And once that is true, then the modal will display. When this modal displays you can see the role of dialogue we've called out, the ARIA modal and this ARIA labeled by that calls back to the heading. One thing that I want to note is inside Vue, because this is kind of moving from one component to another, we cannot call focus into a ref that's in another component. In order for focus to work inside a new component I've created a directive for V focus. If you go to directives, you can see these directives will look for, as soon as this element is mounted, then it's going to focus on that element specifically. So as soon as this component is mounted on the page, it's going to focus on this outer DIV that I've selected. Another thing that's a little bit different for this modal is right now in order to keep the focus trapped inside that modal, I've also added these focus guards. So what this will do is when you're on the first element on the page and you tab back, so it's actually going to be invisible but it's going to touch this DIV and this is going to call this method which is going to move the focus to the last element on the page. Then we have a very similar function that will do the same when you're on the last element on the page and then you hit that focus guard and it's going to go to the first element on the page. This is one way of handling that focus, kind of like that focus trap.
Again, I've created an event listener for the escape down key. Whenever that key is called, then we are going to close the modal.
Now moving into how we can create this to be reusable. There's a couple of things that I did here. If you look at this other example here, so we have a reusable component. Let me open it on the page. All of these examples I have them both in code pen so you can look at that, but I also hosted them on this link which you also have right here.
On this page you can see that we have the examples that are reusable widgets and these are in the reusable widgets. You can see they pretty much behave the exact same and this has a little bit of different content. Let's take a look at how that happened. Again, the exact same functionality as we've seen before, but this time we're importing this component, so we just import it the same way we did before, and then we're passing this template with a V slot for header, that way we're very specific about where that header should live within our reusable component and the same will happen for the button because the button does have to be the last element on the modal. That way the focus trap will function correctly.
If we look at the dialogue widget, and this one is the reusable one, we can see that everything looks the same, so we have the role of dialogue, ARIA modal, focus, indicator and this is where things change a little bit. Here I have this slot name for the header. So I have this fall back for title if there's not one available. And then here is where the rest of the content is going to be coming in. And then of course I allowed this slot to be for the last button. That way I can keep the functionality that I've created on the outside for this.
So then anytime that I want to create another modal, all I have to do is reuse this widget, add a title, whatever content I want and then provide a last actionable item for that button. You can see I have pulled in all the modal data from our data down here. So this is where I'm kind of building all the reusable components. If you want, you could build different modals by adding it to this content. Moving into toggle buttons. Let's take a look at the documentation for toggle buttons. Actually, it's not called out like this, but it is inside of a button so you can see here that a button can have multiple different types. So you can see that a button is a widget that enables to trigger an action or event. And then through ARIA we can actually support two additional types. We can have toggle buttons which I'll be talking about today, or menu buttons. Toggle buttons have some defined considerations. So first it has two states so it can either be turned on or off, meaning that it can be pressed or not pressed. And you want to be able to tell assistive technologies about that toggle with the ARIA pressed attribute. So we also want to make sure that as you're changing this attribute, so you toggle from true and false, you're not also changing any visible label that is on that button. So you're either changing the ARIA press attribute or changing the label. You don't want to do both.
Let's talk a little bit about how we want to handle the focus for toggle buttons. There's four different ways that you can go this.
Number one, if -- dismiss the current context, then the focus should remain inside the button. If this button then opens or closes a modal dialogue, then you should follow those standards for how focus is handled for modal dialogue. If the button indicates a context change, then the focus should move to the starting point of that action.
If the focus is activated with a shortcut key, then the focus should remain in the context from which the shortcut key was activated.
And then the keyboard functionality for this is actually pretty simple. We want to make sure that both enter and space key activate that button. Since it is a button, there's nothing else that I need to add  here. Here are the technical considerations for this. So we wanted to make sure it has a role of button. We want to make sure the button has an accessible name. That if there is a description available that we're adding it with ARIA described by. And if the button action is unavailable, we could also set that to ARIA disabled. And since we are using a toggle button we want to make sure we're adding an ARIA pressed state. You can see on the example on the right I have a button with ARIA pressed false and a mute button. Let's take a look at some of the examples.
So here I have two types of toggles, right?
I'm going to go through and then I have a mute. So if I press it, you can see it kind of changes it. In fact I'm going to do it on this one. It has better icons. So you can see that I was able to toggle it. If I inspected -- let me zoom this in. If I inspect this element then we could see that as I press it then that ARIA pressed on the right here is kind of switching back from true to false. And that's what we want to see. And you can also see -- I'm in the Chrome DevTools inside the accessibility tab, then you can see that the inside the computer properties the name for this element is still mute. Even if I'm toggling it on and you can see the ARIA pressed inside the attributes is switching, you can see that the accessible name for the element remains the same. That's what we want to see. The same thing for this one. This is if I have a password field and I want to toggle the disability, we can also toggle with -- keep looking at the accessibility tab for the accessibility tree, the computer properties and the ARIA attributes, you can see that it kind of behaves similarly -- let me just move into the button. But you can see that it behaves similarly where the label remains the same and then the ARIA attribute changes.
So let's take a look at the code for how this happened. So if we're looking at toggle and I'm going to stay in the mute button, this one's pretty straightforward. We have this mute that toggles on and then the only thing that really changes here is also the image. So we've combined the source, and then if it's muted we can change the icon with it as well. Even though the label might not change, we can change the icon and it is a hidden icon so it's not going to announce a difference. And then when ARIA pressed is bindd to the value of muted, when it toggles on and off it should update. This is pretty straightforward. When looking at it from a reusable standpoint, you can see this one's pretty similar, nothing much changed. The only thing I've done is added a slot for any content that could be added. If somebody wants to add a word, they can do that. I've made it so you can pass through any props for any icons that are needed. If I take a look at the reusable components one, you can see that in my toggle button I've actually included the text for that toggle and then I've pushed in the toggle icons that I have on this component. So the icons don't live inside the reusable component, but the component that is using it. So if I'm going to scroll down to the data, we can see that my toggle has that text I'm pulling in and both icons that I actually have in my assets.
So if you're pulling it from your assets, you do need that require. If not you can use the string form for a link. So again, whenever you want to reuse any toggles, you could just do it like this, provide icons if you want and provide text if you want.
So moving on to accordions. Let's take a look at the documentation for accordions. So this one seems pretty straightforward. We have some functionality. We have some of the accordions and what they include. They give examples, keyboard interaction and technical considerations. Let's take a look at how I've short handed that. The design considerations for accordions, vertically stacked set of interactive headings that contain a title, content snippet or thumbnail a section of content. An accord -- function as the label for the thumbnail and that accordion panel is going to hold all the content of that section.
So let's take a look at the keyboard interaction for this. There's actually quite a bit but as you can see from this table, a lot of it is optional. So some of the things that we must have are that the enter or space key can either expand the associated collapsed panel, so if I am on an accordion and I have focus on it and press enter or space, that should expand the panel so I can see the content that is corresponding to that accordion. And if I click on it again, it should be able to collapse that content. If you hit tab then you should move to the next focusable  element. And if you hit shift tab you should move to the previous focusable element so you can move through all of the accordions. And all of the remaining ones are optionals. You can have arrow key which can move focus from the accordion header to the next accordion header and eventually looping back if you're on the last one. The same thing for the up arrow key so you're moving up from the accordion headers and if you're on the first one you're going to loop back  down. The home and end keys are also optionals and the home button can take you to the first accordion and the end button can take you to the last accordion.
Let's take a look at some of the technical considerations for this. So each accordion is a  header, right?
So they are wrapped in a heading. Then it also has ARIA controls, which has the -- which is paired to the corresponding accordion panel. So you can see here on the example here we have accordion 1 and it has ARIA controls for Section 1 and you can see there's a region that has an ID of section 1 that has that content for the first accordion. So then we could just set that ARIA control to that ID and then pair that.
And then we also want to make sure that if it is not collapsing is not permitted that we are adding ARIA disabled. And optionally we can have ARIA labeled by for each panel content that corresponds to the  header. For example, in this content here, I have ARIA labeled by accordion 1 ID, which corresponds to the ID of that button header that opens that panel.
One call out here. Because the content panels have a role of region, we want to make sure that we are not adding an ARIA labeled by if we have too many because that will actually add way too many landmarks.
So let's take a look at some of the examples  here.
Let's look at an accordion. Here's an example of the accordion. If I'm tabbing through, you can see that I can toggle them with my space or enter and you can see I'm actually able to expand all of them at once. There's another way to do this where as you're opening one accordion all of the rest of the  accordions will collapse. Let's take a look at how this was built. Looking at the accordion, this is not the reusable component, just the accordion. Let's take a look at what we have here. We have a heading. Then we have the ARIA expanded, which can be true or false and I'm bringing that in from my data. Then I'm also pairing the ARIA controls. And since I'm looping through these, I'm just giving the ARIA control the value of the index and the content and that's also going to be the same for when I loop through all of the content for region of that panel.
And then you can see that when I click here, then I have an update accordion. So let's go ahead and look at that function. So I'm actually checking for multiple. So by these I mean that are we allowing multiple accordions to be opened at once. If so, then we are going to just toggle that function that expanded. Else, if we're only allowing for one toggle at a time, we want to make sure we are collapsing all of them and setting that one to true. Or closing all of them, right?
Okay. On top of that, I've also added these icons so that we toggle, when it's open then we have the minus sign, and when it's collapsed, we have the plus sign that gives that visual indication that we can expand it.
So let's take a look at how this would function as a reusable component.
So I've actually left it pretty much the same. Let me actually show you how those are used. An example, the first one I have now, this is how I used it. In the reusable components, I just imported the accordions widget and actually just passed in my accordions. My accordion data structure looks somehow like this. So it has an ID. I'm also calling out whether this specific accordion's expanded, we have the heading, the content, and I've also added a multiple. So that last pa ren that I'm passing so if we allow for multiple accordions to be open at once, then this data will tell me.
You can see that I am just passing this through as a prop. So let's go to the accordion widget and this is a reusable one. So let me go down really quick to the props because the top looks pretty similar. What I'm doing is bringing this in as props, and then I am also kind of creating a copy of these as updated accordions.
And this is because I cannot mutate the  accordions as they come in, so to handle the keyboard functionality and the focus state, I do need to mutate this. But because this is a prop, I'm actually going to just mutate the computed data. And since this is not a change that I need to really keep track of, it's just kind of visual as it happens, then it's okay that I'm not omitting that functionality up to the parent. You can see I'm doing all of this with the updated accordions, I'm looping through all the updated accordions inside the reusable components. Let's take a look at what that looks like.
Looks like this went down. Okay. So these are the accordions. And in fact, let me set it -- let me actually run this and make some changes. I do want to show you what happens when I have reusable components. And I actually have to make that change. Here are accordions that called this in and they're all not allowing that multiple, then this is what's going to happen.
So reusable components. So you could see that as I open one, the rest will collapse and the same will happen with my keyboard.
Now let's take a look at what happens if I set all of these to true. So if multiple is allowed, then I'm able to open all of them and none of them will collapse as I try to expand the next one.
Now, let's take a look at tabs.
So let's take a look at the documentation for tabs.
So again, it's pretty similar to the other ones. They give you the design considerations, they provide examples, they provide the keyboard functionality. And the technical considerations at the bottom.
So this is how I've narrowed it down. So tabs are a layer of sections of contents known as tab panels. They display one panel of content at a time. There are three pieces of this. We have the tab list which contain the set of the tab elements. Then we also have the tab element which acts as the label for the corresponding panel, so these are like the titles. And then the tab panel is the element that holds all of the content associated with that tab. Now, there are two types of implementation for this. You can have automatic tabs in which as you go through the tabs, the content will load and open for that tab panel. Or you could have it so that you can manually activate those tabs.
The recommendation is to have the tabs automatically activate. As long as it doesn't cause noticeable latency. If that content is easy to load and is quick or maybe you pre-loaded it, then definitely allow your tabs to activate automatically.
And then here is the keyboard interaction for these. So tabbing into the tabs will place the focus into the active tab. And then you're actually going to navigate through your tabs using your arrow keys. If you have horizontal tabs, you're going to navigate with your left and right arrow keys. Your right arrow key is going to move focus to the next tab and left is going to move focus to the previous tab. If you have vertical tabs, the up arrow is going to go to the previous tab and the down arrow is going to go to the next tab. And if you have the manually activated tabs, then you're going to have to press space or enter to expand those to show that content.
So this is where the space and enter can activate tab if it's not automatically happening on focus.
Also, if there is an associated pop up menu, then this should open with shift F10 when focus is on that specific tab.
And all of these are optional keyboard interactions for tabs. So you could have home, which moves focus to the first tabs, which optionally, depending on your implementation, should automatically activate it. Then the end key should move focus to the last tab, which again, depending on your implementation, should automatically activate it. And another optional keyboard functionality is the delete key, which, if it is allowed, then it will close the current tab and its associated tab panel.
So looking at the technical considerations for this, and I know this one is -- the code on the right is a little bit small but I'll move to VS code in a second. So the role of tab lists will hold a set of tabs and it should have an ARIA labeled by or ARIA label if an ARIA labeled by is not possible. We can see here on the right I have this DIV that has a role of tab list and has an ARIA label of tabs example and then it holds all of the tabs that are available. These buttons that I have here, they have a role of tab. And then the rules for that is that it should have the ARIA controls that matches the content for the panel. Then it should also have ARIA selected set to true. If it's selected and active.
And it should have ARIA has [Away from mic] moving to the panels, the element that hold the content for each of those tabs, she is should have a role of tab panel. They should also have an ARIA labeled by that is paired to the associated tab or and set ARIA orientation to either vertical or horizontal and if you're doing horizontal, that's the default value for this.
So let's take a look at some examples.
So here is an example of a tab. So right now my focus is on the first tab and the first tab is activated.
And if I use my arrow keys, you can see I'm now moving through them. If I'm at the last one and I press my arrow key again, it's going to loop me to the first one. The same thing will happen if I'm moving with the left arrow keys. I'm on tab one, tab three, tab two, tab one. You can see that the corresponding content is loading depending on which tab is active.
Now, this, let me show you what this looks like for just the regular component. Again, we have this DIV that is holding all of our tabs that has the role of tab list. And I've just given it ARIA label of tab list for now. All of my tabs have the tab title down here, they should all have the role of tab and the ARIA selected attribute should depend on whether that is the selected tab or not.
Then we also can see that we have the ARIA controls, which will match that tab ID for the panel. And then one thing that I want to call out is that the tab indexing should also change as you kind of update all of these so that because these are -- because you only want to focus on them when you're kind of moving your arrow keys or as you tab to the component itself, you want to make sure that you're handling how that's happening. So you can use tab index of -one to programmatically call focus to those elements. And then I've also made it so we can update the tab. The same with when I press my right and left arrow keys. And again, depending on your implementation, you're going to want to add up and down keyboard functionality as well. And then we have the tab content here so it has the role of tab panel and then that corresponding ID. And then I've made it so that I've paired the ARIA label to that tab title. Let's quickly take a look at how this was implemented with the tabs. This is pretty similar to the one that I showed for the accordions. And if we look at the reusable one, if I look at -- you can kind of see the difference between the accordions and the tabs. All I've done is the same thing. I'm just passing those tabs through. And this is what my tabs look like. My tabs will have an ID, whether it is selected or not, so only one of them should be selected at a time. Then we have the title and the content. If I wanted to create more tabs, if I wanted 15 tabs, I would create objects here and that should dynamically update. If you could see here, we have these tab widgets. If you go down you can see where I've done the same thing where I'm pulling in the prop using the updated prospect -- updated tabs. And then I'm actually looping through that updated prop.
I mean the updated computer property that is pulling in that prop data. And again, we don't really want to keep track of these changes like  application-wide so it's okay if we toss that on render.
So that's all I have for you all today. So here are some resources that you can take a look at. We have some of the WAI ARIA practices. We have the Web Content Accessibility Guidelines and the GitHub for this code. I've provided links to all of the code pens for this if anybody wants to play around with that, that's also available.
Does anybody have any questions?
>> All right. Nice work, Maria. We do have a handful of questions for you here. So this one is from Jimmie. He asks when doing training at a previous job, they emphasized that the closed button should be focused first if possible to allow the visitor to reverse the modal action versus having to search for the close button. Is that still considered a good practice?
>> Yeah, a lot of people prefer doing that. If that makes sense for your user flow, that's totally fine as long as the focus doesn't go to an action item that is hard to revert.
>> Excellent. Thank you. All right. Next question from Charles here. For a toggle button, can you explain why not to change both the label and pressed value?
For example, would the mute button, from mute to muted to visibly reflect the current state.
>> Yes, so if you want to change the visible label, that is fine, but I wouldn't change the pressed state as well. Let's take a look at how that would work. Let's say I have a button that says mute and then I have ARIA pressed false because it's not on mute, right?
And then I press it and then the mute pressed attribute changes to true. So I'm listening in and seeing okay, I have mute pressed, that is true. So I know that it is muted. If I have unmuted press to  true, I feel like it's a double -- like if you have unmuted -- yeah, hold on. If you have unmute  to -- unmute pressed, it's kind of like that double negative. And then if you have it unmute, so mute to false then I feel like it's going to cause some confusion for the user. Just do one or the other, not to cause any confusion. That would be my recommendation.
>> Right. That makes sense. Awesome. Next one. I couldn't find any unit tests for these widget examples in your repo. What kind of accessibility test library do you prefer to use for implementing unit tests and testing Vue components?
>> I was waiting for someone to bring that up. I would normally write tests. I did not have time to write tests. Absolutely if you're writing any code, write tests, especially if you're using reusable components. As you try to add more functionality or new things to the components, they're likely to break and then they're likely to break and you not notice it is broken, especially when we're working with accessibility, we want to make sure that all the things that we've added in there remain functional. As far as what testing libraries I've used, I really like using cypress with my whole team to do some of the end-to-end testings as well as JS for some of the unit tests. I know it doesn't cover all the accessibility things we like to test for, but it covers some of the basic things that we can kind of grab.
>> Great. Sophie asks, what's the difference between the examples and the reusable widgets?
>> Oh, yeah. So I wrote them differently because the examples are kind of, yes, they're reusable components, but they are not -- you still have to go in and edit the data inside those examples where the reusable components and the reusable widgets are these pieces of components that you can kind of inside this other component feed it all the information that you possibly need and not have to go into that component to edit anything. So it is just like easier to reuse than the examples that I first showed. The reason why I kept them separately is because when you get to the reusable ability of it, it loses the semantics and the cleanliness of being able to read through the code and understand what is happening there. I wanted to give people the options of reading it clean and if you wanted to get into the reusable component you can get and read it there.
>> Super. Thank you.
Okay. Next up. I'm going to do my best to make sure I'm reading this well to you. Okay. Our modals are injected as a child of body. When we open the modal, is it a good idea to add ARIA hidden equals true on all other elements and then remove that attribute once the modal is closed.
>> Yes, that is fine. I would say depending on your set up, I would try to get your modal in a global place. Like for example, in Vue I might, depending on the implementation, I might put the modal in the app, for example. That way it's kind of like a sibling to the rest of the application. That way you only have to do that hidden on that one piece of your app. But that is totally fine.
>> Cool. Next one is asking why did you use ARIA hidden equals true on the image rather than just empty Alt text?
>> Well, I wanted to make sure -- let me see. I did it in a couple of places, but I also wanted to make sure, especially on the images -- let's see -- on the images for the toggle buttons, because I was allowing people to import whatever images they wanted, I wanted to make sure that this remained hidden even if the icons that they kind of push in aren't. That way it's kind of more consistent.
Especially if that -- let's say that there is a mute and then the Alt text for the icon is unmute or mute and then we're getting mute, unmute true or like pressed. It's way more complicated. So just setting all of those to hidden regardless of what the user decides to put in.
Give me one second. I'm going to run for my charger. I can hear the next question.
>> I was just going to say somebody in the chat says that makes a lot of sense actually regarding label and ARIA pressed, the double negative confusing wording there. Another person says great content. I'm so happy I attended.
>> Thank you.
>> I think we have -- yeah, we have time for another question or two. This person asks is there a reason the HTML native dialogue was not used?
I think that was when you were talking about toggle buttons.
>> The toggle button. Well, I really tried to go to stay closely with what the practice like the  authoring practice recommends because I know a lot of people have trouble reading these guidelines and I wanted to make it -- break it down in a consumable way without having to read too much external resources to kind of get this done and functional.
>> Gotcha. I think this is our last question  here. If you choose either up/down or left/right for the tabs navigation, how would a blind user know which set of keys to use?
>> That's a great question. I would say -- that is an excellent question. I would say that even with some user research, I feel like users are likely to try and if nothing happens they might try the up and down arrow keys. I would say for tabs it is more common to see the horizontal ones.
>> Awesome. Yeah, just a couple of comments from the chat here. Somebody says support for dialogue looks pretty sparse in most major browsers too. And somebody else says the native dialogue element is not well supported by screen readers yet.
>> Yeah, that's a good call out. Every time I kind of start testing some stuff, I really like to use "can I use" if anybody is familiar with that. It kind of shows you what is really well supported or what isn't supported.
So for example, ARIA pressed.
So then this would be, you know. Any other questions?
>> Okay. I think we have time for one more question. I see one in the chat. Is it bad practice to bind both sets?
>> To bind both sets ...
>> I think that might have been in reply to the up/down, left/right question.
>> Hmmm. I'm not sure what they mean by this.
Like do you mean -- if you mean like if you have a horizontal tab but then you're still doing up and right arrow key, I would advise against that because the up and right arrow key does have functionality within a page, it can help you scroll. So I wouldn't mess with it unless it adds functionality that isn't there for the user.
>> Great. Okay. Well, we are right at time.  Maria, thank you so much for your lovely presentation and thank you so much to our audience for your great questions and engagement tonight.
>> Thank you so much. test test
amazonv: (Default)
Organizational Success with Accessibility
Type: Breakout
Track: Wildcard
Accessibility is best implemented when it is desired and not enforced. It should be considered in everything we do like a spell checker so that it is not an afterthought but is baked into every single project stage from start to finish. Leveraging existing tools and taking simple steps can instantly increase your organization’s accessibility and help build towards a more sustainable, accessible culture within the organization. Join this session to learn how Aditya and his team of 40+ advocates are building an accessibility culture within a division of more than a thousand employees that anyone can easily adopt to drive a culture shift in their organization.
 
 
>> Welcome everyone.
If you're looking for the forming and enterprise accessibility training program you are in the right room.
We will get started in a couple of minutes.
Welcome everyone of you just joining us, we will get started with the next session here in just a few minutes.
We are on time for the session which is always good.
Welcome everybody if you are just joining us.
Thanks for bearing with us.
Rule is more people trickle in so they can get all the information.
One more minute and we will get going.
Welcome everybody if you are just joining.
Hi everyone, if you're just joining us now my name is Liz.
I'm from the DQ team will be moderating today's session which is swarming enterprise accessibility training program brought to you by Rob O'Connell.
Thank you Rob for joining us.
I will take care of a little bit of housekeeping before we get going.
First off, just a reminder that this session is being recorded and will be available on demand for all registrants.
Second, we should have accessible slides for the session if you scroll down to the bottom of the session page under the documentation section.
If you require live captioning there should be streaming right below the video stream.
Lastly, we will save about 10 minutes for questions for Rob.
And any questions you have for him to the Q&A section which is to the right of your video stream.
We will get to as many of those questions as we can at the end.
With that I will go ahead and turned over to you Rob get started.
>> ROB O'CONNELL: Thank you very much Liz.
Hello everyone.
I know you are in different time zones around the world so I won't attempt to say according to your time of day.
I will say warm wishes from taxes.
We have been through a significant snowstorm.
We got through that okay.
Now we are probably heading toward warmer weather which is welcome for me since I enjoy gardening when I am not at work.
I'm a senior designer and accessibility advisor at USAA.
I've enjoyed working there since 2007 as a UI designer and almost immediately saw there was a gap in our understanding about what it takes to make a digital interface accessible.
I voluntarily became the subject matter expert for accessibility for all of USAA and remained in that role for about the first six years of my time there.
Subsequent to that we developed into accessibility operations group and added more people and more roles.
I continue to serve with an interest in universal design but mainly concerned with the materials.
I have stayed in that role because of my passion for interface design and accessibility.
Without further ado I will kick into our subject for today which is swarming enterprise accessibility training program.
What I will present in the slides I'm hoping is something of a manifesto.
For those of you who may already be on your journey or may just be beginning your journey within an enterprise organization and still need some guidelines for waypoints by which to mark your journey.
What I offer are not really a ordered steps but rather a milestone that you can look at.
Some of the and you end up revisiting as a training program grows and encompasses more rules and reaches more of the enterprise endeavors.
We begin with the first milestone which is to sculpt the accessibility training landscape.
For that we need definitions.
I will try to define accessibility and what a program is around accessibility and what it means to be enterprise in that context.
Our first definition pertains to accessibility training itself.
As I mentioned, when I was in my first six years I did a lot of the training myself.
I had two exposures working for states on opposite coasts of the United States of America.
In both cases they are operating with accessibility guidelines.
USAA had a lot of learning to do when I first began my time with them.
I did not come up with this definition at that time, and after some reflection I have come to the realization that all accessibility training is the transfer of awareness, whether that's disability awareness, the knowledge pertaining to what it takes to make an interface usable or inexperienced usable.
And the skills which is the know how, things you need to know in order to make things or do things.
We wanted to be able to transfer what awareness we had, there were areas in which we needed to still grow but wanted to transfer that knowledge and skills to any training whose role in the company or in life or business would be to carry that knowledge into their skill set and be able to serve the needs of people with disabilities.
Whether you were creating content online or engaging people in a service oriented role we wanted you to be able to have the awareness, knowledge and skills needed to do that.
And to carry this understanding of what accessibility training is, a transfer of knowledge, skills and awareness is into a program status it would require a significant amount of rigor.
We took that same definition of accessibility training and broaden it into a more rigorous plan where we could monitor it and measure by it.
It would have to become industrialized in order to fit our needs.
I do find it in this way.
And accessibility training program is a standardized and curated side of accessibility training guidelines, materials and methods that is regularly refreshed and transferred to trainees.
Whose awareness, knowledge and skills for serving the needs of people with disabilities is by that side of accessibility training guidelines and materials regularly measured.
It puts a container around accessibility training and turns it into a program that you constantly monitor and measure.
That way you are constantly improving it into something that subject to compliance, rules and regulations which makes it industrialized and ready for distribution.
What makes an accessibility training program enterprise level, for this I thought about it a little bit.
It's something that sort of needed to be large-scale it needed to be intrinsic to the nature of the company.
It couldn't be something that was a package sitting in one region of the company.
For that purpose I said these are the characteristics of an enterprise program.
It needs to be systemic.
Meaning, is distributed among lines of business, locations and time zones companywide.
So that the skill set and toolset and mindset of the company was ubiquitously aware and ready to embark on the knowledge that was necessary to do the business that company is in.
In our case it's financial services at USAA.
Something that is systemic is infused into the company.
Something that is scalable than would be broad ranging.
It had to be capable of reaching a vast number of employees who work in diverse and specialized customer provisioning roles.
Not only did it need to be broad ranging, but it also needed to be varied and peculiar.
That's what I mean by extensible.
It means that it could be adopted to the specialized knowledge areas and practices of each role.
We ended up defining at least as a working foundation several roles that we thought we could train to and focus our training objectives around them.
That was the general employee, that's the all rules and common for awareness training and some level of training around knowledge.
But very high level.
Driving into more specialized rules, we knew that copywriters would need some exposure, certainly UI designers and developers, very specialized interest in designing accessible interfaces and engaging our members and the public.
As real as the testers who would basically act as the user during the process of testing those interfaces for usability including testing with screen readers in zoom magnification and other forms of interaction.
It also extended to marketing and our customer service reps as well.
These are very different media spaces.
Marketing especially since radio and print media in large-scale as well as video production.
All of those have a learning curve when it comes to accessibility.
They are very different roles and to that extent to be extensible means you've got to be able to adopt to the peculiarities of those roles in ways that don't become redundant with the general employee training.
The second milestone in this journey, you don't have to visit these in order.
They are points on the journey or a map to the space of accessibility.
They are waypoints you may have to come back to again and again.
One of them is to assess the enterprise problem space.
The enterprise level of training, they are essentially two big problems that I was trying to get my head around early on.
It took some years.
I did not do any of this alone.
I have some great colleagues who are highly skilled in both managing and production and other skills they bring to the table.
For which USAA can be very grateful because my skill set was fairly limited to just interface design accessibility.
One of those enterprise problems we had to overcome with regard to a training program was the inability of accessibility experts to train across all other expert knowledge disciplines.
The difficulty here is it's just a big knowledge gap.
For example, I know very little about the service industry.
We have MSR's, member service representatives and they are essentially the customer service representatives to manage calls and complaints and handle requests over the phone.
Sometimes on shot.
That is a service area that requires a certain degree of expertise.
In order for us to overcome the accessibility barrier there, require some level of awareness of what it takes to be a member service representative.
Those are things that not every accessibility expert has in large numbers.
That was one of the gaps, the knowledge gap.
The other was what I would like to call the availability gap.
The inability of a small number of accessibility experts to scale training to a wide range of training situations and schedules.
I'm not speaking here about the availability of training materials.
If you have a learning management system that can always be available.
I'm speaking here specifically with respect to providing training in a variety of situations in all the ways in which training can be provided, whether it be live sessions or PowerPoint slide or experiential things.
Or even in the case of service representatives to do scenario-based training with people.
There aren't enough of us be available not only online and on zoom, but even in situations where you have to do real-world life training.
It was going to have to go beyond us is essentially what I'm saying all of this.
We're going to have to enlist help from other lines of business and other rules within the company to advocate within their own areas with Eric sibility training was.
I have silos of business and the special knowledge in each of those areas.
We had engaged them all.
Course, we could invite people to come out of the stores and meet in the lobby with us and that was the approach we took.
Rather than having to engage each one individually.
That made it a little bit easier, at least the concept of being able to do that.
There will several essentials we thought would have to be part of an enterprise training program.
For example, the training materials themselves would have to be compliant with accessibility and law and industry standards.
That is a must-have for the materials themselves.
The development of it would have to be inclusive of trainees by abilities, roles, mines of business and so forth.
Learning objectives would have to be role specific for each customer facing experience and service reps.
Front lines to create content for members who touch the interface and touch the glass so to speak.
As well as people who are engaging face-to-face.
Training would have to have a review cadence that was recurrent in order for it to be truly enterprise and robust and measurable.
We would have to make sure that training was part of a scheduled process of exposure, whether at the moment of higher on a regular basis recurring.
Training deployment would also have to be comprehensive, meaning you would have to reach every employee in that role.
Whether they be true employees are higher contractors who are essentially acting as employees in that situation.
It would have to be monitored for training attendance and the success of the training through assessment and testing.
Finally, we have to be curated.
The body of material used for training as well as the test results would have to be curated so that we could manage that.
That of course would have to be done centrally, but we need the call for action and cooperation for all to handle that training.
Our third milestone was to segment this enterprise problem.
For that, we were going to need some help.
In fact, there had to be some background.
This was one of the missing ingredients that I learned early on.
For six years was like swimming upstream, trying to convince the enterprise of the importance of accessibility.
We got a lot of standard responses of why this is important.
It only touches a few people.
Why am I responsible for this?
That pushback initially.
We don't get that anymore.
The reason we don't is we now have a companywide accessibility policy.
Putting the policy in place, watch the dominoes fall.
Once you have executive endorsement at a corporate level and it aligns to the Americans with disabilities act but nondiscrimination, everything then flows from that.
It has made a profound difference in the mindset of all lines of business in every level of management.
From the policy which is essentially a commitment to make sure everything was accessible from the standpoint of a public and member experience we also then drew out several standards.
These standards touched on various specific areas.
Whether they be physical facilities, the ICT procurement, we are still working on that.
We broach that.
Now we are in a conversation with people and procurement to make sure employees are getting what they need.
Experiences that are public facing are also provided with equipment that meets those standards.
Customer service interactions are now governed by all knowledge base of procedures that accommodate to the needs of people with disabilities and follow ADA standards.
We have standards for third parties that were just engaging with now.
We are developing that fully.
As well as complaint management.
That standard has been in place for some years now .
How to manage complaints in a timely way to make sure people with disabilities get the accommodation requests they need.
Last, but not least because this is where we began, we want to make sure that all of our digital content aligns to standards.
We have our own USA standards for digital accessibility that align to the WC AG would also supplement them in some ways in a centralized repository.
None of this is training per se.
It sets the background for it in ways that are quite impactful.
Having this infrastructure in place means we can then begin to build on the requirements we have created for facilities and the requirements we have created for digital documentation and marketing and begin to train to those standards.
For that to take place we need to form an enterprise training governance platform.
The very first thing, was the legal layer of the repository of requirements.
It just so happened that our legal counsel was able to give us a number of guidelines, high level business requirements that they developed from existing federal regulations as well as case law.
There is no statute or mandate that says a company must train on the subject of accessibility.
Almost all of the legal precedents are based on execution of the skills that lead to accessible websites or inaccessible service experience.
To that end, we really needed help from legal to create high-level business requirements out of those case laws and regulations so that we would have something that we could work from that would have the authority of the law but be within the company.
It would be more on the compliance level rather than on the regulatory level.
We ended up with nine of these.
I cannot show you what they are because of attorney-client privilege.
I have created at least a mock version of what a business requirement would be.
It would have a high level description of what the directive is which would order a specific training action.
And it's action agent who would be responsible for it whether it's an affiliate, third-party or an employee or somebody in the service role.
We would set the scope very clearly then as to the subject and audience of the directive and any impacts that it would have.
The application and lines of business.
We just wanted to make sure that we were specific enough that we can turn this into world-based training and aligned to these high-level business requirements when we build our training modules.
One of the first things you have to do as you are creating this enterprise program is identify your company's frontline roles.
We began with a set of rules, is not as far-reaching at as I think it's going to be.
We decided that anybody that was creating content that a member had to engage in directly or was creating a service experience that had a direct face-to-face conversational exposure was going to be a role we wanted to train two.
These roles would be content providers and service reps as well.
People who would engage other people who have disabilities we need to engage in directly or indirectly with the published content they create.
These roles, the frontline roles of the highest accessibility risk to any company.
These are the rules we wanted to train to first.
In a distributed Corporation frontline trainees may be under separate managers from the accessibility governance group.
That is certainly the case in a big company like USAA.
We have affiliate organizations as well as many sideload lines of business.
They each interestingly to some extent already created their own accessibility training materials.
Sometimes they would gain from the general accessibility awareness training that our group provided for the whole company.
They also had specialized needs within their own lines of business and began to ask questions and move on their own.
In some cases, they would be using third-party accessibility training materials.
We did not discourage that, in fact we welcome it.
What it did entail is if you want to have a program we are going to have to have some way to measure the success of that material.
Because there was no way for us to control all of the ins and outs of what material they were using.
We had to add least assess it, measure it against her own learning objectives and then supplemented where we felt we had learning objectives that needed to be addressed that were not being addressed by the materials they were using.
Prioritize your training roles.
You may need to start small.
We started with people who are engaging digital interface experience as well as member service roles.
These are our roles as well as the top level, every employee at USAA had at least some exposure to general accessibility and awareness training.
That was the common rules.
Then the designers of course, they are the ones who are engaged in the user experience.
Developers, are more focused on the system and robustness of serving many platforms.
Testers who would act as advocates and voice of the member invoice of the public to ensure that everything was following WC AG standards.
Finally, the member service representatives.
It was an interesting experience.
I had an opportunity to engage our service representatives in some training.
I learned an awful lot from them, probably more than they learned from me.
It was great to be able to get them to enlist them as the experts in their area and to expose them to what accessibility standards there were.
Some of them were already fully engaged because he had a complaint process that was managed by another member of my team.
She had done an outstanding job of engaging in that training area.
There was still not a regular, vetted and controlled system of learning objectives until we got together with one another and began to form them.
In order to form some learning objectives around your training, you will need to enlist your company's frontline roles.
You have to enlist trainers from various lines of business.
If you think of it, these are like horizontal cilos within any company.
They have specialized roles within each of those silos that we know nothing about.
Without a doubt, when they are large enough, like our corporation is they have their own trainers.
They train to the subject of their expertise.
One of the things we found helpful was to engage those people who are actually doing that training, in some cases it will be people who are specialized trainers, professional trainers in the subject areas for which they have been hired.
In other cases it will be those leads you are specialized in some skill set for which they are the key person to train other members of their team.
The key was to connect with them, with those business experience owners in each line of business and to ensure whenever they do their training that they incorporate accessibility into those modules of training.
We had to explain her training program in collaboration was a centralized accessibility governance is key to fulfilling corporate compliance with regard to our policies, standards and requirements.
And to homogenize that experience.
We did that, we've done it with all the rules that are designer developer in each of those is in a guild.
If you think of the role specializations are like the horizontal bridge.
Many of those roles, designer roles will be across the various lines of business.
You have the vertical silos the lines of business in the horizontal rules and skills that they train to across the range of the company.
Somewhere in that grid is the specialized needs of each line of business with specialized skills and some case of each role within that line of business.
We began to invite role specific trainer delegates to an annual accessibility training Summit.
We began our first one about two -three years ago.
We were able to engage our digital content creators in that summit.
We actually called it Denali.
We've had Denali one and two and will do three this year.
It's a high mountain in the United States in Alaska.
We were also able to create another similar summit for service representatives.
They were so different in kind and the problems they deal with are so different in kind from the kind of digital content creators deal with that we thought it was important for them to have their own summit.
We call that Saint Elias which is the second highest mountain in the United States.
That was something we are able to do.
We were also fortunate to have members of our team, some of whom have disabilities themselves.
It's always important -we made this even if they're not part of our team we engage people who have disabilities to come and speak to the needs they experience.
The exposure not only through formal training but even through user groups that we have on our campus from time to time has been greatly influential in changing the tide of the way USAA thinks about accessibility and its responsibility in that regard.
Milestone five, form accessibility learning objectives.
What this is and the program of training, this is like the no Child left behind set of standards.
It was a federal set of standards for all education levels for the primary grade levels of students in the United States.
By setting a standard threshold for each grade level and subject in the grade level, no Child left behind policy was able to standardize the methods by which we would measure the learning of students in America.
I took that practice as something of a model for how we build an enterprise training program.
What it entailed was we were going to have to create learning objectives and we would have to do it in collaboration with those who training each role.
That meant that frontline trainers would have to understand the work of fun client content and service providers and would have to contribute some of these learning objectives.
From our general common role training, it's the first of .
For each one of these learning objectives, we were going to have associated tasks that a trainer would do that list corporate cases, the measurable outcomes, things we should test for as a result of training session.
After training we can ask a test question and give an example of a site or multiple-choice answers.
This is standard learning pedagogy approach.
We measure the success of training by asking questions.
What we found is that we had to create as many learning objectives for each competency or role as were needed by that role in order to mitigate the risk of training and competence.
We simply did not want people out there who were not able to create great, user experiences that meet the needs of people with disabilities.
We did not want that to happen.
We thought, what do we need to train too?
What is that minimal threshold of learning objectives?
We created associated training pass for each objective and we finally created measurable outcomes for each of them.
For the common core we had some 26 objectives that we wanted everyone in the company to now.
We created a general accessibility and awareness training around that.
It's now part of compliance training.
It's required annually and we have to revisit and assess it.
Each of those had a special set of learning objectives in its own space.
In order to avoid the problem of redundancy we created an aggregate specialization.
The training learning objectives we had for all roles and common wouldn't become unduly redundant and repeated.
For those designer should take the 24 learning objectives in their specialized area.
What I've created is a diagram for ellipses and at the top of the diagram has one focal point of… Governing the 26 learning objectives for the common role.
Each of those ellipses branch out and fan out in different directions to cover the 24 learning objectives for UI designer, 24 front and developer learning objectives, 13 accessibility test or learning objectives and 13 service rep learning objectives.
A total 100.
Next year it might be a 101.
It's a way of ensuring that we were training a way that meets the needs without being unduly redundant.
Milestone six is to form accessibility training curriculum for each of the specialized roles.
That would mean that accompanying the learning objectives would have to be an outline that structure is what it is about those learning objectives that need to be taught and in what context and what materials could be used?
A curriculum in a formal sense is a template.
It's not the syllabus, it's not actual course material, but it is a structure of those things that need to be taught.
It presents it in an organized way so that it can be used as the basis for creating actual training.
I have looked at other curriculum models and it came to the conclusion that we needed a list of intended outcomes.
Those are the learning objectives.
A summary of a training goal.
Training needs, training needs and they are varied.
Almost all of our trainees are employees so this was an employee phasing experience to equip our employees to meet the needs of people outside of our company and our members in public.
I had to summarize available training resources, we had quite a few resources within the company but it was important for certain specialized roles that there were certain training materials and media available to them that might not be available to other groups.
We wanted to know what those were and to make use of those within those areas.
The key thing to remember in all of this as you create a structured curriculum for each role is that a curriculum should be result oriented.
It's all about the outcomes and ensuring you have your success measures measured for the things you have trained to do and that you do get some sense of progress over time as you measure it from year to year.
Let's begin with the training goal.
For each role that is designed or developer MSR and even the general common training, you want to have a statement of that role.
For the common area for example, this is the one goal that governs all of the training in the area for all roles in common.
Every employee has awareness of the range of human disabilities and of provisions that need to be made for all products and services to be accessible.
That is the overall governing principle by which we train.
We have to refine it over time in light of more insights, we can do that.
You're focused in on that one role, even the generalized role is a specialized role when you think about it.
What can you train too that applies to everyone?
Really have to think about what are those things that everyone has in common?
It applies also to other specialized roles.
Wanted to make sure we understood training needs.
These are general.
They may lack exposure to disabilities or accessibility design needs.
They will need new information on what accessibility provision is and what a disability is.
Some trainees lack any connection to people with disabilities.
At first it may seem irrelevant to them, but I think bringing people into the training Disabilities suddenly makes that vary relevant and has been a seachange at USA since we began doing that.
Some trainees may have difficulty adjusting the settings of the learning materials themselves, whether it be video-based training or computer-based training.
You want to make sure the training materials that we provide and the methods we use are themselves accessible.
It's always important, especially when doing life training retraining of resume to ask in advance of your trainees if they have any special accommodation needs.
You may need to provide finding which interpretation for example to some employees.
Those kinds of accommodations and becoming aware of those is an important aspect of the training.
The range of training needs.
Some trainees may require assistive technologies and adaptive strategies.
Many of them already have these within their workspace.
Many of us at USAA have been working from home for the last year because of COVID, we may need those specialized tools and provisions in our home space as well.
Just being aware of those specialized needs and articulating them in your curriculum is very important.
Some available training resources, we have LMS training, computer-based training, video-based training, power points and the like.
You will have your own specialized mechanisms and it's important that you at least articulate those and know what's in your inventory and be able to leverage those when you think it's the most appropriate way to present information.
You have your learning objectives all gathered together, you have to sort them and categorize them by their various types.
Some will be related to legal and regulatory even for a specialized role like developer.
There are some legal and regulatory things they need to know.
Some business requirements and operational related accessibility rules they need to know.
He organized that material for them in the curriculum and presented in a way other trainers can then within those specialized lines of business appropriate and build into their training materials.
To become fully enterprise you've got to inspector training resources.
We spent the last year going over those training materials that we reuse within specialized areas.
There were design specialization trainings and also some specialized training.
We actually made use of the University materials in some cases.
It wasn't necessarily required training, but it was training that we recommended.
We vetted those materials against our own learning objectives.
Did we find gaps?
Yes, sometimes we found things in the DQ University materials that we liked and we actually added them to our learning objectives.
In other cases learning objectives at the DQ materials did not quite in the specialized way USAA wants to train.
We had to create gaps in what her plan was to supplement that material through creating our own training resources that can supplement the materials we get from third parties.
Whatever third-party training materials you use we want to manage those accessibility training standards in such a way that you got some kind of regular authoritative body that can look at those materials and get a report on where was the alignment?
Where were the gaps?
Are you remediating those gaps on a recurring basis?
And provide a record report of the approvals that were made.
Caller group degrades.
The group for review of the price training standards.
We had to create a charter with the rules and responsibility for that group.
And a member roster.
Some were from her own team of accessibility experts.
In many cases these are people and lines of business whose role was able to have a rule that there was accessibility learning curriculum and to be promoters of the survey would participate with us and at the same time be able to promote that knowledge in the company.
We have to convene at least once per year in USAA.
It might be important to convene more often should there be changes in the regulatory environment or new high-level business requirements from legal.
It's important for everybody to be aware of what changes and when so that we can be timely in our distribution.
Having delegates in various lines of business will help us to monitor and assess the training materials and schedules.
In every specialized line of business, whether it be banking or life insurance in our company or the various lines of business you may have in your company, you want to make sure that you are mitigating risk on a recurring basis and that you are assessing and monitoring the training that goes with those risks that tries to reduce the risk for the company.
Need to create an inspection process and regularly review the training requirements and guidelines for currency and relevance.
Would be important for me to have at least some event that has to take place on a regular basis in evidence that that event took place, whether meeting minutes to say you approved the following changes or some kind of an assessment.
It may be a test that gets run own training materials.
Something that proves the inspection took place.
That would be a control for the inspection process.
And then require regular reporting of those inspections to make sure training materials that are being used are current and reused on a recurring basis and we are measuring against the success of the training by looking at test results on average.
Making sure that everybody who is in a particular rule is getting trained on a regular basis.
If people are skipping training, that something that their manager needs to know about.
This kind of rigor over the training program then turns this program into something that is truly enterprise-level.
Wherever there are gaps discovered, either training materials for rollout and deployment of the training we want to remediate those as quickly as possible to get that done.
The last milestone is to nurture the accessibility training discipline.
This is something we do by hosting regular training summits.
We convene excessively trainers to refresh and reinvigorate them.
The beautiful thing about this is it's an exclusive event.
It's an exclusive inclusive event.
We like the idea of that.
We want to limit attendance to the training leads and delegates among whom should be people with disabilities so that it becomes an enriching experience for everyone.
Collaborate with participants to set the agenda.
You can achieve anything you imagine in life but you can't do it alone.
You want to list training needs and delegates from each of the lines of business and get them to add accessibility to their arsenal and be the champions within that region for training.
In encourage group interactive experiences.
It depends on what you have available for your breakout sessions during the summit.
Usually it's either whole or half day summit.
You can use Fox notes or murals to unleash creativity.
Focus on achievable outcomes.
Our first summit, we actually created learning objectives.
We did not have them all done yet, but at the end of that session we had created a number of learning objectives in each specialized role of those who had been invited to the meeting.
You want to accomplish moving that will marker down the field in the course of your summits.
This is my last slide, make sure you make heroes out of all the people who help and support in the training role.
Meet throughout the year at least once per quarter to stay fresh and engaged.
Encourage newcomers to take on new challenges.
Don't be afraid to give somebody a new delegate responsibly.
People like that.
Rich veterans with new roles and responsibilities so they don't get stale.
Share knowledge among the disciplines.
Avoid a single point of failure expertise.
It's great to have people who are knowledgeable, but you have got to shadow those experiences so that you have more than one person with the expertise.
Elevator compliments of groups and individuals.
This is eight people thing.
Limit the proud, lift the humble and above all love one another.
That is all I have for today.
I'm willing to take some questions and answers.
>> Thank you so much Rob, that was great.
We do have some questions here.
We have a couple of minutes I will dive right in.
This one, any advice for a small team of designers and developers currently learning accessibility are in charge of training on accessibility to all of their development teams and PMs and getting everybody on board in a big company?
They don't have time to sign for it or budget to do it.
Or any good resources to use.
>> ROB O'CONNELL: The nice thing about PowerPoint or the like is that it's fairly cheap.
The only thing you have to do is create content.
That is how I began.
I had a set of training materials I would reuse and I would invite large groups of people to take the training.
It was live and in person at first.
We did not use Skype resume too heavily then.
Music quite a bit now because our company is very distributed, much more so than when I began.
It is easy and cheap to create that kind of training material.
That is a good way to start.
Course, you're not delving into anything other than what you already know at that point.
To do the kinds of things we have done to go into the specialized areas that we don't have a lot of experience with this require enlisting the help of others.
Can do that with training materials you provide and have others participate with you and those zoom training experiences.
If you don't have a high budget and you can't afford the deque training modules there's plenty of material that's free and available if you want to make use of it.
You have to bet it because it's not going to meet all of your needs.
Does not absolve your responsibility from creating your own learning objectives.
Need to have a set of standards you say this is us.
This is what we trained to paste on each role within your company.
>> I think we can squeeze one more question in here.
How did you get leadership buy-in for this training program both in C suite and team and departmental supervisors?
>> ROB O'CONNELL: I have been doing it for years.
I have been known as an accessibility expert since 2007.
It is also delegated this role.
It was something that I loved to do and fortunately for me my director said you were going to be doing this.
The buy-in really comes as a reflex of the fact that we have an accessibility policy.
Once we got that policy and standards in place, those were not specifically about training.
They were about the outcome of training and making sure we were aligned with ADA standards.
Once we have those in place it was not a far distance.
Just recently, painting the high-level business requirements from illegal as well gives us even more impetus within the company.
Now it is a compliance -related issue and it's going to drive out.
Having those points of leverage is critical.
All you have to do is drop the weight of accessibility training on one end of the lever and watch the Big Stone role.
That is essentially what happens.
>> Thank you so much Rob for a great session.
Thank you to everybody who joined.
We still have a handful of sessions left.
I hope you guys enjoy the rest of Axe-Con.
Thanks again everyone.
Appreciate it.
>> ROB O'CONNELL: Thank you for attending everyone.
[end of session] 
amazonv: (Default)
 Forming an Enterprise Accessibility Training Program
Type: Breakout
Track: Organizational Success with Accessibility
Large corporations with diverse roles may find it impractical to run role-based accessibility training from one shop. A workable approach is to form an accessibility training strategy whose role-based learning objectives are managed centrally but whose training staff and resources are managed separately for each area of specialization. Role-specific trainers manage learning objectives collaboratively using one shared repository, but each trainer fulfills learning objectives independently for each specialized role. Since measurable outcomes correspond to learning objectives, test outcomes can be reported back to one enterprise-wide system to track accessibility competencies for each role over time.
 
 
>> NOAH: We're at the 6:30 Eastern hour, ready to get start pad pi name is Noah Mashni I'm with Deque and I'll be moderating this session, "Organizational Success with Accessibility" brought to you with Aditya Bajaj.  I'm going to take care of housekeeping things beforehanding it over to Aditya.  First today's session is being recorded and will be hosted on demand for all registrants to access after the fact.
Secondly, if you require live captions for today's session you may access those on this session page just below the streaming area.  If you would like a copy of the presentation for today's session, that is also available.  There is a download documentation link just below the caption area where you can access the presentation.
Finally we will be using the last five or ten minutes of our session time today to do some Q&A with Aditya about the topic we're covering.
So next to the streaming area is a chat area and a question and answer link that you can drop questions into.
So please feel free to ask any questions for the speaker, as well as upload any questions you have seen asked that you think are interesting.
With that, I'm going to hand it over to Aditya to get going and just excited to have everybody here.  Thank you very much.
>> ADITYA: Thanks, Noah.  Hey, everybody.  My name is Aditya Bajaj.  My pronouns are he/him.  Today I'm going to talk about organizational success with accessibility and I am -- I'm appreciative of your time, and I hope that from today's session you'll be able to take something and apply in your own organization as well.
So without any further ado, let's get started.  Before we get started I want to call out that I am sharing my specific journey within Microsoft on accessibility.  I have been part of this division or refer to it as an organization within Microsoft that has more than 1,000 employees and I've been working on this team for more than two years.  And Microsoft's journey in accessibility goes way beyond -- decades before I joined the team.  So that is just here for your reference.  We will go and get started.  About me.  I am an accessibility advocate.  That's why I'm here.  And also by title I'm a senior program manager.  I have been in this industry for more than 14 years and I have done coding, you know, literally cut PSDs of Photoshop files and created HTML CSS JavaScript out of them and I think that has helped me a lot remain close to websites.  Have done website development, web applications, and then finally doing a lot of accessibility over the last couple years.
I was born in India, and I moved to Seattle about seven and a half years ago and I've been here since then.
So, just giving a little bit more context about my accessibility journey within my particular organization.  I was hired in a FY19 doing accessibility for just a little small team.  They had a bunch of websites, and we managed -- I managed help increase accessibility of those websites.  And then, you know, why not apply the same rules and principles to broader teams.  So we became partners with other teams and helped other teams as well to increase accessibility within their own teams, provided consultations and things like that.
And in FY21 we stepped back and said, hey, we did 30 people, approximately 30 people team in FY19 and broadened to 100 people in FY20, why not apply that across the organization within this?  So FY21, this year, we are building a foundation to scale accessibility program across the division.
And in FY22 and onwards, I am hoping we'll be able to scale this program with self-serve models so that people can go to resources themselves and start tracking their own compliance status.
And today we are going to be talking specifically about FY21, which is currently happening in my team right now.  So it's very fresh and latest and hopefully something you'll be able to learn from.
So looking back in FY20, when we were designing this whole program for FY21, we were looking back and seeing, hey, what is the problem?  And the challenge was basically to embed accessibility within the culture in our day-to-day rhythm of business so that it is baked in.  We wanted people to think about accessibility -- I think you have heard this a lot of times throughout these two days at this conference, that we want to build and bake accessibility in all the stages and not just put accessibility at the end of the project, for example.  We know that at this -- probably at this time we do not need to know why we need to do it versus we are talking about how we can do it.  So looking back again in my own organization for about two years, we saw a couple things, and based on that we came up with this program itself.  So the first issue is unavailable or global accessibility status.  So even if the website teams and social teams and all the respective teams were doing their own accessibility work so that the ultimate customer experience is accessible, but at the same time all the teams that were contributing to it may not be thinking about accessibility.  And that's why there was a lot of, you know, bolt-on approach and things like that.  So we wanted to fix that.  And the root cause for that particular issue is that there is no central compliance tracking or management within our own organization, within our own division.  And the solution to that was simple, this program that we're running right now.
The second issue was inaccurate global accessibility status.  What that means is people thought they knew accessibility, people thought they did some search search and maybe they were relying on somebody esto do accessibility and they thought they were all accessible.  But when I actually ended up using their proximate cause just for double checking or experiencing that with a screen reader, it was not accessible.  And the reason for that was because there was a lack of awareness.  People did not exactly know what exactly is accessibility.  And the solution to that for this FY21 has been providing workshops and trainings, so that people can learn from it.  People can reuse whatever somebody else has done it.  And in that way when they're aware of accessibility, then they know exactly what their accessibility status is, or at least they'll be closer to it.
The closer issue was accessibility not in general rhythm of business.  People did not have -- like we talked about -- I mention earlier accessibility needed to be part of every single project and it was not a day-to-day practice, so the root cause was that people did not know that they were accountable, that they are own accessibility.  People said, you are my accessibility lead, then why should I worry about accessibility?  And accessibility is not something that only one person on the team will be able to do.  In fact, even if that person wanted to, it's just not scalable.
So a solution to that is self-attested accessibility.  We want people to self-attest to whatever their accessibility is and be accountable for it.
As a quick example I want to throw is let's say that you are sending an email to your fellow colleagues or your friends or family.  You don't expect somebody else to fix your spellings, do you?
Similarly, accessibility is something, if somebody with a disability is receiving that email, then it is as good as email with typos.  You know, for somebody who can see it.  So just how I won't fix the spellings in your email, I won't fix accessibility for you either.  I want you to do it, because it's your responsibility.
The fourth issue is unavailable deeper accessibility support.  You know, when people lacked awareness, they needed to know they were accountable.  They also needed a little bit more support.  There is support across the larger organization, however, within our team, we had resource bandwidth constraints and all that.  So we needed to provide them a little bit more support.  And the solution to that is basically additional office hours and, you know, on-demand consultation as they would need.
Our approach for FY21 was based on two key principles and three focus areas.  Key principles is accessibility is for everyone and by everyone.  We just talked about that.  Everyone has a role to play.  It's not just one person's responsibility.  The second one is self-attested model.  You know, like I said, I cannot have everybody's email tested for spellings.  Similarly I won't test their accessibility either.  So I want them to self-attest that, hey, I am doing my accessibility and I am being responsible for it, but we do realize that they will need training and they will need guidance for it.  Because we just saw in the key challenges area where, you know, they needed to -- they needed some support basically to understand what exactly accessibility status is of their own assets.  So the focus -- there are three focus areas.  The first is compliance, in which we are hoping and have been working on increase in tracking compliance and things we have been doing within our own little org.  And not just checking the box but also testing with people with disabilities, especially the high priority high visibility assets, so that ewe are not just checking color contrast and all the other checks from compliance perspectives, but also making sure that the user experience by people with disabilities actually is usable.
The second focus area is scaling, in which we are increasing accessibility awareness and skill sets across the organization.  In which we are really doing, you know, trainings and pointing them to different trainings across the organization or outside organization, and just generally keeping them aware of things on accessibility.
The third one is communications.  In which we are providing them accessibility updates, program status as well, and the news on accessibility and so forth.
Communications really is to keep people on, you know, keep accessibility in their heads all the time, like hey, keep accessibility on mind.  Just kind of as we are building this culture and driving this culture change, we want them to keep this in mind.
Moving to next one, first and foremost, I think you might have heard this on previous sessions as well.  We're getting management support is super super important.  You want to make sure that management has accessibility and diversity and inclusion culture, otherwise it would be very hard journey.  And our leadership has been really helpful and supportive of accessibility within our organization.
So here are a few slides, which you can actually just take and share with your management and say, here are the reasons why we should be doing accessibility.  And one of them is here.  Accessibility is a responsibility.  I am pretty sure I'm not the first one you're hearing this from, but there are more than 1 billion on the planet that live with some sort of disability, and many of them need assistive technology.  But only 1 in 10 have access to the products that they need.
And disability can affect any of us at any time.  Especially because disabilities can be permanent, where somebody has -- somebody is living with just one arm for the rest of their lives, temporary, such as a temporary arm injury, or situational, where, you know, you have a baby in your hand, you're a new parent, a baby in one hand and using the other arm for accessing content on a laptop or somewhere.  Another example is you're on a bus and traveling in a bus and holding the handrail with one hand and another hand is -- you're using phone or accessing something with another hand.  Another example is you're outside, it's sunny in Seattle right now, you are trying to access content on your phone but the son is glaring at it and that's when you have that situational vision impairment.
And we also know that 2 times is the unemployment rate for people with a disability t than those without.  It's our responsibility to make sure we are creating and adopting accessible technology that will help our fellow colleagues as well as customers be more productive.  Accessibility is an opportunity.  These are some stats from sources like Accenture study, disability inclusion advantage, and a Forbes article how millennials are reshaping what's important in corporate culture.  So inclusive organizations out perform their peers and see 28% higher revenue, 2 times higher net income and 30% better performance on economic profit margin.  And Forbes, I believe, is also estimating that 75% of global force has chosen -- will choose to -- choose an employer that embraces diversity and inclusion by 2025.  So here are some quick reasons why we should be doing accessibility that you can convince -- that you can share with your management as well.
Here is a bigger one actually.  Inclusion drives innovation -- one of the biggest ones, I guess.  Inclusion drives innovation for everyone.  These are four real examples that actually drove or benefitted everybody when they were actually created for people with disability.  The first one is bendy straws.  These were created for patients in a hospital because they had limited mobility.  But now we all like convenience, and I believe accessibility does increase convenience for everybody.  The second one is the can opener by Good OXO grips.  And this was created by a father and son for their wife/mom when she was having arthritis and they wanted her to feel comfortable using devices.  So this was actually created for her.  And I actually have it myself in my kitchen and I love using it.  It's very convenient.
The third one is the video captions.  This is created for people with disabilities, especially deafness, and everybody benefits.  Most people benefit from it, especially if there's a language barrier.  I feel like my -- I pay more attention to things if I'm watching a video with captions.  I feel like I -- it helps me keep the focus on the video itself and not get distracted with too much going on.
The fourth one is assistive technology.  This was created for people in wheelchairs that had limited mobility.  But this is being used by -- like I'm 100% sure that you have a device right now that has this voice recognition technology.
So here are your three or four reasons on how you can talk to your management about it.
In general, solving for multiple things at the same time.  So here is a summary.  First of all, doing the right thing, protecting yourself from legal risks.  I'm sure your organization would be interested in that.  Avoiding brand perception costs.  If you don't do things accessible, things can happen on social media and you want -- if you're building a brand reputation, you want to make sure you're thinking about accessibility and including everybody in your experiences.  Ultimately, as we saw on the last slide, accessibility increases usability for every single person.
Now I will talk about those three focus areas that we have implemented in our own team.  And first one is the compliance.
So here, what actions we took were we started developing an org-level tracking system.  I'll talk about that in a second.  And started reporting that on a quarterly basis.  It's been three quarters and two reports have been out.  So we have been working on it.  There's a lot of work going on all at the same time.  Test assets with people with disabilities.  I already mentioned this but you don't want to just check a box and saying hey, we have done our check and we're compliant.  In fact, one of the sessions earlier today, I was watching, they had a very great example.  It was a staircase, a very high you know, single-line staircase and you would just put a ramp on it and just say, we checked the box, we have a ramp on it, but people can't really use it.  That's a big question.  So you want to not only check the box but actually make sure it is usable.
And the third one is support company-related accessibility initiatives.  You don't want to do your own silo work and forget anything that is happening across the company.  So we are specifically closely aligned with our accessibility within Microsoft so that we are making sure that we are all walking the same steps.
Now here is a simple tracking system.  The reason for it to be a simple tracking system is because people in the end, for websites and all the assets that are being developed, they make sure that things are getting accessibility and out, especially the websites and social media channels, for example.  But we wanted to drive this culture change across the organization, and there are 1,000 people in the org, and how do I ask everybody to fill up an inventory sheet for me so I can generate a scorecard?  I'll show you the scorecard in just a second.  So what we decided to do is ask a simple question.  Hey, do you have an accessibility review process in your day-to-day?  I'm not even asking if you're compliant.  I'm just asking, hey, do you have an accessibility review process?  And each of the teams were required to ask this question across their assets and team functions.  So that we can create an inventory.  I'll show you that in a second.
In this graph, what I'm sharing here is a hierarchy, for example, if you have an asset or category of asset, we're asking this question against a messaging framework for that particular asset.  Products providing the expertise for that particular asset, a designer, content writer, publisher, localization for just that particular asset.
So we recorded whether they have an accessibility review process across each different function, so they get better and understand where we need to fix or increase our help people understand what accessibility really is.
This inventory actually gave us insights on where things were going well and where we needed to improve, just to do things more efficiently overall.
And here, actually, is a scorecard, literally the copy of the format that we use in our organization.  Just all this data is suggested demo, but I'll walk you through each of the sessions.  So solution areas at the top is basically a filter.  You have product 1, product 2, service 1, service 2, other.  These are just simple buttons that filter the whole report.  And then you have a drop-down called "people," and it can be selected for up to three people in the hierarchy.  So if you are a manager of a particular asset, you can select up to two people reporting to you within that drop down.
The team function is another drop down that contains exactly what we just talked about, content design, and so forth.
The second portion, the second section of this scorecard actually is the data that I'm really interested in.  So this is 300 distinct assets of categories, let's say this is what was reported, and across all the solution areas, because no filter has been applied right now, I know that I have approximately 300 categories or categories of assets or assets themselves, and then the answer -- the question that we asked, accessibility process in rhythm of business, and people said, yes, no, or in progress.  300 assets we're having 60% saying yes and 30% saying no and 10% in progress.  So we go to the 30% section and filter by 30% and see where we can go and who do we need to talk to, in other words.
The third portion in the last one on the scorecard is accessibility process in the rhythm of business, ROB, by channels.  And what channels really mean in this case is, you know, website is a channel, and within social, social is a channel, blog, collateral, so forth.  You want to make sure accessibility is consistent across these different channels, and this is not representing one team.  This is not representing a web team.  It's all the people that contribute to the web team's assets.  So I have publishing website and a designer from another team sending me a design, all these people are contributing to this asset, website, and that's how this website channel is.  This is information.  So in this case, 30% are saying for website that we have an accessibility, and this is all fake by the way.  This is not real data.  50% are saying, no, we don't have it, and 20% are saying in progress.  And similarly you can check it for social blog and collateral.  In the next slide I'll show you what you need to really capture if you're interested in doing something for your organization.
So here is a sample -- an example or a sample structure for the inventory that I called for -- in other words, it's a database that would feed into that report.  That report I created in power VI.  You can probably do that in Excel or any other spreadsheet if you like.
So an example I'll walk you through the header first of the table.  And then just give a couple examples as we go.
So first header is the -- first column is the solution area.  And it could be your product, one of the products, or any services, or something else that you may have.
And within that solution you may have a list of assets or list or categories of assets, and this would be -- in this case it's feature 1.  Just for demonstration.  And then the third column is asset type or channel.  We saw web, social, collateral, and in this case it's a web.  Channel is the web.
The fourth is the team function that we just talked about, design content, publishing, etc., in this case, for example, design.  And now I have, you know, these four cells that is telling me currently I am talking about design of the website of feature 1 within the product 1.  And the question was asked against this.  Do you have a -- do you have an accessibility review process within this particular combination?  And then the teams will provide saying yes, we have it or, no, we don't have it, or, yes, it's in progress.  Similarly they would provide me things like product 1 feature 1 web content.  In that case I get, okay, design is accessible, but what about content within web?  And, again, stepping back.  We are doing this so that every single person on the team do their part so that we can do accessibility at scale.  It's not just one person and then the end to fix everybody's problem.  So we want everybody to participate in this, and that's exactly what this scorecard or this structure is going to provide me.  So the next column is accessibility process and rhythm of business.  And I think we covered that, the answer is yes, it could be "no."  It could also be in progress.  And bunk more thing I want to call -- one more thing I want to call out is one of the main communication pieces I had in my own program management within the organization was that, hey, nobody will shame you or nobody-there's no punishment across if you're not having accessibility.  Because we are making sure the ultimate experience is accessible, but here what we're trying to do increase accessibility so that at Microsoft we can create world-class accessibility experiences.
Compliance status was specifically for only the team functions, which were at the end of the line.  So, for example, if a publishing team is there, we ask this question specifically to them.  That they need to tell us whether they are compliant or not.  Because not everybody -- lake the design team cannot tell me, I created this design and it's compliant at a particular grade.
And then there is visibility, because we want to start with external facing assets first and then we want to go into general facing assets, and the next one is the priority, so that you know -- you can fix things first on the more visible assets and then go down from there.
And then the manager column will just give you who is managing that particular product or that particular team function of that product.
And the examples in this case are Elvis and Sassy, and they're really my dog names.
At least two of them.
So the focus hear, the next one is skilling.  And this is where we wanted to increase, you know, accessibility awareness within the team, so that they know what disability types are, and all things around accessibility.  Things like, hey, we also have this resources hub at Microsoft, and in our team that they can go to.  All of this kind of was part of that, or is part of that skilling focus area.
People also have questions, and we needed them to be able to ask those questions.  So we started doing biweekly office hours, then accessibility deep dives.  Not only in our own organization but if somebody else is doing that like altX training or something else outside of Microsoft, also we would just point them to those sort of trainings so they can increase awareness.
Accessibility resources, where they can find curated resources.  There are so many resources across on the globe.  So we wanted to bring them the most useful resources from internal as well as external websites.
On-demand consultation, because not everybody can make it to your biweekly every two weeks.  So we created a ticket system where people can submit their request and then we can resolve that request via a ticket system in a proper format
And the last one is accessibility in action badge.  This is basically not -- you know, you taking the action badge and you know everything.  That's not the case.  That's basically for people who are starting to understand what accessibility is or trying to learn what accessibility is, and we do have a link about this.  I use this as a metric across my own organization on how we're doing in terms of who is taking that badge, and this badge is recognized by public as well.  It's publicly available, so anybody can take that badge.  Especially for management and the PMs and all the non-technical people to understand what really, you know, accessibility is at a foundation level.
The third and last is the focus area of the communications piece., where we have this amazing team or a team we called accessibility advocates within our organization, and they are a super valuable resource and asset to me.  I'll talk about them in just a second.  The second one is accessibility content in all hands/all team meetings.  We decided -- we made sure that each and every single team is seeing some accessibility content in all team meetings.  We're talking about cultural change.  And this will happen only when you try to send that information in a message from various different channels, not just one website or one email.  So we were trying to partner with as many people as possible and reach out with the accessibility content.  And the accessibility content, I basically talk about what accessibility is, what disability types are, and, you know, why it's important and things like that.
And, you know, then shared that badge training with them.  And people get really excited.  And so this has worked really well for us so far.  And I think anybody can use that from here.
Monthly program updates and every single -- but most teams across the organization.  My goal is that every single team within that organization has somebody to go to immediately.  Because they are part of their own team.  I may sit too far away from them, but they know this person and so they can quickly ask them a quick question.  And if this person doesn't know the question, fine.  They can submit a ticket, join talks hours, or come to me directly.
But advocates, v-team, basically, they are -- they may not be the SMEs but they are the evangelist.  They are advocating for people with disability within their teams day-to-day or plan discussions and execution.  As an example, you are part of -- you as an advocate are part this project, and somebody is discussing that project.  Hey, what about accessibility?  And you know, that way people have that -- we're putting our guards every where talking about accessibility.  These folks are also building that bridge between me or our program and their own team in case I need to send some information to them or they have questions around accessibility or whatever they want to share, we all collaborate together on a biweekly basis and talk about accessibility issues and share back if there are any issues of learnings, we share that back.  So we're not working in a siloed way.  We're also sharing and collaborating at the same time.
They have been very helpful and generous to help create that inventory.  Because it needed everybody to go into the spreadsheet and fill in that information so that we can generate the scorecard, but the good news is you need to do that once in a while, initial inventory, and you can deside -- it could be quarterly or monthly if it's too critical for you or six months, yearly, whatever works for you.  Basically they would update the status to, yes, we have changed our accessibility process and now we have accessibility process, we don't have accessibility process anymore, but we need to fix that.  So you can decide however you want to do it.  And these folks will bring issues or concerns that their teams may be having.
So here is a summary for what you might want to take back even in case this was helpful, was that, you know, first of all, give the management it's going to be really hard.  V-team, create a v-team, people in that meeting should be people that want to support, not required to support, because that's not going to be fun for them and, you know, it might just not work out.  So you want people that really want to help you create this.  And then create inventory will be the part and focus will be helping you.  Then identify areas for improvement, based on the inventory and data you receive in the inventory, it will take time, give them a lot of time.  Don't expect -- please don't expect them to give you content within even a month because they have their own responsibilities and this is on top of it, so you want to give them enough time, plan ahead and give them three months or so and then start building that, and whatever you're learning on the go, you can start helping those folks as you learn.
And then track compliance status of high priority assets to start with and then incorporate additional priorities like P2s and P3s and internal assets.  Internal P1 assets can be equal priority than what is external.  If your employees, fellow colleagues are not able to use a tool because of their disability, that is not going to be fun for any of you or anybody in general, so you want to make sure those assets are also captured early on and that you know that they're accessibility accessible and people are able to use them.
Provide SME support.  If you don't nobody in the organization, you need to hire somebody.  But it will be worth the investment, support will be needed if you want to go ahead and excel in your accessibility journey.  Keep everybody in the loop.  Monthly newsletters, updates, these people have lots of priorities, things are changing.  There's so much going on.  You want to keep them in the loop and keep reminding them that, hey, we need to do accessibility for whatever we're doing.
With that, that's all I have.  Here are some resources.
The first one is aka.ms/accessibilityfundamentals
You will have this in the document attached in the page down below.  This is where you can track your badges, not track but basically you can own the badge for your own and you can ask your teammates to own if you're interested.
Accessibilityinsights.io is a tool I use for quickly checking you know website issues.  They're similar -- this is actually similar to what is provided -- what Axe provides but there's a manual assessment where you can generate a report and make sure your testing is covered end to end.
Then the last one is WCAGaccess.com /resources and I put resources there for you.
And I'm still working on it.
And with that, I will hand it over back to Noah for questions.
>> NOAH: Awesome.  Thank you for your session.  Super informative.  I have questions in the Q&A.  First question, did you face large-scale pushback with implementing the self-attested model, and if so, what did you do to handle those objections?
>> ADITYA: Great question.  Yes, this was part of it, not everybody was on the same page.  That's why you need to start with the management for the leadership first and then explain the benefits that, you know, like I shared in the slides.  Share the benefits, not only we're doing right thing but also we are complying, which is essential to the business, and then you can have innovations done and things like that, when you are doing accessibility across the organization, not just one team.  And then so the pushback, you know, the way that I handled pushback was giving them why we are doing it and never give up.  Never give up.  Keep asking them, hey, we need to do this.  So, yeah, that's how we handled it on our team.
>> NOAH: I think that perseverance is a huge part of it, right?
>> ADITYA: Yeah, very huge.
>> NOAH: Second question.  So for your compliance and monitoring step, what was the blend of automated and manual testing that you used to feel good about the level of compliance in reporting?
>> ADITYA: Sure.  So first of all, the things that I just shared is asking every single person to do their part for accessibility, so we did not ask every single person to provide compliance record or compliance status for their own individual work.  Because the website cannot be tested unless and until all things are put together and then that's why the publishing team, for example, or the production team or the development team would be responsible to report on compliance.
So the compliance was done for that particular website alone, like that particular asset, and it would be done for using the fast pass, for example, on the accessibility sites, meaning the automated checks, as well as manual testing would be done by QAs.  Once the page is ready by the production team, then the QAs, quality assurance engineers go to that page and make sure that the whole experience is accessible.
>> NOAH: Okay.
>> ADITYA: Did I answer the question properly?  I can't remember if I answered everything from it.
>> NOAH: I think so.  The question in general was just like what blend of automated and manual testing did you find worked best.  If you have more to add, please.
>> ADITYA: Yeah, the blend has been in the way that if you have something very critical, very -- if it has large visibility, if it's -- if you have high traffic you want to make sure you are doing iteratively testing across the two, like the manual as well as the automated, but there may be cases that you have too many things to do at the same time, so you start with the priority ones and do the full assessment including manual and automated, and then as you fix those issues on the go and then you would want to do the least priority ones later on in the state.  But you would want to make sure that everything is accessible, not just leaving something on Fastpass or the automated testing alone.  We know 30% of accessibility is automated, roughly speaking and 70% is manual.  You want to make sure everything is accessible that way.
>> NOAH: Sure.  Question from Kelly.  So for a company that does not have -- for a company that does not yet have an accessibility program or team, what would you recommend be the first steps to take to build that out?
>> ADITYA: I love that.
>> NOAH: Go ahead.
>> ADITYA: Did I interrupt you.
>> NOAH: There's a second part, but let's get to that part first.
>> ADITYA: I would download this presentation, go to management support section slides, share with your leadership and say, here are the reasons why we should be doing it.  And it's not only benefitting people, but it's also benefitting the business.  There is a reason.  There are many reasons to do accessibility.  So I would start there.
>> NOAH: Yeah, no, yeah, the second part of the question was, I want to write a pitch or a proposal for leadership, but I feel I need to include clear and specific action items to include in that, sort of like audit, hiring practices, things of that nature.  But like you said, that's kind of laid out in the packet there.
So I believe for this session page there is already a link for anybody here, there's a link to download the presentation and have access to all this information.  I do not have any other Q&A in the chat.  So if there's nothing else coming through into the Q&A, Aditya, thank you so much.  This was a fantastic presentation.  I really appreciate you bringing that here for us all.
And I think with that we'll -- one last-minute question.
So I'm going to put this here.  Do you have any thoughts about embarking on an accessibility audit remediation project for both product, which is software if my case, as well as tremendous website content?  So any thoughts or advice on, you know, moving into an audit and remediation project for, you know, software products but also content-heavy website stuff?
>> ADITYA: You'll have to repeat the question.
>> NOAH: Basically the person is asking, they're about to embark on a big audit project, and they have got on one hand they've got their software product that needs to be audited and remediated and also website that is very content-heavy, and they're wondering, you know, is divide and conquer better, work in parallel, focus on one first?  Can you provide any advice?
>> ADITYA: Unfortunately, I feel like you might need additional resources if you want to do -- depending upon the priority of the content, how accessible it is, I guess that's part of the audit.  So, yeah, it really depends upon the volume you're talking about.  And if you do feel like you cannot handle it all together and both things are equally important, then you would want to hire additional resources to get that work done.
>> NOAH: And I feel like some of that prioritization you were talking about earlier, right?  Identifying critical flows, high traffic areas, things like that, if that makes sense.
>> ADITYA: Yep.  Uh-huh.
>> NOAH: Awesome.  Very cool.  Okay, well, I think with that we will wrap session up.  So thank you, again, Aditya, and for those of you watching, and Rivka for our ASL translation.  Thank you everybody involved.  Have a wonderful rest of or your Axe-Con!
>> ADITYA: Thanks, everybody!
amazonv: (Default)
Inclusion By Design
Type: Breakout
Track: Design
This session explains the processes and artifacts required to integrate Accessibility into the Practice of Design. I will explain the difference between accessible design and inclusive design, and give practical guidance for integrating accessibility into Design Research, Visual Design, Interaction Design and Content Design.
 
[missed start for coctail class]
 
graphs.  And descriptive it text for images.  If the text is meant to be read, don't put it in the image.  Ensure sematicly meaningful page structure by using paragraphs appropriately.  Which brings me to visual design.  Visual design plays a significant role in communicating a brands proper position and personality.  Remember the address from five or six years ago?  You know, the one.  Was it blue and black or was it white and gold?  It caused quite the uproar on social media.  This little color illusion reminded us all that color is almost never seen as it really is.  We all see colors slightly differently.  And our perception is literally comelied by the context in which we view it.  Such as the devices screen and the surrounding environment.  You might have a shadow or something off of your wall or window.  Visual designers, don't use color alone to convey meaning.  Always test your designs with a color contrast analyzer tool.
The simplest place to start is to design in greyscale.  As this forces you to consider layout, typography, and visual balance before tackling the subjective of color.  The design should be clear and easy to read with a thought through text hierarchy.  By going in greykale it forces you to not use color alone to convey the meaning.  As you add color to your design, remember that color is an -- exact and relative art form.  Being an exact, we need to select colors that will perform well within a range of environments.  This should not be under estimated as roughly 8% of men and 0.5% of women worldwide are living with some sort of color blindness.  Your choice of colors will depend on the look and feel of your brands visual identity.  This is time for experimentation.  You'll want to use a color contrast analyzer tool to help you get at the look and feel that you want.  Ultimately visual design is about creating delight for all of your users.  And my friend, Rich Donovan said it best.  Customer and employee delight is the goal.  All day.  Every day.  Understanding and delivering actions that delight define whether or not revenue is maximized.  Diverse demand has changed how great brands deliver delight.  Are you ready to unleash different?  I don't know about you.  But I'm more than ready to unleash different.  We have a very real opportunity right now to build back better.  And I'm hopeful that will.  Not too long ago I asked a form every colleague what he thought the role of visual designers were in non-visual interfaces.  He couldn't really give me a good answer.  My answer was there.  As the role of visual -- it is the role of visual design to create delight.  Visual designers have a very important role to play for non-visual interfaces.  Because it is their job to understand what a desirable, pleasurable, and delightful experience really feels like.  It is really easy to say an icon or the image is just decorative.  It is much harder to take a step back and ask yourself why did I choose that particular icon or image.  Is there something I want my users to get from it.  I hope you keep this in mind the next time you and your team are deciding what the alt text should be on the image or icon.
I know I've covered a lot today.  I hope some of this helps you in your journey of making this world a better and more inclusive place for everyone.  Thank you.
>> Thanks, Alicia.  That was fantastic.  We have a number of questions coming from the audience right now.  I'm going to start firing them off.
>> All right.
>> One of the questions are where can we see more of how to best annotate with accessibility?
>> So a resource that I found and I particularly line is accessibility blue lines.  It was shown in my slide.  I think what you have to find of realize about annotating for accessibility is that the way that you annotate is going to depend on the needs of your team.  Because like I said, you don't want to annotate everything.  You don't want to annotate things that you don't have to either.  So it really is a thing to have a conversation with your team with.
>> Awesome.  From Mark he has a question.  Do you have a favorite source for inclusive language?
>> That's a really good one.  There's some inclusive language guides out there.  I don't have a favorite.  Please share your favorites with me on social media.  Because I mean there are some out there.  I don't think -- I think that's where we can improve as an industry.
>> So we have a question that says you to not use gender and race in descriptive text.  Why would we only allow those details to those who are sight-enaged.  Why wouldn't we provide those details to sight-enabled.
>> I didn't say for non-sighted or sight-enabled.  It is in general you shouldn't use those descriptors unless it is relevant to the story.  Because you really don't know someone's preferences and the way they choose to identify themselves.  So if you -- if it is not needed for the story, leave those out.
>> Got it.  Thank you.
And what are the different strategies that you recommend for inclusive design?
>> So I think basically have a curious mindset is the number one strategy is always ask why.  Ask the five whys.  And really take a learning -- a learners mentality to design.  You know, we're all learning to be better designers.  I would say that's the best strategy for inclusion.
>> And that one -- there's another question that kind of relates to this.  How do we go about the research that you were referring to?
>> Okay.  So when you are doing your research activities it is really -- you really have to just get out there.  You have  to, you know, meet different people and use social media and networking to your advantage.  And access different people that you might not have talked to before.  There are certain services out there like fable tech that can help you recruit participants for your research for sure.  But really it is about just expanding your network and inviting different people into your research practice.
>> I have a question from another participant.  I work in the design agency.  We work with many different clients.  A common issue -- this just jumped -- a common issue I run into when running accessibility training is convincing clients to use inclusive language.  Do you have any tips for getting buy-in?
>> My main thing for getting buy-in is meeting them at Starbucks or the coffee shop and having a regular conversation with them.  I think bringing a positive personality to the conversation is key.  It is not just about always convincing people.  But it is just about meeting them where they are at and seeing if we can find some common ground.  Then intuitively moving from there.
>> That makes sense.  So I have a question for Vanessa.  I'm so confuse about whether or not to use the word click.  I've heard to use select.  I've also been told never use select unless it is for a list or something like that.  There doesn't seem to be on agreement on the button action word.  Click is universal and not ableist language.  What are your thoughts about that.
>> I actually prefer select.  Not everyone clicks.  When you use select it helps your QA folks write their test cases in a way they can run the same test case for over a multiple devices.  Select is a more inclusive tomorrow, because you can select on a mobile phone.  You can -- that could probably touch or could probably a keyboard or describe a switch control or another assistive device.  So it is not really specific.  So that way you can use whatever you are doing, your annotations and things for over multiple devices.
>> That makes sense.  So I have another participants note.  Awesome presentation.  How has computer access changed for you overtime.  Do you require non-mainstream tools to do all of the work that you like to do these days?
>> As a really good question.  The answer is no.  I don't require anything that's not non-mainstream anymore.  But when I was younger, I actually tried dragon naturally speaking back in the early 90's when you literally had to train your dragon and a silent room.  You can imagine how horrible the experience was as a child going through that.  Now we have voice technology in our homes; right?  With Siri and Alexa.  It has become mainstream.  It is not an assistive technology anymore to use your voice.
>> Can you give some examples on what are the dos and don'ts for inclusivety words?
>> Sure.  When in doubt always use person-first language.  I say that because you don't know how someone identifies.  For example, I don't really identify as a disabled woman.  I do identify as a woman with a disability.  So when in doubt always use person-first language.  And also when you are describing someone's disability, it is important to realize that assistive technology and wheelchairs are not things that are negative; right?  So you wouldn't say someone that was bound or confined to a wheelchair.  Because a wheelchair can actually be quite liberating.  Just be cognizant of how you are describing people and that it is always in a positive light.
>> Great.  Lastly, we have a question about what other resources do you recommend to learn more about the topic?
>> That's a great question.  So I mean there's a lot of resources out there.  The UX research collective has just done a conference that there was a lot of great speak percent.  I read a lot of books.  Seek those books out.  I mentioned a few in my talk.  Mismatch by Kat Holmes and also Rich Donovan's book "Unleash different."
Really I mean talk to different people.  Get a lot of different resources.  Expand your books and resources that you get today.
>> Thank you.  Any final comments to the team that we have here?
>> Just thank you.  I hope your evening is absolutely wonderful.  I hope you enjoyed my talk.  You can follow me on Twitter at Ali.Alicia or connect with me on LinkedIn.
>> Thank you so much for the great session.  And thank you to everyone who joined us.  Hope you enjoy the rest of Axe Con.
amazonv: (Default)
Case Studies for Building Empathy and Awareness for Accessibility at Ally Bank
GCal
Outlook
Thursday
March 11, 2021, 5:30 pm -
6:20 pm EST
Type: Breakout
Track: Organizational Success with Accessibility
In this talk, Sabrena Foxx, Product Manager at Ally Bank, will review how the accessibility program at Ally Bank successfully implemented empathy and awareness events to drive buy-in for accessibility. This talk will be filled with examples of how to build a wide-reaching accessibility initiative.
 
[missed start in coctail class]
 
don't underestimate the power of friendship.  It's another way to tap into your support line.
You want to build a network of like-minded people and create a conscientious approach to creating linkages to build awareness.
The network diagram on this page shows how your accessibility program is the nucleus that can connect your company's ERG to the user group affiliations an the disability community.
If you can build an intentional network, you can create a win-win relationship for everyone in this network based on rapport, trust, and mutual benefit.
Let's look at -- let's look closely at this diagram.  You can see the word "your program."  Let's use that as your accessibility program.  It's the center, but it serves a valued connection between the disability ERG and the disability community.
These two groups can serve as excellent sources of connecting with people who have disabilities.  And you can also tap into a group of people who have a passion for this demographic.
Next, your connections with your user group opens the door for you to have access to people who do the same types of work with you.  And that could be another place for you to continue to source speakers or connect points to help your program grow.
Now, the devil is in the details.  You need to assemble a team to help you build out your programming.  This is where you need people who have good planning skills and execution skills.
You do not want to rush the logistics.  You want to think about the time zone.  What time should you have this session?  What are the delivery options?  Should it be in person?  Should it be virtual?  Create opportunities to broadcast from multiple locations.
Think about it.  Who are you inviting?  You want to foster a community between your different departments in your organization and most companies there are numerous departments all working on a single goal.  But these departments can easily have a siloed approach to their work.  If you can take a non-project opportunity like Global Accessibility Day, you can foster that sense of community between those teams.  I recently had a developer tell me that accessibility had gave her more opportunities to talk to her design partners than she's ever had in any company.
These events not only connect people but they also connect people to their jobs.  Next, you want to market the event.  Ask to have your event spotlighted on your internal intranet site.  Talk to your communications team.  Partner with the disability employee resource group.  These two teams can help you pick up some extra press to get your event publicized.
Use social media to build additional awareness.  Share teasers.  At Ally we have taken thoughtful quotes about accessibility or people who have disabilities, and we have posted those all throughout our different offices.  It was a way to generate interest and to get people talking.
The final thing that I want to talk to you on this slide is, have a plan to capture metrics.
You will need them later.  And hire somebody to take pictures.
Next, you've had a great event.  Now what?  You want to share your story.  By now you are the key leader running your accessibility program at your organization.  And you are the face of accessibility at your company.  Your team did a lot of work to attain full buy-in from your executives to launch your accessibility efforts.  Therefore, you want to continue to have their commitment.  You can do that by continuing to raise disability so that your executives know exactly what the program is achieving.  And it's helping them to advocate from the continued funding.
The first thing you want to do is keep your executive leaders in the know.  An event like Global Accessibility Day is an excellent PR opportunity for your program.  The event will promote additional awareness and advocacy.
We talked about bringing in external speakers earlier.  Why not ask one of your key leaders to provide the opening remarks or closing remarks after your guest speaker?  This is an excellent way to publicly have the importance of accessibility reinforced.
Now, you want to broadcast your metrics.  You have several metrics, I'm sure, that you're sharing with leaderrers on an ongoing basis.  But don't neglect to share the empathetic side of accessibility.  It continues to help with the story of why we're doing this work.
Use the metrics from attendance and share quotes from the associate base about the event.
We have seen that voice of the associate is a powerful tool that gives feedback to leadership on what the associates feel is important.
Now, hard work never goes in vain.  You can repurpose the materials from Global Accessibility Day.  Last year our team did a presentation on "How to Be an Inclusive Coworker."
We have been asked at least three to four times from different groups throughout the organization who heard about that presentation, from the disability resource -- disability employee resource group to our executive training team, they all wanted to hear what we had to say.
If you have the ability, record your session.  You want to ensure as many people as possible have the ability to listen to your presentation on demand.
Now, you want to share the story of success from your event.  I mentioned taking pictures on an earlier page.  They say a picture is worth a thousand words.  You can use these photos and quotes and metrics to give your report out to add color and depth.
It will help your leaders connect with their message in a more deeper and more meaningful way.
In summary, it's important to understand the importance of empathy and accessibility, and how you can use awareness, education, support, and advocacy to advance your efforts.  When you move to the human aspect as the gateway to the "why" instead of compliance and legal reason, you can energize your team with passion.  I believe one of our early participants from our first Global Accessibility Day said it best when we asked them to describe their experience.  And I quote... "It is a social responsibility.  I love that we held accessibility awareness day and that we have a company that promotes this type of awareness.  It helps all employees to understand our company values and how we live out those aspects in every aspect of our business."
So, I hope you have walked away today with a few gems to help you about creative ways to promote accessibility.  This is all the content that I have.  Katie, let's open it up for questions.
>> KATIE OLSON: All right.  Thank you so much, Sabrena.  And congratulations on the five-year anniversary of your accessibility program.
>> SABRENA FOXX: Thank you so much.
>> KATIE OLSON: All right.  So there are some good questions here in the chat.  So some of them are related to the simulation exercises you had talked about.  So we are wondering, how did the planning go for the disability simulations in terms of working and coordinating with members of the community?
>> SABRENA FOXX: Yeah, so we approached this very delicately.  We have heard about "Lunch in the Dark" and we knew that we just couldn't have this session by ourselves.  So we had Sarah Tapp as our keynote speaker for that particular year for global accessibility awareness.  We told Sarah about the "Lunch in the Dark" activity and we asked her.  Because we were originally going to have our usability team facilitate the dialogue.  We said, no, wait, Sarah is the right person to lead this dialogue.  So it was, you know, learning by accident, and then we realized, that's the right thing we need to do.
So in a subsequent year when we had DJ onsite, we knew we needed DJ to lead us through the dialogue.
>> KATIE OLSON: Sure.  So bringing somebody in from the outside to lead this, that's --
>> SABRENA FOXX: That's right.
>> KATIE OLSON: That makes good sense.
Did you have -- did you experience any individuals that were resistant or did not want to participate?
>> SABRENA FOXX: I think there was one person.  I remember she was so sweet.  She was like... she wanted to do the "Lunch in the Dark" but she had just come in from working out you know, we have a gym in our building, and she said she just wanted to eat.  She was like, they've got this lunch in front of me, I'm blindfolded, I've got to figure out how to put my sandwich together, I don't even know where my mustard is.  She said she had to stop and say, wait a minute, this is someone's life every day.  I need to respect this conversation, and it was a real a-ha turning moment for her.
>> KATIE OLSON: And that's good.  Because it sounds like she came to that realization on her own.
>> SABRENA FOXX: She did.  She really did.
>> KATIE OLSON: All right.  That's great.  Okay, let's see...
Here is another question.  This one is in from Emily.  How are you shifting hands-on experiences that were previously in person -- you know, such as your "Lunch in the Dark" and the dancing -- in a post-COVID remote work world?
>> SABRENA FOXX: That is an excellent question.  I think the one positive benefit from this has been we've been able to think broader.  You know, I don't think that we would ever have been in an at-home environment.  Let's take Ally, for example.  We have a large number of people in Charlotte.  We have a large number of people in Detroit.  But then we have people all over the United States.  We had always just focused our efforts on either hosting out of Charlotte or hosting out of Detroit.
But COVID made us think about... why can't we just have a total virtual event and have everyone dial?  And it also opened up our eyes to speakers that we would have loved to have had but we would have been like... we don't have the budget to fly them in.  But now that we can leverage someone and they can sit in the comfort of their own home, it's actually been, you know, eye opening and a better way for us to find speakers that we never would have been able to tap into before due to budgetary concerns.
>> KATIE OLSON: Sure, that makes sense.  It's actually opened additional opportunities.
>> SABRENA FOXX: That's right.
>> KATIE OLSON: All right.  Let's see...
Okay, here is a question about metrics.  You had talked about capturing metrics and reporting on the metrics.  Could you expand upon what types of metrics?  I know during the presentation you gave an example about who was in attendance at the sessions, are there other types of example metrics you could share?
>> SABRENA FOXX: I think being able to show year-over-year progress is one of them.  So being able to show, like, last year we had 10 people, this year we have 15.  You know, showing that the interest is still there and being able to put a story around that.  In addition, I think, being able to capture how many people are watching the presentations on-demand, and then being able to really bring in those pictures.  You know, because I remember my manager saying, make sure you take pictures.  And I was like... but why?
But then I got it.  Because we were able to put together a story that maybe enabled to voice the experience wasn't nearly as impactful of me being able to show a photo of people in the middle of the activity.
>> KATIE OLSON: Sure.  Wonderful.  Thank you.
All right.
I'm going to pop over to the chat here and see what else we have.  Oh, somebody is saying they loved the spoon that you had on the one slide, showing that example.
>> SABRENA FOXX: Yeah, the Liftware Steady is... it brought tears to my eyes.  I thought about my sister's father-in-law who has Parkinson's and, you know, I was like, you guys have ofigure out how to buy him one of these.
>> KATIE OLSON: Yeah.  That's what Gene said too, her father had Parkinson's.  That's how she related to it.
All right.  Let's see.  There's some more chat coming in here.
Okay, back on the topic of on-demand learning, which topics would you prioritize making first available to a cross-functional audience?
>> SABRENA FOXX: Probably your keynote speaker would be good.  And then if you have anything that is a learning opportunity, maybe you're teaching about a new technology that would advance your development teams your testing organization, I probably would try to get those on demand.  I know we have to go through an act of Congress to get a session recorded at my organization.  So I probably would try to find your top two or three and not take everything.  But two or three would still make people feel like they have been there.
>> KATIE OLSON: Okay.
Are there along those lines of kind of focusing on two or three key speakers, are there certain topics you would suggest to focus in on?
>> SABRENA FOXX: I think that one where you can bring someone in from the disability community is always a good one.  Because you want to continue to help people understand the "why."  So by being able to bring in a speaker, someone who walks the walk every day, I think there is an opportunity of learning, and then you never know what type of relationship you're going to strike up with making those additional connections.  And then I also think things that are related to people always want to learn more stuff, so whether that's your design team or your development partner, being able to show them new ways to make their job easier as it relates to accessibility, or even just thinking about innovative approaches, that can be a way to energize your workforce.
>> KATIE OLSON: Excellent.  That makes perfect sense.
Let's see here.
A couple more questions here.
Here is another one from an anonymous attendee.  What kinds of things did you talk about in your inclusive coworker training?
>> SABRENA FOXX: That one has been awesome.  So we talked about how to build better PowerPoints, helping people to understand how they need to tag images in their PowerPoints.  Really helping them to understand how you need to talk through a PowerPoint presentation.  We also talked about Word documents, how do you make those accessible.  And then the third thing we talked about making -- saving your documents as a PDF.  So just using the inherent features already built into the Microsoft products, we expose people essentially to those built-in items, so we weren't teaching people, you know, anything hardcore accessibility things that it was easy enough to grasp.  And then we also have exposed people to the subtitles in PowerPoint.  You know, a lot of teammates don't know that that is there.  So just by giving them little tips on things that they can use, and then Teams also has a feature in it to talk about live captioning.  So we introduced the teams to that.  And then we also talked about feature in Zoom that has live captioning.  So really a lot of the workforce tools that you already have at your desktop, we really leveled up those items so people could have more exposure.
>> KATIE OLSON: Great.  It makes a lot of sense.  It's stuff they have access to already, they just need to learn how to use it to maximize it.  Perfect.  That makes total sense.
All right.  I think we'll take one more question.  Are you up for one more, Sabrena?
>> SABRENA FOXX: Sure.
>> KATIE OLSON: All right.  Okay.  Here is a question about hiring people with disabilities at Ally Bank.  Are there specific initiatives to hire people with disabilities and bring them on your staff?
>> SABRENA FOXX: Yeah, there are some things that I'm not able to talk about, but we are an EEOC organization company, so, you know, we would never use any type of discriminatory practices related to hiring.  From a personal standpoint, I feel we will grow our accessibility program by leaps and bounds when I can turn to someone who walks the walk every day and ask them, am I missing the mark?
But there are things in place to just improve kind of the depth of where we are in terms of exposing people to different types of roles within the organization.
>> KATIE OLSON: Excellent.  And having those people on staff are just, like you said, it helps open the eyes and to just be able to have them live the experiences and help provide the guidance to even make things more accessible is wonderful situation.
Well, wonderful, Sabrena.  Thank you so much for sharing your stories and sharing your ideas about creating awareness and education, support, and advocacy.  We really appreciate your time today.
And thank you to all the attendees for joining, and I hope you all enjoyed just a couple sessions left in Axe-Con.
So thank you, everyone.  And take care.
>> SABRENA FOXX: Bye!
>> KATIE OLSON: Bye!
amazonv: (Default)
Boost Your Accessibility Compliance and SEO At The Same Time
Type: Breakout
Track: Wildcard
 
Learning and implementing accessibility techniques require extra time and budget. If you are struggling to get approval from your supervisors highlighting the SEO benefits of accessibility techniques can help you get the much-needed approval from the decision-makers to make your content accessible. This presentation discusses how adopting accessibility principles for content, title, links, images, list, and video can help your content to be accessible for assistive technologies and search engines alike. Examples in this presentation are drawn from the redesign project of the Penn State world campus site for online education.
 
I've been doing accessibility work for the last 12 years, today I'll be sharing my experience of accessibility compliance in higher education, co-presenting with me is my colleague, Levi.  
>> Thank you Ritu.  I am Levi Bloom, I work in the search engine marketing team at Penn State.  At normal times I would've been sitting only about 10 feet away from Ritu.  My specialty is search engine optimization.  Or SEO as we will refer to it.  I've been doing this about five years at Penn State but €16 total.  I'm excited to talk about how accessibility and SEO can work together.  
>> At the end of the presentation be able to identify the common ground that reinforces both accessibility and SEO.  This includes elements of navigation, and responsive features.  Hopefully you'll get one or two tips to get for your managers for spending time and money doing accessibility practice for your digital content, which also benefits SEO.  What is common in search engine optimization and accessibility, WCAG standards are accepted by all the universities across higher education institutions.  College and university focus on providing equal access to information, programs, activities.  There are web-based applications and online instruction.  All digital content should be accessible to all users no matter what browser, device or assistive technology they use.  Accommodating the needs of students with different ability is the right thing to do.  And it also helps education institutes save a lot of time and money from litigations.  
>> To compare SEO and accessibility, first, SEO.  SEO is hard to define.  Anything that you do in order to get your website ranked highly in search engines can all be considered SEO.  Comparing accessibility to SEO we have accessibility which advocates for ease-of-use and equal access to information by people with different abilities.  We have SEO which is what rankings and click to see a lot more profit motive on the side.  Specifically, the overall go with as many visitors to your website as possible ranking highly in search engine results.  Because these people are actively searching for what you offer, and clicking on your website in the search results, they should be highly targeted and very valuable.  Once these people arrive, we don't want to give them any reason to leave.  If a site is not accessible, it could be a good reason to leave.  Therefore, the website should be accessible to everyone.  Meaning there is great SEO value to accessibility work.  
>> There are different reasons why accessibility and SEO practices are in higher Ed marketing.  Both strive for the user base and both want to be readable by machines.  These machines can be screen readers or search bots.  SEO and accessible to have a common goal of reaching as many users as possible.  To achieve this goal they need to develop machine compatible interface.  
>> On the technical side we also have two audiences when it comes to SEO not just the people visiting the site.  Because if we could get actual people visiting your site from search engines, you have to get your website index and ranking in the search engines.  To do that you realize something called search engine spiders.  Essentially, these are machines that visit your website and crawl through it and render it and decide they will index your pages.  Google bought for instance the name of their web crawler.  botWe really want Google bot -- you can spend a lot of time learning about just this piece of SEO better off talking to Google engineers when it comes to that?  I will not get into the specifics.  The point is, are the similarities between search engine bots and technology excessively super important for SEO and having accessible website will help ensure that your website is indexed by all the major search engines.  Google, Bing, Yahoo, and more.  
>> Accessibility practices is based on four principles.  Perceivable.  No matter what he uses to access the content, it should be perceivable.  Operable.  They should be able to understand and interact with content using keyboard or mouse.  Content is simple and understandable.  -- Content across different backgrounds, devices like laptops, phone, iPad.  It is very easy to implement these principles if you adopt them proactively and integrate them in the initial design discussions.  Information architect and website code.  We've adopted such an approach our institution.  Majority of accessibility needs are met if we provide relevant title for each page, follow heading hierarchy on the page with meaningful links, accessible files, PDF's navigation, keyboard from the interaction, non-text elements like audio and video have alternative text, transcripts and captions.  That can be read by different assistive technologies.  Overall, websites should be built with clean and valid -- using the practice designs in mind.  
>> If you look at the list for SEO as is practically a mirror image of what you should be doing for accessibility.  The reasoning behind each piece is not necessarily the same.  Because of slightly different outcome goals usually, but for the work you're doing to the website it's all very similar.  A large portion of SEO really is a simple as making accessible and user-friendly website.  There many other areas to SEO, a very broad field.  In addition to this on page SEO there's also off page SEO.  You work with factors generally outside of your control.  Today will focus on the technical side of things and the on page SEO where we overlap.  Next we look at each one of these in detail.  
>> Title, the first page element.  Each webpage has a title that describes the topic for the purpose of the page.  Titles are not very obvious and hardly used by our sighted users.  They can have multiple tabs open on the same window and still navigate with ease from one to the other.  But screen reader uses depending on the title of the page, to move to the correct tab.  If titles are duplicated or missing it would be very difficult for screen reader to find the right page.  Best practice is to add accurate and concise title that refers to the content of the page.  Do not rely on your CMS to pick the title for you.  Set the title, tag structure to something like page title followed by the site title.  Which will help screen readers read new information first.  Like admission Penn State versus Penn State and so on.  
>> While most people already on the website will hardly notice that page title, the page title is front and center.  The search engine results pages are said in a fancy way of saying search results, but refer specifically to the presentation of the results for the users.  Anyway your page is the first thing people see and as a factor in whether or not they will click to the website.  Both a descriptive title of the page, and advertisement for your page.  It has to do double duty.  It needs to include relevant keywords.  Especially your most important keyword.  It should be enticing enough to make people want to click.  He just so the example of our home page title.  It works for people familiar with our brand, searching for Penn State world campus.  As well as other people in the target market who might be looking for degree certificates and courses offered online.  No click bait needed though!  Keep in mind, the search engines only a lot you so many pixels.  You only have approximately 55 to 60 characters to work with when writing your titles.  Anything beyond 55 or 60 characters is usually truncated and replaced by an… In the SERPs.  If you have accessibility and top of mind and title is accurate and concise you are all set!  To make it easier you might want to use some type of SEO plug-in that goes with your CMS.  In our case, we use meta-tag module and -- for word press.  
>> Headings.  Headings organize.  They can be edited in two ways.  By changing the font size and type and color.  Second is by adding a markup.  In both cases it will look exactly the same and for sighted users they will have no problem.  There have a satisfaction but not for the screen reader users.  Without markups it will be full of continuous text.  Screen readers will read the entire text from top left to the bottom of the page.  They will not be able to scan the page using shortcut keys to find the headings.  -- proper hierarchy of heading is important.  With sections and subsections.  Rule of thumb is to have at least one -- and not skip levels of headings to avoid confusion.  
>> All of your page content is important for SEO.  Due to the extra prominence of headings, many people believe they are extra important for SEO.  Get your important keywords in here too.  What keywords are we talking about?  Plenty of options.  You could use the main keywords or use variations of them.  Or you can use other important subtopics.  They are all good ideas, just think about what your user would want to find out.  The main point here is to use the headings in the first place.  Probably the biggest case for using headings is that they make a page more user-friendly.  They make the page scannable and easier to digest and being scannable is good for all users because almost everyone wants a page they can scan through quickly because time is valuable.  Who isn't in a hurry to get the information they are looking for?  You want to make the information easy to find so that people will stick around until they find it.  People show up to your site and immediately hit the back button to go back to the Google search results, ultimately choose a different website, Google can use as a signal that your website shouldn't be ranking so highly for the search.  There is also a theme here with keyword usage when it comes to ranking search engines, Google is smart.  It knows if a keyword is here in the title and the headings it must be important.  There is no faking it.  As opposed to a bunch of keywords in a footer and a very small font size, or keywords the same color as the background.  It is a snake and cures into your site like that are long gone.  And that's good news for accessibility as we will explain shortly.  
>> Content.  Content is a thing of the digital world.  Many attributes -- contribute to the regal status like -- the language used.  Keep the language simple, jargon free, concise and help with readability of the page and minimize the cognitive load on the user.  Best practices to choose font which makes it easy to distinguish the number and letters.  And nothing too small.  Research shows that left aligned text is easier to read as it has the predictable starting point for each line.  Avoid justified text which is more difficult to read because of the extra spacing in between.  Color the font is important as all users see the color equally car is ignored by this screenreader.  Make sure that color is not the only medium to convey information in the text or graph, use good contrast within background and foreground.  As you know, guidelines are teased 4.5:1.  Line spacing also contributes to better readability.  Recommendations that have spacing of 1.5 times in between the lines.  
>> Everything that you're doing for accessibility and improving readability, making content easy to understand, reducing cognitive load, it all makes it less likely for user to bounce and that's a good thing for SEO.  Don't give your readers a recently pierced to much presented the content.  We couldn't cover everything in this presentation but I really want to emphasize the jargon piece.  Because often times, especially for us in higher education, we are very guilty of this.  We write in these ways to demonstrate our expertise and vocabulary.  Rather than writing language that our site visitors will easily understand.  It is marketing content not a thesis, not an application.  I also highly suggest that you do some keyword research to find out what your target market is searching for.  If you're not doing basic keyword research you might end up putting a lot of effort into writing content that no one ever reads.  Then you're just wasting your time.  Their free keyword research tools are pretty good.  You can get ideas from some things might be using already.  Like Google analytics, internal site search data that you can collect, Google search console is provided by Google their free, no excuse to skip this step.  If you make your content accessible and remember that your writing to prospective visitors, you should do well.  
>> A picture is worth a thousand words.  -- All non- textual content photos, graphs and illustrations need to be developed for assistive technology.  Adding alternative text which is inclusive and visible on the pages help machines read these visual elements.  As you all know, images used can be ignored by the machines are properly tagged.  If not, screen readers read the names.  
>> All text can be very helpful for SEO as well.  Yet another place to put your important keywords.  You have to do this in a considerate manner though.  Because if you do stuff keywords into the text it will be annoying for someone with a screenreader.  You want to balance SEO and accessibility.  You can place keywords in their but still have the old text so the true function of describing the image.  There is even a potential SEO benefit for making the keywords part of your file name.  For example you can have keyword-keyword- 0027.jpg.  It's probably better than image 0027.jpg.  And if you have is to help your content writers and editors find relevant images within your media libraries all the better!  And alt text can also help potentially opens up your site to more visitors.  Finally, make sure the images are optimized to ensure fast loading pages, impact on your page load speed and Google is prioritizing web titles this year and really, who would not appreciate fast loading website?  
>> Like images, videos are an excellent medium to tell stories or to bring a class lecture online.  As was mentioned yesterday, nowadays, a popular trend is to upload videos more often online.  Adding the transcript and captions helps screenreader with these videos people with cognitive and learning disabilities can also benefit from it.  And so, our ESL learners.  Most popular platforms like YouTube a lot to add transcript and captions for videos.  Users can control the transcript and captions.  And video controls.  If you're adding video is good practice to the title after that the screenreader can announce it in the state of reading the filing of the video.  Similar to the image example I mentioned earlier.  
>> We always want more content in our pages.  Because in general, more content means more opportunities to rank in the search engines.  Text content is just the easiest content for search engines to process.  Having transcript for the video and/or audio provides a lot of text content for the page.  This could even be really simple to implement because you can probably take your closed captioning file and post that text as a transcript.  
>> Links, it's safe to say that links have revolutionized the information.  They connect text, audio, video.  But not all links are the same.  Some links can be more accessible.  Best practice is to add -- it is beneficial on two counts.  Visually, click here instead of the scholarship, the user would not know the purpose of the link.  Avoid linking the content that is not related to the link.  Secondly, screen readers use keyboard -- to pop up a link is multiple click here links are confusing and require complicated -- to understand the page and purpose of the links.  The complete URL, screenreader will read out each letter number and-making a different understand the destination of the link.  Make links user-friendly.  Good contract color would help low-vision users to visually add links, best practice is to have a contrast.  As mentioned earlier, links are interactive elements and keyboard users need a clue to know when they go to links or browsers have default but is different across browsers.  Adding custom focus to links can provide similar experience across browsers.  And easy identification of links.  Another best practice is to open links in a single window.  As much as possible.  If links open in a new window, user cannot use the back button or navigate back without closing the new window.  Which can be more confusing in interfaces.  If you have to open a link in a new window, add that it is your indication for screenreader.  Link opens in a new window or external link.  
>> Links serve many purposes.  They are so critical to SEO.  If I could I would wrap this part of the presentation in a H1 heading and make it strong.  I would even make it blank or Marquis across the stage of was not such a terrible user experience.  Instead I'll just say please, please pay very close attention to your links.  Why is that?  First, they aid in crawling and discovery.  Helping the search engine bots find your pages.  Will be a navigation menu which we will talk about more in a moment.  As well as other links throughout your content.  Quick aside while we're on the topic.  Must not forget your URL structure.  Google recommends you use single human readable and logical your will paths.  Basically they are saying to use words rather than a bunch of question marks and parameters because those to put you in situations where Google may have trouble crawling and indexing your content.  If you have a simple URL and links they should be able to crawl the site.  Links also help determine the authority or importance or popularity of your webpages.  In the simplest terms, the more links a page has, the more important the page.  Search engines use popular things like this to help them rank the best pages.  They are very secretive of details though.  Links provide context.  The link anchor text signals the relevance of the page.  Use actual descriptive keywords in your text.  Not just click here or read more.  There is no context from that.  Make sure that the anchor text is long enough that the user knows what they are clicking to, but not so long that it includes extraneous words and ends up diluting the meeting.  Those are the basics of linking.  If you can get that right you are better off than most websites.  Even that is just the tip of the iceberg.  
>> Navigation.  Easy, predictable navigation enhances the experience.  Keep the diverse user base in mind.  Remember people with low vision can zoom the page by 200 percent.  Check the design to make sure no information is lost or overlapping and there is no horizontal score bar at the bottom.  And no functionality of the page is compromised.  Best user experience for keyboard user is to access all page elements without keyboard traps.  Tab from top left of the page in sequential order with a visible focus.  Focus house used to identify the active elements.  Which is possible only with visible change in design like a border, background, color, or combination of these.  The default, browser setting or focus are not keeping up with the modern page designs.  
>> You want to keep a diverse user base in mind while designing a navigation.  We talked about Google bot early.  As part of that user base.  Just like a person, Google bot needs a way to find your webpages.  As mentioned earlier, it uses links to do that.  You need the links on your website and what better way to accomplish that that with the navigation menu?  You simply need regular hyperlinks nothing fancy.  Just your trustee -- no extra work is required.  Your site is keyboard navigable it will be easy for the bot to travel to.  
>> Use of mobile devices on the rise.  According to research 81 percent of Americans own smart phones and roughly, one in five American adults today have smart phone only Internet users.  The survey shows that this is a ready popular among people with disabilities.  It is important to make sure that the webpage are more friendly.  Some assistive technologies require a device on a certain orientation.  So it is important that content and orientation is independent.  -- These days because of mobile device usage Google is using mobile first indexing.  That means when they're looking at your website, they looking at the mobile version.  If you have a responsive website that meets accessible requirements and the content or links on the same regardless of the screen says you should be fine.  But if not your Google rankings could suffer.  I'd make it a top priority to improve mobile friendliness.  There is some overlap between accessibility and SEO.  Something that you do for accessibility have no impact on SEO and vice versa.  It is not a total overlap.  Your labels, the description, but for the things that do overlap, those are key.  Because they can benefit both SEO and accessibility.  If you're having trouble getting buy-in for your projects, make sure you add in all the relevant SEO benefits that can be realized by doing your accessibility work.  Combined, they cleaved more traffic to your site and less risk for an accessibility violation.  Working in SEO and feel your pain.  If similar struggles getting buy-in.  A lot want clear-cut results and hard numbers.  They want to know they can invest X amount of dollars and get Y amount of exposure.  With SEO we don't have that clarity.  There are a lot of estimates, a lot of work to be done behind the scenes before you even begin to reap the rewards.  And things change all the time.  Search engines are always moving the goalpost.  With the uncertainty not everyone jump on the bandwagon.  Especially when I tell them I can't get results overnight.  I might need to stress the SEO benefits.  It is so important for SEO and accessibility coworkers to join forces.  
>> There is much more to SEO and accessibility than what we cover here.  But we hope that you found some common practices that you can implement to boost accessibility and SEO of your websites.  Here are some free resources which which we use and find useful as you can see, some common tools like lighthouse, screaming frog which are used for both SEO and accessibility.  We would like your feedback and comments.  Or any questions that you have for me or Levi.  Thank you.  
>> Thank you!  
>> All right, thank you guys so much!  Let's, we have gotten a good 19 minutes for questions.  And we have a lot of them.  Again, if participants see them questions that you like in the Q&A upload them because I'm going to, not similar to SEO sort of use that to rank the popularity of the questions.  Then I will post them to the speakers.  Let's take this one from John.  He asks, do you know any concrete examples of improved SEO for company post accessibility and I assume remediation or consideration.  Like where it companies views improved but they solely on accessibility considerations, this information will be awesome if -- ammunition.  
>> I will start on that one.  That is a fantastic question.  The one thing that I will start off with is unfortunately, I don't have any great data to share in that one.  If I find some I will be very happy, let me know if you find any!  Because one thing that I typically say in a situation like this, is just that, and I think I alluded to it so many SEO projects because SEO ties into accessibility and content, the rest of the web development team, there are so many little pieces all around and you have to get really, all the little pieces right and in place to really see the results.  Unfortunately, I think it would be more rare that you find a situation where just adding SEO to accessibility would have the concrete results.  It is more possible if you have, if you do a large project all at the same time.  You could probably get it but unfortunately, in our case, we are so many projects and we just, we have to get the little bits of accessibility and SEO in there when we can so there's usually no big influx of SEO and accessibility work that we get to see the results right away.  
>> Okay I gotcha.  So look you have to almost except that is burned up beforehand to get the real data rate because it is hard to measure.  Here's another really popular question, bot say that identical text and image links close together like a product listing should be combined into a single link or one link should be hidden from the screen readers so that those assistive technology users avoid repeated content.  Are there negative implications to this?  Especially hiding one of the links.  And by hiding I believe that the person means from unit like a heading or something like that.  
>> I would say no.  I was so there's no issue with that.  Having one link instead of two would be totally fine.  And having in general, hidden content is something to be careful of but when it is done, in a way for accessibility, I think Google is usually good a lot of the representatives are usually very fond of accessibility work.  And I don't think.  I think in general, you would be safe to do that.  I can't speak for every scenario.  As far as I know you would not run into SEO issues with that.  
>> Gotcha.  This will be a little curveball but I'm staying true to this voting it is popular and I don't know anything about this myself.  It says how big of a role will good web accessibility scores play in the May 2021 Google SEO algorithm update.  Which I did not know until this question was posted.  Can you speak to that?  
>> Yes I can give you just a quick background on the upcoming May update.  It is going to be based on what Google is calling court web vitals, which is essentially, the user experience like your page load time, and whether or not the layout shifts while you are using a website.  Things like that, there are three specific things they are looking at.  No, that's a really good question because I have not tried to tie this to what I know about accessibility, we have not chatted about this either, we do have the rest of our web developers working on it.  -- Do you think performance is a big part of it?  Load and other factors that could have accessibility overlap.  But unsure exactly which is the best criteria that fits there.  
>> Yeah.  I would say definitely, tie the two together I think that there is enough correlation that they could really make the case for it and it would be a very solid argument.  That accessibility should be considered if you're putting changes in place in advance of the web vitals update in May.  
>> Yes, also I think everything is getting reinforced by that you know because the content will be on different view independent because it is more willing to face you have to be mindful of that and another thing, the touch area you know, 40 8X, which is, we are making sure that all of the new designs follow the pattern so that corrective process has really begun.  
>> Great, thank you.  Quite a lot of questions about transcription in media.  Here is one from Gina.  Is it redundant or considered duplicate content if you have a transcript on a video page in HTML as well as closed captioning within the video player itself.  I think the question is leaning towards is it considered duplicate content for SEO purposes?  
>> My thoughts on this one, another great question.  You guys are really on fire with some of these questions.  I think in a lot of situations, the close caption file might not be easily read by a bot or other search engine spiders so they probably only going to see the text transcript.  I think if you put both and they were reading both, most likely and of course, it could defer in certain situations, sometimes we just have no idea how Google will take something.  I think in general, they would figure out that you are doing it I think will be easy to see that is two different types of content and is not really done in a malicious manner.  
>> Like write this the SRT we know why they are doing this and of course until people start to abuse it and then they may adjust accordingly, right?  
>> That's true.  As soon as everything gets abused, the whole game to change and everything you know -- Chris will remove that white on white text from back in the day, right?  
>> That's a good answer.  Thank you.  There's another question from John and I think this is more of a tactical question think that he knows the technical answer but more about how you approach this.  It says regarding page titles, and convince clients not to -- to be descriptive of the content on the page?  
>> This is a great point of view you have to have a small title so that it does not read like a sentence.  
>> Yeah.  
>> It will get truncated if it's too big or too long.  
>> Would you say that would be where you compare the two together?  I think that it was Levi who talked about balance, kind of a dance there because the keyword stuffing search engines are not going to fall for that these days anyway right?  And it will create a bed experience for assistive technology user.  
>> Totally!  Working with clients and stakeholders and convincing them especially if they have certain ideas that contradict yours could be very interesting.  It's one of the challenges you always run into even when you have, if you ever SEO skills down managing the relationship with clients is always interesting.  doing this for 16 years is not a good enough answer?  [LAUGHTER] 
>> That doesn't often work.  One of the tips I have is just to see if they have, if there's anything in particular they like so I know, I work with a lot of people who very interested in what competitors are doing.  Say that your client is you know like to keep on top of competitors.  I would look for other competitors that might have, they might be using titles that are more practical and more not just a keyword.  I think there are a lot of examples even if you had to go to different industry.  You can find a lot of good examples of companies that have much more desirable page titles and get screenshots and show how they look.  And then compare that to the visual presentation of more keyword self title, maybe Photoshop some software there are some keyword stuff titles and with others that look a lot better.  And then by putting them next to each other, you can kind of see you know, you don't want the client to have their website get a bad reputation or look shady compared with the other competitors are doing there.  I would try examples like that if you could.  
>> Interesting angle!  That's always a way to get a response if the technical answer to work.  I think we have time for a couple more.  Here's one this interesting.  If my JPEG or -- image consists of a photo with words or text of a poem, what is a best practice?  Should I have alt text plus the description?  Assuming images -- a poem about birds, that's an interesting question.  
>> There are various ways.  It's a very interesting topic, simple but still very complex because it depends literally, to give all tags of the image.  But it's reference.  You know like why you are using it.  If it's an image of the palm after it all the text on it but depending on what page were including we tried to give an example of trying you can talk about the shrine or who was the sculpture or the practices about Penn State football.  Yet to see in which the pages are is the relevance of the image on the page would it carries can be two different things.  The same image can have a different -- 
>> Any best practices on character limits they feel are important.  The screen reader behavior has changed a bit but from a SEO perspective.  
>> I usually go with tried to follow the accessibility guidelines, off the top of my head hit the 12 words is probably the max that you could fit in there.  
>> And if you break it up you put too many and it do word stuff like that.  That's interesting.  Those are pretty good overlap between the best practices.  
>> Let's see.  What we have left, here's one.  I might've countered this by mentioning the white on white text earlier.  This just came in.  Do you consider white on white text -- would be treated as poor from a SEO perspective?  A lot of times is used for accessibility purposes.  Like offscreen text or something.  Some technique like that.  Definitely now with the shift to mobile, this was a big issue for a while, I think it's mostly ironed out with Google I wouldn't be surprised if they have issues with some things.  I think that in general, any time that your putting the text off of the screen or hiding it for legitimate purposes, waiting for the right time to show up for the user and things like that.  I think in general, that will be fine.  I think Google is most looking at that and I think it's one of the reasons they like to have access to your JavaScript and CSS files.  They can really look at how you're displaying it.  I think at this point they will make a good distinction between when you're doing that properly versus the malicious style.  I would assume if you are it also ends up being proper content versus a list of keywords that might've been more common -- 
>> I don't envy these people, and my doing this for good or bad reasons?  I think we might have time for one more.  This is interesting.  I'd actually like to know the correct answer to this.  This is from anonymous.  He says, and you've known for an element -- will be considered from a search engine bot as a traditional H1?  
>> My initial answer for this, and I'm not claiming it to be absolutely correct.  I am pretty sure the search engines will skip over those labels.  I think for them would be a lot easier if you have an actual H1 tag in there.  
>> Maybe, I've seen this technique quite a bit when the content is over the lock semantically.  People would use JavaScript to apply the declarations to get into an accessible state.  The team -- maybe Google might not be as adhering to that?  Is that what you're saying?  
>> Yes, this is just based on comments I've heard and I've read from some Google spokespeople.  The webmaster analyst, they personally advocate for accessibility but in terms of how it gets used in the algorithms and how they are analyzing in your pages, it is probably just skipped over.  Not for good or bad, just not something they are taking into consideration.  
>> When in doubt, use the traditional heading element whenever possible, one through six.  I can vouch for this technique for accessibility but you might not get the SEO that you would like.  Okay!  With that, I think that we are going to be out of time for questions.  We got through most of them.  Again, you can download these slides from the session page and the contact information that you see on the screen.  It will also be in there so if you want to reach out to our wonderful speakers, please feel free to do that and thank you so much for the talk today!  I hope everyone enjoys the rest of Axe-Con.  I will not sign off because our production guy asked to wait for the all clear!  Two and right on time! 
 
amazonv: (Default)
ARIA Spec for the Uninitiated
Type: Breakout
Track: Development
Specs are usually not very fun, but I have learned that reading the ARIA specs is important to fully understand all the various options that are available. In this presentation, I will walk you through the ARIA spec and show you how to make the most out of it to create custom components with ARIA.
 
[missed some]
 
for the uninitiated, I know you could have chosen other wonderful sessions at this time.  If you don't know me my name is Gerard K Cohen and engineering manager accessible person at Twitter.  You can check my website-- I'll have this information at the end just in case you missed it here.
The link to the slides are available at HTTPS--  bit.   Ly/2zc6TDf.  I'll show it in the end again just in case.
A few shout outs to my friends, if it you didn't get a chance to check it out today, catch the replays of something to nothing highway a team of two kicked off an accessible program and accidentsal advocacy when you don't realize you're steering the ship by Andrew.  And later on today I highly recommend you catch micro interactions, more like micro aggressions.  And you can't go wrong with any sessions in AxeCon.  Lastly thanks to the fine folkings at Deque for allowing me to speak today.
Wanted to take this opportunity to let you know I have accessible courses available on the plural site platform.   They are meeting web accessibility guidelines introduction to development components with ARIA and accessibility testing and screen reader use.  If you're interested in learning more from it me check them out at plural sight.   This presentation is mostly for in you users of ARIA I'll be walking through the documentation and show examples.  If you're been using--
Dangers of ARIA, official ARIA standard, pointing out important sections including the rules of ARIA.  Another resource is the ARIA authoring practices and discuss their proper use.  You should be well introduced to ARIA.
I'm going to demonstrate how to use the ARIA resources and finally walk through testing of the expand control by discussing the accessible tree and using the screen reader.
I want to explain why I felt like enter prosecuting this content.  Rl I feel ARIA has a bad rap.  * but accessibly vilified and understand why and a lot of the negative sentiment is warranted.  I won't deny that.  It can be misunderstood and abused and do serious damage to Assistive Technology users.
I think it's easier to say don't use it than to properly explain it and learn it it.  It's not going to help anyone.   At a certain point HTML is not enough.  ARIA shouldn't be an option, but when it is, it's your only consistency.  It's not perfect but you shouldn't be overly afraid of it and avoid it.  I recommend you take the time to learn and understand it.
I thought of something based on some noise in the CHAT room, apparently everyone's betting on how many times I mention the first rule of ARIA.  I'll randomly choose someone on Twitter the number of times I speak of the first rule of ARIA throughout this presentation.  I'll send you a prize.   Tweet me,--
With that being said let's start with the dangers of ARIA.   So I want to first talk about the dangers of ARIA why were it's important to know and use it right.  It's powerful and essential to providing the level of dynamics available in today's web.  Iewsing ARIA incorrectly and can cause-- and I've said ARIA should be a last resort basically to fill in the gaps that HTML has.
So why is ARIA so troublesome?  Besides people not taking the time to learn it properly is because ARIA supports  varies.  There are lots of hands in the pot.  Unfortunately ARIA's not always supported by browsers and Assistive Technology in the same way.  And ARIA supported sometimes there's bugs in the implementation.  What's frustrating it's different across all browsers-- some are not function is in another implement in -- sometimes they may break.  It's the same you would expect with webinar technologies.   Unfortunately there are no queries that you can query like  CSS or aability to test support.  The only thing you can do is test your work and provide work arounds.  You have to know what you're doing.  Throwing ARIA at the problem is not always a solution
To of pro that point, a survey in March of 2020 states home pages with ARIA present average 60% more errors than without ARIA.  The more ARIA is used the more errors the is found on the page.  It could be making things worse.  This is why there's a popular sentiment in the community that no ARIA is better than bad ARIA.  If you don't know how to use it, leave it off.  Hopefully you'll learn-- let's get into the documentation.
The official ARIA standard is the first resource.  Normally visiting the official standard or spec for web technology is reserved for the academic types.  Most of you have never read the script standard.  If you want to know what something means I urge you to come here first before  searching online.  As of this morning the latest version of the ARIA standard is 1.1.  You can get to the latest version by going to WW-- (READING).  Make sure you bookmark there.   If you want to do ARIA right, you'll reference it a lot.  I don't expect you to read the whole thing there are a couple of session I want to poit out that will serve as the basis of everything I talk about in this presentation and everything related to ARIA from now on.  Incidentally it's getting closer as it was promoted con date recommendation last week.  Today I'll use verse 1.1.  This version is section 5.3 categorization of rules which lists the available rules ARIA provides.  What are roles?  Roles are how you provide Semantic to elements and they're extremely important to accessibility it's the way you let someone know what it is.  And how it is to be used.  For example if I hand you on object and toll you it's a folk, you won't-- roles do the same thing and they are a contract between you and the user.  * once you provided a role you make sure the functionality and action that role is meant to provide.
The categorization of a role is key.  And there are four that I want to point out to you.
Starting with section a .3.2 widget roles, the roles you * indicate interactive elements broken down into two groups, stand alone and composite.  Stands alone operate on their own.  And there are 20 stand-alone widgets listed here some of which you may be familiar with button, check box or link.
* the next group are composite widget roles, parent roles or containers for other stand alone widget roles.  There's ate strict hierarchy with composite widget-- and often in a very particular order.  In most cases you cannot pick and choose which roles you compose to a widget.  Now let me repeat that because this is important.  There are very strict parent child relationship between certain roles some roles can be used as a child to composite role.  It's important to understand especially when with -- be very careful about how you nest components and role because you can be breaking your well intended accessibility if you don't respect the parent child relationship of rules.
I'll go relation Shiv of rules later.  Document trowct provides content organization.  These 26 document structure rules are not interactive but provide semantics like contents -- provided by HTML elements.
The nix group roles.  Not necessarily based on direct user interaction.  They don't need to be actively focused "user in order to be announced.  Some examples of content that would be considered a good use are sports scores, CHAT logs, timers or dynamic error merging.  Live regions are important and heavy used in today' dynamic web applications but can be a Bowlesed and overused.  I want you to be aware of them anyway.
The last group of roles are window roles.  And these are-- there are only two of them, window roles are considered ton dynamic in window pop-ups.  These can be composite widget role except they have especially meaning in terms of document structure.
*
Okay, finally and alphabetical rerns of all the available roles is listed in section 25.4, definition of roles.  * 5.4.  Another mart is section 6 on support thed states and properties specially on global states and properties and 6.5 which is the taxonomy on why ARIA.  Section-- it lists in categories.  For example widget attributes and relationship attributes.
Section 6.6 is an alphabetical listing of ARIA states and properties and I'll go over the usage later when I demonstrate how to build an expandable widget.  So if you're paying close attention you noticed I skipped the section on landmark roles.  They do not require ARIA.  When you have the need to express these roles you should be using the HTML counterpart.  What's the big deal of using them if they're available?  That's a great question to ask leading into the next section of the five rules of ARIA.
So when it comes to ARIA there are five established rules you need to be aware of.  High level rules in guiding you to when you develop your ARIA widgets.  The first rule is-- if you have started on your journey in ARIA, the first rule is don't use ARIA.  ARIA can definitely can cause fights.  If you're confused by this rule it's because it's not accurate.   This is an incomplete rule.  The entire rule is, don't use ARIA if you can use HTML instead.  As I mentioned in the overview of the ARIA standard it's used to describe widget roles and covered by HTML properties.  If you can use HTML counterpart first and supported by browser and Assistive Technology you're better off using HTML as it will provide all properties like ARIA while providing a table experience.
For example, going back to the ARIA landmark rules as demonstrated here most of these have HTML tags.  So instead of roam of banner, you should use the header tag, instead of role = complimentary, use aside.  Roam forming is form, and role = main is main.  Role = navigation is the that. AV tag.   * we'll talk more about accessible names in a little bit especially with the fifth rule of ARIA.
Role equals contact info is the same as the footer.  And the only one that doesn't have the associated tag is landmark.  When they were first fraused they advised to use the tag and ARIA role-- the HTML tag is widely supported.  If you make it a practice to value date your markup which you should you'll get an error not to double up on the Semantics.  You might get the same error if you do automated accessibility testing depending on the tool you use
The second rule of airplane air is don't change native semantics.  If you use HL7 first, make sure you don't use ARIA to change the semantics.  Many if you *.
The ARIA role takes precedence over the HTML.  Rule * note
Let's say your site or application has a collapsed menu and using a link because it's easy to style and natively  provides focussability which you heard was good for accessibility.  Make the page jump when had the link is used and you display your menu.  At some point you learn that links are meant for navigation and you should use a button for this but don't want to modify your markup foreign CSS.   You learned about * ARIA roles.  And you decided add the role of button.  If doesn't make sense to you right now, don't worry.
So what is the problem with adding the role in this way?   Well as you may have already learned role semantics are a contract.  The elements needs to behave as expected by the role.  But links don't account act the same as buttons,  links are activated using the-- you so to fix this, you decide to add JavaScript and restore the contra and technically Assistive Technology might smooth over the usage of space versus enter that shouldn't change the guidance here.
At this point, considering all the work that you had to do hopefully you realized it would have been easier to use the button if you use HTML it will provide platform provided for you.  You use ARIA to fill in the gaps as necessary.
Hopefully the third rule of ARIA is familiar to you.  All interactive ARIA roles need to be operable by keyboard.  If functionality is via mouse or input, it also need to be by keyboard.  Keyboard support is absolutely fundamental or accessibility support.  Ensuring keyboard support will get you a long way with input modalities like game controller.   The fourth rule of ARIA is don't use role = presentation or ARIA hidden equals true:  It removes the semantics of an element-- Assistive Technology user will not know what it is for and how to use it.  This could create a barrier.  ARIA hidden is a state that effectively hides it.  It describes things, when you're using ARIA hidden equals true it's rendered visible on the screen and it hides that element which create a serious barrier to users.
Proper ways to hide elements is a separate conversation but for now just know that role equals presentation and ARIA equals true is be dangerous if not understood and used properly.  The fifth and last rule of ARIA is all interactive elements must have an accessible name.  Why is this important?  I'm going to use a simple example.
Imagine you had a form with a few form elements.  Without an accessible name or label wall you're telling the user is input.  Input for what?  * what are they inputting?  One way and not necessarily the best way but one way would be to use the ARIA label property.  Now a user will know to provide the street address.  Again this is not actually the best way to provide an input label because it's not visible but we're talking a ARIA here.
So if semantics or roles give you the time then the accessible -- it's important for voice recognition user to identify and interact with controls on the page.  Make sure that all interactive elements have an accessible name.  The
The five rules of area are documented here at HTTP//www .. W.3.org-- (READING).
There's a lot of really good information documented on this page I encourage you to check it out more.
Another pornltdz resource that I want to discuss are the office ARIA authoring practices.  This resource is refer to as a sample of proper ARIA for various widgets.  The  authoring practices are available at-- (READING).  They demonstrate 27 different widgets and patterns.  They're interactive widgets that are only available via ARIA like tabs.  I'm going to use the accordion example because I wrote it because I'm familiar with it it.  Each pattern starts with information about the general purpose and usage which can include variations.  I'm going to skip over the example and go over the keyboard interaction section.  Included is the keyboard interaction which describes the element and expected result.  For example, with the accordion, when focuses on accordion, enter or space should essentially toggleling whether or not the accordion is expanded.  Expectations for tab and shift tab and up and down arrows and home and-- a also included.
* after the keyboard support section is a section that lists all the the necessary ARIA roles.  Everything you need to know in terms of implementing this pattern is listed here.   Now, to experience this in real life, let's go back to the example provided.  All the example is follow the same outline.  They start off with link at the top and introduction of the example and how the pattern is  implemented.  I'll get back to the links in a bit.
After that is a live working implementation of the pattern that you can play with and test.
After the example is usually a description or explanation of various accessibility features implemented.  While not always specific to ARIA it's good guidance to follow.  It explains how to helps-- enhanced keyboard navigation is provided.  Following that is the keyboard support  implemented.  This breaks down the expected keys peopled and the expected interactions.
And then a more detailed description of the roles states and properties and tab index in the pattern.  This is a mapping of HTML element to attributes using the example.
To rounds out the example are links to the CSS and JavaScript file and the Nark up used.  Maybe you're thinking of skipping the rest of the presentation-- not so fast.   These are used in a way that are not originally intended and often used incorrectly.  I want to point out noticed in the documentation.
In the very beginning of this section I talked about the links at the top.  And point out some things mentioned in the browser and Assistive Technology page.  This is really important.
The page states, testing Assistive Technology interoperability is essential before using code from this guide in production.  Because of the purpose of this guide is to I wills operate appropriate use of ARIA 1.1 as defined in the ARIA specification, these design-- (READING).  Do not describe and implement coding techniques for work being around problems caused by gaps (READING).
It is thus advise able to test complementations thoroughly with each browser (READING).
It goes onto say, and pept in cases (READING) specific Assistive Technology are demonstrating browser or Assistive Technology bugs.  (READING) and that is from the ARIA  authoring practices document 2 it .2 browser and Assistive Technology support with add ed emphasis by me.
What does that long quote mean?  * what it's saying is they don't provide guidance how to work around bugs.  It's actually a testing tool for browsers and AT vendors to beef up support.
The truth of the matter is ARIA is only a speck.  There's no guarantee that browser vendors and Assistive Technology are going to support it just the way building codes.  They advise testing everything before using.  One more note I want to point out here.  Currently this guide does not indicate which examples are compatible with mobile browsers while some of the examples include-- enhance mobile and touch support some ARIA.  There's not a standard Idessed approach for providing touch approach.  And this is from the ARIA document section 2.3 mobile and touch support (READING) this is an acknowledgment that these pattern may not be supported by mobile browsers.  The design patterns-- this is future work to be done.  Be aware that doesn't always guarantee accessibility.  Things need ton tested.
I'm not telling you you can't use the patterns.  You can use them as a basis for your widgets.  The point is test, test, test.  Everything you do and not just on your own hopefully with real userred you'll discover inconsistencies and fill in the gaps.  That's why it's important to know and understand ARIA and not copy and paste these patterns.
All right.  I got a time check.  I'm 40 slides left.   (READING).  (READING).
And this is from the ARIA authoring practices 1 # .5.2.  Not just relying on the inclusion of ARIA to-- a lot of times they'll deviate from the first rule of ARIA and use roles and properties available via HTML.  In order to test ARIA they have to use all of ARIA.  I'm not saying don't use the resource, just test everything yourself.  Follow the keyboard interaction and start with the rules and experiment with falling back to using HTML and make sure you can test everything with Assistive Technology.
Now I'm going to build on top of the principles I talked and dive into code for expandable component.  Called collapse or collapsable.  I'm going to call it expandable.
I'll start with an example of FAQ page.  Base odd not the experience, I'll demonstrate semantics.  In this case I'm using my mouse and clicking on the title to expand.  Let me try the same FAQ with the screen reader and demonstrate so you can have an idea what the screen reader might go  through.
>> First thing tab be skips over FAQ.  Luckily screen reader have other ways to navigate a page in this case I can use the arrow keys to navigate.
>> Heading level two--
>> Okay, so I found a heading formatted as a question.  Let me see what happens when I use the space key, nothing.   Enter key nothing.  Space and enter are conly used to perform a quick action.  Obviously something is wrong here and an Assistive Technology may not get the answer to the questions.  So bringing the screen back, let me talk what happened.  This FAQ is not keyboard operable.  I'm tabbing through the page and I'll not able to get to the FAQs.  This means without an Assistive Technology running a keyboard only user would not be able to access the answers and this is breaking the 30 rule of ARIA and WCAG guidelines.  Using the screen reader I was able to find something but not indication who to do.  * when I try to perform the quick action, nothing happened
So hopefully you all know that semantics are huge for accessibility.  Semantics expressions what something is.   Oncer you know what it is you know how to use it.  What is the respected result from using that thing?  Semantics play an important part and concept when it comes to accessibility of widgets.  Every intercontrol must provide the following three things.
Flame, role and value.  Of these three things semantic provides the role.  This is where we get into ARIA the air one dot two-- the roles are for document structure and-- and even a role generic described as a nameless container element with no semantic meaning.  It's --
So these 70 roles in version one dot one, only 29 are interactive roles.  Let's go back to the ARIA standard and see what we can find.
So here's once again the ARIA standard, there are 29 available widget roles these are the roles available in  ARIA.  You cannot make up your own roles.  So looking at these 29 rules any one of them-- I'll look at the first one, the button rule.  Rule provides definition and information-- here's the existing code with the FAQ title with the heading level two.
I'm going to add the rule equals button to the H2 and test this.
>> And a halving to the first FAQ announces as a button which is great.  I'm giving users an indication what it is.   I can use it to get to the answer.  But it doesn't work.   Now this is an important lesson in ARIA and semantics.   Roles don't provide interaction they describe what it is but don't provide the behavior semantics are a contract with the use once you tell what something is they know how to use it you need to honor the contract.  Even though I added the role of button this thing is not complete.  Not only that by doing this I broke the first three rules of ARIA.  As the a review the first rule is don't use ARIA if you can use HTML instead.
The second rule of ARIA we broke as well by putting the the role button on the H2 we replaced the H2 semantics-- the third rule is the FAQ is themselves were not accessible by keyboard.
We can throw a lot of code at this like adding a tab index and key down events for enter and space and that would complete the button.  I'm going to show you a quick fix.
All I'm going to do wrap the HT with the button and move the FAQ class over to that button.  That's it.  Small change with a huge impact.  Let's test this and see how to works.   Now I can access each one of the tabs and FAQ by tab and how about that contract?  * I've expanded FAQ using pace and enter key and it works.
(READING).  This is why accessibility professional stress learnling HTML so much.  It does the heavy lifting for you.   I know it's easier than it sounds, and it can be hard to know when it out HTML versus ARIA.  I'm working on a  periodic table.  This period ignorance table is every HTML available.  Many if you need to provide semantics you can find out if there is an HTML you can use if not you can fill in had the gap using ARIA you can find this at (READING).
Going back to the FAQ control, I'm not using any ARIAthis is -- this is a present AIG ARIA.  But for the goal of this exercise, providing semantics we don't need ARIA yet.  Don't use ARIA if you can use HTML.  (READING).  There's a gap here that we need to fill.  Interacting with the button produces a change on the screen, expands and collapses the answer since the main focus of accessibility is to provide-- to do that I need ARIA statements.  We have ten minutes  left.  I have a few more slides left.  If you don't mind let me get through this quickly.
Thank you.  Thank you so much.  Along with providing semantics ARIA provides states and properties to describe interfaces to Assistive Technology.  We will learn and apply them to'ing fantastic.  Going back to the three things they need name role and value ARIA helps provide name role and value and extremely important to accessibility because dynamic changes must be presented programmatically.  This is what ARIA states and properties provide.  As of ARIA 1.1, there are 48 states and properties.  Let's look at the available states-- back to the official standard 6.6 definition of states and properties there are 48 that are available and just like the roles you cannot make up your own statements and properties.  There are rules about which states and properties can be applied to specific roles some are required on certain roles and some are not supported or allowed.  Considering there's a large set of options and a limited way and set to apply them, how do you figure out the right one to use?  We can check back to the role define in his will find out.  Each role definition includes this table of characteristics.  And here are supported states and properties.  There were two states and properties allowed on the button role one is the ARIA expanded.  I'm going to select it to get more information.
So ARIA expanded it describes whether the element or  groupling element and controls is expanded or collapsed.  Just like roles each definition includes a table of characteristics.  And here's the roles used in role section where you see all the roles that this particular state supply.  As confirmation the button is listed and expanded property.  I'm going to update the markup and add ARIA expanded on the bottom-- (READING) and I won't go over it-- you can use whatever you want.  The important thing is the markup is rendered in the browser and that's what you use and assist assist interact with.  The markup has to be right.  So now the ARIA expanded state will let Assistive Technology know this can be expanded and collapsed.  And this is perfect.  We have a proper role proper interaction and communicating the state change.  We can see all of this by inspectioning the accessibility tree.
*less tree is a subset of the Dom tree.  It's easy to inspect accessibility tree and browsers.  I'm going to run through this real quick using chrome.  In in the inspector I'm going to open the accessibility panel and check out the accessibility tree information.  You can look at the  computed property.  Here it's listed as collapse.  If I expand it it changes to tree.
But that's not enough you have to make sure you test with Assistive Technology.  And even though the accessibility tree offers a quick way, you should test with some kind of Assistive Technology.  I'm going to run through the fix FAQ page with voice over so we can hear the difference and experience.
 I'm going to tab down to the FAQs.  And it announces a button.  We know it's collapsed.  And the fact that this control is announced and collapsed let's the user know there will be additional information when expanded.   I'll expand FAQ and can you'll hear the information.  All right.  So this is a successful implementation.  In the end all it took was correct HTML for Shen ticks and yun ARIA property.-- I was able to provide the necessary experience without abusing ARIA.  Sometimes you don't internet too much ARIA but other complex cases you may need to go full ARIA.   So in summary, don't be afraid of ARIA.  Familiarize with the specs and use it when it's only to fill in HTML gaps.   It's more importantly not when to use it.  No matter what you do, make sure you test everything.  Thank you for attending.  The slides are at HTTP-- bit.ly/2Zc6TDf.  You can reach me at Gerard Cohen.  Don't forget about the contest.  I'll son.  Now for questions.
>> Just a couple of questions here.  * I think we have five minutes or so.  So I will go with the ones that received most uploads.  Tons of questions.  It you so much Gerard.   Okay, so when you are ARIA live to update dynamic content how do you deal when you have multiple updates offer the page that needs object announced for example changing your age on the form updates your monthly premium and say, above your focus points on two separate areas within your page.  *
>> You're changing a field and there's dynamic information updated above or below?  I'll just answer both ways.  If it's below, technically you don't have to use the live region to announce they want.  They're in the flow of the document.  If it's above, maybe a science change.  But you had prioritize the updates that are happening.  Maybe combine them so there's one announcement but definitely you need to be careful with updating too much because you keep in mind that those announcements will interrupt or try to sneak?  While the user is typing.  So it can be very chatty.   So if you can make a design change to have that information lower or maybe there's a review page that can happen that would be my recommendation rather than try to fix it on the ARIA level fix it in the design level.
>> When would you want to use ARIA hidden = true?
>> Oh, there's actually good cases for that.  And let's see sometimes for example when using -- I'll use ARIA hidden = true for SPGs to provide ALT sex for SVG-- text rendered on the page.  That's one way to use it.
>> * what tools do you recommend for validating the  semantics of HTML?
>> That's a good question.  You can always -- the W3C has  in.  U.-- you can search NU validator.  That will give you-- there's obviously node plug ins that you can use, I believe axe, the automated testing tool does the validation as well.
>> Yep.  Awesome.  One last question here can you give an example of how an AT user can suffer from bad usage of ARIA?
>> Again, so not providing the right semantics.  I use an example of adding a role of button.  Abuse of live regions is prevent lent.  Many too things announced at the same  time.  * it's hard to listen to that.  And hiding content when it's not supposed to be hidden is another one.
>> Got it.  Awesome.  Well, I do apologize for any questions or all the questions that we weren't able to get to.  Everybody was very engaged.  Thank you so much for your time for this great content the Tuesday for attending this session we have a handful more left in AxeCon so I hope you enjoy the rest of it.
>> Have a great one.  Thank you, everyone.
>> 
amazonv: (Default)
Team Approaches to Accessible and Inclusive Design: a Case study on the COVID Alert App and Healthcare Portal
Type: Breakout
Track: Design
Everybody has the potential to craft inclusive experiences when they talk to the people who operate & use services. This talk is a story of how a grassroots approach to accessibility and inclusion infiltrated the roles on Canadian Digital Service product teams allowed us to scale accessibility within rapid development of the Covid Alert exposure notification tracking app in just 45 days from start to launch.
 
We will talk about how organizations can prioritize accessibility and inclusive design and consider the points of intervention in the system to leverage better outcomes. We do this by exploring the space of possibilities and uncovering points of exclusion. We will explore the role and impact of service, interaction, and content design as well as their intersection with development, research, and product. Product is not linear. Design is not linear. Inclusion is a spiral of access points and off-ramps. Let’s go on a journey together and explore more inclusive service design and delivery.
 
[missed some of the start]
 
>> Thank you folks.  I would like to talk 
We are working in multi disciplinary team 
 
 
>> Screen froze.  
We had to start with the COVID alert app and trying to ensure we were 
making it accessible and inclusive from the start and had this launched 
in less than 45 days.  I am excited to dive in to behind the scenes and 
some of the key considerations to make it as accessible.  Government 
services should be simple for all.  That is what the mandate is, serving 
people better.  We do that through dedicated teams of people who are 
working towards the different levels of government to respond to needs.  
And so everybody has the potential to craft an inclusive 
experience.  When they talk to the people who operate and use the 
services, because at the end of the day we're all in some way, shape or 
form, an experienced designer whether the roles in which we're hiring 
for in the descriptions that come, how we staff and set up teams, the 
choices we make as an organization and structure all play key roles.  
So it is also important to know it is part of a system, so the 
main outcome was to help reduce the spread of COVID-19 by creating 
thoughtful privacy notification service that addressed as many barriers.  
As the pandemic started to roll out we got in to June and the government 
of Canada announced that it would create a nationwide exposure app.  So 
we got started with an open repository called COVID shield as well as 
apple Google frame work that was released on phones.  So I want to take 
a step back for one second and look at what is it that we're here to 
talk about.  Because there are a lot of considerations on what is 
exposure notifications, and it is not something around a year ago or 
five years ago.  Technology didn't exist being utilized in this way.  
There was a lot of concern about that, so I want to know what isn't 
COVID alert.  It is not contact tracing.  It is important to note that 
it values privacy and built with strong considerations and went through 
security iteration as part of its way of how we look at servicing 
people.  We needed to ensure that it was a reliable and consistent 
experience honest with people.  That is why it is also voluntary, so you 
can download, delete, disable Bluetooth which make it not work and gives 
people choices on what to do when they're using it.  So when we talk 
about moving in a quick manner to respond to public health crisis, 
launching something we haven't started before in less than 45 days is a 
big deal.  There are a lot of thing you may need to consider.  On the 
screen there are two pictures of the COVID alert app.  That is the first 
that allows you to select the language, where English and French are 
recognized.  And it is first screen once set up to let you know you're 
set.  
There are a lot of routes we can choose, different paths.  So we 
needed to pick some things that would guide how the service would work.  
It needed to work well, but also needed to be used by as many people as 
possible.  So that meant the service had to have some pillars that it 
would consider every step of the way and guide all the decisions.  
Essentially what happens here is that we needed a service that would 
detect and know if you had been around somebody with COVID-19 you would 
get a detection.  It needed to guide you what the next appropriate 
action was, what does the province ask you to do.  Because each province 
is governed differently.  And there was also availability, it must be 
available for as many as possible.  One of the early things that 
happened is that it only worked on cell phones less than 5 years old and 
only went to the I-Phone 6 S and that left 20 percent of the cell phone 
carrying population.  So there was a lot of advocacy and signals sent 
through policy and advisory councils that it didn't meet the needs.  
Within six weeks apple and Google released an update and now it is back 
to phones that are 7 years old, back to I-Phone fines which covers 97 
percent.  Then we had pillars that would guide everybody.  It needed to 
be used by as many people as possible, we needed awareness, and how it 
would help them in their communities and how it worked.  
There had to be trust, confidence the app would be private, and 
security.  There were a lot of considerations when you look at having 
more than 50 federal partners, 60 proVINGSal and more than 9 provinces.  
So we relied on having procedures documented, like how to improve a 
design change or hand off research insight to design iteration to 
implementation and verify that it met a need.  We needed to see where we 
are in the system, how would we design intentional inclusion and how 
many factors there are.  There is a diagram that represents the solar 
system, but has things like public health, Canada, health care workers, 
businesses, vaccinations, apple Google frame work, lock down, PPE, so 
COVID alert is just a small piece of that system and how it responds.  
But if there is a lack of PPE, there is a significant need because 
people need to be aware when to modify behavior or if an advisory 
council is pushing for advocacy to change a piece of technology then we 
can adapt.  We need to look at the connections in the system, what are 
the emergent needs, what are the support structures and what are the new 
rules.  So we went from having 0 users to 600-0000 within the first 
90 days of launching the app.  That meant there was a lot of diversity 
so we had to set up products and services to respond well to those 
needs.  When we started with design research, we grounded everything 
insight.  We did userability testing, user interviews, research that 
looked at whether or not somebody was going to address a need.  We 
designed inclusive designs where we served content, interaction, visual 
experience and service.  With development it centered around the 
security, reliability and accessibility on the app and policy to send 
signals around the enablers.  We also needed to make sure we had proper 
support and outreach so the awareness efforts, storytelling but also 
support activities because there is nothing worse than releasing 
something in to the wild expecting people to utilize it, it is 
responding to a health care need and then not having support.  It is a 
multi service product system, built in POT Canada's official languages 
and done that way every step of the way.  If it was written in English, 
it was written in French.  And there were five teams set up, working in 
tandem.  A mobile app team, health care portal team, server team, 
partnerships and support team.  That meant there was a lot of humans 
working on how this works and a lot of considerations to go back and 
forth to make sure we're dong things with intention that we want to make 
sure the partnerships are aligned, going through the same goals, looking 
to meet the same health care needs, looking to respond and use the 
service in a way that makes sense.  
There was also need for looking at an international collaboration.  
Because as this was happening, we were some of the first in the world.  
Right now I think there are more than one hundred COVID alert apps or 
notification apps but we needed to leverage the international community 
to work and learn from each other as we were in different phases.  So we 
worked with volunteers from the public health foundation.  We also 
started with Germany and Italy who were some of the first on market, 
policy needs, considerations they thought about.  We also did the same 
with Ireland.  We had a lot of collaboration and participation with the 
UK and the Netherlands and Canada presented together their COVID alert 
apps and how they were responding to needs and basically being able to 
leverage experiences.  The U.S. shared insights on how to share the API 
for using the one time keys provided by health care workers through 
somebody who has tested positive and how to set that up in different 
states.  In Australia and New Zealand we exchanged that information, and 
Mongolia started working on their own.  A lot comes from working 
research with real users.  On the screen I have an example of one of the 
phases of our research insights.  Our team took the time to look at the 
facets that makes somebody whole.  In this particular instance we had 
five participant, one was French, five was by link y'all and three were 
English speakers.  P what we want today know here was did the 
participant understand what inexposure notification was.  And then we 
had observation that enabled us to make decisions on the app.  We also 
created service blueprint.  The point for this was to be able to know 
what the awareness level was, actions, knowledge gaps, who were the 
owners, who was monitoring, did we test it to look at whether or not we 
were responding to the emotional and physical needs of people.  We asked 
what the health and well being and measurable outcomes of the work would 
look like in terms of impact.  This meant we were able to come over with 
some over arching insight that helped guide how we will move forward.  
We needed to be flexible for provinces because they were set up 
differently, minimize burden on workers who were already tasked, so it 
had to fit in their systems and consistent experiences for app users.  
That meant we would rely heavily on working well together.  We used some 
tools to help us.  One of those was get hub where we were able to work 
completely on the open, had people responding before the app was ever 
released trying to compile, build and respond to things that might be 
bugs or issues, but able to increase the visibility of accessibility 
issues.  Able to tag the priority level, able to say whether or not it 
came from somebody doing testing.  In order to make sure we knew all the 
time where we stood so that we can do this in a continuous way.  We also 
used the design software to help us work collaboratively.  This enabled 
our stakeholders, entire team, research developer, policy experts to all 
be in the same file and be making changes optimizing and suggesting new 
approaches.  And that allowed us to collaborate much more seamlessly 
given the amount of stakeholders.  We also used something liked 
T-R-E-L-O which was enabling us to keep track of the work we had in 
backlog, tag people, and detailing tasks and checklists that need to 
happen.  We had goals for sprint, tasks, what was being done right now, 
what was being reviewed and maybe why and what was done was able to be 
moved off to outside of the sprint to be validated.  
It also meant that we did a lot of meetings together, and they 
were imprompt TU but we also had guiding rituals.  We worked in two-week 
sprints and did retros.  It was important for us to discuss what E were 
doing and how to improve.  We were able to see blockers and respond to 
those needs so we were not stuck in a position where we had an unknown 
problem.  And that enabled a lot more clarity for people to move 
forward.  We needed that because we were navigating ambiguity.  For 
designer, I believe it means that we're able to hold opposing and 
different thoughts intention.  And that means we may not have the 
answers now and we will have to make decisions and have to root and 
ground them in something important that guides us.  We have to be 
prepared for the challenges that exist and constraints in knowing what 
we know right now.  So because there are many directions and 
possibilities that are open, we needed to find a pathway forward to the 
unknowns.  L that meant we were designing for resilience, we had to 
think about values, and ethos.  We had to identify how those assumptions 
were imbedded in practice and realign those assumptions.  Some of the 
ways were talk King about mind set and embracing curious mind set.  A 
random question may create an opportunity, so what if and what now?  
Consider multiple perspectives, people teams, coworkers, stakeholders 
and people using your service, because inclusive design and demands uses 
diversity to challenge what is possible, shifting perspective.  And we 
prompt an experiment because the road to success and change is paved 
with those small experiments and recognizing that struggle and embracing 
ambiguity allows us to move forward when we don't know where something 
will lead.  We're aim together break the cycle with intentional 
inclusion.  
On this screen I shared a graphic that is an adaptation from the 
book mismatched and how you recognize cycles of exclusion.  Why, when, 
who makes it, how it is made and what we make.  And who is going to use 
it?  But I have also added foresight here in terms of that whole aspect 
of so what?  How does this affect us, how does this change the future of 
what we're doing?  Have we learned to turn insight in to opportunity and 
how will we do differently what we know.  That was to be uncomfortable 
not knowing everything, identifying pain points and reduce the problem 
space by focusing and activating goals forward.  So we have a lot of 
opportunities -- as many as we allow ourselves to get better at 
intentional and be more intentional on accessibility.  We don't have do 
it all today or tomorrow.  What we do afterwards is critical to the 
culture change and outcomes for people.  So aim to ask powerful 
questions, provoke your thinking.  What is important about that for you, 
shift your perspective, how might this look from our user perspective, 
check assumptions, what assumptions are we making?  Challenge your 
beliefs, how else could this situation be interpreted?  And then take 
stock of what we know now and lead to curiosity to aim what is missing.  
There is great graphic on how to aim at ambiguity.  So learn from 
others, synthesize information, communicate deliberately to move between 
concrete and abstract.  And then when you can craft and build 
intentionally, you're designing the design work.  You need 
intentionality prompts, notice and reflection, able to identify and 
share and hold space STO do that work and process that so you're 
balancing quick action with thoughtful reflection.  
I have basically taken a design process here and a traditional 
prototype, but I have changed to emphasize and understand.  We can't 
always empathize with somebody's situation, we don't know what it is 
like to be them.  So hoping we will understand all the situations that 
somebody is in is not really true, but we can aim to understand.  And we 
can understand by knowing the power, the mental models, context, the 
partnerships, intention and identity.  We may look at people aging, 
mobile DWOISs, older technology, primary language may not be English.  
And then people that are maybe deaf or hard of hearing, low vision, 
blind, have episodic disability.  Maybe they have low bandwidth or 
mental health condition.  
So we need to make it a safe space for people to give feedback, 
and by being flexible on when how and whom, enables the trust and 
willingness of the engagement with the team.  In those retros I talked 
about that we did as retrospective, we would use things like slack and 
send direct messages and getting a pulse check if they felt they were in 
a safe space, if they thought they could share most thoughts.  And if 
they had a word or phrase that could share their experience on how the 
week was, the retro, if they were heard.  We give them multiple ways.  
They could do it aanonymous, slack, video call.  Or somebody else to 
give that feedback to.  That is the core of how we work together.  And 
then how do we facilitate the backlog.  What is it?  It is a list of new 
features, bug fixes, infrastructure changes, or activities the team may 
need to deliver for specific outcome.  They need to know they're 
understanding at every level.  If it is not in the backlog it is not 
going to be worked on.  
User rise findings and insight, and technical and design open 
source channels.  Then we have to look at how do we prioritize a backlog 
like that?  Is it public health priority?  Do we have proof the user 
needs this or are we solving the right problem?  How urgent is it?  And 
is this creating debt?  That means we have guiding principals, plus 
sources and prioritization equals a backlog.  How often do we do that?  
Every day.  
One of the reasons is to make it accessible for every one.  Some 
people ask why do you need to make it accessible for all?  In Canada it 
is pretty diverse.  22 percent of people identify disability, and more 
than two percent of the population don't speak English or French.  So 
service design becomes important and intersects with inclusion.  An 
example of after we released the app we had exposure windows because we 
had new information from epidemiologist and we could say you have been 
exposed on this date or this proximity and this is how long your 
exposure would be.  
This came out of some of the research insights and the fact that 
we were using a continued iterative approach to accessibility.  So at 
the onset we created an accessibility plan.  We started doing what we 
coined as an inclusive design review.  We did more than seven of them in 
the 45 days before launch, two after launch.  And because we realized 
the team was working so closely together, they decided to address 
service inclusion decisions, interaction decisions, without having to 
have it be separate.  More than 70 accessibility issues were answered 
before the launch and more after the lawn FRP.  There are less than five 
accessibility issues now, and we do manual and automated testing as we 
ship and deploy new things as well as when it is being built.  That 
continuous testing features and functionality help us recognize this is 
a team sport.  It is not all on developers, not all on designers or 
researchers, it is the whole collective of a team working towards that 
goal.  
And some of the things that enabled us to do that is to develop 
accessibility triage tactics.  Decisions that were being made, and the 
issues were tagged using labels to support that visibility and scope, 
but also empowered people to say I have a problem here, this needs to be 
fixed.  That enabled us to get prioritization and to not have that 
become something that fell off or got pushed to a parking lot and not 
achiefed.  
Some of those tactics were upstream, so we had worked and are 
working on a COVID shield.  And we were referencing upstream issues so 
they could pull the fixes back up.  We had low pry errorty issues, 
medium priority issues which do not impact functionality, and high 
issues which were critical.  This work flow was created to support 
people who were being on boarded and the accessibility of beta testers, 
new issues that needed to be addressed.  It kept access about visible 
every day.  It supported conscious decision making in terms of 
priorities for the team but also identified where we may need better 
resources and support structures.  
It also lead to some big wins for government.  We have a public 
accessibility statement and a full public accessibility report open.  
And a service design lens that was applied with accessibility touch 
points.  Our beta testing included more than 6 thousand users, some that 
self identified as having a disability.  We wanted to make sure that an 
accessible service would include all touch points.  When you call 
service Canada, there is a TTY number to call.  It comes over to the 
Canadian digital service if it is something we need to respond to.  
There is an e-mail, a get hub repo with open feedback channels, so 
different ways in which somebody can engage and it becomes multi modal.  
Because we were working on those multi display nare teams, we needed to 
make sure we were also looking at inclusive governance.  What is 
inclusive governance?  It is essential to long term sustainability 
because governance is only inclusive when the efficacy is measured on 
how well it engages all.  What is the service, the system, how does it 
affect uptake?  The design is a pillar of the accessible Canada act and 
there is a need for different approaches with different demographics and 
the apple and Google frame work means sometimes we're more reactive 
instead of proactive because frame work changes the DWIS.  So priority 
is determined and guided by health care needs and enables us to respond 
in an agile way to fix, build, implement, repeat and make things 
sustainable in terms of core functionality and sustainability.  
We are able to leverage that every day, and we advance responding 
to the diverse needs of the populations.  
Inclusive governance sends signals for availability, accessibility 
and adoption.  It allows us to better pivot to we can serve the 
populations better.  We need to recognize how the echo system performs 
and directly intersects.  L on this screen I have a map of the 
approaches we discussed today.  Design reviews, userability from diverse 
communities, open issue queues, testing and things like that.  It also 
highlights things we could have done differently or better.  One of 
those is earlier tech intervention around automated accessibility.  It 
would have been great to have that set up from the first time we set up 
the build and then having to work backwards.  
We needed to re-evaluate earlier with stakeholders to look at that 
from the day we started and how we would measure accessibility and 
inclusion.  What we ended up with is more than 11 thousand support teams 
in the last, 6 or 7 months.  Hundreds of articles about access and 
availability, because when it first launched it only went back to apple 
or I-Phone six S.  
An e-mail address has been KASHTHed more than 26 times, and 
highlighted a key need.  Over half were related to emergency response 
notifications that you get from cell phone providers about COVID in your 
area or amber alert.  We were able to reach out to the departments 
responsible for that to address other issues and it allowed us to 
leverage a more whole governance response.  Key areas we had to consider 
were the types of work that needs to be accomplished.  We looked at how 
we worked together, how we might have governance, but what is the actual 
app?  We started with content design and needed to know that trust 
depends on understanding.  People who downloaded the app needed to 
trust, and if not they weren't going to use it.  A lot revolved around 
the people and the people they were with and places they go.  Most 
people think about virus transmission and it is tied to people and 
places.  If the people trusted the app would not track them, we had to 
show that, that the app would record exposures without tracking 
movement.  In other words we had to change the way of thinking of how 
the app actually worked.  So there was some over arching principals.  
Inform just in time, give just enough detail, spread out the density of 
that meaning and write it like a real human.  That meant to be 
conversational, not to give walls but text as people needed it as they 
move through the different screens.  Then we also looked at 
illustrations.  So there was a lot of feedback that came in about how 
people perceived information and what to do when you're looking at 
something that might be a bit anxiety inducing.  Because we were 
striving to be approachable to as many people as possible, we needed to 
have the insights around this.  Those research insights allowed us to 
change the on boarding screens and add some illustrations.  Some 
examples would be what is on the screen now.  The ultimate goal for 
these designs was to show a range of diversity in order to allow every 
one to feel like they were included in part of this experience.  So we 
needed some principals, create a clear and mobile and friendly concept, 
friendly storytelling.  We needed to make sure whoever viewing the 
images didn't feel discomforted or distraction or burdened.  We wanted 
to make sure it was accessible.  And that it was more universal, simple 
graphics understood by as many as possible.  They may seem like large 
ideas, but they were guiding concepts on how we would explore and 
visually represent the information.  Showing diversity beyond hair, hair 
is one of the most wonderfully diverse thing about us but also one of 
the things that can have someone judge us really quickly.  So how do we 
show there's a lot of diversity in something without having it be 
represented just solely by hair.  We also thought of things like using 
minimum color pallet.  Part of that was the pigmentation of skin color 
and the way your eyes move to different levels of contrast.  So the lack 
of contrast leaves little detail for eye to see again, bouncing your eye 
back the people with different contrasting details, for example those 
with lighter skin, making them the focal point of illustration.  
We decided not to give lighter characters pigmentation.  The 
second is the screen in on boarding, about privacy being safe.  One of 
the things here was we wanted to make sure that people needed to 
understand the intention of the service, and if nay didn't it would lead 
to mistrust.  The consequences of not understanding or following the 
rules of the service transaction can lead to negative consequences and 
prevent them or us from meeting our goals.  How do people move through 
the flows of what we're representing, what is the experience when they 
go from one thing to another and how are they interacting with it?  And 
so when you open your phone the look at something like COVID alert, 
there is always a moment of anxiety or anticipation.  Receiving exposure 
notification will not be pleasant and there is no real way around that.  
Ultimately the right thing to do as designers is to be as gentle and 
supportive as possible and guide people through the experience they're 
going through in this pandemic.  This is why in addition to giving out 
110 keys, we created an alphabet that took out letters like W for 
whiskey and instead used WiFi.  We want today have a universal story.  
The main screen contains -- all the screens use a hand.  You have no 
exposure or all set is a thumbs up.  If you have the agency and autonomy 
to gather more comfort from what you're seeing versus something that 
might be a little more scary or alarming.  
When we use that, we wanted to make sure that the first motivation 
was to help the human rather than machine.  Instead of helping the 
machine communicate status to the human, we decided symbols would be 
used by the hand.  So as complex as it may be, what matters is how do we 
translate it to human language.  When there is nothing to report, it is 
a thumbs up says everything is well.  But if there is a potential 
exposure, there is a small stop sign with hand up to seek guidance.  The 
only deviation from that in the app is when we needed a role reversal 
and there was something wrong with the machine and the human needed to 
intervene.  If you had Bluetooth off, airplane setting on YUR phone, you 
will get a round circle with an explanation point that is red indicating 
that there is something that needs to happen in order for the 
application to work.  
And this particular screen goes through some of the flows of the various 
screens that were created.  The idea is that COVID alert is there to 
guide people as a collective but most importantly as human beings with 
feelings during a pandemic.  
Then we get to development, we have gone through what content, how 
illustrations may be ready, experience of interaction.  When we got to 
development we were late before we started but we wanted to make sure we 
had the space.  IOS 13.5 had the frame work, because Google and apple 
pushed that.  There was a lot of media coverage talking about delays, a 
significant amount of pressure that we have something and that we 
respond to needs.  And there was a lot of work to do.  The proof of 
concept on how we might do this worked so we needed to be able to move 
forward.  Unravelling somebody else's work is a big task.  We need today 
do that in a way that was meaningful.  So we coded it in the open.  We 
wanted to thank other countries that allowed us to stumble together and 
people can fact check our claims.  
When we tested the app, we built our app on the foundation of COVID 
shield.  That meant that there was already a series of volunteers 
supporting in the development.  We had beta testers who turned in to 
advocates and QA processing became second nature.  Manual testing still 
haunts us because it was one of those things where Android devices 
worked across a variety of different O-S installs and that meant the 
experiences was different.  
We wanted to think in out comes and impact and make sure everybody 
is aligned on goals and values.  Understand impact of actions and carry 
the weight together.  You have to let research and health care needs 
serve the product.  We were able to strive for that step every step of 
the way and bring other folks in that way.  Working in the open takes 
practice, you need strategy.  Getting your government to work in the 
open, you don't want the practice when it is large scale or public.  Be 
as timely as possible when responding to issues and set priorities, 
sharing code plus you shall shoes helps every one.  We have been able to 
look at others and discover common problem and bugs and helps us improve 
functionality and accessibility of the app.  What is next?  We're 
starting to look at how we do this in terms of product planning and 
accessibility and inclusive design work flow and sparked interest.  
Now we are looking at ways to create and grow.  What are your 
product accessibility goals, how will we measure success, who will 
participate on the team?  What are we missing?  What are the potential 
obstacles?  Do we know the costs?  And what do we have right now?  But 
it also lists tools and resources that teams can use, or look at testing 
that they may have had manual testing and they have done testing to 
affect people that had disabilities, cross browser, fire fox, Safari, 
did we check things for manual testing like keyboard or reading order or 
if the alt text fits the content?  
I will share this separately afterwards in two outputs.  One is 
mural and a Google doc that breaks it out.  
What we want to learn now is how to improve access to COVID alert.  
We are still doing ongoing research, so if anybody wants to reach out, 
they can.  We're trying to learn about experiences with bandwidth, 
phones and computers, how it intervenes with health care, concerns with 
the app and anything else.  We would love to hear from anybody about 
things like that.  And if you want to learn more about our process and 
work, you can check us out at digital dot Canada.  
 
>> What research did you need?  
 
>> Well, the first example only had participants and then an ongoing 
series.  Basically every week a dedicated researcher was doing new 
research.  What that enabled us to do was we decided before we would 
launch that we would do a small scale beta with friends and family to do 
snowball research to get a bigger ball and then that insight lead us to 
there is more to do, and we had a three week delay and a large scale bet 
that with 6 thousand people to get a much more impactful series of what 
are the things people are experiencing, what happens with different 
devices, are people understanding because that would be crucial to the 
efficacy.  
 
>> I design software, do you have any idea on how to contact medical 
professionals, those using electronic health systems to test products?  
Do you have any automated tools you may suggest?  
 
>> We have not used any automated tools to my knowledge.  We have tried 
to look at ways to use, especially being the government in our case.  
There are some organizations and companies out there that can help.  I 
believe fable and nobility do that research where they can find 
participants from a variety of different backgrounds.  There are ways to 
find that through, out sourcing.  
Often it is the ways in which you engage and how many places you 
are looking and where will you find those people?  Because if you're 
looking for them on Twitter and they're not there, you have too find 
them.  You have to have an alternate approach.  A lot of that helps if 
you can go through community support initiatives as well, but there is 
also the balance of burden on those in this type of timing.  
 
>> Makes sense.  Thank you.  When internationalizing the application, 
was sign language for deaf people a consideration?  
 
>> I would say yes.  But also how we would do that became an interesting 
conversation in how do we include everybody?  How do you include things 
like sign language in English and French in an application, what are the 
best ways to do that and I'm not sure we have come up with a good answer 
and something we would love to learn more about if somebody would like 
to reach out.  We have done some research with deaf participants, or 
deaf and hard of hearing, but right now the material that are online on 
the websites do have ASL in some of the video content, but not 
everything has been interpreted that way.  
It is definitely an area we can improvement 
 
>> Sure, if anybody has ideas.  
How did you reach out to your native populations?  Did you to work 
through cultural sit YAGs, native, trust?  
 
>> There is a lot of distrust and mistrust from indigenous experience 
especially with working with government and research.  We did look at 
the policy implications and the constraints of government and how 
government is supposed to do it, because there are ways we should engage 
those populations.  And I think for my knowledge right now the ways we 
have done that is through the community facilities located on reserves 
and things like that.  I am not sure of the numbers, but I know we did 
that capacity and it is an area that is difficult to ensure you get a 
good consensus of population.  
How inclusive you are in your approach, is it something you're 
able to allow them to lead more of the research on or are you in a 
position to do that.  And in this case, because we were responding 
quickly to critical needs, it was something that happened but didn't 
happen as frequently as maybe it should.  
 
>> Okay.  Can you explain how the federal approach was decided for this 
app?  In the U.S. it seems their only exposure notify KAGS applications 
if an individual state provides them.  
 
>> So that's one of the reasons in Canada that not every province and 
territory on boarded.  We have a similar situation where each province 
has their own health ministry, and because they have their own health 
ministry they have their own decision makers, people that have to be 
bought in to doing that.  The federal government decided they wanted to 
and we started with launching the just one province, Ontario July 31st, 
then Quebec, Newfoundland, Manitoba and then continued until we had nine 
provinces and one territory.  There are still two province that have not 
on boarded.  They those last two cannot use it when he will, but if 
somebody from Toronto flies to Vancouver and the person from Toronto was 
later diagnosed, they will get an exposure notification.  The one gap is 
that the one time key or thing that let's other people know they were 
exposed is given through the health ministry.  So it is a call, you have 
tested positive, here is your key to put in the app so there is layer of 
security and intentionality there which is why we have the health care 
portal.  Some provinces are doing that so they don't have an online 
system, and others are using API and grabbing the server.  So we had to 
use different divergent needs.  Because each state operates similar and 
some counties, it is difficult to mirror that approach.  
 
>> This is probably our last question, so thank you to everybody for all 
the questions and thank you for your time.  I see the application is 
built with reAK native.  Did the team face challenges with this like 
accessibility issues being present on one platform and not the other?  
 
>> Because we were taking a repo that already existed from somebody we 
had that dictated because some of the work was done.  On the development 
side we were already behind the curve, we had to go with that right 
away.  But it became really important and highlighted really quickly 
when when he started looking at adaptive technology that there were 
problems.  So we spent that six weeks, 45 days, with four testers from 
health Canada that were testing new iterations, new commits to the 
repos, new builds of the app that were being shared on Android and 
I-Phone.  We were doing it with simulated browser stacks at some points 
because there were problems with focus states and being able to read 
content that was underneath when a menu was expanded.  So there was 
definitely a balance to strike there and it became important for that 
accessibility.  If we had waited until the end, we wouldn't have be in 
the best spot.  
 
>> Thank you.  I will say thank you no everybody involved and enjoy the 
rest of axe con.  Thank you for spending this time with us.  
 
>> Thank you.  
amazonv: (Default)
Accessibility Coaching: A Peek into the Playbook
Type: Breakout
Track: Organizational Success with Accessibility
In the fast-paced world of building digital user experiences, how do you continually keep Accessibility top of mind for pressured Product Owners, time-strapped Testers, and all of the team members in between? This presentation will give you a look at how Accessibility Coaches could be the answer.
 
Y'all can get a free copy of the book Kelly mentioned: 'A Practical Guide to Accessible Software Development at Scale' https://accessibility.deque.com/agile-accessibility-handbook
 
  And one thing before we 
         dive in, I just want to say it's become really pattern 
         throughout the conference that we are all at different places 
         with our organizations and our organizations journey's toward 
         accessibility.  
                  And so I hope that this peek in the playbook gives 
         you a peek into ours, but also maybe helps you with yours.  
                  So with that, let's talk about the beginning.  Which 
         for us was just a couple of years ago.  We started to work on 
         accessibility with full-time employees, just a few years 
         back.  And what quickly came to the surface was that we had a 
         lot of teams, right?  We have dozens of teams that work on 
         front end digital experiences for our customers.  Hundreds of 
         team members, right, those front end teams are made up of 
         hundreds of people.  And they all have questions, right?  
         With accessibility and web accessibility being a new concept.  
         We learned very early on that we had lots and lots of 
         questions.  And what we didn't have was a lot of expertise to 
         be around.  So it became apparent that we needed to sort of 
         think about how we were going to tackle such a big problem 
         that had so many people sort of involved.  
                  And as I have been listening to other presentations, 
         I've heard people from other big and small organizations say 
         the same thing, right?  Wow.  A lot to think about.  So I 
         know that is not unique for us.  
                  And let me just give you a feel for what we started 
         to do in the beginning.  We had training set up.  So we were 
         able to leverage some training resources to get our teams 
         familiar with the web content accessibility guidelines.  
         Familiar with the foundations of accessibility and some of 
         the basics.  We had some basic training.  Sort of settled.  
         We also had basic browser extension tools that we were able 
         to use.  
                  We very early on partnered with decue, which if you 
         are not familiar with that tool, it's sort of like one-stop 
         shopping for articles and resources on accessibility we think 
         of it as a safe place to search different accessibility 
         topics and get information that has been thoroughly vetted.  
         We leaned on that Duke University tool in the beginning 
         particularly.  
                  We were able to do automated and manual testing and 
         let our teams know different, through different metrics how 
         they were doing in terms of accessibility.  So again, we had 
         training, weed tools.  We had Duke University and we had 
         audits.  What we didn't have was an abundance of specific 
         information for teams who were using all of that, right?  So 
         we could hand you an audit and say here you have X number of 
         issues, but we didn't have a lot of ability to help you 
         through those issues one by one, especially if they were 
         complicated.  If you had visuals that just needed a lot of 
         TLC to get them to an accessible place.  
                  We started to feel like maybe it wasn't enough.  And 
         we kept coming around to this, how can we support these teams 
         more, what else can we do.  
                  And when we say teams I want to talk just for a 
         minute about what teams mean for us.  Our -- we use agile, 
         and on your screen I have listed out the roles that we focus 
         on from an accessibility perspective.  We designers, our 
         masters, our product owners, our business systems analysts, 
         so I mentioned we use agile, for us, BSAs write the 
         requirements that are part of that.  We have testers, front 
         end developers and then content writers.  Each of those 
         people has sort of a different role to play when it comes to 
         accessibility.  And as we thought about how to really help 
         each of them, we were thinking about those individual roles.  
                  So on your screen right now a quote that we used 
         very often in those early days, right?  We wanted to teach 
         these teams to fish.  If you give a man a fish, he eats for a 
         day, if you teach a man to fish, he eats for a lifetime.  And 
         we wanted these teams and these people on these teams to 
         learn how to do accessibility in their roles and to be able 
         to use it for their customer experiences, and then also take 
         it with them.  
                  So you know, we sort of joked within our team, we 
         should have this on T-shirts and bumper stickers and laptop 
         stickers, we said it so much in the early days.  
                  But it really rings true.  And I've got a graphic 
         here, beautiful artwork of fish in a hook.  Because again we 
         just used this all the time in the early days.  And I bet 
         some of you use it, too, I've heard it mentioned in 
         accessibility circles. 
                  So that was it.  How do we teach the teams to fish?  
         So we started kicking around the idea of embedding subject 
         matter experts into these teams.  Or embedding means into the 
         teams.  And we were able to run a little pilot.  We had one 
         subject matter expert who we were able to put on to three 
         teams.  
                  And one of our earliest lessons learned was if we 
         put a subject matter expert on a team, it might imply that 
         the work is going to be done for the team, right?  That they 
         are going to come in, and they are an expert on 
         accessibility, they are going to do it for us.  Actually, 
         that is not the message we were trying to get across, so very 
         quickly we changed our terminology a little bit.  
                  Actually, Ben Alan, who some of you might have seen 
         present yesterday, was reading Dil and bear row, he has a 
         book called agile accessibility explained.  What he was 
         describing in that book he called the subject matter expert a 
         coach.  And a coach was a way better way of describing the 
         subject matter expert.  And we liked it and jumped on it. 
                  And so what is on your screen is just the definition 
         of a coach, right?  A coach is a person involved in the 
         direction instruction and training of the operations of a 
         sports team or of individual sports people.  Coach may also 
         be a teacher.  
                  And so we dispatched two accessibility coaches on to 
         a handful of teams.  And you know, again, the thought was you 
         are not going to do the work for you, they are going to teach 
         you how to do the work.  And so for a second I want everyone 
         to take that accessibility cap off and maybe just put your 
         nostalgia cap on.  I want you to think about a coach who has 
         been meaningful to you or a teacher who has been meaningful 
         to you, or a coach who has been meaningful to your favorite 
         team.  
                  If we pause for a second, someone and probably 
         popping into your mind.  And I couldn't resist the 
         opportunity to put my favorite teacher from the journalism 
         school on the screen.  Because he is a teacher who sort of 
         comes to mind for me when I think about teaching.  
                  And we wanted to really drive this point home with 
         teams, that they are not going to do it for you.  But they 
         are going to show you the way.  
                  And so all right.  Accessibility cap is back on.  
         College nostalgia put away.  And we'll kind of dive into our 
         model.  
                  Okay.  So what we have here, and I will read this 
         for you guys, is just some of the basics of this model.  
         Right?  What is the coach actually doing or how are we laying 
         this out for teams, and so again, they are introducing the 
         concepts, basic accessibility concepts to teams.  We know 
         that the basics were needed, and so that is like A number 
         one, right?  We were also asking them to spend time with the 
         teams at each person on the team who had a role to play in 
         accessibility to really understand their job.  We didn't want 
         to come in and say, there is this one size fits all approach.  
         Weapon wanted to have the coach come in, and sort of talk to 
         people about how they built their front end experiences.  
                  So that kind of goes into learning how the team 
         operates.  And figuring out how best to integrate 
         accessibility within the unique teams.  We are introducing 
         concepts, we are talking to people and team members one on 
         one, and we start to show up where they are, right?  We start 
         to provide feedback on their designs.  We start to work on 
         front end user stories.  As I mentioned, those users stories 
         are written by BSAs, so a lot of one-on-one time in the early 
         days with the BSAs.  
                  And just sort of mention it here in those early 
         days, there is a lot of work for the coach, right?  We are 
         starting to set the groundwork for -- to transition on to the 
         teams.  So while you heard me say well we are not excepting 
         that the subject matter expert or coach is doing the work.  
         In the early days there is a heavy left for this coach.  Or 
         for these coaches.  But again, it is to sort of build the 
         foundation over time.  
                  So again, just to recap this one, we are introducing 
         the concepts.  We are trying to build the trust.  Learning 
         how the team operates.  Starting to provide feedback on 
         designs.  Starting to be involved in refinement forefront end 
         user stories.  Starting to build and write accessibility 
         focused user stories.  And then just recognizing that it's 
         heavy on the coach at first, but again about building the 
         groundwork.  
                  Okay.  So common question that started to come up 
         again in our little experiment with two coaches and a couple 
         of teams.  Teams would say, hey, you know, we know we've got 
         a lot of accessibility issues.  But we also are working on 
         new features.  So what do we do first?  Focus on the new 
         stuff, how should we do this.  So again in that same vein of 
         we wanted T-shirts that said this, how do you get yourself 
         out of that hole with accessibility deck, you have to stop 
         digging you, you have to put down the shove vel.  Stop making 
         the same mistakes over and over again, and that is where the 
         coaches came in was to help the teams to stop digging the 
         hole.  
                  So we'll talk more about that.  But again, a really 
         common phrase that we felt we were saying every day in the 
         beginning is just we want to stop digging.  We want to help 
         the teams in the roles to stop digging.  
                  So again, our very early steps, very early tactical 
         pieces that we had to do from a strategy perspective was we 
         needed to find product owners who might be interested in 
         this.  So we sought out volunteers, because we knew that 
         timing was an issue, right?  
                  A lot of pressure, a lot of deadlines, a lot of 
         moving PAFRTs for teams that are responsible for customer 
         experiences, so the time is not always right for everyone.  
         So those were some of our early steps or considerations.  
                  And then once like I said we had found product 
         owners who felt like the time was right for them and we had 
         the volunteer teams, we would have the coach on all of the 
         ceremonies, so again we use an agile framework, that meant 
         they would be on stand up every day.  We are not like a 
         casual observer, our coaches are on stand up every day, in 
         finance or grooming, in the retrospective, in the demos, they 
         are showing up across the board in team ceremonies.  We tried 
         to allow time for them to observe.  
                  We don't hand coaches a piece of paper that says 
         here is how you are going to execute with this team.  The 
         time is built in to learn the team.  
                  And again, we are trying to identify places where 
         opportunities exist.  So design meetings for example.  That 
         rose to the surface early, that their teams have different 
         ways that they meet regularly on designs, but if we can get 
         those coaches in there, it certainly is a great place to 
         start to talk about accessibility.  
                  And then also we have one-on-one meetings.  It's one 
         thing for the coach to show up in ceremonies and meets and be 
         a fly on the wall, but they also have to start one-on-one 
         with each of the roles.  
                  So again early first steps, socialization with our 
         product owners.  Seeking volunteer teams.  Making sure the 
         timing is right, and then some of the logistics around 
         getting the coach on ceremonies, having them set up 
         one-on-ones, and then showing up in some of the forums where 
         there might be some opportunities.  
                  All right.  I have heard quite a few people over the 
         last couple of days talk about shift left.  So I won't 
         belabor this too much, but just in case this concept isn't 
         familiar to you, I want to talk about it just for a second, 
         because it's really relevant here, and it was really relevant 
         for our coaching program.  
                  So shift left is basically a practice intended very 
         common in software development to help find defects early in 
         the software development life cycle.  
                  And so what I have on your screen is just that 
         definition.  The idea is to improve quality by moving tasks 
         to the left.  Shifting left as far as possible.  And of 
         course when you do that, when you move left, under the 
         accessibility umbrella you are making it a lot easier and a 
         lot cheaper to fix your accessibility problems. 
                  And the analogy that I was going to use, I also 
         heard today, so this must just be a common one, think about 
         building a house.  Right?  If you sit down with your 
         architect and meet regularly with the people building your 
         house, at the end when you arrive at your house to move in, 
         the pieces and parts are probably going to be accounted for 
         if you had regular conversation along the way.  
                  If you get there and it's moving day, and you 
         suddenly decide that you want a sky light, and you want a 
         door and you want an additional window, can it be done, sure?  
         Is it going to delay things?  Is it going to be expensive?  
         Is it going to be time-consuming?  Yes.  So again shift left 
         is an early concept that we are trying to explain to our 
         teams through our coaching program, just because again if 
         that coach can start to show up in those early conversations, 
         wherever they might fall, it's going to make a difference in 
         the long run.  
                  Okay.  So in the meantime, while those coaches were 
         getting up and running with those teams, the digital 
         accessibility operations team that I work on sort of had its 
         work cut out, right?  Because while the coach was showing up 
         in ceremonies, and the coach was working on the individual 
         experiences, we had to get some things together and we were 
         up and running.  This was in flight.  So we were working on 
         creating documentation.  
                  We were working on meeting with those coaches very 
         regularly to find out what do we need to write down for you?  
         What do we need to write down for your teams?  What lessons 
         are starting to evolve here.  We created documentation on 
         tools.  Even just how do you get them, right?  We are a big 
         organization.  There is a couple of different systems that 
         you would use to get different tools.  And so we needed to 
         get it all written down.  How do you put the requests?  Where 
         do you go for them?  How do you get this that or the other 
         thing.  So documentation around tools.  
                  We needed to get written down measures of success 
         within these teams, right?  We've got the coach there.  They 
         are showing up.  It seems like it's going well.  We are 
         getting a lot done around informing people about the basic 
         concepts, but how do we measure if we are moving the needle?  
         We got to work on mile stone documents.  And worked with the 
         coaches to say, what would be a good measure of early 
         success?  What is a good way to know that you are starting to 
         make in roads with the team.  We created mile stones.  
                  There was a team already in flight that I think 
         really started to kick up its efforts around this same time 
         to create an accessible component library.  Again, a concept 
         that we talked about throughout this conference.  We needed 
         one.  And so a team that had already been formed started to 
         really hit the gas on getting that component library built 
         out.  And we wanted to get an acceptance criteria library, 
         also built, right?  
                  Because as I mentioned at the very beginning, a lot 
         of teams, a lot of people.  So what usable pieces and parts 
         can we create that they can use that will make their life 
         easier, that they can have confidence about accessibility 
         with and that component library and the acceptance criteria 
         library sort of came together around that time.  
                  And then of course $64,000 question, how do they 
         know when they are done?  It's not -- it's never what is on 
         the surface, right?  It's never just passing some automated 
         tests.  There is always more to it.  We had to spend time on 
         the definition of done which we are going to get into.  
                  Documentation was big on what, on tools, documenting 
         mile stones, documenting that component library, the 
         acceptance criteria library. 
                  At the same time you heard me mention we had some 
         general training.  We had some foundations training.  We had 
         some introductory training.  So it became very apparent to us 
         that we needed to invest in some roles-based training that 
         pertain specifically to our organization.  That took into 
         account nuances that existed for us.  
                  So we spent a considerable amount of time and effort 
         making sure that the training that was available for our BSAs 
         struck the right balance for them given the pressures and 
         different things that exist for them in their day jobs. 
                  So crafting roles-based training was a big part of 
         our early coaching program.  Because for as much as the 
         coaches could guide different roles in their day-to-day, we 
         also wanted everyone to be able to step out of their 
         day-to-day, to come into some instructor-led training that 
         was really pertinent for them.  We wanted no one to leave 
         with any question about how does this pertain to my day job?  
         How do I apply this?  So like I said, we put a lot into that.  
                  And then again, regular touchpoints.  You heard me 
         talk about, okay, we asked the coach to have regular touch 
         points with each of the team members.  What we didn't 
         initially have set up that became very apparent, again was 
         that somebody from the strategy team, or the operations team 
         needed to be talking regularly with the product owners.  So 
         that, again, we could get the documentation that they felt 
         like they needed.  And the information that they felt like 
         they needed, sort of accounted for in our program.  
                  And then another thing that was coming together 
         around this same time was we needed to build up an automation 
         program.  We needed some tools, and we needed some focus in 
         the automation space.  
                  And so that was all happening as our coaches were up 
         and out there working on customer experiences.  
                  So you heard me mention the definition of done.  And 
         what we came up with, what is relevant for our organization 
         is sort of listed out here.  So the first thing that we 
         wanted to be taken into account was just that you had 
         100 percent automated accessibility test coverage in place on 
         your experience.  
                  So what this means is if you are a product owner or 
         you are a QA, you've got to have the automation set up before 
         you are done with our coaching program.  
                  And so that is our first piece.  And you heard me 
         just mention a second ago, right, we had to get that program 
         together and if the program is not together, we can't expect 
         that to be set up, so that some of this was happening in 
         tandem.  We were getting the tools in place so that teams 
         could get that automation stuff settled.  
                  The other way that we would measure if you were done 
         was if, again, everybody member of your agile crew knew how 
         to incorporate accessibility requirements, knew what they 
         needed to do and was meeting the milestones.  
                  And we'll talk about some challenges to that in a 
         minute.  But again, that was something that we just felt 
         really was important before you could be done.  You had to 
         have that taken care of.  
                  And then from an accessibility perspective the 
         digital experience and the crew is taking responsibility for 
         being release ready, and for having a plan for accessibility 
         debt.  
                  So if you are sort of imagining how this is all 
         unfolding, for quite a while you are working with your coach 
         and nor, working on front end features and you are working 
         toward a release date.  And so again for us release ready is 
         no critical, no serious issues.  
                  And that you have a plan for the other issues that 
         might exist.  And so that is a piece of our definition of 
         done is release readiness and a plan for accessibility debt.  
                  And then finally, you know, we require that the 
         product owner really has a strong grasp around ongoing 
         monitoring and accepts the timelines connected to 
         accessibility debt and to ongoing monitoring.  Another strong 
         theme that I've heard in this conference and that is part of 
         my work is just that you are never done.  You are only as 
         good as your last release, and the accessibility journey 
         never ends.  And so we really felt like we needed to make 
         sure that that was a really crystal clear concept for our 
         product owners, and that when your coach rolls off the team 
         they are still monitoring and they are still involved with 
         us. 
                  So that is our definition of done.  It's different 
         for everyone.  But that is sort of how things had shaken out 
         for us.  So many, many lessons learned.  I've just 
         highlighted a couple of them.  
                  One of them was easy.  We realized that we were 
         talking to people a lot about coaching, and we needed them to 
         do some paperwork for us.  Right?  And so we needed to 
         understand the roadmap, their tech staff, maybe about their 
         crews, so we established an onboarding questionnaire.  
                  It's easy.  A Microsoft Word document, hey, sure, 
         you are interested?  Take this onboarding questionnaire.  
         Read about our program.  Give us a little information about 
         you.  And we'll use it to sort of, to both of our advantages, 
         right?  
                  So that was a quick lesson learned that we were able 
         to adjust to fast.  Team churn is not something that is easy 
         to solve.  And we kind of call it the achilles heel of the 
         coaching model.  And it's a problem for many companies.  I 
         mean, probably every company to some degree, right?  And so 
         it falls right into our accessibility coaching pile, right?  
                  You are right near the finish line, and BSA leaves 
         the organization.  You had them trained, they were writing 
         stories, they knew how to account for everything.  And they 
         are gone.  And if we are using a sports analogy here, because 
         we are talking about coaching, right?  Who is your quarter 
         back going into the super bowl.  You have a real problem on 
         your hands.  We have recently been working on this one.  And 
         kind of leaning on existing team structure, right?  When 
         someone rolls off an agile team or leaves an agile team and 
         someone new comes on, there is an on boarding process they 
         have. 
                  We have been working to try to get accessibility 
         baked into that on boarding process.  Not reinventing the 
         wheel, but making sure that that new BSA has access to 
         upcoming training.  
                  And has access to a lot of the documentation that 
         you heard me mention.  So we can sort of combat some of that 
         with a regular training calendar, and then also 
         documentation.  Good documentation.  
                  But again, work in progress.  This is another thing 
         I mentioned, but I just don't want to undersell the value of 
         really regular touchpoints between our operations team that I 
         work on, and the product owners and coaches.  So right now 
         they are bi-weekly touch points.  Some teams that are close 
         to roll off or maturity, we are pushing those out.  Again 
         that regular communication really became vital for us, and 
         just a lesson learned over and over again.  
                  And then we needed our coaches to have some 
         documentation.  You heard me talk about documentation for the 
         people using the tools.  Or the, you know, the component 
         library would be usable we needed to get some stuff written 
         down for coaches for the sake of consistency.  And then to 
         really tie the pieces and parts of this program together.  
                  So those are some of our early lessons learned.  I 
         could probably do a whole presentation on lessons learned.  
         But again, those are the ones that we sort of wanted to call 
         out.  
                  So to sort of recap, I have ended with a to be 
         continued slide, because there is a lot that we are still 
         working on.  But I hope that that gives you a little bit of a 
         peek into the playbook, and super interested in questions.  
         And just having a little dialogue here about what we are 
         starting to get together.  
                  >> Many thanks, and the questions are definitely 
         coming in.  We have about 20 minutes.  Emily asks, what went 
         into the decision to take an outside coach and integrate into 
         the teams instead of identifying someone already on the team 
         to champion or own accessibility for their team function?  
                  >> Sure.  Some of it was capacity.  Our teams have 
         quick turnaround, a lot of existing pressures on them.  And 
         so we saw an opportunity to bring experts in, as opposed to 
         making experts out of people.  So that was the way that 
         worked for us was that we weren't really in a position to 
         create those champions within the teams at that time.  
                  And again, time can be of the essence, right?  I 
         feel like that is one of my buzz words today.  But for us, we 
         needed in some places to move quickly, and so rather than 
         yanking someone out of their team who had the whole day job 
         to do, what worked for us was to eninexcept expertise. 
                  >> How did the cultural impact the job 
         responsibilities of the coaches?  Were the coach's roles as 
         dedicated or were they also balancing their own development 
         responsibilities?  
                  >> No.  So these coaches did not have development 
         responsibilities.  We didn't pull developers out and make 
         them coaches.  We brought accessibility consultants or 
         subject matter experts in.  And I think we feel pretty good 
         about the way that that is unfolding, because again their 
         sole focus is accessibility.  So if you need that expertise, 
         whether you are a designer or developer or any of the roles, 
         you have it.  And someone doesn't have to worry about 
         anything else, right?  This is the cool part of it, is that 
         that is the model that we are using.  
                  >> Okay.  Next question.  If you can share where 
         does the accessibility program and coaching model live within 
         the organization?  Does it stem from development design QA 
         testing?  
                  >> Yeah.  So it's none of the above.  It's actually 
         in our digital organization.  And so under sort of the 
         product management umbrella is where digital accessibility, 
         the operations team and the coaching program sits.  Close 
         partners, of course, with developers and QA.  But in terms of 
         organizationally, it's within the digital organization.  
                  >> Okay.  Great.  Next question.  How easy or 
         difficult was it for teams to embed a coach into their sprint 
         ceremonies.  
                  >> Well, easier for some than others.  That is why 
         especially in the early days we tried to really vet their 
         availability for that.  And now that we have grown and grown, 
         we are past a place where we are like hey if this works for 
         you, we want to put a coach on your team, right?  Now we 
         are -- our program has grown enough where we are proactively 
         putting coaches on teams because we need to move the needle 
         on their products.  
                  So some very smooth transitions, others a little bit 
         harder.  Especially on those ceremonies, right?  Because 
         teams develop norms, and teams get close and teams get their 
         dynamics going.  So again I feel like I keep saying the word 
         time over and over again, but that is something that helps 
         when there is a little bit of friction, which will happen 
         occasionally.  We are not telling this coach to come in and 
         start anything quickly.  We really are building things in for 
         them to adjust to team norms.  
                  So I hope that answers that question.  Some easier 
         than others.  
                  >> Yup.  Have you gotten to the point where your 
         teams are fishing independently?  What happens to the coach 
         then?  
                  >> Yeah.  So we are pretty close on that.  Which is 
         really exciting for us.  And the coach rolls off.  Once we 
         have met that definition of done, and once the milestones 
         have been met, the coach does roll off, and rolls on to the 
         next team.  
                  And so we are excited about that.  Because that is 
         like right where we are right now.  Is we've got teams that 
         are doing it on their own and doing it well.  
                  And so, yeah, the coach does roll off.  
                  >> And Kelly just to add to that, is that a case 
         where you are working in parallel and getting teams in the 
         queue so the coaches do roll off, they have other teams they 
         are jumping on. 
                  >> Exactly.  That is a big part for us is just 
         making sure that that is smooth in the end, that the 
         transition is smooth, but that also teams, you know, that 
         might have, you know, be next in line for prioritization get 
         that coach, right?  That those situations or experiences that 
         really need the focus have the opportunity to get it.  
                  >> Right.  Great.  Lorraine asks, if you don't cover 
         it, I would be curious to know how you host or publicize your 
         acceptance criteria or AC library, we are building one up 
         now, but it's not very discoverable.  
                  >> So I'm thinking that this is how do we publicize 
         it internally, it sounds like.  
                  >> Yup.  
                  >> And that is a great question.  So our coaches 
         play a big role in that, right?  Because they are talking to 
         the BSAs, and it's our BSAs who are using the library.  The 
         coaches play a big role in that.  And I would say that is 
         probably the long and short of it, is that as coaches go on 
         to more and more teams, they are teaching more and more BSAs 
         about how to use it.  
                  It is a big part of our BSA training curriculum also 
         how to use this library.  
                  So the coaching program goes hand in hand with the 
         use of the AC library.  
                  >> Okay.  Great.  Next question, at what point does 
         the heavy lifting start to transition off the coach and the 
         team starts to take responsibility for accessibility 
         requirements themselves?  
                  >> Yeah.  So we like to break things out into chunks 
         around like three-month pieces.  And so we start to see that 
         shift in independence generally, some teams go faster than 
         others, and some teams have more capacity of band width than 
         others.  Some of them you will see quickly shift because they 
         have sort of the availability to quickly shift.  But 
         generally about three months is where we start to target 
         that, the shift of the responsibilities.  
                  >> Okay.  Great.  Next question.  What about product 
         owners who push back against the idea of a coach or 
         prioritizing accessibility, but their content is creating a 
         big risk for PNC bank.  How do you navigate that 
         relationship?  
                  >> So I would say you navigate it delicately.  And 
         that is probably where empathy comes in.  I think if that 
         happens, you know, a demo of the product with a screen reader 
         user is a great way to sort of demonstrate maybe some of the 
         realities that they might not be aware of. 
                  Another thing we have done is we have done empathy 
         labs.  And we bring our product owners in so they can use 
         some of the equipment that is brought in for an empathy lab 
         to sort of walk in the user's shoes.  I think when that 
         scenario comes up, if we tackle it from an empathy 
         perspective, that usually does the trick, right?  
                  And it is really beneficial for them to see their 
         own product, you know, from a different lens.  And so that is 
         a technique that we used, and I think had some success with.  
                  >> All right.  Great.  And just a reminder, if you 
         do have questions, be sure to put them in the Q and A tab as 
         opposed to the chat tab to make sure we have visibility on 
         those. 
                  Next question.  Aid Dan asks, do you give any push 
         back training contractors, if so, how do you overcome this?  
                  >> I'm not sure if I can talk about that.  So I'm 
         going to skip that one.  And take the next one.  
                  >> You got it.  Emily has another question.  You 
         mentioned turnover.  How are new team members onboarded and 
         trained on accessibility after a coach is done with that 
         team's engagement?  
                  >> Yeah.  So we are working on that right now.  And 
         that is where we are starting to work closely with our 
         masters, right?  So new BSA comes in, they've got to learn 
         about the customer experience tied to that product.  They've 
         got to learn about the norms of the team tied to that 
         product.  So we are working on getting accessibility tied 
         into that onboarding within the product teams.  
                  And it's like a hot topic for us right now.  That we 
         are sort of aggressively looking at, because team turn is 
         happening.  And we are kind of staring that one down now and 
         working through it.  We are seeing some promise with sort of 
         working it into other norms for new team members joining. 
                  >> Okay.  Say your company's roadmap is a detailed 
         multi-year plan, meaning no good time to disrupt product org 
         with integrating accessibility.  How do you demonstrate the 
         value of prioritizing that education, maturing the product's 
         excellence in standards and adding some extra steps to SDLC?  
                  >> Great question.  And I think what I just 
         mentioned about the product owners applies to leadership as 
         well.  And so when we had our empathy lab, you know, our 
         chief retail officer joined us for the empathy lab.  We had 
         other senior-level executives join us for the empathy lab. 
                  So that has really helped us at our organization 
         shine a light on accessibility.  We are lucky, in that we 
         have a leadership team that is brought in and then some.  But 
         we've also brought them along in some ways, and brought them 
         into the empathy lab.  You know, we've sat down.  You know, a 
         few times to really talk in smaller groups with them.  And so 
         it's tough, but I think the empathy gap and sort of shining a 
         light on that has been a good place for us to sort of take 
         it.  
                  But great question.  And certainly very relevant.  
         Probably for everybody at this conference really.  
                  >> Yeah.  Jeff asks, if coaches roll off, how do you 
         ensure standards don't erode over time?  
                  >> So that is that monitoring program I talked 
         about, right?  The definition of done our last piece of it is 
         that product owners are accepting responsibility, for all 
         their accessibility debt and then for an on going monitoring 
         program.  
                  And so you know, again, great question.  And one 
         that we've sort aggonized over.  If you have someone 
         constantly reminding you about accessibility and they go 
         away, how do you keep it top of mind for everyone.  How do 
         you keep it relevant.  We think one of those ways is -- and 
         we through monitoring there is going to be regular contact 
         because of that and we are looking at other options beyond 
         that.  We don't have a champions program right now.  But we 
         certainly like to get that up off the ground.  We know that 
         there is a lot of success that other groups have had with 
         accessibility champions programs.  
                  And so that is something we are looking at.  Again, 
         you know, not there yet.  So we sort of right now lean on 
         that monitoring program.  
                  >> Okay.  Another question.  I'm curious, how many 
         coaches did you start with?  Did that change and if so why?  
                  >> Yeah we started with one.  We started with one 
         coach.  Its grown quite a bit from there.  And it changed 
         because we were successful with it.  And we had I think good 
         backing from leadership to allow more coaches to come on.  
         Right?  We had some great feedback.  We made early changes.  
         We were having success and so we had the backing to bring 
         more coaches on.  And so that is what we've done.  
                  And so it's grown quite a bit.  But we started with 
         one.  We had to see if it worked.  
                  So, yeah.  
                  >> Awesome.  Could you give some tips on how to 
         build an empathy lab for an organization?  
                  >> Yeah.  So for us, DQ did it for us.  And so you 
         could follow up with your friendly neighborhood DQ 
         representatives on where the empathy lab stands.  
                  And so I can't speak to that too much.  That was a 
         way that we used our partnership.  And they came in and did 
         do it for us.  So check with DQ on that.  
                  >> Great.  How large is the operations team and the 
         coaches team?  
                  >> Yeah.  So the operations team is basically myself 
         and three others.  And remember, we are on the strategy side 
         of it.  So that is not counting all of the people on the 
         product teams who are working on it, but our operations team 
         is for and then we have I would say 14 coaches right now.  
         And that is growing.  We are actually hiring more coaches and 
         so if that is something that you are interested in being a 
         coach, you know, we have two reps out right now, one in the 
         mobile and one in the web space. 
                  So would encourage you to check that out on 
         PNC.com's hiring site.  
                  >> What sort of support do you offer your coaches?  
         Who do they report to?  
                  >> Yeah.  So our coaches report to my boss.  So 
         basically the operations team and the coaches report to our 
         director, Ben, who again many of you had the pleasure of 
         seeing his presentation yesterday.  And we have a series of 
         things, we have a daily stand up, one on one meetings, weekly 
         deep dive, and then of course we have those touch points that 
         you heard me mention.  
                  So a lot of times if a coach is having any type of 
         blocker, it will come to the surface during those touch 
         points with product owners.  Or we tried really hard to just 
         have the lines of communication be very wide open for that.  
         And so again we have a daily stand up.  We have a weekly deep 
         dive.  We have a matter most channel.  And we have sort of in 
         those regular touch points with the product owners and the 
         coach to try to surface anything or provide support if it's 
         needed. 
                  >> Next question on diversity.  How does the coach 
         answer questions from three different roles that require 
         different expertise, questions from design, development, and 
         testers?  Those with different disciplines with different 
         needs.  
                  >> So great question.  And our coaches are experts.  
         They know the ins and outs of the accessibility requirements.  
         And so that is a great place to start in terms of their 
         overall understanding.  
                  And they've got various backgrounds from we have a 
         couple of people with design background, development 
         background, most have worked on agile teams at other 
         environments before joining our team.  So they are pretty 
         familiar with those basics.  But again, it kind of goes back 
         to the requirements, right?  They know the requirements 
         impressively.  So from what I've seen they are able to kind 
         of use that expertise that they are grounded in and apply it 
         in different ways.  We built up the coach's playbook.  We 
         have built up some mentor ship.  We recently brought someone 
         skilled into a coach of coach's role.  Because he was really 
         seeing how it was working well.  And so we sort of have 
         someone now, a coach who is working with the coaches.  
                  And that is another probably really important lesson 
         learned in terms of that overall support.  
                  >> All right.  We have just a moment, a minute left.  
         One more question.  How do you handle turnover on the product 
         teams?  For example if half the teams were trained and 
         coached, move on to and new people join after the coach has 
         left?  I think you did address this within your presentation, 
         but maybe just talking a little bit more about what that 
         looked like.  
                  >> Sure.  So one of the things that we have done 
         over time is that really solid documentation, right?  So 
         we've got a lot written down for them.  That is one thing.  
         So you are not coming in to a new team without anything that 
         you can read up on.  
                  Not that reading up on it is everything, right, but 
         again, solid documentation to point them to is a good place 
         to start.  We have a really regular training calendar.  So if 
         you are a BSA who is new to a team, who is unfamiliar with 
         accessibility, you can go out to our training calendar, take 
         a look.  When is the next training session.  And then get 
         yourself signed up for it.  
                  And then I think I hit on this, but again the scrum 
         masters are helping us to bring that together.  If you come 
         on to a new team, there is all sorts of things you need to 
         learn, accessibility is just one of them.  We are trying to 
         establish it as a norm enough so that again when people come 
         on, and they have to learn about various pieces and parts of 
         the role, the team has come along far enough in accessibility 
         that it's just another piece of it.  
                  And we can point them towards the documentation, get 
         you trained.  And start to bring along.  I think a lot of 
         people are asking the question, because it's a really very 
         real one.  And it's very real for us right now, too.  
                  >> And I think that is where we will have to leave 
         it.  Apologies for the questions that we couldn't get to.  
         Kelly, we really appreciate your time.  Thank you so much for 
         a great session.  Thanks to everyone who attended, and enjoy 
         the rest of the Axe-Con conference.  Bye now. 
amazonv: (Default)
 Integrating Accessibility Into The Software Development Lifecycle
Type: Breakout
Track: Development
Championing a culture of accessibility can be difficult. It is especially daunting when you are the only one in the organisation who seems to care. In this talk, I will cover different approaches that you can take to improve the accessibility culture of your team as well as the accessibility of your products.
  
  >> Thank you, Ryan.  Hi, everyone.  Welcome to Integrating Accessibility into the Software Development Lifecycle.
So who is this talk for?  Had it's for everyone involved in development of products from product developers to product managers, product owners, UI designers, UX researchers and testers and anyone, all stakeholders even investors and founders and thon technical founders-- everyone should be -- this talk is for every one of you.  If you're in the audience-- I'm glad you are here.  A little bit about me, my flame is Segun, I'm a software engineer, I live in lagos, Nigeria.  You can reach reach me on Twitter.
What is a software development lifecycle?  It's the series of snaps that are used to create software products.  And the commonly defined sets are first of all, identifying current problems or product requirements, come up with a plan then design based on the plan and then build it that will transition from building to testing.  Testing what has been built fulfills all the requirements and solves the current problems.  And if our tests are satisfactory, feature or the product or the solution goes into maintenance mode.  And this is a cycle.  So it's repeating and going onto the  next-- and we have different approaches for that which is beyond the scope of this talk.  And here's infographic showing an alternate version where you have the planning and analysis of the problem or analysis of whatever you came up with during plans and you design and implement test and integrate with your current product.  So and then you move on to maintenance again.  So the cycle continues again.
So what really is the problem?  From the steps defined earlier, they should be able to capture all the problems in a software product and solve them and address all, any problem.  Because if you can identify the problem then we can solve the problem in most of the cases?  What is the problem?  The problem really is accessibility is usually not defined as a problem.  Most of the time, the product will go into product lifecycle and we identify all of the problems inned product and things we want to solve and ignore accessibility.  So even when for large part of the population for for users, a product is basically difficult to use or worsen is their quality of life, we in the team can consider that product and feature done while negatively impacting our audience.  Why does this exist?  Why do we have this problem?
And for the most part, in my experience, it's usually just the fact that, if you do not experience it, you do not know it.  So people creating products do not suffer from debilitating disability.  So we're blind sided from the realities and software engineers and designers who do not even know that there is a thing called a screen reader like I'm not exaggerating.  That happened last week while I was reviewing some code and explaining why the code needed to be refactorred.  And this developer, engineer, asked me what is a screen reader.  I assumed they knew what I was talking about in the comments.  So I had to get on a call and with them and show them what a screen reader was.  And asked me what is the point of the screen reader?  Oh, yeah, there are people who can't see the way you and I can see.  There are people who are blind and they still need to interact with software.  13456BG they need to mainly interact with software more than you and I need to.  Because for example, I can walk down to the store easily.  * it's a lot more convenient for someone to avoid traffic if they can see or hear the traffic oncoming.  But for someone who can't, they can easily order grocery,ing order shopping from home.  And for them, software * is more important and we need to build it to where it caters to them.
So because -- the problem is because the majority who are blind sided by this problem, from this reality, we-- sorry.   I'm going to go over that again.  Being the majority and being blind sided by this problem, our biases and ignorance has shifted development culture and values and what is important.  For example, what do we define as a good user experience?  A lot of time someone says sleek UI, fluid animation.  And these are all great and when done properly can be really be access I am.  Often times we define these in a way that could be even-- unfruitsful with people with disabilities or other problems.
So this is why the problem exists.  And I'm going to paint a scenario, Miriam needs to get groceries.  But she can't go out to get them herself because he's visually impaired.  And (READING).  I live in Lagos, nitrogen nitrogen.  This is typical.  And also we're in the middle of a pandemic.  She decides order online.  And fills the cart with things she needs, jumping through many hoops because the site was not designed for her in mind which are-- because she's using the screen reader or babe the text is too small, not enough contrast.  It can he ee numb rabble.  She tries to check  out.  Someone who is a screen reader can't check out because the site, the check out button is not really a button.  And so * it is not-- it can't take focus from a screen reader.   And while this might seem an extreme scenario, it is a real one.  We had a few-- we had the lawsuits for Domino's pizza some time ago because someone could not check out.  We've had several cinema cases in different countries.  And these are common.  These are common.  Sometimes it's a closed button with an icon and-- and it works if you have a -- only if you use a mouse.  If you can focus on it.  And even at that, it is not enough padding around it to make it  tappable-- so people who have big finger iters or people who have tremors like people who suffer from Parkinson's  disease-- you're making them focus on something very tiny because that's what the design says or because maybe as a developer you don't realize that there are people who interact with the web but not in this mainstream way of using, tapping on a touch screen or clicking the mouse.
So what failed Miriam in this scenario is did the UI developer?  The product owner?  Testers?  Had everyone in this software development lifecyclehas failed her.  When I prepared this slide, I said in a different scenario I said it could be -- emergency service.  A few weeks ago there was a news on Twitter that the vaccine sites in the US were not accessible to people with disabilities.  And it was being investigated.
And that's a real-world situation there.  I don't think-- it was inspired by a evil team or evil developer but built by people that didn't depend on Assistive Technology or on very accessible sites for them to function.  So they-- affecting people in realtime in real-world and the quality of life of people.
So how do we fix this?  If you're here, you obviously care about accessibility.  So you will be-- you are the champions that are going to help champion the new culture of accessibility of building accessible products.  And you won't be able to do it 0 alone.  If you're the only person that cares about accessibility in the company, it's going to be an up hill battle.  So the greatest weapon at your disposal would be to educate others.
So yeah.  Our greatest weapon is to educate.  We would need to be patient and kind and gentle even though we also need to be firm while getting people in the right direction.   It's not going to be easy for some of us.
So where do we tacklethis problem?  I have six steps of lifecycle.  At what point do you model it?  At the  beginning-- [Off Mic]
accessibility encoded as a screen reader I should get to log in.  As a user, I need to Zoom in the screen to 200 percent encoding that in the requirement.  And sometimes those requirements are not -- are not given by developers.   Sometimes at the design change, you have to ensure that, before a design moves forward or is under the developer is accessible or explain what are the problems.  It shouldn't just be oh, our site is not fancy enough or sleek enough.   Yeah, while that is important because you need to get people's attention.  You need to use animation to direct people's attention to the most important, you should also be able to, as we're gathering those requirements we should be gathering the accessibility requirements as well.  Okay, for yeah, we need more fluid animations but also we need to be able to turn them off or opted out of them.  These should be requirement to creating animation.
 
* we have a request to create, let's say, let's say a  banner, for instance.  Okay, part of the accessibility should be like, whatever message or call to action is also possible to non-mouse and nonvisual users, keyboard users, switch users, screen reader users, all of them can interact with these things and can actually get to the same goals which comparing things-- so to have this holistic solution, accessibility has to be a first class requirement at every point of the software development lifecycle.
So it has to become what, part of what we think of when when we do it.  It's not something we try to hook in when we have a problem or when we get a lawsuit.  It should be part of the whole process.  When we're seeking what needs to be improved and can done, we should be seeking how these are impacting people who have-- I like to call it alternate experience of our products.
So notes from my personal experience because I have worked with teams who, you know, had no idea what you're talking about when it comes to accessibility.  And I've had some-- I have experienced push back at some point by well meaning people.
I remember two years ago, I was leading a team.  And the team were junior developers.  And part of the requirements was every feature has to be fully tested with screen reader and keyboard to ensure everything is accessible.  And one of the team members said to me, why are you doing this?  I  said, yeah, because people-- not everyone interACTs with applications the way we do.  And he said-- I said, blind for example, if you're blind, you cannot use a mouse and a screen.  You need another way of accessing the work.  He said, honestly, he said, but I'm not building for the blind.   And I had to educate him, take 30 minutes sit him down and explain you're building for the blind.  The blind is-- the blind are required-- should enjoy the same experiences or similar experiences -- you need to do the same thing as you and I.  And I said-- I asked him, if something happened to you today and you lost your sight, what would you spend your time doing?  And he never thought about it.  I said, more than ever, you will need digital experiences because you'll be cut off from other physical experiences.  You can't go to see a game but you could experience it from home on your audio.  You can-- because your interaction in public places are limited because you can't easily protect yourself especially in a place like Nigeria where there are provisions for people who have come disabilities.  Yeah.
So for such people, digital experience has become more important, more imperative and it will be just terrible to ruin that for them.  So we need to take more responsibility with that.  So yeah, be prepared-- sometimes it's just sheer ignorance like honest, innocent ignorance.  And that sometimes, on occasion you have a person who just doesn't care.  But in my experience, they are like the exception.   When you make your case and make it with empathy.  Try to understand where you're coming from.  One mistake people make is trying to vilify the opposition, hey if you don't do it, you're an awful person, a terrible person.  And sometimes people think accessibility requires more effort than it does.  So they basically say, oh, we don't have time for that now, so we can come back to it.  And especially where they don't have, we're don't don't have repercussions is to do it immediately, you're willing to understand where they're coming from and educate and guide them because a lot of times you can get good accessible, you can go far -- it's like the-- principle.  We've-- 200 percent of the effort you can get 80% of the good result.  Sometimes you might have to settle for good enough instead of excellent.  But it's-- but still -- still keep pushing.  Because the idea is to change the culture, to integrate it at every step.
And the more-- as the culture changes and more people buy into the idea or more people begin to get involved, for example, if you had QA testers, testing -- or never tested for accessibility, start testing for accessibility.  They can find bugs for accessibility and become things that need to be done.
Designers who are now accessibility conscious and begin to consider that, maybe push back when there were requirements to do things that don't make sense like disability.  So getting -- that's why I said earlier, the biggest weapon at our disposal is education.  If you can educate and get more people to buy into the idea, then you can have like-- you get people to buy into the thought process, into the culture of considering people, considering accessibility best practices all the way, then sooner than later it becomes ingrained in the product and helps people get better experience with the products.
So sometimes what arrangements do you have to make?  How do you convince people?  For example, earlier earlier as a team lead I had to sit my team down and explain to them.  And I was able to say, well, these are the-- [Off Mic] so I could do that.  If it doesn't meet these requirements it doesn't go forward.  And that's actually one of the great things when the team lead, when the person, people leading teams or key decision makers are conscious of accessibility and the need for it and best practices.  So you might be a developer and you don't make toyings.  You'll probably be an engineer or designer-- engineer designer and you don't make the big decisions.  But if you can get someone higher up to understand what you're talking about and show them how achievable it is, then it can become a part of what the team does.
I'll give you an example.  I remember in had 2018 I was working with a team and asked, how long is it going to take to build X?  And it's an estimation.  Because they knew I was all about accessibility, the product owner asked me, how long is it going to take if we leave out the accessibility and come back afterwards.  I said it will take the exact, same time.  And I said, because making it accessible from are the get go takes like maybe just a few extra minutes for each step.  So it's really not that much many of an  overhead.  So I gradually, this kind of question just disappeared because it just became, okay, we're going to make it accessible from the get go.  And that was a way to win my team over or like, or the manager.  And so it became part of what the team did.
So if you're like a team leader like I was then, you could basically say, give technical arguments.  This is what we do here.  This is the standard for us.  It's-- sub participate if it's not accessible.  This might not be a good argument to make on the business side, this is a good argument to make with the team saying this is how to build products.   This is how to build UIs and get the buy in of team members and colleagues because you're setting what is the technical argument here.  This is -- if you don't build this way, you're not following best practices.  And yeah.  Technically people like best practices.  So the other one is moral argument.
The moral argument is that it's just the right thing to do.  Like I said earlier, for people who have debilitating disabilities, experiencing the world like those who don't have disabilities is not an option for the most part.  For example, if it-- for people who are wheelchair bound, I was talking to someone earlier, I said in my country, banks are required to have a certain level of security.  And that security prevents wheelchair users from accessing commercial banks.  So a wheelchair bound person can't go into the bank without someone's help.  They simply can't go in without someone else getting them through
>> Other means, regular means they can.  I don't know how they go to the bank if they do.  And so using mobile bank-- mobile applications for most banks in Nigeria have mobile applications that people access most of their banking transactions activities from the phone.  For people who can't easily into the bank, such software is very important for their day-to-day experiences.  And yes, it's very cash society, still doing leg bank-- credit cards are very- kind of like exotic here.  We don't even do credit cards.  So yeah, still you need to do cash based transactions with people who are disabled can do that from the come format of their homes.  As a matter of fact you have short codes you press in your phone that work without an internet and people can do transactions from their banks with short codes on their mobile phones.
And the tech that follows that has made life easier.  Now, imagine such applications are built in a way that people who are disabled can't use them?  That's just -- at this point it's becoming evil.  So yeah, so that's why it's the right thing to do.  Our products should be built-- we shouldn't marginalized people who are already marginalized because of their circumstances.
Now the business argument, what you can make if you have to convince the people who sign the checks, for example, this is in the UK, there's something known as the purple pound which is the spending power of disabled people and their families.  And it's estimated as of 2020 to be around 274 billion Euros.  -- pounds.  It's pounds.  UK.  Yeah.   And that amount is rising steadily.  So that's a lot of money.
And it's estimated that about more than 4 million disabled shpers click away from a website because they simply cannot.   You go on YouTube and search blind shopping.  There are a couple of people who blind bloggers who are have their experiences of shopping online.  Many times at the actually get to help them.  Many times it's just -- it's just more work and makes them less able to do anything they want to.
And also another argument you can make is that accessible sites tend to have-- can drive better traffic to the company and product.  And definitely there's a legal part, I can split makerring a different argument dark -- people who sign checks don't wants legal problems.  So let them know that, hey, not only are we doing the right thing?  We're doing this is protecting business from lawsuits, from unnecessary expenses and as a matter of fact, refusing to-- making a product accessible is another thing you leave money on the table.  Like I said earlier you might not be able to win every one at every time.  You must understand that still, while you need to do to work, you need to convince people.   It's okay if all you got was some but not all the way in.   Because while 100% accessibility, some accessibility is still better than no accessibility.  So if you don't get any enrollment, just keep doing the good work only your own.
Keep adding your bits here and there.  If you're a designer, a little bit here and there.  If you're a product owner, a little bit here and there.  Product manager, same.  Developer, same.  Just keep doing your bits and making someone's life a little less terrible.  Thank you.
>> Fantastic presentation.  Thank you.  Really appreciate your time.  I think everyone in CHAT is very much identifying with your experiences.  You know, I think your message of education and especially patience seems to be really resonating with folks.
Some folks may be not having the patience that you have.
>> Yeah.
>> We do have a few questions in here.  And I'll just remind our viewers to put them in the Q&A section.  And I'll make sure the top questions are addressed quickly here.
So the most popular question is something you, I think you really just finished talking about, but might be worth reiterating.  So this person's asking, when dealing with external stakeholders who are pressuring for fast, for  speed, foreign the release of a coming service, what strategies can you offer to help soothe that person into a position that you know, doing this right will actually take less time in the long run.  What other strategies do you have?  I know you mentioned a few.  But with regard to, I think the personnel you're dealing with internally, maybe you can take that angle to this question.  Which personnel internally are you dealing with to maybe have some success in this way?
>> 
  
  >> Okay, um, well, so when I talked about my product owner a few years ago, basically said, um, can we refuse to do the accessibility part and focus on the functionality?  And how long is that going to take?  And I said, it would take the exact same time, right?  Because, I think, like I said earlier, the divide is usually that people think it will take more time to make something accessible.  And sometimes yes, it does.  But it's about giving people the idea that, like on understanding where they come from are.  Okay they think it's going to take more time.  They think that accessibility is going to make it faster and access slowing us down-- you need to understand that okay, this is where they're coming from and this is what you think about this problem.
And from then, you decide, okay, who am I talking to firms of all?  Because like I said, there's an argument made for different people.  If it's a technical person that is that said, oh, yeah, do it fast.  Build it fast and let's go and we can come back here to do it.  And then you turn -- one example, like I said, your argument asks to tailor who I'm talking to.  You can let them know, hey, this is not good quality code.  You do know that, when we have technical -- it will slow us down thought long run.  And that could-- that could become a business problem because we get-- because the product -- the company gets sued because we're-- laws, depending on the country you're in.
If it's-- if-- I know people say, yeah, let's just rush especially when you're working with start ups.  Everything's always like-- some cases, no matter what you say, whoever you're going to talk is just not going to listen.  And that's why I said that, if you can't get buy in, you still do the bits you can.  You might not get it as far as you want to get it, but like I said, with the resource tricks you have, you can still have some accessibility out there.   You can still lay grounds work for your improvements even though you may not be able to get 100%.  The truth is, if you don't do it, someone else who is going to do no accessibility at all and worsen people's lives.
For example, we had this vaccine stuff.  We probably wanted it out there because old people should be vaccine natures.   But in the process -- I have no inside information.  But in the process they're basically cut off a lot of people who need in even more of-- if this was a private company, they could be in a lot of mess.  I think it was-- the government site -- websites and they were -- I don't know the process in the US.  But there were ways to deal with that.
 
 
So yeah, so what I'm saying-- I'm jumping in different places.  Some of what I'm saying, you have the argument of who you're talking to and decide which strategy is more likely to convince this person.  Is this person more likely to relate to-- if you're talk to the tech person -- the problem of technical-- [Off Mic] but it can become something that you have to agree entirely to be able to make accessible later and that is a big problem for the team, for the product, that's is going to take a long time.    make the argument clear to be able to win them over.  Someone on the business side, tell them what they're exposing themselves to, what money -- what they're leaving-- money they can be leaving on the table as well as the litigation they could be inviting.
>> Appreciate that.  I think there are actually a lot of questions similar to that one.  And I think you helped answer quite ail fuel in your explanation.  Thank you.
One question I'm hearing here, and you alluded this to a little bit.  You in the United States we have the Americans with Disabilities Act.  We have section 508.  We have a legal requirement.  You mentioned the Domino's.  Would Domino's with practicing legal disability if not for that lawsuit?
You can lead with the carrot or the stick approach.  And the United States the unfortunate reality is most folks practice digital accessibility because of the stick approach.   Without an ADA equivalent in Nigeria, how is your situation different?  Are you -- do you only have the carrot option available?  And do you find that to be easier or harder to tell digital accessibility?
>>
  
  >> Yeah, I think here it's more of the carrot than the  stick because we don't really have much many enforcement in terms of the law.  One of the advantages-- I won't say advantage, the uniqueness of my situation is I have had experience to work with people all over the world and different continent.  The difference in the experience all over the world and legal provisions.
But yes, how do you-- how do you incorporate that in  Nigeria?  This is one big problem with start ups in Nigeria.   Everyone's trying to rush to market and get something.  And many developers tell me, oh, uh, I wish that they're more interested in accessibility otherwise they will be able to build more accessible products.  And I said, if you can't get anyone on your side to ensure accessibility, you might not be able to get management onboard but you can get the team onboard.  You can get the design team, the developers.
For example, I worked with a team that had, the brown color for the company was like light green -- so sometimes we had their logos and text in lemon green on the white background.   And I found out that, hey, this is a nightmare.  Color contrast is off.  We need to adjust the designs to make it better.  And then we re-think the design and come up with color contrast.  And there were other things there, subtle things that are not communicatedded in design, for example, application stage.  So while building as a developer, I have to factor that in and being also, adding the engineers I was able to point them out doing code reviews and doing personal testing.
Like at some point you might not be able to get like-- you can't -- or you don't have the time to get everyone onboard.  But if you're getting one or two people and they would go onto get somebody else onboard and gradually -- some  people-- and sometimes they reach out to me individually and making a product accessible, making it respect  accessibility, best practices.  And while the industries are a bit younger than the US, I'm really excited the future here.
>> I love that mindset.  I mean, every individual barrier, you're able to remove is a win, right?  That's one less barrier for someone else to encounter.  So great mindset.
Okay.  We've got about four minutes left.  Let's see if we can find a question that we can answer quickly.  Let's see oh, how-- so I don't know if you want to answer this for your current role or past roles.  How long did it take you to make a significant impact or a measurable impact?
>> That's-- that depends on the team-- yeah, like,-- yeah that depends on the team.
>> That's a bad last question to ask.
>> Yeah.  Because it depends on the team, how bad the situation is.  Yeah, but there have been-- if you're going to make some impact -- and notice that the product is a bit more accessible, maybe within the first month if things were not really in place because simply by talking to the  designers, maybe you get a design -- can I get focused screens maybe?  Can I get-- [Off Mic]
And then design goes back and get you back and then you begin to, you know, where-- Semantic HTML if you're a web developer.  It might not be a huge result but it's additive.   And in time it becomes more important.  Like I said getting more buy inasmuch as possible is going to like make it exponentialal not just additive.  That's how it works.
>> Great.  Thank you so much for your time.  I really appreciate it.
Everyone in CHAT loves you very much and identifies very much with what you're shared today.  Really appreciate your time.  Everyone in the audience, thank you for attend being and character about digital accessibility.  Hope you have a great rest of the day at AxeCon.
>> Thank you everyone.  
 

Profile

amazonv: (Default)
amazonv

December 2025

S M T W T F S
 123456
789101112 13
14 15 16 17 18 19 20
21 22 2324252627
282930 31   

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Feb. 14th, 2026 05:16 pm
Powered by Dreamwidth Studios