Keyboard navigation

Systems and methods in accordance with various embodiments of the present disclosure enable use of a keyboard to navigate a webpage presented in a web browser. According to an embodiment, a two-dimensional grid is placed over a webpage and elements of the webpage are assigned to the nearest cells of the grid. The grid specifies the directional and distance relations among the various elements of the webpage. Functionality is provided that enables users to quickly navigate the elements of the webpage using arrow keys of a keyboard. For example, if a selection indicator is currently focused on a webpage element that is assigned to a particular cell of the grid, a press of the left-arrow key moves the selection indicator leftward along the grid to the element that is assigned to the nearest leftward cell. The same functionality is applied to up-arrow, down-arrow, and right-arrow keys. Further, functionality is provided that enables users to quickly navigate the elements of the webpage using hotkeys.

BACKGROUND

Web browsers are software applications used for retrieving and viewing information resources on the World Wide Web and private networks. The information resources may be, for example, webpages that contain numerous types of content, such as text, static images, animated images, audio, and video content. Further, web browsers enable end users to interact with content, such as “click to play” videos, radio buttons, dropdown menus, popup dialog boxes, textboxes, and hyperlinks. User interaction typically involves the use of a pointing device, which is an input device that enables an end user to input data via physical gestures, such as pointing, clicking, and dragging. Example pointing devices include mice, trackballs, joysticks, and styluses. User movements of the pointing device are echoed by movements of a pointer or cursor across the content presented on the webpage. For example, when using a pointing device to interact with the content of a webpage, an end user may move the pointing device in a manner that causes a cursor to be positioned over a hyperlink, and then the end user may select the hyperlink by clicking a button on the pointing device.

Although useful, pointing devices have some disadvantages. For example, older operating systems, such as Linux®, may not support the use of pointing devices. Also, pointing devices are not always available because pointing devices are easily lost or broken. Further, operation of pointing devices may sometimes be inefficient because end users may be required to remove a hand from the keyboard, reach for the pointing device, operate the pointing device, and then place their hand back on the keyboard in the appropriate position.

DETAILED DESCRIPTION

Systems and methods in accordance with various embodiments of the present disclosure may overcome one or more of the aforementioned and other deficiencies experienced in conventional approaches to navigating webpages. In particular, various approaches enable the use of a keyboard to navigate a webpage presented in a web browser. According to an embodiment, a two-dimensional grid is placed over a webpage and elements of the webpage are assigned to the nearest cells of the grid. The grid specifies the directional and distance relations among the various elements of the webpage. Functionality is provided that enables users to quickly navigate the elements of the webpage using arrow keys of a keyboard. For example, if a selection indicator is currently focused on a webpage element that is assigned to a particular cell of the grid, a press of the left-arrow key moves the selection indicator leftward along the grid to the element that is assigned to the nearest leftward cell. The same functionality is applied to up-arrow, down-arrow, and right-arrow keys. Further, functionality is provided that enables users to quickly navigate the elements of the webpage using hotkeys. For example, the “T” key of the keyboard may be assigned to the textbox elements of the webpage. Thus, according to this example, a press of the “H” key causes the selection indicator to move from a current element to the textbox element assigned to the nearest cell in the grid. The same functionality may be applied to other hotkeys. For example, pressing the “A” key may move the selection indictor to the nearest anchor element, pressing the “H” key would move the selection indicator to the nearest header element, etc.

FIG. 1illustrates an example webpage102presented in an example web browser106, in accordance with various embodiments. The example webpage102includes a plurality of elements108a-o. According to the illustrated embodiment, the elements108a-oare HTML elements, such as HTML anchor elements that anchor hyperlinks to other webpages. However, it should be appreciated that the elements108a-ocould be any type of component or information. For example, the elements could be static or interactive text, static or animated images, audio, video, radio buttons, search boxes, dropdown menus, forms, etc. Elements108a-108eare provided in a search navigation panel114, element108fis provided in a buy now panel118, and elements108g-108oare provided in a search results panel122.

