System Breaks Down Barriers for Blind Web Designers

Numerous applications help blind users surf the web—but what if someone with a visual impairment wants to design the visual layout of a page? Few tools are available to support them, particularly without the help of a sighted person.

Now, researchers at the University of Maryland are increasing accessibility by developing a novel device that lets blind users design a web layout using touch and sound.

With TangibleGrid, blind designers snap and resize brackets representing visual elements—like a text box or video—on a magnetic baseboard. The baseboard senses the brackets’ type, size and location, verbalizes the information and then renders the web page on a browser.

The project was led by Jiasheng Li, a second-year Ph.D. student in computer science who is focused on advancing technologies to provide visually impaired people with better access to the digital world.

“I hope TangibleGrid is a bridge to enable and involve more blind developers in front-end design,” said Li. “As more and more blind people are able to code and create their own programs, we want this tool to open a new door for them—not only as a hobby to create personal websites, but also for their careers.”

One of those users is Ebrima Jarjue, who was instrumental in developing the system. Jarjue graduated last year with his master’s degree in human-computer interaction from UMD’s College of Information Studies and is now a Section 508 compliance auditor, tester and analyst for the U.S. Department of Veterans Affairs, ensuring people with disabilities have equitable access to information.

Accessibility issues that impacted his academic performance at Montgomery College and UMD motivated him to proactively provide suggestions and feedback to disability support services at both institutions.

“For the most part, I helped them to help me succeed in college,” he explains. “These experiences, and my passion for advocacy and the accessibility of inclusive design, are what instrumentally drove me in the development of TangibleGrid.”

Huaishu Peng, an assistant professor of computer science who also worked on the TangibleGrid project, emphasized that Jarjue’s input was invaluable.

“To truly understand the needs of blind developers, it is critical to co-design with them,” said Peng, who has an appointment in the University of Maryland Institute for Advanced Computer Studies.

Two other co-authors of a paper describing the project are fourth-year computer science Ph.D. candidate Zeyu Yan and Ashrith Shetty H.C.I.M. ’20. The system will be presented and demoed this week at the ACM Symposium on User Interface Software and Technology in Bend, Oregon, the premier forum for innovations in human-computer interfaces.

In addition to working with Jarjue, the UMD team interviewed five other blind users—two who had previous web design or programming experience and three who had none. These interviews directly guided the design process and inspired TangibleGrid’s features. For example, providing blind users with autonomy was a recurring theme; the interviewees often expressed frustration at having to rely on others to validate their work.

“I can put the content in the [templates] with the help of screen readers, but I don’t know how they are presented on a web page, and I always have to ask a sighted friend to confirm the result,” said one participant who actively uses WordPress and Medium. To address this, TangibleGrid gives an audio description of the layout in real time as designers adjust the brackets with their hands.

Once the team was finally able to test the device post-COVID, they were thrilled to observe blind users successfully operating it.

“It was exciting to see that blind users, even those with no prior web design experience, were able to use the tool to design simple web page layouts,” Peng said.