Web designers

Maryland today | The system removes barriers for blind web designers

Many apps help blind users surf the web, but what if a visually impaired person wants to design the visual layout of a page? Few tools are available to support them, especially without the help of a sighted person.

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

With TangibleGrid, blind designers snap and resize hooks representing visual elements, such as a text box or video, on a magnetic baseboard. The plinth detects the type, size, and location of the hooks, verbalizes the information, and then displays the web page on a browser.

The project was led by Jiasheng Li, a second-year Ph.D. computer science student who focuses 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,” Li said. “As more and more blind people are able to code and create their own programs, we want may this tool open a new door for them, not only as a hobby to create personal websites, but also for their career.”

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

The 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.

“Most of the time, I helped them help me succeed in college,” he explains. “These experiences, along with my passion for inclusive design advocacy and accessibility, are what led me to the development of TangibleGrid.”

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

“To truly understand the needs of blind developers, it’s essential to co-design with them,” said Peng, who has a position at the University of Maryland’s Institute for Advanced Computing Studies.

Two other co-authors of an article describing the project hold fourth-year doctorates in computer science. candidate Zeyu Yan and Ashrith Shetty HCIM ’20. The system will be presented and demonstrated this week at the ACM Symposium on User Interface Software and Technologies 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 the features of TangibleGrid. For example, the autonomy of blind users was a recurring theme; interviewees often expressed frustration at having to rely on others to validate their work.

“I can put the content in the [templates] using 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 solve this problem, TangibleGrid gives an audio description of the layout in real time while the designers adjust the supports with their hands.

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

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