Web Data Visualizations – Advancing Accessibility with SVG Graphs
This project's inception traces back to a client's request to transform an image-based graph into an accessible element.
It highlights the growing demand for information to be more easily understandable and accessible to the reader. Fueled by this need and the developers' desire for animated solutions, I conceived a project plan for the client. To help achieve this, I created a TypeScript library for web-based data visualization, emphasizing animation and accessibility. Despite the abundance of existing libraries, this offering stands out for its lack of dependencies, lightweight structure, robust cross-browser support, and straightforward implementation. Interested developers can find the library on GitHub or npm, with a comprehensive demo on my website.
Introduction
For those not immersed in web development, the inclination might be to settle for a screenshot of an Excel graph. However, this approach falls short for several reasons. A static image lacks scalability, leading to quality loss upon resizing. Additionally, it precludes the possibility of animating chart elements and, crucially, hampers accessibility. Why does accessibility matter?
Accessibility
Web accessibility is indispensable for establishing an inclusive online environment, ensuring that individuals with diverse abilities—including those with visual, auditory, cognitive, and motor impairments—can effectively utilize and interact with websites and web applications. Guided by standards such as the Web Content Accessibility Guidelines (WCAG), the importance of accessibility has been further underscored by the accelerated digital transition prompted by the COVID-19 pandemic.
It is crucial for junior developers to consistently prioritize considerations related to accessibility in their work.
Screen Readers
A screen reader, designed as assistive technology for those visually impaired or blind, transforms digital text and interface elements into synthesized speech. This facilitates interaction and navigation through applications, websites, and digital content.
SVG
Scalable Vector Graphics (SVG) has been a web staple since the early 2000s, offering numerous advantages for data visualization. Its scalability ensures rendering without quality loss, and it can be seamlessly embedded as an HTML element, allowing for the implementation of Accessible Rich Internet Applications (ARIA) attributes and extensive CSS customization. Notably, SVG supports animation.
User Experience and SEO
Enhanced accessibility not only benefits individuals with disabilities but also elevates the overall user experience for all. A positive user experience correlates with increased time spent on a website, a higher likelihood of sharing, and, ostensibly, improved Search Engine Optimization (SEO) due to favourable signals for search engines. Factors like quality content, reduced bounce rate, dwell time, user experience, and social signals contribute to SEO.
Supported Graphs
The library supports various graph types, including doughnut/pie, bar, line, scatter-plot and progress bar.
Scatterplot
Relationship between effort and results in exams
By leaving your mouse over the data points you can have additional information.
Bar graph
Children color preferences
Simple progress-bar
70% of the project done!
Pie
Website traffic (%) attributed to social media platforms.
Place your mouse over to discover the values. LinkedIn: 15%, Instagram: 35%, Facebook: 10%, Twitter(X): 35%, Youtube: 5%.
About
Billy is a seasoned web developer, who settled in Geneva almost ten years ago. His proficiency spans both front-end and back-end development, making him a versatile and skilled professional. Billy has a deep understanding of browser computer graphics and accessibility, and his expertise has been instrumental in the success of this project. To learn more about Billy's work and connect with him, you can visit his website at 5cript.com. Additionally, you can engage with him on LinkedIn. Feel free to reach out for discussions, collaborations, or inquiries related to web development.
