Linting SVG Markup for Accessibility and Syntax Errors

Structural linters evaluate raw Scalable Vector Graphics (SVG) code against established XML standards and web accessibility guidelines to identify syntax errors, missing semantic elements, and invalid markup before deployment. By parsing raw vector code into Abstract Syntax Trees (AST), these tools automate the detection of broken tags, duplicate identifiers, missing alternative text, and unsemantic structural hierarchies that hinder screen readers and degrade browser rendering performance.

Detecting Syntax and Structural Defects

Raw SVGs are XML-based documents, making them susceptible to XML-specific structural errors that standard HTML parsers might silently misinterpret or fail to render. Structural linters parse the vector file’s underlying DOM tree to catch several core syntax issues:

• Malformed XML and Unclosed Tags: Linters verify that every self-closing element, such as <path /> or <circle />, is properly terminated and that opening tags match their closing counterparts.
• Duplicate Element IDs: Vector design applications (such as Figma, Adobe Illustrator, or Inkscape) frequently generate generic IDs like id="Vector" or id="filter-1". When multiple SVGs are inlined on the same web page, duplicate IDs create invalid DOM trees and cause visual clipping or styling collisions. Linters flag non-unique IDs across vector assets.
• Invalid Nesting and Deprecated Elements: Linters ensure that attributes are assigned to the correct parent elements (e.g., preventing visual attributes from being placed incorrectly inside <defs>) and flag outdated SVG 1.1 attributes that are not supported in modern SVG 2 implementations.
• Unsanitized Elements and Event Handlers: Linters can detect security vulnerabilities in raw vector code, identifying embedded <script> tags, foreign objects, or inline JavaScript handlers like onload and onclick.

Catching Accessibility (a11y) Failures

SVGs often fail accessibility audits because they lack standardized semantic information required by assistive technologies. Structural linters inspect SVG nodes against WAI-ARIA and WCAG standards to enforce proper labeling:

• Missing Text Alternatives for Informative Icons: When an SVG conveys visual meaning, linters check for the presence of a descriptive <title> element, an optional <desc> element, and an appropriate aria-labelledby attribute linking the tags to the root element.
• Improper Role Assignment: Screen readers handle SVGs inconsistently across different browsers. Linters verify that the root <svg> tag contains an explicit role="img" attribute to ensure screen readers announce the element correctly as an image.
• Unmarked Decorative Graphics: Purely decorative icons must be hidden from assistive tech to avoid announcing confusing or redundant code. Linters verify that decorative vectors contain aria-hidden="true" and do not expose orphaned <title> elements that might inadvertently be read aloud.
• Focusable Content Issues: In older rendering engines (like Internet Explorer/EdgeHTML), SVGs are focusable by default during keyboard navigation. Linters can check for attributes like focusable="false" when combined with aria-hidden="true" to prevent keyboard navigation traps.

Tooling and Integration into Development Workflows

Structural linting of SVG markup is commonly implemented via specialized AST parsers and integrated toolchains:

1. SVGO (SVG Optimizer): While primarily used for minification, SVGO’s plugin architecture allows teams to enforce rules, such as removing dangerous scripts, standardizing viewport attributes, and stripping unneeded metadata.
2. ESLint Plugins: Plugins such as eslint-plugin-svg-jsx or custom XML linters parse inline SVG components in frameworks like React, Vue, or Svelte, failing builds if elements lack mandatory accessibility properties.
3. HTMLHint and Accessibility Linters: Tools like Axe-core and HTMLHint can be configured in pre-commit hooks or continuous integration (CI) pipelines to validate raw .svg files or HTML templates containing inlined vectors.

Automating these checks prevents broken layouts, minimizes manual accessibility testing overhead, and ensures that visual assets remain both lightweight and universally accessible.