SVG
Also known as: Scalable Vector Graphics
An XML-based markup language for describing two-dimensional vector graphics, widely used on the web for icons, illustrations, data visualizations, and interactive graphics. Unlike raster images (JPEG, PNG), SVGs are composed of DOM elements that can be individually styled, animated, and made interactive. For accessibility, SVG has both advantages and challenges: individual elements within an SVG can carry ARIA roles, labels, and descriptions, enabling screen readers to convey meaning — but this requires explicit effort from developers, and most charting libraries produce SVGs without adequate accessibility markup. Best practices include providing a title element and desc element within the SVG, using ARIA roles (role="img" for simple graphics, role="group" for complex charts), ensuring keyboard focusability for interactive elements, and offering text alternatives for the overall graphic when element-level annotation is impractical.
Category: web · development
Related: ARIA · Semantic HTML · Data visualization accessibility · Screen reader