Confirmed users
1,085
edits
Accessibility/RichContentKeyboardBehaviour: Difference between revisions
Jump to navigation
Jump to search
Accessibility/RichContentKeyboardBehaviour (view source)
Revision as of 15:45, 7 April 2010
, 7 April 2010→Rich element as a lexical unit
DavidBolter (talk | contribs) |
DavidBolter (talk | contribs) |
||
| Line 102: | Line 102: | ||
== Rich element as a lexical unit == | == Rich element as a lexical unit == | ||
A rich element should be treated differently than rich text when user navigates through navigable area. The primary idea is to put the caret immediately before or after the rich element. This makes it possible to select only the rich element as it is not immediately surrounded by the rich text. This requirement has special meaning for editable areas where the user should be able to write text before or after the rich element. | |||
[davib: I'm not sure my edits capture your intended meaning here ^] | |||
The empty characters are not presented visually but they affect | To make this happen special autogenerated ''empty characters'' are inserted before and after the rich element. If the rich elements are placed one after another then each of them has empty character embedded between them, i.e. the elements don't share empty characters. | ||
The empty characters are not presented visually but they affect keyboard navigation. They are used to designate the element boundaries when the element is treated as lexical unit, however their behavior differs from the word delimiters; like 'space' characters. | |||
=== Integral element is a word === | === Integral element is a word === | ||
The integral element should be treated as a word. The term ''rich word'' will be used to emphasize the word is | The integral element should be treated as a word. The term ''rich word'' will be used to emphasize the word is a rich element. | ||
If the element doesn't contain any navigable text then its word doesn't have any characters and is referred as an ''empty word'', otherwise its word | If the element doesn't contain any navigable text then its word doesn't have any characters and is referred to as an ''empty word'', otherwise its word consists of all contained characters and it's referred to as a ''complex word''. | ||
For example, HTML button is an empty word since it doesn't contain navigable text. HTML input is a complex word since it allows navigable content. Another example | For example, HTML button is an empty word since it doesn't contain navigable text. HTML input is a complex word since it allows navigable content. Another example is a non editable container element within the editable area, which is treated as an empty word if caret navigation mode is turned off. | ||
The integral element is surrounded by empty characters. | The integral element is surrounded by empty characters. | ||
| Line 127: | Line 129: | ||
===In-text element as a sentence=== | ===In-text element as a sentence=== | ||
Since in-text element behaves as a part of the rich text then it should be treated as a sentence | Since an in-text element behaves as a part of the rich text then it should be treated as a sentence that consists of all the words of the contained text. At the same time it should be possible to set the caret before/after the element. To meet this requirement the empty characters are appended before the first word and after the last word of the sentence to designate the sentence boundaries like what happens for rich words. The term rich sentence will be used to designate it is for the in-text element. | ||
<div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;"> | <div style="margin: 1em 0px; border: 2px dotted orange; padding: 1em;"> | ||
For example, the following HTML anchor is treated as a rich sentence | For example, the following HTML anchor is treated as a rich sentence consisting of one word | ||
<pre> | <pre> | ||
Click <a>here</a> to see news | Click <a>here</a> to see news | ||
| Line 137: | Line 139: | ||
Conditional notation can be written as "Click <span style="color: blue;">|</span>here<span style="color: blue;">|</span> to see news". | Conditional notation can be written as "Click <span style="color: blue;">|</span>here<span style="color: blue;">|</span> to see news". | ||
Another example of the rich sentence is non editable container element within the editable area when caret navigation mode is on. | Another example of the rich sentence is a non editable container element within the editable area when caret navigation mode is on. | ||
</div> | </div> | ||
===Static element as a character=== | ===Static element as a character=== | ||
The static element is treated as single character when the user navigates through the web page. | The static element is treated as a single character when the user navigates through the web page. | ||
===The caret position and selection terms=== | ===The caret position and selection terms=== | ||
| Line 155: | Line 157: | ||
=== The caret visual position === | === The caret visual position === | ||
Since | Since a rich word or sentence is wrapped by special delimiters then the cursor for the same caret position can referred to in two ways: "the caret is immediately before the rich element" and "the caret is immediately after the element preceding the rich element". | ||
If the rich element and the element preceding the rich element are placed visually on different lines then the cursor might be rendered logically in two different locations. The following rules are applied. | If the rich element and the element preceding the rich element are placed visually on different lines then the cursor might be rendered logically in two different locations. The following rules are applied. | ||
# if the rich element is next or preceding | # if the rich element is next to or preceding the text container then the caret is drawn after/before the text. | ||
# if two rich elements are nested then the caret is drawn after the first rich element. | # if two rich elements are nested then the caret is drawn after the first rich element. | ||