Design

Interaction Design

Engineering

Electrical & Software Engineering

When a Florida federal judge ruled in 2017 that Winn-Dixie must make its website accessible to the blind, it put corporations across the U.S. on notice: making tech accessible to people with disabilities is not only the right thing to do, it’s also the law.

From concept to manufacturing, our engineering services can get your products to market.

Services Page: Engineering (Text only)

The lawsuit was the first of its kind to come to trial, but not the last.&nbsp;

In 2018 the number of web accessibility lawsuits nearly tripled compared to 2017. As the web has become integral to the way we shop, communicate, and do business, making the web, applications, platforms, and other software solutions accessible to people with disabilities has become essential. This is especially true as web technologies spread to other mediums through hybrid mobile apps with tools like <a href="https://ionicframework.com/">Ionic</a>&nbsp;and&nbsp;<a href="https://flutter.dev/">Flutter</a>, and Desktop applications with tools like <a href="https://electronjs.org/">Electron</a>.

<a href="https://www.delve.com/news/delve-bresslergroup-unite-under-one-name-delve" target="_blank">Bresslergroup is now Delve</a>. This video was recorded prior to the merger of Bresslergroup and Delve.

Bresslergroup video editor note

I’ve always had a strong passion for accessibility in the physical and digital world. This passion blossomed in 2001 when my family started working with the Travis Roy Foundation, an organization dedicated to research to find a cure for paralysis and helping people with spinal cord injuries to become more independent.
We hold <a href="https://www.travisroyfoundation.org/events/trf-wiffleball-tournament/">WIFFLE ball tournaments</a> in the quarter-sized replica of Fenway Park we built on our Vermont property (yes, both engineering and sports fanaticism run in my family), and all the proceeds go to the foundation. This year’s annual tournament, pictured below, happened on August 9th and raised more than $750,000 for the foundation over one weekend.

05 inline wiffle 5

Designers have a responsibility to design a world that all want to live in. Here are three principles that can help us navigate the complexities of design decision-making and truly achieve design success.

Don't Miss: Three Principles for More Human, Solution-Focused, Fair, and Inclusive Design

<h2>Baking Accessibility into Software Development</h2>
Alongside my family’s work, I’ve had the opportunity to absorb and practice a wide range of techniques for creating accessible products, including applications to assist special education students in public schools and a wholly accessible app for a major mobile carrier — more on that later.
I’m proud to now work at Delve, where we believe in people-centric design and know that making tech accessible makes it better for everyone.&nbsp;

Although the legal battlefield is currently focused on the web, we believe that <a href="https://www.delve.com/insights/7-principles-for-designing-great-digital-physical-products" target="_blank">mobile, voice, and “interfaceless”</a> applications should consider accessibility before the first line of code is written or the first wireframe is constructed.
That’s why I wrote this post to talk about the following solutions for making tech accessible, and how software engineers and designers can use them to bake accessibility into their products:
<ul><li>Breadcrumbs</li><li>Standard Visual Effects</li><li>Visual Design: Affordances, Color Contrast Ratio, Font Sizes, Screen Readers, and Alternative Text</li><li>Information Architecture: Content Flow and Reading Levels</li><li>Third-Party Software</li><li>Switch Controls</li></ul>
Let's go over each in detail.

2023 11 27 Making Tech Accessible INLINE breadcrumb

<h2>Breadcrumbs</h2>
We’ve all had the experience of walking into a room and realizing we’ve forgotten the item for which we came. Now imagine if this happened to you all the time: every time you walked into a different room, clicked on a link, or navigated deeper into an app, you had to figure out why you were there.
This is what life is like for people with short-term memory loss, a cognitive impairment that’s often forgotten when it comes to building accessible applications.
Fortunately, we can design for it. For applications with a deep information architecture, we can use breadcrumbs. For shallower applications, we can fall back to our menu, a title, and making sure the navigation from where we came is clearly indicated. For multi-step processes such as a payment flow, where the application is collecting order details, multiple addresses, and payment details, we can show the process along with an indicator demonstrating what has been completed and where we are in the flow.

07 inline myspace a