FIG. 2illustrates an example two-dimensional grid200placed over the example webpage102ofFIG. 1, in accordance with various embodiments. As illustrated, the grid200is divided into a plurality of cells204. The grid200may be configured such that each of the cells204in the grid200has the same dimensions. However, it should be appreciated that the grid200could be dynamically generated such that the individual cells204are uniquely sized to correspond with the individual sizes of the elements108a-o. According to an embodiment, a client-side script is embedded in the webpage102. When executed by the web browser106, the script overlays the grid200on the webpage102. According to another embodiment, the web browser106includes a plug-in, extension, or other type of suitable software component that overlays the grid200on the webpage102.

FIG. 3schematically illustrates the elements108a-oof the example webpage102ofFIG. 1being assigned to the nearest cells204of the two-dimensional grid200ofFIG. 2, in accordance with various embodiments. According to an embodiment, the client-side script or browser plug-in assigns each of the elements108a-oto the nearest one of the cells204of the grid200. According to an embodiment, the individual elements108a-oare assigned to a single cell204even though one or more of the elements108a-oextend across multiple cells204. For example, with reference toFIGS. 2 and 3, the “Health & Beauty” element108cis assigned to cell204aeven though the element108cis located in both to cells204aand204b. Likewise, for example, the “Order Now” element108fis assigned to cell204ceven though the element108fcovers multiple cells.

FIGS. 4 and 5illustrate using directional inputs from arrow keys402of a keyboard400to navigate elements108of the example webpage102ofFIG. 1, in accordance with various embodiments. According to the illustrated embodiment, directional arrows404,408,412, and416of the keyboard400function to move a selection indicator420between the elements108a-oof the webpage102.

As illustrated at arrow430, pressing the down-arrow key412moves the selection indicator420from element108adownward in the grid200to the element108bof the cell204e, which is the closest of the cells204in the downward direction to the cell204dfrom which the selection indicator420is being moved.

Continuing with the example illustrated at arrow430, according to an embodiment, pressing the down-arrow key412sends a directional command from the keyboard400to the web browser106and, in response to the directional command, a client-side script running on the webpage102or a software component of the web browser106moves the selection indicator420from element108ato element108b, which is assigned to the cell204ethat is located nearest, in the downward direction specified by the downward-arrow key412, to the element108afrom which the selection indicator420is being moved. In operation, for example, upon receiving the directional command caused by pressing the down-arrow key412, the client-side script or software component identifies the nearest directional cell and then moves the selection indicator420to that cell. As already discussed, the nearest directional cell is the cell204e, which is located in the direction of the directional command nearest to the cell204dof the element108afrom which the selection indicator420is being moved. It should be appreciated that, instead of identifying the nearest cell and then moving the selection indicator420to that cell, embodiments could move the selection indicator420to the nearest element, irrespective of the grid.

As illustrated at arrow434, pressing the right-arrow key408, when the selection indicator420is on element108b, causes the selection indicator420to move to the element108fof cell204c, which is the closest cell that has one of the elements108a-oassigned thereto. More specifically, cell204cis the closest cell because it is located nearest, in the horizontal direction460indicated by the right-arrow key408, to the cell204eof element108bfrom which the selection indicator420is being moved. It should be noted that the selection indicator420skips cells204located between cells204eand204cbecause those cells204do not possess one of the elements108a-o.

