Enhancing accessibility of web-based SVG buttons: An optimization method and best practices

Abstract

The Internet’s rapid development has made web page access an integral part of people’s lives, catering to entertainment, socializing, and information retrieval. However, people with visual impairments face challenges in comprehending information and rely on auditory cues. Thankfully, web pages have played a crucial role in bridging this gap by providing them with valuable knowledge about the world. Scalable Vector Graphics (SVG) has emerged as a versatile icon style in web development, surpassing image-based models due to its operational efficiency and non-deformable properties. Nonetheless, our empirical research reveals several accessibility issues with SVG buttons, particularly the absence of alternative text. Addressing this issue entails overcoming three key challenges, as reflected in it is hard to locate SVG buttons, inability to provide standardized alternative text, and excessive resource costs. To tackle these challenges, we introduce an automated tool called SAM (SVG Accessibility Optimization Method), which supplements missing alternative text in SVG buttons. Our approach involves extensive research, including the identification of 18 common categories of SVG buttons and the creation of 25 corresponding feature templates. SAM employs classification, semantic optimization, and role optimization to enhance the accessibility of SVG buttons. We evaluate SAM by applying it to 30 real-world web pages, successfully providing alternative text with an average F1-score of 92.6%. Compared to other models and image-based baseline methods, SAM demonstrates superior performance with an average F1-score increase of 14.5%. Through the efficiency analysis and a user study, we discuss the advantages of SAM, highlighting its lightweight nature (with First Contentful Paint (FCP) at 0.762 s, Time To Interactive (TTI) at 1.238 s, and memory usage at 18.32 MB). Furthermore, visually impaired users express positive feedback regarding web pages repaired by our tool, underscoring the usefulness of our method.