<h2>Standard Visual Effects</h2>
Another example of digital accessibility and making a product better for everyone is designing to avoid seizures. Strobing, flickering, or flashing animations or transitions can sometimes trigger epileptic seizures in susceptible people. Putting design rules in place that restrict those dangerous visual effects can make the experience better for everyone.
This sounds simple, but it can also apply to user-generated content. Applications that we design and build should take this into account to prevent over-customization of styles such that it impacts accessibility. An example of allowing user-generated content to impact accessibility is MySpace of the ’90s (example, pictured above). Numerous people were set on making their pages glow brighter than Times Square at night.
In addition to cognitive impairment and epilepsy, we believe design and development of applications should accommodate blindness or limited vision, colorblindness, deafness, and mobility or dexterity limitations. I’ll talk a little bit about each below, in the context of a real-life case study for a product I worked on a few years ago.
<h2>Software Accessibility Applied</h2>
In 2016, a prepaid wireless carrier was under internal scrutiny of their account management mobile app for its lack of support for accessibility features.
The app was an off-the-shelf, hybrid mobile app provided by the carrier’s billing service provider. The additional scrutiny was due to an acquisition by a major wireless carrier a few years prior and driven from <a href="https://www.fcc.gov/consumers/guides/telecommunications-access-people-disabilities" target="_blank">accessibility guidelines</a> published by the Federal Communications Commission (FCC). The additional regulation led the company to scrap the existing hybrid app and build native iOS and native Android apps to support each respective operating systems’ accessibility features.
<h3>Visual Design: Affordances, Color Contrast Ratio, Font Sizes, Screen Readers, and Alternative Text</h3>
Digital accessibility starts with design and we baked that into our wireframing and visual design process.
Hyperlinks within the app surfaced early on; we had links to legal documents hosted on the carrier’s website, we had links to FAQs and support pages on the carrier’s website, and we had links that launched in-app modals with additional help content provided in context.
Often a link in the text is simply differentiated by using a color that’s different than the regular text. But for someone who is colorblind or has a vision impairment, colored text could be missed. We were required to provide a second affordance, and underlining the links was the solution in most cases. We also selectively chose to implement some links as buttons based on the context in which they were used. Both methods provide an affordance in addition to color.
Do not rely on color as the only means of differentiating actions.

2023 11 27 Making Tech Accessible INLINE color

In addition to color and a second affordance on links, those objects must be properly tagged in the underlying software. In the web, this is known as Alt Text (or Alternative Text). iOS uses VoiceOver as the screen reader and provides additional context to those users by aurally reading the accessibilityLabel and accessibilityHint properties. In similar fashion, Android uses TalkBack which reads the contentDescription and hint to provide additional accessibility descriptions for UI elements. The text of each link and button also needed to imply an action such as “Pay my bill” or “View usage.”
Color contrast ratios are also a key activity to be handled in the design of software applications. Font size, text color, and the background color can be used to determine the ratio of color contrast and inform designers/developers whether the text is legible. There are numerous tools and ratio standards to test the ratios.
At Delve, we recommend using the <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines</a> as a starting place to determine accessibility. The WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
<h3>Information Architecture: Content Flow and Reading Levels</h3>
We also streamlined the information architecture to make it easier for the cognitively impaired (and everyone else) to navigate. Each screen contained bite-sized content that was easily digestible and we were required to stay below a 6.9 reading level on the Flesch-Kincaid scale. There are plenty of tools available to test Flesch-Kincaid and it’s even built into Microsoft Word. You can turn on Flesch-Kincaid in Word by enabling Show readability statistics in the settings and running Spelling & Grammar under the Review tab.
By breaking content up between screens, we also had to make sure that each screen was clearly labeled with an appropriate title. This centered users who may have a cognitive impairment as to where they were in a process flow (e.g., payment flow).

2023 11 27 Making Tech Accessible INLINE accessible

Accessibility and usability share key goals — both are concerned with creating an intuitive user experience. By necessity a product that is usable for someone who does not have the benefit of sight, hearing, or mobility must be more intuitive than most.

Don't Miss: How Design for Accessibility Drives Innovation for All

When it comes to flow, we also ran into some challenges around the customer support chat screen. Close your eyes and imagine trying to interact with a chat application using only voice commands. We had to manipulate the order in which the screen reader read items on the screen. We had status messages such as “Agent is typing,” “Connection is lost,” and “Chat has ended.” Those statuses were important to read and upon changing were put into a queue of messages to be read.

New messages also had to be read as they arrived. The messages were put into that same queue to be read at the conclusion of the prior message being read. Messages from the agent needed to be prefixed with “Message from agent” so that it was clear from whom the message had been sent. All of this was in addition to the user being able to scroll the screen reader back through the chat history.
Our client’s accessibility team included a member who was blind and would periodically review our app and screens. Working with our client’s accessibility team, we were able to gain key insights into how the blind prefer to interact with screens such as the chat screen.
<h3>Third-Party Software</h3>
Open-source software is great; it accelerates development, it allows a community to troubleshoot issues, and it’s a democratic landscape of software development. However, accessibility is typically an afterthought for open-source solutions.
Libraries, plugins, and other open-source software may not support screen readers, maintain correct color contrast ratios, nor include proper screen-reader ordering. Development teams should beware of these issues when assessing software selection, to avoid building inaccessible software.
<h3>Switch Controls</h3>
Once a screen reader is verbalizing each screen in the correct order, an additional step is needed: to test with switch controls. A switch control is an assistive technology that allows dexterity-limited folks to interact with every feature of an application using a single method of input. This could be a click, a head movement, or even using a full keyboard paired over Bluetooth. To try out the switch control on iOS, navigate to Settings &gt; General &gt; Accessibility &gt; Switch Control. I encourage everyone who is not familiar with switch controls to spend some time using apps on their phone with this technology.
The switch (most often a pad that can be tapped, like the one pictured, below, or a camera that can distinguish small head movements) highlights every option on the screen in turn, in a repetitive cycle. Major sections of the screen or logical sets of components are grouped together to reduce the number of items in each cycle. When the desired option is highlighted, the user taps the pad to choose it. While it may sound cumbersome, the cycling speed is adjustable, and people experienced with switches can navigate through a properly designed site amazingly quickly.

