~alcinnz/rhapsode

ref: c6d7cd548fb93661d6ef9bf94746676b60b06f8c rhapsode/ISSUES/engine/help-wanted/webforms.md -rw-r--r-- 4.0 KiB
c6d7cd54 — Adrian Cochrane Link audio cue associates closer to suffix than prefix. 4 years ago
                                                                                
2f4a9ea6 Adrian Cochrane
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
# Webforms

The core browser engine would deal in terms of loosely-defined links, but sometimes pages require more free-form input.
For this reason Rhapsode would require a mode to deal with webforms, which needs to be designed and implemented. Or maybe there'd be two modes, the second using extended markup to deliver a more lenient and conversational experience. You'd enter this mode by treating the <form> tag like a link.

I would need to build upon this to bookmark webpages or search the Web.

---

The experience I'm currently thinking about delivering for webforms, would step you through each non-prefilled input prompting you to fill it.
For each it'll announce the label and, more quietly, the input type possibly with brief instructions for filling it in. If it's a multichoice input, the options would be read out as well. Your input would be interpreted according to the input type. A pause or left/down arrow key would store that value and move on to the next input, or right/up would return to the previous form input.
If it's a multichoice or <datalist>-associated input, it may then clarify which you mean in exactly the same way Rhapsode normally deals with links.
Once the form has been filled in, it'll read everything back out to you again (include any "hidden" inputs). At which point you can:

* reenter any input by specifying it's label,
* assign shorthand names (to be resolved via the multichoice handling) for any values you've entered using the "petname" command,
* or submit the form using the "submit" command.

---

As an extension on that form-filling experience that allows websites to cater specifically to Rhapsode's voice interface, we could add a Rhapsode-specific property onto `<form>` elements linking to a list of newline-seperated natural phrases that can be used for filling in the form.

"Placeholders" would occur within each phrase identifying form inputs by `name` attribute.

To use an Alexa-derived example, this list could start with:

    I want a {pet}.
    I want a {size} {pet}.
    I want a {pet} {energy}.
    I want a {pet} {temperament}.
    I want a {temperament} {pet}.
    I want a {size} {temperament} {pet}.
    I want a {size} {temperament} {pet} {energy} at my apartment.

Which would enhance interaction with:

    <form ... rhaps-utterances-src="...">
      <dl>
        <dt><label for="input-pet">What type of pet do you want?</label></dt>
        <dd><select id="input-pet" name="pet">
          <option value="cat">Cat</option>
          <option value="dog" checked>Dog</option>
        </select></dd>

        <dt><label for="input-size">How big should it be?</label></dt>
        <dd><select id="input-size" name="size" required>
          <option value="xs" title="petite, itty bitty">Tiny</option>
          <option value="s" title="little, take on a plane">Small</option>
          <option value="m" title="average, up to my knees">Medium</option>
          <option value="l" title="huge, waste-high">Large</option>
        </select></dd>

        <dt><label for="input-energy" required>How energetic?</label></dt>
        <dd><select id="input-energy" name="energy">
          <option value="low" title="to relax with, to cuddle with">Low</option>
          <option value="med" title="fun to play with, plays tug of war">Medium</option>
          <option value="high" title="energetic, plays frizbee, that I can run with">High</option>
        </select></dd>

        <dt><label for="input-temperament">Family pet or guard dog?</label>
        <dd><select id="input-temperament" name="temperament">
          <option value="family" title="to relax with, to cuddle with">Family</option>
          <option value="guard" title="fun to play with, plays tug of war">Guard</option>
        </select></dd>
      </dl>
    </form>

---

To activate this mode, I'm thinking of letting the autofocus attribute trigger it  and listening for the text of the "submit" button. If there is no submit button, I'd instead listen for "enter/submit/fill-in form".
When the page is read aloud, you would hear this text at the start of the form with the usual audio cue.