In some instances, elements108bleed into multiple cells204. Such an instance is illustrated inFIGS. 4 and 5, where the element108fcovers multiple cells204. Box424ofFIG. 4illustrates the coverage of the element108f. As illustrated, the box424encloses a group of cells426that the element108fcovers. These instances where a single element (e.g., element1080covers a group of cells (e.g., group426) may sometimes create situations where two or more cells204tie for being the nearest cells to the cell of the element108(e.g., element108f) from which the selection indicator420is being moved. For example, as illustrated inFIG. 4, cells204fand204qare located the same distance along the horizontal axis460from the group of cells426. Here, the script running on the webpage102or the software component of the web browser106decides on the fly which of the cells204fand204qis the most intuitive location for a user and then moves the selection indicator420to that cell.

According to an embodiment, the script or software component is programmed to determine that the cell204that is located highest in the grid200in vertical direction462is the most intuitive. Thus, the selection indicator420is moved to the element180gof the cell204fbecause it is higher in the grid200relative to the vertical axis462than cell204q. Accordingly, as illustrated at arrow440, pressing the right-arrow key408when the selection indicator420is on element108fcauses the selection indicator420to move to the element108gof cell204fbecause cell204f: (1) has an element108a-oassigned thereto; (2) is tied with cell204qfor being the cell located, in the horizontal direction460indicated by the right-arrow key408, nearest to the group of cells426within box424that are covered by the element108ffrom which the selection indicator420is being moved; and (3) is located higher in the grid200relative to the vertical axis462and is therefore more intuitive than cell204q.

It should be appreciated that in instances where the selection indicator420is being moved along the vertical axis462in response to a user pressing the up arrow404or down arrow412(as opposed to the above example where the selection indicator420is being moved along the horizontal axis460) and two or more cells204tie for being the nearest cells, the script or software component is configured to determine that the cell located farthest to the left along the horizontal axis460in the grid200is considered to be the most intuitive. Thus, in these situations, the selection indicator420is moved to the cell204that is farthest to the left.

It should also be appreciated that the examples provided herein regarding determining which cells204are most intuitive in situations where two or more cells tie for being the closest cells relative to an element that covers a group of cells are not intended to be limiting. Thus, it should be appreciated that, when moving the selection indicator420in a horizontal direction, the most intuitive element may be the element assigned to the cell that is most in line with the group of cells covered by the element from which the selection indicator is being moved. It should also be appreciated that the most intuitive element may be the element assigned to the cell that is lowest in the grid200along the vertical axis462. Further, it should be appreciated that, when moving the selection indicator in a vertical direction, that the most intuitive element may be the element assigned to the cell that is most in line with the group cells covered by the element from which the selection indicator is being moved. It should also be appreciated that, when moving vertically, the most intuitive element may be the element assigned to the cell that is farthest to the right (rather than the element farthest to the left) in the grid200along the horizontal axis460.

Arrow444illustrates that, according to an embodiment, both vertical and horizontal distances are considered when moving the selection indicator420to the nearest element108a-o. Here, in response to a user pressing the down-arrow key412, the selection indicator420moves from element108gto element108jeven though108his assigned to the nearest cell204pand even though108fis assigned to a cell204cthat is located the same vertical distance from element108gas cell204g. In this example, the selection indicator420is not moved to108heven though its cell204pis nearest to element108gbecause the user pressed the downward arrow key412and cell204pis not located downward from element108g. Further, even though cell204cand cell204gare the same vertical distance from108g, cell204gis considered the nearest cell for purposes of this example because it is horizontally nearer to element108gthan cell204c. Thus, according to this example, both horizontal and vertical distances are considered when determining the nearest cell.

As illustrated at arrow450, pressing the right-arrow key408moves the selection indicator420from element108jrightward along the horizontal axis460of the grid200to the element108kof the cell204h, which is the closest of the cells204in the rightward direction to the cell204gfrom which the selection indicator420is being moved. Further, as illustrated at arrow454, pressing the up-arrow key404moves the selection indicator420from element108kupward along the vertical axis462of the grid200to the element108iof the cell204i, which is the closest of the cells204in the upward direction to the cell204hfrom which the selection indicator420is being moved.

FIGS. 6-11illustrate using hotkey inputs from a keyboard600to navigate elements608a-mof an example webpage602, in accordance with various embodiments. Elements608a-608hare provided in a search navigation panel614and elements608i-608mare provided in a search results panel622. Elements608i-608mmay correspond with a list of search results presented in the search results panel622. As illustrated inFIG. 6, when a user presses the “L” key626of the keyboard600, a selection element620is applied to the top element608iin the list of search results provided in the search results panel622. As illustrated inFIG. 7, when the user presses the “L” key626second time, the selection element620is moved downward from the top element608ito the element608j, which is the second of the search results. It should be appreciated that with each tap of the “L” key626the selection indicator620moves the nearest element608in a manner similar to the movement of the selection indicator420described with reference toFIGS. 1-5.

FIG. 8illustrates the webpage602ofFIG. 6. However, the webpage602ofFIG. 8includes an additional column of elements608n-608qin the search result panel622. According to an embodiment, if a user taps the “L” key626three times, the selection indicator620will be focused on element608k. The user can tap the “L” key626three more times and the selection indicator620will be focused on element608o. However, instead of tapping the “L” key626three more times, the user may hold down the “L” key626and then press the right-arrow key630and cause the selection indicator620to move rightward along the horizontal axis650to the element608p. Once on the element608p, the user can hold down the “L” key626and then press the up-arrow key634and cause the selection indicator620to move upward along the vertical axis652to the element608o. It should be appreciated that holding down the “L” key626and then pressing the left-arrow and down-arrow keys will cause similar movement of the selection indicator620. Further, it should be appreciated, that when the selection indicator is applied to element608k, if the user were to hold down the “L” key626and then press the left-arrow key, the selection indicator620would not move leftward along the horizontal axis650to the element608for608gbecause those elements are not on the search results panel622and are therefore not assigned to hotkey “L”. For example, user would have to use a different hotkey, such as “N”, to move the selection indicator620to one of the elements608a-60hof the navigation panel614.

As illustrated inFIG. 9, the webpage602includes a textbox612, which is a search input box. Further, as illustrated inFIG. 9, if a user presses the “T” key628of the keyboard600, the cursor618will become active in the textbox612. If more than one textbox is provided on the webpage602, the cursor618will move to the nearest textbox if the user presses the “T” key628a second time. After the cursor is activated in the textbox, the arrow keys of the keyboard may be used to move the selection indicator among the elements of the webpage602.

FIG. 10illustrates an example webpage1002having elements1008a-b, where element1008ais an item for sale and element1008bis a “buy now” icon in a buy box1012. As illustrated, pressing a “B” key1018of the keyboard1030will focus a selection element1020on the “buy now” element1008b. Thus, instead of mousing to and then clicking on the “buy now” icon, a user may simply press the “B” key1018of the keyboard1030and then activate the element1008bby pressing the return or enter key on the keyboard1030, for example.

FIG. 11illustrates an example webpage1102having an elements1108a-b, where element1108ais an item for sale and element1108bis a “Review” icon that causes consumer reviews1112to be displayed. As illustrated, pressing an “R” key1118of the keyboard1130will focus a selection element1120on the “Review” element1108b. Thus, instead of mousing to and then clicking on the “Review” icon, a user may simply press the “R” key1118of the keyboard1130and then activate the “Review” element1108bby pressing the return or enter key on the keyboard1030, for example.

FIG. 12illustrates an example webpage1202having textboxes1210,1214, and1218, where textbox1218is associated with a dropdown menu. According to an embodiment, a user may input audible commands via a microphone attached to a computer device that displays the webpage1202. These audible commands may be provided in combination with hotkey and directional commands from a keyboard. For example, a user may press the “T” key of the keyboard to move a cursor to textbox1210into which the user may input street address information. Once the cursor is in textbox1210, the user may say the address information into the microphone. A software component of the computer may translate the audible input received from the microphone into text and fill out the textbox1210with the text. After inputting street address information, the user may press the “T” key of the keyboard and cause the cursor to move to textbox1214. Once there, the user may say the city information into the microphone and thereby cause the city information to be inputted into the textbox1214. After inputting street address information, the user may press the “T” key of the keyboard and cause the cursor to move to textbox1218, thereby causing the dropdown menu to appear with a list of the fifty states. The user may say the name of the appropriate state into the microphone, thereby causing the textbox1218to be completed with the appropriate state information.

FIG. 13illustrates an example process1300of configuring a webpage for keyboard navigation, in accordance with various embodiments. At1302, the process1300generally begins with loading a webpage. For example, according to1302, the webpage102ofFIG. 1is loaded by the web browser106. At1306, a grid is placed on the webpage. For example, the grid200ofFIG. 2is placed over the webpage102. At1310, the elements of the webpage are identified. For example, with reference toFIGS. 2 and 3, the elements108a-oof the webpage102are identified. It should be appreciated that the elements may include more that just anchor elements. For example, the elements may include static or interactive text, static or animated images, audio, video, radio buttons, search boxes, other textboxes, dropdown menus, forms, etc.

At1314, the elements are assigned to the nearest cells on the grid. For example, with reference toFIGS. 2-4, each of the elements108a-oare assigned to the cell204of the grid200that is nearest the element108. For example, the “All Departments” element108ais assigned to the cell204dbecause the cell204dis the closest cell to the “All Departments” element108a. Similarly, the “Lap Top 3.0—Order Now” element108fis assigned to cell204cbecause cell204cis the closest cell to the center of the element108f. Further, as indicated inFIG. 4, because the element108fextends into multiple cells204, the element108fis assigned to the group of cells426within the box424. As indicated at1318, hotkeys commands are assigned to the elements. For example, as illustrated inFIGS. 6-11, the “L” key626may be assigned to elements608i-mof a search results panel622, the “T” key628may be assigned to the textbox elements612, the “B” key1018may be assigned to the buy box elements1008b, the “R” key1118may be assigned to the review elements1108b, etc.

FIG. 14illustrates an example process1400of navigating a webpage using a keyboard, in accordance with various embodiments. At1402, the process1400generally begins by receiving a navigational input, such as a directional command or a hotkey command or a combination thereof. For example, a directional command could result from a user pressing one or more of the arrow keys of a keyboard, such as one or more of the arrow keys402of keyboard400ofFIG. 4. Also, for example, the hotkey command could result from a user pressing any one of the keys of a keyboard. An example combination hotkey-directional command is described above with reference toFIG. 8, where a user may hold down the “L” key626and then press the directional arrows, such as arrows630or634, to move the selection indicator between the elements608i-qof the list of search results panel622.

At1406, the process1400involves determining whether a selection indicator is already applied to one of the elements of the webpage. For example, with reference toFIG. 4, upon receiving a navigational command, the process1400involves determining whether the selection indicator420is applied to one of the elements108a-oof the webpage102. At1410, if the selection indicator is already applied to one of the elements of the webpage, the process1400involves using the element to which the selection indicator is applied as an origin. For example, referring again toFIG. 400, if, upon receiving a navigational command, the selection indicator420is currently being applied to element108a, then the element108ais used as the origin. At1416, the process involves determining whether the received navigational command is a directional command, a hotkey command, or a combination thereof.

At1420, if the navigational command is a direction command (e.g., the user pressed one of the arrow keys402), then the process1400involves moving the selection indicator to the element assigned to the nearest cell in the direction of the directional command. For example, as described in more detail above with reference toFIGS. 4 and 5, if the selection indicator420is currently on element108aand the directional command is the result of a user pressing the down-arrow key412, then the selection indicator420is moved downward to element108bof cell204e, which is the nearest cell to element108ain the downward direction.

At1424, if the navigational command is a hotkey command (e.g., the user pressed the “T” key or the “L” key), then the process1400involves moving the selection indicator to the element that is assigned to the hotkey and that is assigned to the nearest cell. For example, as described in more detail above with reference toFIGS. 6 and 7, if the selection indicator620is currently on element608iand the hotkey command is the result of a user pressing the “L” key626, then the selection indicator620is moved to element608j, which is assigned to the cell nearest the cell to which element608iis assigned.

At1428, if the navigational command is a directional-hotkey combination command (e.g., the user held down the “L” key and then pressed one of the arrow keys), then the process1400involves moving the selection indicator to the element that is assigned to the hotkey and that is assigned to the nearest cell in the direction of the directional component of the command. For example, as described in more detail above with reference toFIG. 8, if the selection indicator620is currently on element608kand the directional-hotkey combination command is the result of a user holding down the “L” key and then pressing the right-arrow key630, then the selection indicator620is moved to element608p, which is assigned to the hotkey “L” and which is assigned to the nearest cell in the rightward direction.

Referring again to1406, if the selection indicator is not already applied to an element of the webpage, then at1434the selection indicator is applied to an origin element. For example, if the navigational command is a directional command, such as a command that results from pressing one of the arrow keys402, then the origin element is considered the element that is located nearest a top-left corner of the grid. With reference toFIG. 4, the top-left corner of grid200is indicated at470. Thus, with reference toFIG. 4, if a directional command is received before the selection indicator420has been applied to any of the elements108a-o, then the selection indicator420is applied to element108a, which is nearest the top-left corner470of grid200. On the other hand, for example, if the navigational command is a hotkey command or a hotkey-directional combination command, then the origin element is the element that is nearest the top-left corner of the grid and that is assigned to the hotkey.

As discussed, different approaches can be implemented in various environments in accordance with the described embodiments. For example,FIG. 15illustrates an example of an environment1500for implementing aspects in accordance with various embodiments. As will be appreciated, although a Web-based environment is used for purposes of explanation, different environments may be used, as appropriate, to implement various embodiments. The system includes an electronic client device1502, which can include any appropriate device operable to send and receive requests, messages or information over an appropriate network1504and convey information back to a user of the device. The illustrated example device is a desktop computer. However, other examples of such client devices include other types of personal computers, cell phones, handheld messaging devices, laptop computers, set-top boxes, personal data assistants, electronic book readers and the like.

The illustrated client device1502includes a keyboard1508, a pointing device1512, and a microphone1516. The client device1502may further include a processor1520and memory1524. A web browser application1530and a browser plug-in1534may be stored in memory1524. The web browser application1530and a browser plug-in1534are typically stored as a set of executable instructions in memory1524. The processor1520accesses the memory1524to execute the web browser application1530and a browser plug-in1534. The browser plug-in1534may be a component of the browser application1530. The browser application either individually or in combination with the plug-in1534and/or other software components and/or applications is capable of executing the steps described herein including the steps indicated with reference to processes1300and1400.

The network1504can include any appropriate network, including an intranet, the Internet, a cellular network, a local area network or any other such network or combination thereof. Components used for such a system can depend at least in part upon the type of network and/or environment selected. Protocols and components for communicating via such a network are well known and will not be discussed herein in detail. Communication over the network can be enabled via wired or wireless connections and combinations thereof. In this example, the network includes the Internet, as the environment includes a web server1538for receiving requests and serving content in response thereto, although for other networks, an alternative device serving a similar purpose could be used, as would be apparent to one of ordinary skill in the art.

The illustrative environment includes at least one application server1540and a data store1544. It should be understood that there can be several application servers, layers or other elements, processes or components, which may be chained or otherwise configured, which can interact to perform tasks such as obtaining data from an appropriate data store. As used herein, the term “data store” refers to any device or combination of devices capable of storing, accessing and retrieving data, which may include any combination and number of data servers, databases, data storage devices and data storage media, in any standard, distributed or clustered environment. The application server1540can include any appropriate hardware and software for integrating with the data store1544as needed to execute aspects of one or more applications for the client device and handling a majority of the data access and business logic for an application. The application server provides access control services in cooperation with the data store and is able to generate content such as text, graphics, audio and/or video to be transferred to the user, which may be served to the user by the web server1538in the form of HTML, XML or another appropriate structured language in this example. The handling of all requests and responses, as well as the delivery of content between the client device1502and the application server1540, can be handled by the web server1538. It should be understood that the web and application servers are not required and are merely example components, as structured code discussed herein can be executed on any appropriate device or host machine as discussed elsewhere herein.