- 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