- From: Jonathan Chetwynd <j.chetwynd@btinternet.com>
- Date: Wed, 16 Jun 2010 12:02:59 +0100
- To: www-svg <www-svg@w3.org>
- Cc: Charles McCathieNevile <chaals@opera.com>
- Message-Id: <D5F769A4-CD5D-4EBE-BC0D-61F2DB3B109B@btinternet.com>
How to implement activate** as an author?
possible testcase attached
When considering navigating an svg menu from the user's perspective:
when using a mouse:
mouseover produces highlight as indicator ie orange in testcase
click raises button ie red
when using a keyboard:
tab key produces highlight as indicator ie orange
enter key raises button ie red
--
To implement this as author:
mouseover uses begin="mouseover" end="mouseout"
click uses begin="focus" end="focusout"
tab-key uses begin="focus" end="focusout"
enter key uses begin="activate" end=?
This immediately raises confusion, because the keyboard user expects
the tab-key to have an effect similar to mouseover, but the author
cannot implement this, at least not in this way.
Has activate been implemented by any UA?
does someone have a clearer example of the intended implementation,
that is easy to understand from a user and author perspective?
regards
Jonathan Chetwynd
**the August 2000 Accessibility Features of SVG states:
"Good authoring practice will normally use the focusin, focusout and
activate events rather than the device specific events for gaining and
losing the focus on an element or activating the element. "
http://www.w3.org/TR/SVG-access/
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
>
<style type="text/css" id="css"><![CDATA[
.inputText {cursor:text; fill:#3e3;}
]]></style>
<title>activate test: click on one box, then the other, the first
should change back, check with mouseover, and keyboard navigation tab
and enter keys</title>
<rect x="12" y="9" id="chat" width="185" height="22" rx="4" ry="4"
class="inputText" pointer-events="visible">
<set attributeName="fill" to="orange" begin="mouseover"
end="mouseout" />
<set attributeName="fill" to="red" begin="focus" end="focusout" />
</rect>
<rect x="280" y="275" id="chat2" width="185" height="18" rx="4" ry="4"
class="inputText" pointer-events="visible">
<set attributeName="fill" to="orange" begin="focus" end="focusout" />
<set attributeName="fill" to="red" begin="activate" end="focusout" />
</rect>
</svg>
Received on Wednesday, 16 June 2010 13:49:43 UTC