Explore the world of accessible app design. We'll dive into common accessibility challenges faced by users in online forms and uncover practical solutions. Learn how to identify and rectify barriers that hinder user interaction, ensuring your forms are navigable and usable by all. This session will provide valuable insights into creating more inclusive online experiences, making your apps not just functional, but more accessible.
Topics covered in this session include:
• The Importance of Accessibility
• UX Accessibility Examples
• Adding Accessibility to Apps
Speaker:
David Kroll, Director, Product Marketing @Ashling Partners and UiPath MVP
3. 3
1. Introduction
2. A Story from My Career
3. Cautionary Tale for Enterprises (Section 508 and ADA)
4. Disability Statistics
5. WCAG 2.0 and the POUR philosophy
6. Accessibility within UiPath Apps Forms
• Considerations
7. Techniques for Building More Accessible Apps
• For hearing impaired
• For visually impaired & colorblind
• For the physically disabled
8. Questions
Agenda
4. 4
Making digital applications and websites usable by everyone,
regardless of their abilities or disabilities.
Broader Reach
• Ensuring that all users, including those with impairments in
vision, hearing, mobility, and cognition, can still effectively
use an application.
Legal and Ethics
• Not just a good practice, this is often a legal requirement to
prevent discrimination.
Benefit for All
• Designs that are accessible for people with disabilities often
provide a better user experience for everyone
What is accessibility, at its core?
9. 9
Under the ADA (Americans with
Disabilities Act), in 2021:
What is Section 508?
According to Seyfarth Shaw, more than
11,400 people have filed a lawsuit
within the USA:
• California saw 5,930 filings
• New York saw 2,774 lawsuits
• Florida had over 1,050 cases
Section 508 of the Rehabilitation Act, as amended in 1998, is
a federal law that requires agencies to provide individuals
with disabilities equal access to electronic information and
data comparable to those who do not have disabilities,
unless an undue burden would be imposed on the agency.
Section 508 applies to all federal agencies when they
develop, procure, maintain, or use electronic and information
technology (EIT). It also extends to organizations that
receive federal funding to ensure non-discrimination.
A Cautionary Tale
Source: https://www.seyfarth.com/services/practices/advisory/ada-title-iii-and-public-access.html
• Online Learning Platforms
• Healthcare Websites & Portals
• Public Transportation Sites
• E-Commerce Websites
• Banking and Financial Services
• Job Application Portals
• News and Information Websites
• Library Websites and Digital Archives
• Municipal and Local Gov Services
• Voting Information & Campaign Sites
• Entertainment and Media Platforms
• Social Media Platforms
Accessibility is Crucial For:
10. 10
For every 100 people picked out of
a crowd…
14 have difficulty with mobility
11 have cognitive disabilities
7 struggle to live independently
6 are deaf or hard of hearing
5 are blind or struggle to see
4 struggle to perform self-care
Disability Statistics
Image Source: https://pixelplex.io/blog/guide-to-section-508-compliance/
11. 11
Has one arm due to injury Is legally deaf Has colorblindness Is legally blind
Jane Doe Greg Larson Chris Jeffries Melinda Smith
How can we help those with disabilities?
Ensure our applications
can be used through pure
keyboard operation that
doesn’t require mouse
interactions
Ensure that our application
shows subtitles on video
content so that they can
follow along
Create alternative color
palettes for our forms that
may be selected during
operation
Ensure that screen readers
like Windows Narrator or
JAWs can read the forms
we create to blind users
Starting to sound challenging… are there guidelines to help us out?
12. 12
The Web Content Accessibility Guidelines (WCAG), published by the Web
Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main
international standards organization for the Internet.
They are a set of recommendations for making Web content more accessible,
primarily for people with disabilities—but also for all user agents, including highly
limited devices, such as mobile phones
WCAG 2.0 Guidelines and Classifications
A AA AAA
https://www.w3.org/WAI/WCAG22/quickref/?versions=2.0
Minimum level, addresses most
basic accessibility features
This is the target standard for
most modern websites, as it adds
greater requirements for even
great accessibility
The highest and most stringent
classification. Aimed at making the
website or app as accessible as
possible for the widest set of users
13. 13
WCAG accessibility is based on four principles:
Perceivable Operable
Understandable Robust
Information and user interface components must be presentable to
users in ways they can perceive.
User interface components and navigation must be operable.
Information and user interface components must be presentable to
users in ways they can perceive.
Information and user interface components must be presentable to
users in ways they can perceive.
15. 15
What can YOU do to drive accessibility?
• Educate other developers on WCAG principles
• Include users with disabilities in testing
• Tell your boss when a public facing app isn’t
WCAG 2.0 or Section 508 compliant
• Educate your organization on the liability of not
respecting ADA and Section 508, if relevant.
• Make accessibility a part of your requirements,
not an afterthought.
16. 16
Techniques for the Visually Impaired
https://color.adobe.com/create/color-accessibility
Use Adobe Color to build your color palette to ensure it
doesn’t conflict with those who are colorblind.
Bonus: You can also test against AA and AAA WCAG
standards for contrast complaince!
17. 17
Techniques for the Deaf or Hard of Hearing
Pro Tip: Use plain language, many deaf people have English as their second language. Avoid using
jargon or words they may not speak. This will also help with localization.
• Ensure subtitles are added to all video
content within your app
• Consider adding summaries to video
content that can be read as an
alternative
• Provide volume controls for audio
• Important notifications should have a
visual element, not just a sound
• Don’t just provide a support number on
a website, offer email, IM, and live chat.
18. 18
Techniques for the Physically Disabled
Pro Tip: Make sure your tab-order is correct for your controls!
Ensure that your application can be
completed without mouse interaction
Do not flash repetitive images or screen
elements that can cause seizures
Limit use of “toast-notifications” and
temporary popup notifications. These
can be hard for users that have physical
disabilities.
A little bit about me before we get started – my name is David Kroll and I’m a UiPath Community MVP specializing on Apps and RPA. I have roughly 15 years of experience building and delivering applications to real-world businesses. I work for Ashling Partners, an intelligent automation services provider, where I currently do a mix of solutions engineering and product marketing, which is incredibly fun and keeps me on my toes. I’m also very passionate about apps and UX, so I’m going to dive into an important segment of UX today around accessibility.
So why does accessibility matter and why is it so important to consider when building applications? Well, let me illustrate this by going back to a development project I worked on previously in my career.
The application development project was for a solar power manufacturing company where we were building a document management system that would be heavily used by our quality control team on the manufacturing line. One of our key stakeholders was a very nice woman, we’ll call her Martha, and she was the rock star of the quality control team. Martha’s job was to make sure that the solar panels we were shipping to our customers were going to work on the first time with minimal warranty claims. A lot of this documentation was processed daily while on her computer. Martha had great attention to detail and found many gaps in quality – she was crucial to operations.
During our project, Martha gave us many great requirements to make the document management system better – and after several months, the project was a huge success. We built a fantastic DMS which included approvals, notifications, and workflow – all the bells and whistles. But the most striking moment for me was when I witnessed Martha working on the new system after it had been deployed. She immediately squinted at the screen, and used a hotkey to open Windows Magnifier, an accessibility tool, to increase the text and image sizes, read through the documents, and get about the application interface. You see, this is something Martha did every single day while she crushed her job.
See, believe it or not… Martha struggled to see clearly, even with her glasses it was a challenge for her to work with the small fonts and blended colors we had put into our DMS. None of this came through in requirements because she didn’t think it was important – an issue that “just affected her” she said as she told us to focus on the bigger picture. See, Martha was used to struggling with applications and trying to read them. But for me, as an interface designer – I was heartbroken. Watching someone struggle so hard on something they had to do every day when I could, with a few simple changes, make things so much easier for her or make her feel more included really made me feel guilty. We started several sprint cycles to take into account our end user, and we added multiple accessibility features into the backlog for Martha after watching her work.
I started to have regular chats with Martha and discussed how we might make the images larger, the text sizes bigger, and reposition the elements to make her life a little easier – and we rolled those changes out in subsequent updates. Interestingly enough, we saw improved usability scores for the application across all users… not just those had visual impairment. They liked how much easier it was to take in the interface. It wasn’t convoluted anymore, like a lot of the early systems we used to see back in the 2010 era.
In the end – I believe Martha and I were able to help each other. She enjoyed an incredible jump in work quality, and I learned an incredible lesson as a junior developer to carry forward into the next 30 years of my career.
That lesson was – never assume everyone has the same abilities to use a computer, and always include a wide range of people in your UAT. When we think about accessibility, we might think adding these features in is just being kind… but many businesses have learned the hard way that not thinking about people like Martha can lead to very expensive lawsuits under ADA legislation.
Under the ADA, more than 11,400 people have filed discrimination lawsuits against organizations that do not follow accessibility compliance guidelines and legislation.
More formally known as Section 508, a federal law that requires agencies to provide individuals with disabilities equal access to electronic information and data comparable to those who do not have disabilities.
Many organizations receive federal funding and as such are subject to section 508, including healthcare institutions that receive MEDICARE or MEDICAID, and higher education that participate in federal programs and receive federal funding.
When we think about accessibility – there are many scenarios where it is crucial [list them]
- Online Learning Platforms
- Healthcare Portals
- Public Transportation Sites
- E-Commerce Websites and Apps
- Banking and Financial Services
- Job Application Portals
- Voting Information and Campaign Sites
And many, many more.
Let’s take a step back from the complexities of legislation and just look at disability figures.
For every 100 people picked out of a crowd…
14 have difficulty with mobility
11 have cognitive disabilities
7 struggle to live independently
6 are deaf or hard of hearing
5 are blind or struggle to see clearly
4 struggle to perform basic self-care – like dressing or bathing
If you add them up, that is nearly half of the people you pick that have abilities or disabilities that may make it difficult to use your app.
This is a really big deal – so what can we do to help people out?
Well, we have to start somewhere and the types of accommodations we can create will vary greatly depending on the disability.
For example, for Jane – who only has one arm due to an injury, she can only use a keyboard… so we have to make sure our application doesn’t require a mouse.
For Greg, who is legally deaf, we need to show transcripts and subtitles with all audio and video content.
For Chris, who is colorblind, we need to pick a color scheme that doesn’t make it hard for him to use the application – or allow him to switch to one that he prefers.
For Melinda, who is legally blind, we need to ensure that assistive software like Windows Narrator or JAWs can read the forms we create for those who can’t see the or struggle to see.
This is a huge challenge, but thankfully, there are some guidelines that exist that we can follow to help ourselves out.
Those guidelines are known as WCAG, or Web Content Accessibility Guidelines.
They are published by the world wide web consortium who sets international standards for the internet.
By following these guidelines, our apps and websites can achieve different classifications of accessibility from A, double A, and finally triple A.
A is the lowest level, it’s not great – but it address most of the basic accessibility issues.
Double A is the target standard for most websites, it addresses a much wider variety of accessibility concerns.
Triple A is best in class, aimed at making a website or app as accessible as possible for the largest set of users and ability and disability breakdowns.
So how do we build more accessible applications? We follow the following WCAG principals during our design phase, known as the POUR principles.
POUR stands for Perceivable, Operable, Understandable, and Robust. Let’s break it down.
First, we ask ourselves, are our apps Perceivable?
Information and user interface components must be presented in ways that users can perceive. This means that users must be able to recognize and use the information, regardless of their sensory abilities.
Techniques to make apps perceivable include:
Providing text alternatives for non-text content (like images, videos).
Offering captions and other alternatives for multimedia.
Creating content that can be presented in different ways without losing information or structure (like simpler layout).
Making it easier or simpler for users to see and hear content (or even anticipating color blindness with a specific set of color schemes)
Second, we ask ourselves, are our apps Operable?
User interface components and navigation must be operable. This means that users must be able to operate the interface—the interface should not require interaction that a user cannot perform.
Techniques to make apps operable include:
Ensuring all functionality is available from a keyboard for users who cannot use a mouse.
Giving users enough time to read and use content.
Not designing content in a way that is known to cause seizures (like avoiding flashing content).
Providing ways to help users navigate, find content, and determine where they are.
Third, we ask ourselves, are our apps Understandable?
Information and the operation of the user interface must be understandable. Users must be able to understand the information and the operation of the user interface.
Techniques to make app understandable include:
Making text readable and understandable.
Making web pages appear and operate in predictable ways.
Helping users avoid and correct mistakes.
Last, we ask ourselves, are our apps Robust?
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including popular assistive technologies like Windows Accessibility.
As technologies and user agents evolve, the content should remain accessible.
Techniques to make our apps robust include
Maximizing compatibility with current and future user tools, like screen readers.
Thankfully, UiPath has done a lot of the work for us here – but we still need to ensure that when we build our apps that we do things the right way
What might this look like on a UiPath Apps project? Let’s crack open the case and show you!