W3C home > Mailing lists > Public > w3c-wai-ua@w3.org > April to June 2009

"important elements"

From: Henny Swan <hennys@opera.com>
Date: Thu, 23 Apr 2009 16:45:58 +0100
Message-Id: <D205E106-E914-4ECF-9159-83FB855DC726@opera.com>
To: w3c-wai-ua@w3.org
Hello UAAG folks,

I had an action item to look into how Opera decided upon what  
"important elements" to support in the keyboard and what we called them.

This was before my time but from discussions internally please see  
answers from various people below:

1. What did we name these "important elements"?

There is no official name but mostly they are referred to as  
"navigatable elements".


2. How did Opera decide what "important elements" to support in  
keyboard  navigation?

Note that there are two ways for keyboard navigation in Opera, the old  
one and the new one. The new one is called "spatial navigation",  
activated by Shift+arrow keys. It involves all hyperlinks, form  
elements, and other elements that have been given a 'tabindex'  
attribute. If you do Shift+down and there is no selectable element  
within one viewport height downwards, Opera will only scroll down one  
viewport height, so using spatial navigation you can go though a  
complete document without jumping over any content.

Then there is the "old style" keyboard navigation, which highlights  
particular elements with specific keyboard shortcuts. Note that these  
shortcuts are in the "single-key shortcuts" set that is off by default.

There are three types of elements that can be selected with these old  
style highlight shortcuts: links (Q A), headers (W S) and all elements  
(E D). Very easy to remember once you see how these are layed out on  
your keyboard (unless you are from France or use Dvorak :)

* For 'headers, I think Opera just picked the H1-H6 elements, and  
that's it. Internally, the actions for the shortcuts are called  
'Highlight next heading' and 'Highlight previous heading'.

* Then we have 'Highlight next URL' and 'Highlight previous URL',  
which goes through all the hyperlinks and image map areas.

* And lastly, we also have shortcuts for 'Highlight next element' and  
'Highlight previous element'. This will tediously go though *all*  
elements, starting from 'BODY' and then down into all the deeply  
nested DIVs and SPANs etc, also highlighting the separate text  
fragments that are outside inline elements etc. The only use for these  
shortcuts might be to make copy & paste of content somewhat easier,  
but that's about it. Unfortunately, if you press the ContextMenu key,  
or Shift+F10 (Cmd+Shft+M on Mac) you get the generic page context  
menu, not a text selected context menu or image context menu.

If you are a mouseless user that wanted to select text, you can use  
this bookmarklet:

  javascript:void(document.designMode='on')

... and go through the content with a caret cursor. This comes close  
to the caret browsing in Firefox, though with designMode on you will  
have to be careful to not actually delete and edit content before  
copying it :)

Also elements whith some javascript event handlers (onclick,  
onmouseover) will be navigatable.  And area elements in image maps.

Basically any element which is normally clickable by mouse.  Though it  
doesn't work with pages which try to be clever with javascript, e.g.  
by registering an event handler for the root element and using mouse  
coordinates to determine what was actually clicked.

We also support the nav-up, nav-right, nav-down, and nav-left  
properties from CSS3 UI: http://www.w3.org/TR/css3-ui/#keyboard

That works a little differently though, as it is context sensitive in  
that it depends on where focus is now, rather than defining certain  
types to be navigatable.  So don't know if it's relevant to your work.

Spatnav works on almost anything that is focusable, and it includes  
keynav stuff from SVG Tiny 1.2, see http://www.w3.org/TR/SVGMobile12/interact.html#focus 
, and elements that have certain eventhandlers etc.

Of note, the link navigation (A/Q) includes all anchortags, so SVG <a>  
as well as HTML <a>.

Cheers, Henny
-- 
Henny Swan
Web Evangelist
Member of W3C Web Accessibility Initiative Education and Outreach Group
www.opera.com/developer

Personal blog: www.iheni.com

Stay up to date with the Web Standards Curriculum www.opera.com/wsc
Received on Thursday, 23 April 2009 15:46:47 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 27 October 2009 06:52:12 GMT