Testing
The following are testable statements for SVG accessibility. id of element to test is test (id="test"). Expected results are always for the element with the id="test".
Definition of BLANK is here
https://www.w3.org/WAI/PF/wiki/ARIA/Tests/Testable_Statements#Definition_of_.27BLANK.27.
NAOC (or NOAC) = No accessible object created in the accessibility tree
Language dependent tests are here Language Test Assertions
As of March 30, 2016 101 tests are captured
- 17 tests for name
- 16 tests for description
- 19 tests for role (in accessibility tree)
- 8 tests for role = presentation (not in accessibility tree)
- 11 tests for role = none (not in accessibility tree)
- 30 tests for not in accessibility tree (default mappings...)
Latest zip file of tests File:SvgTests.zip
Testable statements for name calculation
Simple name testable statements
- // aria-labelledby, aria-label, title
if given
<circle id="test" aria-labelledby="t1" aria-label="bob" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text id="t1" x="40" y="90">end</text>
then accessible name = "end"
MSAA
|
accName
|
end
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
end
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
end
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
end
|
note
|
w3c-svg-name-calculation.html test1
|
- // aria-labelledby, aria-label
if given
<circle id="test" aria-labelledby="t1" aria-label="bob" cx='50' cy='100' r='15'/>
<text id="t1" x="40" y="90">end</text>
then accessible name = "end"
MSAA
|
accName
|
end
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
end
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
end
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
end
|
note
|
w3c-svg-name-calculation.html test2
|
- // aria-labelledby, title
if given
<circle id="test" aria-labelledby="t1" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text id="t1" x="40" y="90">end</text>
then accessible name = "end"
MSAA
|
accName
|
end
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
end
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
end
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
end
|
note
|
w3c-svg-name-calculation.html test3
|
- // aria-labelledby only
if given
<circle id="test" aria-labelledby="t1" cx='50' cy='100' r='15'/>
<text id="t1" x="40" y="90">end</text>
then accessible name = "end"
MSAA
|
accName
|
end
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
end
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
end
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
end
|
note
|
w3c-svg-name-calculation.html test4
|
- // aria-label, title
if given
<circle id="test" aria-label="hello" cx='10' cy='10' r='5'>
<title>abc</title>
</circle>
and aria-labelledby is not specified
then accessible name = "hello"
MSAA
|
accName
|
hello
|
UIA
|
Name
|
hello
|
ATK
|
name
|
hello
|
AXAPI
|
AXDescription
|
hello
|
note
|
w3c-svg-name-calculation.html test5
|
- // aria-label only
if given
<circle id="test" aria-label="hello" cx='10' cy='10' r='5'/>
and aria-labelledby is not specified then accessible name = "hello"
MSAA
|
accName
|
hello
|
UIA
|
Name
|
hello
|
ATK
|
name
|
hello
|
AXAPI
|
AXDescription
|
hello
|
note
|
w3c-svg-name-calculation.html test6
|
- // title only
if given
<circle id="test" cx='10' cy='100' r='5' >
<title>abc</title>
</circle>
and aria-labelledby and aria-label is not specified then accessible name = "abc"
MSAA
|
accName
|
abc
|
UIA
|
Name
|
abc
|
ATK
|
name
|
abc
|
AXAPI
|
AXDescription
|
abc
|
note
|
w3c-svg-name-calculation.html test7
|
- // test element is second element
if given
<circle aria-labelledby="t1" aria-label="bob" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text id="t1" x="40" y="90">end</text>
<circle id="test" aria-label="hello" cx='10' cy='10' r='5'>
<title>abc</title>
</circle>
and aria-labelledby is not specified then accessible name = "hello"
MSAA
|
accName
|
hello
|
UIA
|
Name
|
hello
|
ATK
|
name
|
hello
|
AXAPI
|
AXDescription
|
hello
|
note
|
|
Empty aria-labelledby testable statements
- // empty aria-labelledby, aria-label, title
if given
<circle id="test" aria-labelledby="" aria-label="bob" cx='50' cy='100'
r='15'>
<title>abc</title>
</circle>
then accessible name = "bob"
MSAA
|
accName
|
bob
|
UIA
|
Name
|
bob
|
ATK
|
name
|
bob
|
AXAPI
|
AXDescription
|
bob
|
note
|
w3c-svg-name-calculation.html test14
|
- // empty aria-labelledby, aria-label
if given
<circle id="test" aria-labelledby="" aria-label="bob" cx='50' cy='100' r='15'/>
then accessible name = "bob"
MSAA
|
accName
|
bob
|
UIA
|
Name
|
bob
|
ATK
|
name
|
bob
|
AXAPI
|
AXDescription
|
bob
|
note
|
w3c-svg-name-calculation.html test15
|
- // empty aria-labelledby, title
if given
<circle id="test" aria-labelledby="" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
then accessible name = abc
MSAA
|
accName
|
abc
|
UIA
|
Name
|
abc
|
ATK
|
name
|
abc
|
AXAPI
|
AXDescription
|
abc
|
note
|
w3c-svg-name-calculation.html test16
|
- // empty aria-labelledby only
if given
<circle id="test" aria-labelledby="" cx='50' cy='100' r='15'/>
then accessible name = BLANK
MSAA
|
accName
|
<empty>
|
UIA
|
Name
|
<empty>
|
ATK
|
name
|
<empty>
|
AXAPI
|
AXDescription
|
<empty>
|
note
|
w3c-svg-name-calculation.html test17
|
Multiple idrefs in aria-labelledby
- // two valid idrefs
if given
<circle id="test" aria-labelledby="t1 t2" cx='50' cy='100' r='15'/>
<text id="t1" x="40"
y="90">the</text> <text id="t2" x="140" y="90">end</text>
then accessible name = "the end"
MSAA
|
accName
|
the end
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
the end
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
the end
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
the end
|
note
|
w3c-svg-name-calculation.html test20
|
- // two valid idrefs, one with an aria-label
if given
<circle id="test" aria-labelledby="t1 t2" cx='50' cy='100' r='15'/>
<text id="t1" x="40" y="90"
aria-label="big">the</text> <text id="t2" x="140" y="90">end</text>
then accessible name = "big end"
MSAA
|
accName
|
big end
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
big end
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
big end
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
big end
|
note
|
w3c-svg-name-calculation.html test21
|
- // two valid idrefs, one with an aria-label, one with aria-labelledby
if given
<circle id="test" aria-labelledby="t1 t2" cx='50' cy='100' r='15'/>
<text id="t1" x="40" y="90"
aria-label="big">the</text> <text id="t2" x="140" y="90" aria-labelledby='t3'>end</text> <text id="t3"
x="180" y="90">finish</text>
then accessible name = "big finish"
MSAA
|
accName
|
big finish
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
big finish
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
big finish
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
big finish
|
note
|
w3c-svg-name-calculation.html test22 (Expectations diff)
|
- // one valid idref, id t1 invalid
if given
<circle id="test" aria-labelledby="t1 t2" cx='50' cy='100' r='15'/>
<text id="t2" x="40"
y="90">end</text>
then accessible name = "end"
MSAA
|
accName
|
end
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
end
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
end
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
end
|
note
|
w3c-svg-name-calculation.html test23
|
Name from content testable statements
- // text
if given
<text id="test" x="40" y="90">end</text>
then accessible name = "end"
MSAA
|
accName
|
end
|
UIA
|
Name
|
end
|
ATK
|
name
|
end
|
AXAPI
|
AXDescription
|
end
|
note
|
w3c-svg-name-calculation.html test24
|
a element testable statements
- // a aria-label, xlink title
if given
<a id="test" aria-label="booth" href="../index.html" xlink:title="table" >
</a>
and aria-labelledby is not specified then accessible name = "booth"
MSAA
|
accName
|
booth
|
UIA
|
Name
|
booth
|
ATK
|
name
|
booth
|
AXAPI
|
AXDescription
|
booth
|
note
|
w3c-svg-name-calculation.html test25
|
- // a xlink title only
if given
<a id="test" href="../index.html" xlink:title="table" >
</a>
and aria-labelledby is not specified then accessible name = "table"
MSAA
|
accName
|
table
|
UIA
|
Name
|
table
|
ATK
|
name
|
table
|
AXAPI
|
AXTitle
|
table
|
note
|
w3c-svg-name-calculation.html test26
|
- // a title only
if given
<a id="test" href="../index.html">
<title>counter</title>
</a>
and aria-labelledby is not specified then accessible name = "counter"
MSAA
|
accName
|
counter
|
UIA
|
Name
|
counter
|
ATK
|
name
|
counter
|
AXAPI
|
AXDescription
|
counter
|
note
|
w3c-svg-name-calculation.html test27
|
- // a title and xlink title
if given
<a id="test" href="../index.html" xlink:title="table" >
<title>counter</title>
</a>
and aria-labelledby is not specified then accessible name = "counter"
MSAA
|
accName
|
counter
|
UIA
|
Name
|
counter
|
ATK
|
name
|
counter
|
AXAPI
|
AXDescription
|
counter
|
note
|
w3c-svg-name-calculation.html test28
|
use element testable statements
- // use aria-labelledby on use, title on reference
if given
<defs>
<path id="r1" d="M 8,2 L 10,0 L 7,-5 L 3,-7 L 3,-8 L -9,1 L -5,4 L 1,3 L 2,2 L 5,3 z">
<title>rock</title>
</path>
</defs>
<use id="test" transform="translate(30 345)" xlink:href="#r1" aria-labelledby="b1"/>
<text id="b1" x="35" y="90">boulder</text>
then accessible name = "boulder"
MSAA
|
accName
|
boulder
|
IAccessible2
|
IA2_RELATION_LABELLED_BY
|
<not empty>
|
UIA
|
Name
|
boulder
|
LabeledBy
|
<not empty>
|
ATK
|
name
|
boulder
|
RELATION_LABELLED_BY
|
<not empty>
|
AXAPI
|
AXDescription
|
boulder
|
note
|
w3c-svg-name-calculation.html test30
|
- // use aria-label on use, title on reference
if given
<defs>
<path id="r1" d="M 8,2 L 10,0 L 7,-5 L 3,-7 L 3,-8 L -9,1 L -5,4 L 1,3 L 2,2 L 5,3 z">
<title>rock</title>
</path>
</defs>
<use id="test" transform="translate(30 345)" xlink:href="#r1" aria-label="stone"/>
and aria-labelledby is not specified then accessible name = "stone"
MSAA
|
accName
|
stone
|
UIA
|
Name
|
stone
|
ATK
|
name
|
stone
|
AXAPI
|
AXDescription
|
stone
|
note
|
w3c-svg-name-calculation.html test31
|
- // use title on use, title on reference
if given
<defs>
<path id="r1" d="M 8,2 L 10,0 L 7,-5 L 3,-7 L 3,-8 L -9,1 L -5,4 L 1,3 L 2,2 L 5,3 z">
<title>rock</title>
</path>
</defs>
<use id="test" transform="translate(30 345)" xlink:href="#r1">
<title>pebble</title>
</use>
and aria-labelledby is not specified then accessible name = "pebble"
MSAA
|
accName
|
pebble
|
UIA
|
Name
|
pebble
|
ATK
|
name
|
pebble
|
AXAPI
|
AXDescription
|
pebble
|
note
|
w3c-svg-name-calculation.html test32
|
- // use title on reference xlink href
if given
<defs>
<path id="r1" d="M 8,2 L 10,0 L 7,-5 L 3,-7 L 3,-8 L -9,1 L -5,4 L 1,3 L 2,2 L 5,3 z">
<title>rock</title>
</path>
</defs>
<use id="test" transform="translate(30 345)" xlink:href="#r1"/>
and aria-labelledby is not specified then accessible name = "rock"
MSAA
|
accName
|
rock
|
UIA
|
Name
|
rock
|
ATK
|
name
|
rock
|
AXAPI
|
AXTitle
|
rock
|
note
|
w3c-svg-name-calculation.html test33
|
- // use title on reference href
if given
<defs>
<path id="r1" d="M 8,2 L 10,0 L 7,-5 L 3,-7 L 3,-8 L -9,1 L -5,4 L 1,3 L 2,2 L 5,3 z">
<title>rock</title>
</path>
</defs>
<use id="test" transform="translate(30 345)" href="#r1"/>
and aria-labelledby is not specified then accessible name = "rock"
MSAA
|
accName
|
rock
|
UIA
|
Name
|
rock
|
ATK
|
name
|
rock
|
AXAPI
|
AXTitle
|
rock
|
note
|
w3c-svg-name-calculation.html test34
|
Empty or all whitespace title/desc
- // path, empty title
if given
<path id="test" d="M 100 100 L 300 100 L 200 300 z" fill="red" >
<title>
</title>
</path>
then accessible name = BLANK
MSAA
|
accName
|
<empty>
|
UIA
|
Name
|
<empty>
|
ATK
|
name
|
<empty>
|
AXAPI
|
AXDescription
|
<empty>
|
note
|
w3c-svg-name-calculation.html test41
|
- // circle, whitespace title
if given
<circle id="test" cx='10' cy='10' r='5'>
<title> </title>
</circle>
then accessible name = BLANK
MSAA
|
accName
|
<empty>
|
UIA
|
Name
|
<empty>
|
ATK
|
name
|
<empty>
|
AXAPI
|
AXDescription
|
<empty>
|
note
|
w3c-svg-name-calculation.html test42
|
- // ellipse, empty title, empty desc
if given
<ellipse id="test" cx='40' cy='100' rx='25' ry='15'>
<title>
</title>
<desc>
</desc>
</ellipse>
then accessible name = BLANK
MSAA
|
accName
|
<empty>
|
UIA
|
Name
|
<empty>
|
ATK
|
name
|
<empty>
|
AXAPI
|
AXDescription
|
<empty>
|
note
|
w3c-svg-name-calculation.html test43
|
- // line whitespace title, empty desc
if given
<line id="test" x1='10' y1='10' x2='50' y2='10'>
<title> </title>
<desc>
</desc>
</line>
then accessible name = BLANK
MSAA
|
accName
|
<empty>
|
UIA
|
Name
|
<empty>
|
ATK
|
name
|
<empty>
|
AXAPI
|
AXDescription
|
<empty>
|
note
|
w3c-svg-name-calculation.html test44
|
- // circle, empty title, whitespace desc
if given
<circle id="test" cx='10' cy='10' r='5'>
<title>
</title>
<desc> </desc>
</circle>
then accessible name = BLANK
MSAA
|
accName
|
<empty>
|
UIA
|
Name
|
<empty>
|
ATK
|
name
|
<empty>
|
AXAPI
|
AXDescription
|
<empty>
|
note
|
w3c-svg-name-calculation.html test45
|
- // line, whitespace title, whitespace desc
if given
<line id="test" x1='10' y1='10' x2='50' y2='10'>
<title> </title>
<desc> </desc>
</line>
then accessible name = BLANK
MSAA
|
accName
|
<empty>
|
UIA
|
Name
|
<empty>
|
ATK
|
name
|
<empty>
|
AXAPI
|
AXDescription
|
<empty>
|
note
|
w3c-svg-name-calculation.html test46
|
Testable statements for description calculation
Simple description testable statements
- // aria-describedby, desc, title
if given
<circle id="test" aria-describedby="t1" cx='50' cy='100' r='15'>
<title>abc</title>
<desc>123</desc>
</circle>
<text id="t1" x="40" y="90">end</text>
then accessible
description = "end"
MSAA
|
accDescription
|
end
|
IAccessible2
|
IA2_RELATION_DESCRIBED_BY
|
<not empty>
|
UIA
|
TBD
|
end
|
DescribedBy
|
<not empty>
|
ATK
|
description
|
end
|
AXAPI
|
AXHelp
|
end
|
note
|
w3c-svg-description-calculation.html test1
|
- // aria-describedby, desc
if given
<circle id="test" aria-describedby="t1" cx='50' cy='100' r='15'>
<desc>123</desc>
</circle>
<text
id="t1" x="40" y="90">end</text>
then accessible description = "end"
MSAA
|
accDescription
|
end
|
IAccessible2
|
IA2_RELATION_DESCRIBED_BY
|
<not empty>
|
UIA
|
TBD
|
end
|
DescribedBy
|
<not empty>
|
ATK
|
description
|
end
|
AXAPI
|
AXHelp
|
end
|
note
|
w3c-svg-description-calculation.html test2
|
- // aria-describedby, title
if given
<circle id="test" aria-describedby="t1" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text
id="t1" x="40" y="90">end</text>
then accessible description = "end"
MSAA
|
accDescription
|
end
|
IAccessible2
|
IA2_RELATION_DESCRIBED_BY
|
<not empty>
|
UIA
|
TBD
|
end
|
DescribedBy
|
<not empty>
|
ATK
|
description
|
end
|
AXAPI
|
AXHelp
|
end
|
note
|
w3c-svg-description-calculation.html test3
|
- // aria-describedby only
if given
<circle id="test" aria-describedby="t1" cx='50' cy='100' r='15'/>
<text id="t1" x="40"
y="90">end</text>
then accessible description = "end"
MSAA
|
accDescription
|
end
|
IAccessible2
|
IA2_RELATION_DESCRIBED_BY
|
<not empty>
|
UIA
|
TBD
|
end
|
DescribedBy
|
<not empty>
|
ATK
|
description
|
end
|
AXAPI
|
AXHelp
|
end
|
note
|
w3c-svg-description-calculation.html test4
|
- // desc, title
if given
<circle id="test" cx='50' cy='100' r='15'>
<title>abc</title>
<desc>123</desc>
</circle>
then
accessible description = "123"
MSAA
|
accDescription
|
123
|
UIA
|
TBD
|
123
|
ATK
|
description
|
123
|
AXAPI
|
AXHelp
|
123
|
note
|
w3c-svg-description-calculation.html test5
|
Empty aria-describedby testable statements
- // empty aria-describedby, desc, title
if given
<circle id="test" aria-describedby="" cx='50' cy='100' r='15'>
<title>abc</title>
<desc>123</desc>
</circle>
then accessible description = "123"
MSAA
|
accDescription
|
123
|
UIA
|
FullDescription
|
123
|
ATK
|
description
|
123
|
AXAPI
|
AXHelp
|
123
|
note
|
w3c-svg-description-calculation.html test12
|
- // empty aria-describedby, desc
if given
<circle id="test" aria-describedby="" cx='50' cy='100' r='15'>
<desc>12</desc>
</circle>
then accessible description = "12"
MSAA
|
accDescription
|
12
|
UIA
|
FullDescription
|
12
|
ATK
|
description
|
12
|
AXAPI
|
AXHelp
|
12
|
note
|
w3c-svg-description-calculation.html test13
|
- // empty aria-describedby, title
if given
<circle id="test" aria-describedby="" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
FullDescription
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test14
|
- // empty aria-describedby, aria-label
if given
<circle id="test" aria-label='hello' aria-describedby="" cx='50' cy='100' r='15'/>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
FullDescription
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
|
- // empty aria-describedby only
if given
<circle id="test" aria-describedby="" cx='50' cy='100' r='15'/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
w3c-svg-description-calculation.html test15 (Expectations diff)
|
Multiple idrefs in aria-describedby
- // two valid idrefs
if given
<circle id="test" aria-describedby="t1 t2" cx='50' cy='100' r='15'/>
<text id="t1" x="40"
y="90">the</text> <text id="t2" x="140" y="90">end</text>
then accessible description = "the end"
MSAA
|
accDescription
|
the end
|
IAccessible2
|
IA2_RELATION_DESCRIBED_BY
|
<not empty>
|
UIA
|
TBD
|
the end
|
DescribedBy
|
<not empty>
|
ATK
|
description
|
the end
|
AXAPI
|
AXHelp
|
the end
|
note
|
w3c-svg-description-calculation.html test20
|
- // two valid idrefs, one with aria-describedby
if given
<circle id="test" aria-describedby="t1 t2" cx='50' cy='100' r='15'/>
<text id="t1" x="40"
y="90">the</text> <text id="t2" x="140" y="90" aria-describedby='t3'>end</text> <text id="t3" x="180"
y="90">finish</text>
then accessible description = "the end"
MSAA
|
accDescription
|
the end
|
IAccessible2
|
IA2_RELATION_DESCRIBED_BY
|
<not empty>
|
UIA
|
TBD
|
the end
|
DescribedBy
|
<not empty>
|
ATK
|
description
|
the end
|
AXAPI
|
AXHelp
|
the end
|
note
|
w3c-svg-description-calculation.html test21
|
- // one valid idref, id t1 invalid
if given
<circle id="test" aria-describedby="t1 t2" cx='50' cy='100' r='15'/>
<text id="t2" x="40"
y="90">end</text>
then accessible description = "end"
MSAA
|
accDescription
|
end
|
IAccessible2
|
IA2_RELATION_DESCRIBED_BY
|
<not empty>
|
UIA
|
TBD
|
end
|
DescribedBy
|
<not empty>
|
ATK
|
description
|
end
|
AXAPI
|
AXHelp
|
end
|
note
|
w3c-svg-description-calculation.html test22
|
Title is description
- // description aria-labelledby, title
if given
<circle id="test" aria-labelledby="t1" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text
id="t1" x="40" y="90">end</text>
then accessible description = "abc"
MSAA
|
accDescription
|
abc
|
UIA
|
TBD
|
abc
|
ATK
|
description
|
abc
|
AXAPI
|
AXHelp
|
abc
|
note
|
w3c-svg-description-calculation.html test23
|
- // description aria-label, title
if given
<circle id="test" aria-label="bob" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
then accessible description = "abc"
MSAA
|
accDescription
|
abc
|
UIA
|
TBD
|
abc
|
ATK
|
description
|
abc
|
AXAPI
|
AXHelp
|
abc
|
note
|
w3c-svg-description-calculation.html test24
|
Title is same as accessible name
- // aria-labelledby, title
if given
<circle id="test" aria-labelledby="t1" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text id="t1" x="40" y="90">abc</text>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test29
|
- // aria-label, title
if given
<circle id="test" aria-label="bob" cx='50' cy='100' r='15'>
<title>bob</title>
</circle>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test30
|
a element testable statements
- // aria-labelledby, aria-label, xlink title
if given
<a id="test" aria-labelledby="t1" aria-label="booth" href="../index.html" xlink:title="table" >
</a>
<text id="t1" x="40" y="90">end</text>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test34
|
- // aria-labelledby, xlink title
if given
<a id="test" aria-labelledby="t1" href="../index.html" xlink:title="table" >
</a>
<text id="t1" x="40" y="90">end</text>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test35
|
- // aria-label, xlink title
if given
<a id="test" aria-label="booth" href="../index.html" xlink:title="table" >
</a>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test36
|
- // title and xlink title
if given
<a id="test" href="../index.html" xlink:title="table" >
<title>counter</title>
</a>
and aria-labelledby is not specified then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test37
|
- // xlink title only
if given
<a id="test" href="../index.html" xlink:title="table" >
</a>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test38
|
Empty or all whitespace title/desc
- // ellipse, empty title, empty desc
if given
<ellipse id="test" cx='40' cy='100' rx='25' ry='15'>
<title>
</title>
<desc>
</desc>
</ellipse>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test39
|
- // circle, empty title, whitespace desc
if given
<circle id="test" cx='10' cy='10' r='5'>
<title>
</title>
<desc> </desc>
</circle>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test40
|
- // line, whitespace title, whitespace desc
if given
<line id="test" x1='10' y1='10' x2='50' y2='10'>
<title> </title>
<desc> </desc>
</line>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test41
|
- // polygon, empty desc
if given
<polygon id="test" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" >
<desc>
</desc>
</polygon>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test42
|
- // rect, whitespace desc
if given
<rect id="test" x='10' y='10' width='50' height='30'>
<desc> </desc>
</rect>
then accessible description = BLANK
MSAA
|
accDescription
|
<empty>
|
UIA
|
TBD
|
<empty>
|
ATK
|
description
|
<empty>
|
AXAPI
|
AXHelp
|
<empty>
|
note
|
w3c-svg-description-calculation.html test43
|
Testable statements for role
Path default role = img, properties and children testable statements
- // path, aria-labelledby, aria-label, title, desc
if given
<path id="test" aria-labelledby="t1" aria-label="down" d="M 100 100 L 300 100 L 200 300 z"
fill="red" >
<title>abc</title>
<desc>down</desc>
</path>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test1
|
- // path, aria-labelledby, aria-label, title
if given
<path id="test" aria-labelledby="t1" aria-label="down" d="M 100 100 L 300 100 L 200 300 z"
fill="red">
<title>abc</title>
</path>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test2
|
- // path, aria-labelledby, aria-label, desc
if given
<path id="test" aria-labelledby="t1" aria-label="down" d="M 100 100 L 300 100 L 200 300 z"
fill="red" >
<desc>abc</desc>
</path>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test3
|
- // path, aria-labelledby, aria-label
if given
<path id="test" aria-labelledby="t1" aria-label="bob" d="M 100 100 L 300 100 L 200 300 z"
fill="red"/>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test4
|
- // path, aria-labelledby, title
if given
<path id="test" aria-labelledby="t1" d="M 100 100 L 300 100 L 200 300 z"
fill="red">
<title>abc</title>
</path>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test5
|
- // path, aria-labelledby, desc
if given
<path id="test" aria-labelledby="t1" d="M 100 100 L 300 100 L 200 300 z"
fill="red">
<desc>abc</desc>
</path>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test6
|
- // path, aria-labelledby only
if given
<path id="test" aria-labelledby="t1" d="M 100 100 L 300 100 L 200 300 z" fill="red"/>
<text
id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test7
|
- // path, aria-label, title
if given
<path id="test" aria-label="hello" d="M 100 100 L 300 100 L 200 300 z" fill="red">
<title>abc</title>
</path>
then
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test8
|
- // path, aria-label only
if given
<path id="test" aria-label="hello" d="M 100 100 L 300 100 L 200 300 z" fill="red"/>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test9
|
- // path, title only
if given
<path id="test" d="M 100 100 L 300 100 L 200 300 z" fill="red" >
<title>abc</title>
</path>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test10
|
- // path, desc only
if given
<path id="test" d="M 100 100 L 300 100 L 200 300 z" fill="red" >
<desc>abc</desc>
</path>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test11
|
Basic shapes default role = img, properties and children testable statements
- // aria-labelledby, aria-label, title
if given
<circle id="test" aria-labelledby="t1" aria-label="bob" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test12
|
- // aria-labelledby, aria-label
if given
<circle id="test" aria-labelledby="t1" aria-label="bob" cx='50' cy='100' r='15'/>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test13
|
- // aria-labelledby, title
if given
<circle id="test" aria-labelledby="t1" cx='50' cy='100' r='15'>
<title>abc</title>
</circle>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test14
|
- // aria-labelledby only
if given
<circle id="test" aria-labelledby="t1" cx='50' cy='100' r='15'/>
<text id="t1" x="40" y="90">end</text>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test15
|
- // aria-label, title
if given
<circle id="test" aria-label="hello" cx='10' cy='10' r='5'>
<title>abc</title>
</circle>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test16
|
- // aria-label only
if given
<circle id="test" aria-label="hello" cx='10' cy='10' r='5'/>
then
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test17
|
- // title only
if given
<circle id="test" cx='10' cy='100' r='5' >
<title>abc</title>
</circle>
then
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test18
|
Basic shapes default role = img
- // rect, aria-label only
if given
<rect id="test" aria-label="hello" x='10' y='10' width='50' height='30'/>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test19
|
- // ellipse, title only
if given
<ellipse id="test" cx='50' cy='100' rx='25' ry='15'>
<title>abc</title>
</ellipse>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test20
|
- // line, aria-label only
if given
<line id="test" aria-label="hello" x1='10' y1='10' x2='50' y2='10'/>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test21
|
- // polyline, aria-label only
if given
<polyline id="test" aria-label="hello" fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" />
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test22
|
- // polygon, desc only
if given
<polygon id="test" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" >
<desc>built up area</desc>
</polygon>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test23
|
- // mesh, aria-label only
if given
<mesh x="50" y="50" id="test" aria-label="hello">
<meshrow> <meshpatch> <stop path="c 25,-25 75, 25 100,0" stop-color="lightblue" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="purple" /> <stop path="c -25, 25 -75,-25 -100,0" stop-color="red" /> <stop path="c -25,-25, 25,-75" stop-color="purple" /> </meshpatch>
<meshpatch>
<stop path="c 25,-25 75, 25 100,0" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="lightblue" /> <stop path="c -25, 25 -75,-25" stop-color="purple" />
</meshpatch>
</meshrow>
<meshrow>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25 -100,0" stop-color="purple" />
<stop path="c -25,-25, 25,-75" stop-color="lightblue" />
</meshpatch>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25" stop-color="lightblue" />
</meshpatch>
</meshrow>
</mesh>
then role = img
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
|
Elements that may be in the accessibility tree (normal rules)
- // foreignObject
if given
<foreignObject id="test" width="100" height="50" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML" aria-label="word wrap example">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
then role = "group"
MSAA
|
ROLE_SYSTEM_GROUPING
|
<shown>
|
UIA
|
control type
|
group
|
ATK
|
xml-roles
|
ROLE_PANEL
|
AXAPI
|
AXRole
|
AXGroup
|
AXSubrole
|
AXGraphicsObject
|
AXDescription
|
graphics object
|
note
|
w3c-svg-roles.html test24
|
- // g
if given
<g id="test">
<title>Venn Diagram</title>
<circle cx='50' cy='50' r='20' aria-label="set A"/> <circle cx='50' cy='75' r='20' aria-label="set B"/>
</g>
then role = "group"
MSAA
|
ROLE_SYSTEM_GROUPING
|
<shown>
|
UIA
|
control type
|
group
|
ATK
|
xml-roles
|
ROLE_PANEL
|
AXAPI
|
AXRole
|
AXGroup
|
AXSubrole
|
AXGraphicsObject
|
AXDescription
|
graphics object
|
note
|
w3c-svg-roles.html test25
|
- // image
if given
<image id="test" x="200" y="200" width="100px" height="100px" href="myimage.png">
<title>My image</title>
</image>
then role = "img"
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test26
|
- // svg
if given
<svg id="test" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg">
<desc>This graphic links to an external image</desc>
<image x="200" y="200" width="100px" height="100px"
href="myimage.png">
<title>My image</title>
</image>
</svg>
then role = "group"
MSAA
|
ROLE_SYSTEM_GROUPING
|
<shown>
|
UIA
|
control type
|
group
|
ATK
|
xml-roles
|
ROLE_PANEL
|
AXAPI
|
AXRole
|
AXGroup
|
AXSubrole
|
AXGraphicsObject
|
AXDescription
|
graphics object
|
note
|
w3c-svg-roles.html test27
|
- // use
if given
<defs>
<rect id="MyRect" width="60" height="10"/>
</defs>
<use id="test" x="20" y="10" href="#MyRect" aria-label="black bar"/>
then role = "img"
MSAA
|
ROLE_SYSTEM_GRAPHIC
|
<shown>
|
UIA
|
control type
|
Image
|
ATK
|
xml-roles
|
ROLE_IMAGE
|
AXAPI
|
AXRole
|
AXImage
|
AXSubrole
|
<nil>
|
AXDescription
|
image
|
note
|
w3c-svg-roles.html test28
|
Text elements
- // text
if given
<text id="test" x="250" y="180" font-family="Verdana" font-size="64" fill="blue">Hello, out
there!</text>
then for role = "group"
MSAA
|
ROLE_SYSTEM_GROUPING
|
<shown>
|
UIA
|
control type
|
group
|
ATK
|
xml-roles
|
ROLE_PANEL
|
AXAPI
|
AXRole
|
AXGroup
|
AXSubrole
|
AXGraphicsObject
|
AXDescription
|
graphics object
|
note
|
w3c-svg-roles.html test29
|
- // textPath
if given
<text transform="rotate(45)">
<textPath id="test" href="#path1">Text on a path1</textPath>
</text>
then role = "group"
MSAA
|
ROLE_SYSTEM_GROUPING
|
<shown>
|
UIA
|
control type
|
group
|
ATK
|
xml-roles
|
ROLE_PANEL
|
AXAPI
|
AXRole
|
AXGroup
|
AXSubrole
|
AXGraphicsObject
|
AXDescription
|
graphics object
|
note
|
w3c-svg-roles.html test30
|
- // tspan
if given
<text x="100" y="180" fill="blue" >But you <tspan id="test" dx="2em" dy="-50" font-weight="bold"
fill="red" > are a peach </tspan> </text>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
w3c-svg-roles.html test32
|
HTML elements
- // audio
TODO
- // canvas
TODO
- // iframe
TODO
- // source
if given
<html:video src="file.mp4" controls="controls"> <html:source id="test" src="file.webm" type='video/webm;codecs="vp8, vorbis"'/> <html:source src="file.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</html:video>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // video
if given
<html:video id="test" src="file.mp4" controls="controls">
</html:video>
then role = "application"
MSAA
|
xml-roles
|
ROLE_SYSTEM_GROUPING
|
UIA
|
control type
|
Group
|
ATK
|
xml-roles
|
ATK_ROLE_VIDEO
|
AXAPI
|
AXRole
|
AXGroup
|
AXSubrole
|
<nil>
|
AXDescription
|
AXToolbar
|
note
|
|
Role is none
Elements role is none
- // foreignObject
if given
<foreignObject id="test" role="none" width="100" height="50" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML" >
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // g
if given
<g id="test" role="none">
<circle cx='50' cy='50' r='20' aria-label="set A"/> <circle cx='50' cy='75' r='20' aria-label="set B"/>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // image
if given
<image id="test" x="200" y="200" width="100px" height="100px" href="myimage.png" role="none">
</image>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // svg
if given
<svg id="test" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg" role="none">
<image x="200" y="200" width="100px" height="100px" href="myimage.png">
<title>My image</title>
</image>
</svg>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // use
if given
<defs>
<rect id="MyRect" width="60" height="10"/>
</defs>
<use id="test" role="none" x="20" y="10" href="#MyRect" aria-label="black bar"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Basic shapes role is none
- // path, desc role = none
if given
<path id="test" d="M 100 100 L 300 100 L 200 300 z" fill="red" role="none" >
</path>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // rect, role = none
if given
<rect id="test" x='10' y='10' width='50' height='30' role="none"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // ellipse, role = none
if given
<ellipse id="test" cx='40' cy='100' rx='25' ry='15' role="none">
</ellipse>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // line, aria-label role = none
if given
<line id="test" aria-label="hello" x1='10' y1='10' x2='50' y2='10' role="none"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polyline, role = none
if given
<polyline id="test" fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" role="none"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polygon, role = none
<polygon id="test" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" role="none">
</polygon>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // mesh, role = none
if given
<mesh x="50" y="50" id="test" role='none'>
<meshrow> <meshpatch> <stop path="c 25,-25 75, 25 100,0" stop-color="lightblue" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="purple" /> <stop path="c -25, 25 -75,-25 -100,0" stop-color="red" /> <stop path="c -25,-25, 25,-75" stop-color="purple" /> </meshpatch> <meshpatch>
<stop path="c 25,-25 75, 25 100,0" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="lightblue" /> <stop path="c -25, 25 -75,-25" stop-color="purple" />
</meshpatch>
</meshrow>
<meshrow> <meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25 -100,0" stop-color="purple" />
<stop path="c -25,-25, 25,-75" stop-color="lightblue" />
</meshpatch> <meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25" stop-color="lightblue" />
</meshpatch>
</meshrow>
</mesh>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Text Elements role = none
- // text
if given
<text id="test" x="250" y="180" font-family="Verdana" font-size="64" fill="blue" role="none">Hello, out
there!</text>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // textPath
if given
<text transform="rotate(45)" role="none">
<textPath id="test" href="#path1">Text on a path1</textPath>
</text>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // tspan
if given
<text x="100" y="180" fill="blue" role="none">But you <tspan id="test" dx="2em" dy="-50" font-weight="bold" fill="red" > are a peach </tspan> </text>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Role is presentation
Elements role is presentation
- // foreignObject
if given
<foreignObject id="test" role="presentation" width="100" height="50" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML" >
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is a paragraph that requires word wrap</p>
</body>
</foreignObject>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // g
if given
<g id="test" role="presentation">
<circle cx='50' cy='50' r='20' aria-label="set A"/> <circle cx='50' cy='75' r='20' aria-label="set B"/>
</g>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // image
if given
<image id="test" x="200" y="200" width="100px" height="100px" href="myimage.png" role="presentation">
</image>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // svg
if given
<svg id="test" width="4in" height="3in" xmlns="http://www.w3.org/2000/svg" role="presentation">
<image x="200" y="200" width="100px" height="100px" href="myimage.png">
<title>My image</title>
</image>
</svg>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // use
if given
<defs>
<rect id="MyRect" width="60" height="10"/>
</defs>
<use id="test" role="presentation" x="20" y="10" href="#MyRect" />
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Basic shapes role = presentation
- // path, desc role = presentation
if given
<path id="test" d="M 100 100 L 300 100 L 200 300 z" fill="red" role="presentation" >
</path>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // rect, role = presentation
if given
<rect id="test" x='10' y='10' width='50' height='30' role="presentation"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // ellipse, role = presentation
if given
<ellipse id="test" cx='40' cy='100' rx='25' ry='15' role="presentation"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // line, role = presentation
if given
<line id="test" x1='10' y1='10' x2='50' y2='10' role="presentation"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polyline, role = presentation
if given
<polyline id="test" fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" role="presentation"/>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polygon, role = presentation
if given
<polygon id="test" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" role="presentation">
</polygon>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Text Elements role = presentation
- // text
if given
<text id="test" x="250" y="180" font-family="Verdana" font-size="64" fill="blue" role="presentation">Hello, out
there!</text>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // textPath
if given
<text transform="rotate(45)" role="presentation">
<textPath id="test" href="#path1">Text on a path1</textPath>
</text>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // tspan
if given
<text x="100" y="180" fill="blue" >But you <tspan id="test" dx="2em" dy="-50" font-weight="bold"
fill="red" role="presentation" > are a peach </tspan> </text>
then NAOC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
No role not included in accessibility tree testable statements
Elements no accessible object created
- // animate
if given
<rect x='5' y='5' width='20' height='15'> <animate id="test" attributeName="opacity" from="1" to="0"
dur="5s" repeatCount="indefinite" />
</rect>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // animateMotion
if given
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >
<animateMotion id="test" dur="6s" repeatCount="indefinite" rotate="auto" > <mpath href="#path1"/>
</animateMotion>
</path>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // animateTransform
if given
<rect width="100" height="100">
<animateTransform id="test" attributeName="transform" type="scale" from="2" to="3" repeatCount="3" dur="4s" fill="freeze"/>
</rect>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // clipPath
if given
<defs> <clipPath id="test">
<rect x="0" y="0" width="200" height="100"/>
</clipPath>
</defs> <circle cx="100" cy="100" r="100" clip-path="url(#test)" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // cursor
if given
<cursor id="test" xlink:href="cursor.png" x="4" y="0"/>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // defs
if given
<defs id="test">
<solidColor id="MyLightPurple" solid-color="#a080ff" solid-opacity="0.5"/>
</defs>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // discard
if given
<ellipse cx="98.5" cy="17.5" rx="20.5" ry="17.5" fill="blue" stroke="black" transform="translate(9 252) translate(3 -296)"> <animateTransform attributeName="transform" begin="0s" dur="2s" fill="remove" calcMode="linear" type="translate" additive="sum" from="0 0" to="-18 305"/>
<discard id="test" begin="2s"/>
</ellipse>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // hatch
if given
<hatch id="test" hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
<hatchpath stroke="#a080ff" stroke-width="2"/>
</hatch>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // hatchPath
if given
<hatch hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
<hatchpath id="test" stroke="#a080ff" stroke-width="2"/>
</hatch>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // linearGradient
if given
<defs> <linearGradient id="test">
<stop offset="5%" stop-color="#A8F" />
<stop offset="95%" stop-color="#FDC" />
</linearGradient>
</defs>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // marker
if given
<marker id="test" orient="auto" overflow="visible">
<rect x="-1" y="-0.5" width="1" height="1" fill="green"/>
</marker>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // mask
if given
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="test">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"/>
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#test)" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // meshPatch
if given
<mesh x="50" y="50" id="example">
<meshrow> <meshpatch id="test"> <stop path="c 25,-25 75, 25 100,0" stop-color="lightblue" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="purple" /> <stop path="c -25, 25 -75,-25 -100,0" stop-color="red" /> <stop path="c -25,-25, 25,-75" stop-color="purple" /> </meshpatch>
<meshpatch>
<stop path="c 25,-25 75, 25 100,0" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="lightblue" /> <stop path="c -25, 25 -75,-25" stop-color="purple" />
</meshpatch>
</meshrow>
<meshrow>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25 -100,0" stop-color="purple" />
<stop path="c -25,-25, 25,-75" stop-color="lightblue" />
</meshpatch>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25" stop-color="lightblue" />
</meshpatch>
</meshrow>
</mesh>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // meshRow
if given
<mesh x="50" y="50" id="example">
<meshrow id="test"> <meshpatch> <stop path="c 25,-25 75, 25 100,0" stop-color="lightblue" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="purple" /> <stop path="c -25, 25 -75,-25 -100,0" stop-color="red" /> <stop path="c -25,-25, 25,-75" stop-color="purple" /> </meshpatch>
<meshpatch>
<stop path="c 25,-25 75, 25 100,0" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="lightblue" /> <stop path="c -25, 25 -75,-25" stop-color="purple" />
</meshpatch>
</meshrow>
<meshrow>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25 -100,0" stop-color="purple" />
<stop path="c -25,-25, 25,-75" stop-color="lightblue" />
</meshpatch>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25" stop-color="lightblue" />
</meshpatch>
</meshrow>
</mesh>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // metadata
if given
<metadata id="test"> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#" xmlns:dc = "http://purl.org/dc/elements/1.1/" > <rdf:Description about="http://example.org/myfoo" dc:title="MyFoo Financial Report" dc:language="en" >
</rdf:Description> </rdf:RDF> </metadata>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // mpath
if given
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath id="test" xlink:href="#path1"/>
</animateMotion>
</path>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // pattern
if given
<pattern id="test" x="10" y="10" width="20" height="20">
<rect x="5" y="5" width="10" height="10"/>
</pattern>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // radialGradient
if given
<radialGradient id="test" gradientUnits="userSpaceOnUse" cx="150" cy="100" r="100">
<stop offset="0%" stop-color="#A8F" />
<stop offset="50%" stop-color="#FDC" />
<stop offset="100%" stop-color="#A8F" />
</radialGradient>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // script
TODO
- // set
TODO
- // solidColor
if given
<defs>
<solidColor id="test" solid-color="#a080ff" solid-opacity="0.5"/>
</defs>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // stop
if given
<pre>
if given
<defs> <linearGradient id="lg">
<stop id="test" offset="5%" stop-color="#A8F" />
<stop offset="95%" stop-color="#FDC" />
</linearGradient>
</defs>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // style
if given
<style id="test">@import url(mystyles.css);</style>
then for NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // switch
TODO
- // symbol
if given
<symbol id="test" viewBox="0 0 20 20">
<desc>MySymbol - four rectangles in a grid</desc>
<rect x="1" y="1" width="8" height="8"/>
<rect x="11" y="1" width="8" height="8"/>
<rect x="1" y="11" width="8"
height="8"/>
<rect x="11" y="11" width="8" height="8"/>
</symbol>
then for NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // title
if given
<title id="test">abc</title>
then for NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // track
TODO
- // view
TODO
Basic shapes and path
- // path
<path id="test" d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // rect
if given
<rect id="test" x='10' y='10' width='50' height='30' />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // circle
if given
<circle id="test" cx='10' cy='10' r='5'/>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // ellipse
if given
<ellipse id="test" cx='40' cy='100' rx='25' ry='15' />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // line
if given
<line id="test" x1='10' y1='10' x2='50' y2='10' />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polyline
if given
<polyline id="test" fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polygon
if given
<polygon id="test" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // mesh
if given
<mesh x="50" y="50" id="test">
<meshrow> <meshpatch> <stop path="c 25,-25 75, 25 100,0" stop-color="lightblue" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="purple" /> <stop path="c -25, 25 -75,-25 -100,0" stop-color="red" /> <stop path="c -25,-25, 25,-75" stop-color="purple" /> </meshpatch>
<meshpatch>
<stop path="c 25,-25 75, 25 100,0" /> <stop path="c 25, 25 -25, 75 0,100" stop-color="lightblue" /> <stop path="c -25, 25 -75,-25" stop-color="purple" />
</meshpatch>
</meshrow>
<meshrow>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25 -100,0" stop-color="purple" />
<stop path="c -25,-25, 25,-75" stop-color="lightblue" />
</meshpatch>
<meshpatch>
<stop path="c 25, 25 -25, 75 0,100" />
<stop path="c -25, 25 -75,-25" stop-color="lightblue" />
</meshpatch>
</meshrow>
</mesh>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Filter elements no accessible object created
- // filter
if given
<defs>
<filter id="test" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#test)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // feBlend
TODO
- // feColorMatrix
TODO
- // feComponentTransfer
TODO
- // feComposite
if given
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" id="test" />
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // feConvolveMatrix
TODO
- // feDiffuseLighting
TODO
- // feDistantLight
TODO
- // feDropShadow
TODO
- // feFlood
TODO
- // feFuncA
TODO
- // feFuncB
TODO
- // feFuncG
TODO
- // feFuncR
TODO
- // feGaussianBlur
if given
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" id="test"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // feImage
TODO
- // feMerge
if given
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge id="test">
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // feMergeNode
if given
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode id="test" in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // feMorphology
TODO
- // feOffset
if given
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset id="test" in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // fePointLight
if given
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" id="test" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // feSpecularLighting
if given
<defs>
<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" id="test"
specularExponent="20" lighting-color="#bbbbbb"
result="specOut">
<fePointLight x="-5000" y="-10000" z="20000" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
</defs>
<rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
<g filter="url(#MyFilter)" >
<g>
<path fill="none" stroke="#D90000" stroke-width="10"
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
<g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
<text x="52" y="76">SVG</text>
</g>
</g>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // feSpotLight
TODO
- // feTile
TODO
- // feTurbulence
TODO
Ancestor aria-hidden
- // rect, aria-label only, ancestor aria-hidden
if given
<g aria-hidden="true"> <rect id="test" aria-label="hello" x='10' y='10' width='50' height='30'/> </g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // ellipse, title only, ancestor aria-hidden
if given
<g aria-hidden="true"> <ellipse id="test" cx='40' cy='100' rx='25' ry='15'>
<title>abc</title>
</ellipse> </g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // line, aria-label only, ancestor aria-hidden
if given
<g aria-hidden="true"> <line id="test" aria-label="hello" x1='10' y1='10' x2='50' y2='10'/> </g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polyline, aria-label only, ancestor aria-hidden
if given
<g aria-hidden="true"> <polyline id="test" aria-label="hello" fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" />
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polygon, desc only, ancestor aria-hidden
if given
<g aria-hidden="true">
<polygon id="test" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" >
<desc>built up area</desc>
</polygon>
</g>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Element aria-hidden
- // rect, aria-label only, aria-hidden
if given
<rect id="test" aria-label="hello" x='10' y='10' width='50' height='30' aria-hidden="true" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // ellipse, title only, aria-hidden
if given
<ellipse id="test" cx='40' cy='100' rx='25' ry='15' aria-hidden="true" >
<title>abc</title>
</ellipse>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // line, aria-label only, aria-hidden
if given
<line id="test" aria-label="hello" x1='10' y1='10' x2='50' y2='10' aria-hidden="true" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polyline, aria-label only, aria-hidden
if given
<polyline id="test" aria-label="hello" fill="none" stroke="blue" stroke-width="10" points="50,375 150,375 150,325 250,325 250,375 350,375 350,250 450,250 450,375 550,375 550,175 650,175 650,375 750,375 750,100 850,100 850,375 950,375 950,25 1050,25 1050,375 1150,375" aria-hidden="true" />
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // polygon, desc only, aria-hidden
if given
<polygon id="test" fill="magenta" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" aria-hidden="true" >
<desc>built up area</desc>
</polygon>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
Element display none
- // circle, style property display none
if given
<circle cx="50" cy="50" r="40" id="test" style="display: none;" >
<title>Mars</title>
</circle>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|
- // circle, css style display none
if given
<style>
/* <![CDATA[ */
circle {display: none; }
/* ]]> */
</style>
<circle cx="50" cy="50" r="40" id="test" >
<title>Mars</title>
</circle>
then NOAC
MSAA
|
Not in accessibility tree
|
UIA
|
Not in accessibility tree
|
ATK
|
Not in accessibility tree
|
AXAPI
|
Not in accessibility tree
|
note
|
|