Skip to main content

Accessibility UI Guidelines: SVG's

Graphics

2.10 SVGs and Graphics

Scalable Vector Graphics (SVGs) and other graphical elements play a crucial role in enhancing the visual appeal and functionality of a website. Ensuring that these graphics are accessible is essential for providing an inclusive experience for all users, including those using assistive technologies.

2.10.1 <svg> Elements

Use the <svg> element to embed SVG graphics directly into your HTML. This approach allows for better control over the accessibility and interactivity of the graphics.


<!-- Inline SVG Example -->
<svg width="100" height="100" role="img" aria-labelledby="svgTitle svgDesc">
    <title id="svgTitle">Company Logo</title>
    <desc id="svgDesc">A vector graphic representing the company's logo.</desc>
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

2.10.2 Providing Alternative Text

Always provide alternative text for graphics to ensure that users who cannot see them can understand their purpose. For SVGs, use the <title> and <desc> elements to describe the graphic.


<!-- SVG with Alternative Text -->
<svg width="200" height="200" role="img" aria-labelledby="svgTitle svgDesc">
    <title id="svgTitle">Pie Chart Showing Sales Distribution</title>
    <desc id="svgDesc">A pie chart illustrating the distribution of sales across different regions.</desc>
    <circle cx="100" cy="100" r="80" fill="#f00" />
    <path d="M100,100 L180,100 A80,80 0 0,1 100,180 Z" fill="#0f0" />
    <path d="M100,100 L100,180 A80,80 0 0,1 20,100 Z" fill="#00f" />
</svg>

2.10.3 Accessible Descriptions and Titles

Use the <title> and <desc> elements within SVGs to provide accessible names and descriptions. The <title> should offer a concise description, while the <desc> can provide more detailed information.


<!-- SVG with Title and Description -->
<svg width="150" height="150" role="img" aria-labelledby="svgTitle svgDesc">
    <title id="svgTitle">Informative Icon</title>
    <desc id="svgDesc">An icon representing information, consisting of a circle with an "i" inside.</desc>
    <circle cx="75" cy="75" r="70" stroke="black" stroke-width="5" fill="#fff" />
    <text x="75" y="85" font-size="60" text-anchor="middle" fill="#000">i</text>
</svg>

2.10.4 Color Contrast and Visibility

Ensure that the colors used in graphics meet the required contrast ratios to be easily distinguishable by users with visual impairments. Adhere to the Web Content Accessibility Guidelines (WCAG) for color contrast.


/* Example CSS for High Contrast SVG Elements */
svg {
    filter: contrast(1.5);
}

svg text {
    fill: #000000; /* Ensure text has sufficient contrast against background */
}

2.10.5 Responsive Graphics

Ensure that SVGs and other graphics are responsive, maintaining their accessibility and readability across various devices and screen sizes. Use viewBox attributes and scalable units to achieve responsiveness.


<!-- Responsive SVG Example -->
<svg viewBox="0 0 100 100" width="100%" height="auto" role="img" aria-labelledby="responsiveTitle">
    <title id="responsiveTitle">Responsive Icon</title>
    <rect width="100" height="100" fill="#00f" />
    <text x="50" y="55" font-size="20" text-anchor="middle" fill="#fff">SVG</text>
</svg>

2.10.6 ARIA Attributes for Graphics

Use ARIA attributes to enhance the accessibility of graphics, especially when they convey important information or are interactive. Assign appropriate roles and labels to ensure assistive technologies can interpret them correctly.


<!-- Interactive SVG with ARIA Attributes -->
<svg width="200" height="200" role="button" tabindex="0" aria-label="Play Button" onclick="playVideo()">
    <circle cx="100" cy="100" r="90" fill="#28a745" />
    <polygon points="80,60 80,140 140,100" fill="#fff" />
</svg>
2.10.7 Keyboard Accessibility for Interactive Graphics Ensure that interactive graphics, such as buttons or clickable icons, are accessible via keyboard controls. Assign appropriate tabindex values and ARIA roles to make them focusable and operable using keyboard keys like Enter or Space.

2.10.8 Animations and Motion

When using animations or motion in graphics, provide options for users to pause, stop, or reduce motion to accommodate those with vestibular disorders or motion sensitivities. Use the prefers-reduced-motion media query to detect user preferences.


/* Example CSS for Reducing Motion Based on User Preference */
@media (prefers-reduced-motion: reduce) {
    svg animation {
        display: none;
    }
}

2.10.9 Testing Graphics for Accessibility

Regularly test SVGs and other graphics with various assistive technologies, such as screen readers, to ensure they are announced correctly and function as intended. Use accessibility testing tools to identify and address potential issues.


// Example: Using a screen reader to verify SVG accessibility
// Ensure that SVG titles and descriptions are announced correctly

2.10.10 Best Practices for SVGs and Graphics

  • Provide Alternative Text: Always include <title> and <desc> elements within SVGs to describe their purpose and content.
  • Ensure Sufficient Color Contrast: Use colors that meet WCAG contrast requirements to make graphics easily distinguishable.
  • Make Graphics Responsive: Use scalable units and viewBox attributes to ensure graphics adapt to different screen sizes and devices.
  • Enhance with ARIA Attributes: Assign appropriate ARIA roles and labels to interactive graphics to improve accessibility.
  • Enable Keyboard Accessibility: Ensure that interactive graphics can be navigated and activated using keyboard controls.
  • Provide Controls for Animations: Allow users to pause, stop, or reduce motion in animated graphics to accommodate motion sensitivities.
  • Use Semantic SVG Elements: Utilise semantic elements within SVGs to convey meaning and structure effectively.
  • Avoid Overly Complex Graphics: Keep graphics as simple as possible to prevent confusion and maintain accessibility.
  • Test with Assistive Technologies: Regularly verify that graphics are correctly interpreted by screen readers and other assistive tools.
  • Maintain Consistent Styling: Apply consistent styles to graphics across the website to aid recognition and usability.