Accessible Map Visualization Prototype
Tania Calle-Jimenez, Sergio Luján-Mora · 2016 · Proceedings of the 13th International Web for All Conference (W4A) · doi:10.1145/2899475.2899516
Summary
This paper from Ecuador's National Polytechnic School and the University of Alicante presents a prototype for making online geographic maps accessible to people with visual disabilities. The authors identify four key accessibility barriers in web-based maps: maps rendered as flat images with no textual alternatives, maps not operable via keyboard, maps with text too small for people with low vision, and maps using color alone to convey information (problematic for color blindness). The prototype uses Scalable Vector Graphics (SVG) instead of raster images, which is critical because SVG maintains visual quality at any zoom level and — unlike bitmap images — its code can embed information and metadata extractable by browsers and screen readers. The architecture follows a Model-View-Controller pattern, with geographic data stored in a database and maps rendered as interactive SVG elements enhanced with WAI-ARIA roles and properties. The interface consists of four panels: an accessible toolbar at top, a keyboard-navigable map list on the left, the SVG map in the center, and a description panel on the right that displays information about the selected geographic area. Using Ecuador as a case study, the prototype displays provinces, railway lines, and principal cities.
Key findings
The prototype includes an accessible toolbar offering four customization controls: text size (scalable up to 2x), text style (multiple font options), line spacing (up to 2x), and color/contrast schemes (black on white, white on black, black on yellow, yellow on black) — the last being particularly important for users with low vision and color blindness. A color-change algorithm applies contrast modifications to all page content including the SVG map, ensuring consistent visual treatment. Tab-key navigation allows keyboard users to move through map regions, with each element's description announced by screen readers and displayed in the information panel. Automated accessibility evaluation using TAW and eXaminator tools showed strong results: a perfect 10/10 score from eXaminator, and only 1 problem with 292 warnings from TAW. Cross-browser testing revealed inconsistencies: Chrome supports SVG and color styles but not SVG title elements, while Firefox and Edge support HTML and SVG but lack full compatibility with the tabindex property for keyboard navigation — highlighting the ongoing challenge of cross-browser accessibility support.
Relevance
Geographic maps represent one of the most inherently visual types of web content, making them a significant accessibility challenge that is often simply ignored. This prototype demonstrates a practical approach to making map content accessible using standard web technologies (SVG, WAI-ARIA, CSS) rather than requiring specialized plugins or entirely separate non-visual interfaces. For accessibility practitioners, the work highlights the advantages of SVG over raster images for any graphical content that needs to be accessible — SVG's ability to embed semantic metadata, scale without quality loss, and respond to CSS styling makes it fundamentally more accessible than PNG or JPEG alternatives. The cross-browser inconsistencies documented here remain a real-world concern for developers implementing accessible interactive graphics. The prototype's limitation is the lack of user testing with people with visual impairments, which the authors acknowledge as future work, though the automated evaluation provides a baseline conformance assessment.
Tags: data visualization · visual impairment · color blindness · SVG · web accessibility · geographic information · keyboard accessibility · screen readers
Standards referenced: WCAG 2.0 · WAI-ARIA · SVG