10 inline switch a

While building our mobile app for the wireless carrier, we noticed that the switch had a sorting problem; it didn’t cycle through the choices in the proper order. We quickly realized it had to do with the way the iOS component interacted with the switch’s screen reader, and there was nothing we could do to fix it. We filed a ticket with Apple so that their development team would be aware of the issue and provided that documentation to our client in case a suit was ever filed.
Even after testing and releasing an app or device into production, it’s important to stay ahead of the accessibility curve: regularly review the product to make sure it’s still accessible.

<h2>What Kind of World?</h2>
In an ideal world, both the digital and physical realms would be designed for people of all degrees of mobility, dexterity, sight, hearing, and cognitive capability.
As engineers and designers, we have a great deal of power to make this happen with the way we go about shaping everyday experiences. You’ve probably heard the saying, “With great power comes great responsibility.” For me, accessibility is an essential part of that responsibility. 
This article was written by Brian O'Connor.

Learn more about&nbsp;<a href="https://www.delve.com/services/engineering/electrical-software-engineering" target="_blank">Electrical Hardware & Software Product Engineering at Delve​.</a>

SEO Text: Electrical & Software Engineering Services

Proving out robust and clever technological, mechanical, and electrical solutions, we rapidly and rigorously move your product ideas to launch.

Services Page: Electrical & Software Engineering

Newsletter Signup: Digital-Physical Product Development (icon visual)

2023 11 27 Making Tech Accessible HERO

At Delve, we believe that mobile, voice, and “interfaceless” applications should consider accessibility before the first line of code is written or the first wireframe is constructed.

Contact Us | General (Let's build something together)

Digital

Home

Insights

Making Tech Accessible: How To Bake Accessibility into Software Development

Breadcrumbs

A full-service product design and strategic innovation consultancy.

Delve

At Delve, we believe that mobile, voice, and “interfaceless” applications should consider accessibility before the first line of code is written or the first wireframe is constructed.

At Delve, we believe that mobile, voice, and “interfaceless” applications should consider accessibility before the first line of code is written or the…

description

generator

kSwNn6qD4B-4HloWnWMUBWQNpBx2_mPi3nMqgsh6ato

google-site-verification

mobile, voice, “interfaceless”, applications, consider, accessibility, line, code, written, believe, wireframe, delve, constructed

keywords

https://cms.delve.com/assets/images/_1200x630_crop_center-center_82_none/2023-11-27-Making-Tech-Accessible_HERO.png?mtime=1700597037

https://linkedin.com/company/delvedesign/

Making Tech Accessible: How To Bake Accessibility into Software…

https://www.delve.com/insights/making-tech-accessible-how-to-bake-accessibility-into-software-development

referrer

robots

twitter:card

twitter:creator

twitter:description

https://cms.delve.com/assets/images/_800x418_crop_center-center_82_none/2023-11-27-Making-Tech-Accessible_HERO.png?mtime=1700597037

twitter:image

twitter:image:alt

twitter:image:height

twitter:image:width

twitter:site

twitter:title

{"title":{"title":"Making Tech Accessible: How To Bake Accessibility into… | Delve"}}

Be Inclusive

Privacy Policy

FCOI Policy

Services

Case Studies

Testimonials

What We Do

About Us

Our People

Join Our Team

Careers

Newsroom

Who We Are

Boston

Madison

Philadelphia

San Francisco

Our Studios

Partner with Delve

Contact Us

Contact

Vamsee Pamula, Founder &amp; President, Baebies

Read informative articles from Delve's team of experts. Discover innovative strategies and insights about product design, engineering, and development.

Delve Insights: Product Innovation & Development Blog

innovation, product, design, advice, development

https://cms.delve.com/assets/images/_1200x630_crop_center-center_82_none/Delve_titlecard.png?mtime=1654035558

https://cms.delve.com/assets/images/_800x418_crop_center-center_82_none/Delve_titlecard.png?mtime=1654035558

Making Tech Accessible: How To Bake Accessibility into Software Development

Making Tech Accessible: How To Bake Accessibility into Software Development

Related Insights