New to Kendo UI for jQuery? Start a free 30-day trial

Shapes.accessibility

configuration

Defines accessibility options for the shape.

shapes.accessibility

Object

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            x: 100,
            y: 100,
            content: { text: "CEO" },
            accessibility: {
                ariaLabel: "Chief Executive Officer position"
            }
        },
        {
            id: "2",
            x: 300,
            y: 100,
            content: { text: "CTO" },
            accessibility: {
                ariaLabel: "Chief Technology Officer position"
            }
        }
    ],
    connections: [
        { from: "1", to: "2" }
    ]
});
</script>

shapes.accessibility.ariaLabel

String

The accessibility label of the shape.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            x: 100,
            y: 100,
            content: { text: "CEO" },
            accessibility: {
                ariaLabel: "John Smith - Chief Executive Officer"
            }
        }
    ]
});
</script>

shapes.accessibility.ariaRoleDescription

String

The accessibility role description of the shape.

Default: "Shape"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            x: 100,
            y: 100,
            content: { text: "Start" },
            accessibility: {
                ariaRoleDescription: "Terminator"
            }
        }
    ]
});
</script>

shapes.accessibility.role

String

The accessibility role of the shape.

Default: "graphics-symbol"

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [
        {
            id: "1",
            x: 100,
            y: 100,
            content: { text: "Decision" },
            accessibility: {
                role: "img"
            }
        }
    ]
});
</script>