Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Home ›› Customer Experience ›› Design for the Blind

Design for the Blind

by Oscar Gonzalez
4 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Tips on how to design for the blind.

If you ever had to describe a User Interface to someone over the phone, you know how frustrating that is for both. It is way easier to share a screenshot or do a screen share. However, if you are blind and using Assistive Technologies like Screen Readers (VoiceOver or TalkBack), this is your reality.

I recently prepared for the Web Specialist Specialist or WAS technical examination (a certification provided by the International Association of Accessibility Professionals (IAAP)), and I wanted to create a series of posts calling out some of the most profound things I learned — this is the first one talking about things to keep in mind when designing for “Audio-Structural Interaction UX.”

In their most raw form, apps are visually appealing and dynamic Word Processors. Something close Notion.

Try deactivating the CSS on your web app or site, for example…

process of showing how to take css out of a web page, in this case Apple.com
Apple.com without CSS is just like reading a written document

Now, look at a typical Word Doc below. As a sighted user, you tend to navigate the document visually and read it in a particular and predictable order. Blind people navigate the content in very similar ways. However, they use Assistive Technologies that read the content and provide them with contextual cues on where they are in the “Document” and what they can do if their input is necessary.

an example of a word document and its taxonomy
Structure of an ordinary Word Processor like Google Docs.

Imagine trying to read a Word document with no headings, no hierarchy, or structure. The document would, in most cases, be impossible to understand. Imagine trying to book a flight in a document like this.

In Summary

Unfortunately, blind people are sometimes limited to browsing/consuming written content online. Things that sighted users do quickly and easily, like buying that plane ticket or posting content online, are incredibly complex and, in most cases, impossible for blind people. Most web and mobile apps are not designed or constructed with this in mind. Let’s change that by keeping the following things in mind:

  • All content must be presented in text or via a text equivalent (like images or other non-text objects should have alt text if they are not decorative) since screen readers cannot read non-text content (images, icons) directly. But they can read the ALT text that you provide.
  • All functionality must be available using only the keyboard. Even though most blind users can physically use a mouse or trackpad, they can’t see the mouse pointer.
  • The content must use markup with good structure and semantics(headings, landmarks, tables, lists, etc.). Just like the “Table of Contents” on a Word Doc, screen reader users often pull up lists of headings, landmarks, and other semantic elements to help them understand what is on the page. They can also navigate by these elements (jump directly to the main content landmark, or to a specific heading). Always use a coherent order for each UI element on the page (Focus Order), and also do not forget to call out custom Landmarks.
  • All custom elements that do not come native with the OS (like expand/collapse buttons, dialogs, etc.) must have the correct name/label, role (either with HTML or with ARIA), and value, and must change value when appropriate. Unlike native HTML elements, custom controls have no semantic parts natively, so screen readers can’t tell users what the element is and can’t update users on its properties unless you give them that information via ARIA, roles, states, and properties. This is the one teams get wrong the most. You can technically be compliant with the established guidelines, but if you fail or do a poor job here, your app is not really accessible. Try to use the native elements from the OS, as they provide most of what you need.
  • Users must receive immediate feedback after all actions they take or if the system is doing something in the background (Live Regions), via their screen reader. Silence after doing anything is always bad

Although all of these things are primarily beneficial for blind individuals using assistive screen readers, keep in mind that drawing parallels with how we experience a Work Doc allows us to construct a more coherent information architecture for a page and/or task which benefits everyone. If the presented content makes sense in a word doc, you are on the right track.

I wrote a post about how to improve your Interaction Design Skills that is super related to this

As a side note, keep in mind that you should consider many other things when designing and implementing for Audio-Structural experiences to make them not only compliant with guidelines but also inclusive and accessible. These are just suggestions that can get you close.

post authorOscar Gonzalez

Oscar Gonzalez

I am a self-taught generalist. I’m currently a Designer at LinkedIn but also code, and sometimes I write. I am also a certified technical accessibility specialist (WAS) and a web3 and open-source contributor since 2017.

Tweet
Share
Post
Share
Email
Print
Ideas In Brief

The author explains how to design for people using Assistive Technologies and offers 5 tips.

Related Articles

Discover how digital twins are transforming industries by enabling innovation and reducing waste. This article delves into the power of digital twins to create virtual replicas, allowing companies to improve products, processes, and sustainability efforts before physical resources are used. Read on to see how this cutting-edge technology helps streamline operations and drive smarter, eco-friendly decisions

Article by Alla Slesarenko
How Digital Twins Drive Innovation and Minimize Waste
  • The article explores how digital twins—virtual models of physical objects—enable organizations to drive innovation by allowing testing and improvements before physical implementation.
  • It discusses how digital twins can minimize waste and increase efficiency by identifying potential issues early, ultimately optimizing resource use.
  • The piece emphasizes the role of digital twins in various sectors, showcasing their capacity to improve processes, product development, and sustainability initiatives.
Share:How Digital Twins Drive Innovation and Minimize Waste
5 min read

Is banning AI in education a solution or a missed opportunity? This thought-provoking piece dives into how outdated assessment methods may be fueling academic dishonesty — and why embracing AI could transform learning for the better.

Article by Enrique Dans
On the Question of Cheating and Dishonesty in Education in the Age of AI
  • The article challenges the view that cheating is solely a student issue, suggesting assessment reform to address deeper causes of dishonesty.
  • It advocates for evaluating AI use in education instead of banning it, encouraging responsible use to boost learning.
  • The piece critiques GPA as a limiting metric, proposing more meaningful ways to assess student capabilities.
  • The article calls for updated ethics that reward effective AI use instead of punishing adaptation.
  • It envisions AI as a transformative tool to modernize and enhance learning practices.
Share:On the Question of Cheating and Dishonesty in Education in the Age of AI
4 min read

Discover how venture capital firms are shaping the future of product design — and why experienced design leaders need to be consulted to ensure creativity and strategy aren’t left behind. This article delves into the power VCs hold in talent acquisition and team dynamics, highlighting the need for a collaborative approach to foster true innovation.

Article by Darren Smith
How Venture Capital Firms Are Shaping the Future of Product Design, & Why Design Leaders Need to Be Part of the Solution
  • The article explores how venture capital (VC) firms shape product design by providing startups with critical resources like funding, strategic advice, and network access, but often lack an understanding of design’s strategic value.
  • It discusses the impact of VC-led hiring practices in design, which can lead to misaligned job roles, undervalued design leadership, and teams focused more on output than innovation.
  • The piece calls for a collaborative approach where design leaders work alongside VCs in talent acquisition and strategic planning, establishing design as a key partner to drive product innovation and long-term brand success.
Share:How Venture Capital Firms Are Shaping the Future of Product Design, & Why Design Leaders Need to Be Part of the Solution
8 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and