Breaking Barriers for Blind Web Designers

There are numerous applications to help blind users surf the web, yet there are few tools to help them design the visual layout of a web page, and those available are challenging to operate independently.

Researchers at the University of Maryland are increasing accessibility in this area by developing a novel device that lets blind users create a web layout with their hands.

With TangibleGrid, blind designers snap and resize brackets representing visual elements—like a text box or video—to a physical baseboard. The baseboard senses the brackets’ type, size, and location; verbalizes the information; and then renders the web page on the 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,” says 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 blind web designers is Ebrima Jarjue, who was instrumental in the development of TangibleGrid. Jarjue graduated last year with his master’s degree in human-computer interaction from the College of Information Studies (iSchool), and is now a 508-compliance auditor, tester and analyst at the U.S. Department of Veterans Affairs in Washington, D.C.

He recalls a mix of positive and negative experiences attending Montgomery Community College and UMD as a blind student, including several accessibility issues that impacted his academic performance. This influenced him to take on a proactive role by providing 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, says that Jarjue’s input was invaluable.

“To truly understand the needs of blind developers, it is critical to co-design with them,” he says.

In addition to working with Jarjue, the UMD team interviewed five other blind users—two who also 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, with them often expressing 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,” explained a 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 find that blind users could successfully design a new web layout from scratch without the help of sighted people.

“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,” says Peng, who has an appointment in the University of Maryland Institute for Advanced Computer Studies.

The project was supported by Peng’s New Directions Award from the Maryland Catalyst Fund, a program that incentivizes and enables high-end innovative research on campus.

The other co-authors of “TangibleGrid: Tangible Web Layout Design for Blind Users” are fourth-year computer science Ph.D. candidate Zeyu Yan, and Ashrith Shetty, who graduated from the iSchool with his master’s degree in human-computer interaction in 2020.

The project will be presented and demoed next week in Bend, Oregon at the ACM Symposium on User Interface Software and Technology (UIST), the premier forum for innovations in human-computer interfaces.

Peng is presenting two additional projects at UIST—one is a prototype of circuits made by a fiber laser engraver, and the other is an interactive design tool that rapidly creates 3D printable energy-powered motion.

—Story by Maria Herd, UMIACS, communications group