SmartArt
Build visual relationships without creating barriers.
SmartArt is a tool in Microsoft Office that turns text into visuals like flowcharts, hierarchies, timelines, and diagrams. These graphics can make content more visually engaging and help users better understand relationships, processes, and organization. However, SmartArt can also introduce significant accessibility challenges—especially for users relying on assistive technologies. In most cases, avoiding SmartArt is the simplest way to improve accessibility.
SmartArt: Accessible or Inaccessible?
Microsoft Word and Microsoft Excel: Largely Inaccessible
SmartArt in Microsoft Word and Excel is largely inaccessible because it exists on a separate drawing layer from the main document content. As a result, screen reader users often cannot navigate or read the content within the SmartArt. Instead, the graphic is typically treated as a single image.
While alternative text and long descriptions can be added to improve accessibility, these workarounds often fall short—especially when SmartArt contains complex or detailed information. In most cases, it is best to present this information using standard text, lists, or tables. Doing so ensures that all users, including those using assistive technologies, can fully access and understand the content.
If you choose to keep your SmartArt graphic in Microsoft Word or Excel, flatten the SmartArt graphic into an image and follow the guidance outlined in TTaDA’s Knowledge Base article, Make Floating Objects Accessible.
Make Floating Objects Accessible
Microsoft PowerPoint: More Accessible
SmartArt in PowerPoint may be more accessible than SmartArt in Word or Excel. However, accessibility still depends heavily on the SmartArt layout, reading order, color contrast, and use of alternative text.
Make Your SmartArt Accessible
SmartArt is considered accessible when users—especially those using screen readers—can meaningfully interpret both the content and the relationships between elements in the graphic. Accessibility in SmartArt can be enhanced by ensuring the following:
Simple SmartArt layouts with clearly ordered text boxes are generally easier for screen readers to interpret than highly decorative or layered graphics. Avoid SmartArt templates that include:
- decorative background shapes
- floating arrows or disconnected process elements
- timelines with detached markers
- excessive layering or overlapping objects
- or, symbolic graphics used to communicate meaning
In general, simple process diagrams, vertical lists, and basic hierarchies are easier for assistive technologies to navigate and interpret.
Layouts
The following SmartArt layouts are generally considered less problematic for accessibility because they typically maintain a clearer reading order and simpler structure.
Lists
- Basic Block
- Alternating Hexagons
- Vertical Bullet
- Horizontal Bullet
- Stacked List
- Grouped List
- Vertical Block
- Vertical Chevron
- Vertical Arrow
- Trapezoid
- Descending Block
- Table
Processes
- Basic Process
- Accent Process
- Vertical Process
- Staggered Process
- Basic Chevron Process
- Closed Chevron Process
- Chevron Process
- Vertical Chevron
- Basic Bending
- Vertical Bending
- Vertical Arrow
Cycle
- Basic Cycle
- Multidimensional Cycle
- Basic Pie
- Basic Radial
- Diverging Radial
Hierarchy
- Horizontal Multi-level Hierarchy
- Horizontal Hierarchy
Matrix
- Titled Matrix
- Grid Matrix
Pyramids
- Basic Pyramid
- Inverted Pyramid
Note: Even when using simpler SmartArt layouts, accessibility still depends on factors such as reading order, color contrast, alternative text, and the complexity of the information presented.
When applying SmartArt to PowerPoint slides, graphic elements are typically grouped together to help maintain reading order. Since the elements are grouped, you should assign alternative text to the overall graphic. This text should provide a concise summary of the graphic and explain any essential relationships or processes depicted.
Note: A long description is not always required in PowerPoint because screen reader users can still navigate between individual SmartArt elements.
If the SmartArt contains standalone images (e.g., icons or photos), each of these must also include its own descriptive alternative text. You can manage and edit this text through the Picture Format tab within the SmartArt Tools menu.
Not all SmartArt themes automatically meet accessibility standards for color contrast. Verify that all SmartArt elements meet WCAG 2.1 AA color contrast guidelines.
- Normal text and images of text should have a contrast ratio of at least 4.5:1.
- Large text (18 pt. or 14 pt. bold) should have a contrast ratio of at least 3:1.
- Non-text elements should have a contrast ratio of at least 3:1 against adjacent colors.
- Logos do not have a minimum contrast requirement.
If you need to adjust colors for any of the elements in your graphic, you can do so by navigating to the SmartArt Design Tab and then selecting Change Colors.
SmartArt automatically applies a reading order to its graphics. This order generally attempts to follow the same pattern screen readers use when navigating content (left to right and top to bottom). However, the default order may not always align with the intended visual flow—especially in more complex graphics.
On a general basis, simple graphics with text contained in ordered blocks tend to have a more logical reading order for screen readers. Graphics containing the following elements may cause issues in reading order:
- Graphics with photos: Photos often receive priority in the reading order, separating them from the context of accompanying text.
- Graphics with decorative shapes: Some graphics apply additional shapes behind text boxes to create a floating effect. These shapes are given priority over the actual content, disrupting the information hierarchy.
- Floating Process Arrows: Many graphics contain floating arrows to denote the process and/or relationship of the data. These arrows are often read first, prior to the textual elements. This often disrupts the logical sequence of the data.
- Timelines: Dots, markers, and shapes on timelines may be read out of context, detached from the associated text.
- Symbolic shapes (e.g., +, -, =): These shapes help denote relationships in data. However, these shapes aren’t read out as signs in an equation. Instead, they are merely read out as “shape.”