Abstract:
Techniques for enhancing accessibility to web content are described herein. In some embodiments, a method includes presenting an activation element in association with a web page and detecting activation of the activation element, wherein the detection occurs following an activation event. The method can also include identifying draggable elements and drop zones in the web page and associating identifiers with the draggable elements and the drop zones, wherein the identifiers indicate one or more input events that will move a certain one of the draggable elements to a certain one of the drop zones. The method can also include modifying the web page to display the identifiers in association with the draggable elements and the drop zones, detecting the input events, and moving the certain one of the draggable elements to the certain one of the drop zones.

Description:
FIELD OF INVENTION 
       [0001]    Embodiments of the invention generally relate to the field of drag-and-drop functionality, and more particularly to enhancing drag-and-drop functionality for web content. 
       BACKGROUND 
       [0002]    Drag-and-drop user interfaces are commonly employed to perform visual layout customization with screen objects and to create different associations between abstract objects. The drag-and-drop action typically involves selecting a virtual object by pressing a mouse button or pointing device button, “dragging” the object to a desired location or onto another object while holding the button, and “dropping” the object by releasing the button. Some disabled users (e.g. blind users, users lacking motor control, etc.) may have difficulties utilizing drag-and-drop environments, as they may have trouble using mice and other pointing devices. However, many of these users can effectively use keyboards. 
       SUMMARY 
       [0003]    In some embodiments, a method includes presenting an activation element in association with a web page and detecting activation of the activation element, wherein the detection occurs following an activation event. The method can also include identifying draggable elements and drop zones in the web page and associating identifiers with the draggable elements and the drop zones, wherein the identifiers indicate one or more input events that will move a certain one of the draggable elements to a certain one of the drop zones. The method can also include modifying the web page to display the identifiers in association with the draggable elements and the drop zones, detecting the input events, and moving the certain one of the draggable elements to the certain one of the drop zones. 
     
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         [0004]    The present embodiments may be better understood, and numerous objects, features, and advantages made apparent to those skilled in the art by referencing the accompanying drawings. 
           [0005]      FIG. 1  illustrates a web content processing system that enhances drag-and-drop functionality for web content, according to some embodiments of the invention; 
           [0006]      FIG. 2  is a flow diagram illustrating operations for augmenting drag-and-drop-capable web pages to work with other hot keys and other input types, according to some embodiments of the invention; 
           [0007]      FIG. 3  is a flow diagram (continuing from  FIG. 2 ) illustrating more operations for augmenting a web page&#39;s draggable elements and drop zones to work with hot keys and other input, according to some embodiments of the invention; 
           [0008]      FIG. 4  is a diagram illustrating a web page including graphical objects that are drag-and-drop capable; and 
           [0009]      FIG. 5  is a diagram illustrating a web page including drag-and-drop objects that respond to hot keys and other input. 
       
    
    
     DESCRIPTION OF EMBODIMENTS 
       [0010]    An increasing number of web portals and pages are moving toward making their sites more “user friendly”. Although operating systems often support drag-and-drop functionality, web page environments rarely provide it for common internet users. Some embodiments of the invention allow users to use drag-and-drop functionality within a web page environment. Additionally, some embodiments provide increased accessibility and usability to people who are unable, for various reasons, to utilize drag-and-drop environments with mice or other pointing devices. Some embodiments accomplish this by modifying web pages to move draggable elements to drop zones via hot keys (i.e., keyboard keys), voice commands, or other suitable user input techniques. 
         [0011]    The description that follows includes exemplary systems, methods, techniques, instruction sequences and computer program products that embody techniques of the invention. However, the described invention may be practiced without these specific details. For instance, well-known web-related components, protocols, structures and techniques have not been shown to avoid obfuscating the description. 
         [0012]      FIG. 1  illustrates a computer system including a web content processing system that can enhance drag-and-drop functionality for web content, according to some embodiments of the invention. The computer system  100  includes a main memory  130  connected to a central processing unit (“CPU”)  120 . The CPU  120  is connected to a bus  122 , which is connected to a video controller  124 , audio controller  126 , and peripheral device interfaces  128 . The video controllers  124  can present video content on a display device (e.g., a liquid crystal display monitor), while the audio controller can present audio content on audio devices (e.g., speakers). The peripheral device interfaces  128  can process input/output (“I/O”) from various I/O devices, such as a mouse, keyboard, microphone, printer, scanners, etc. 
         [0013]    The main memory  130  includes an operating system  118 , application programs  116 , and a web content processing system  132 . The web content processing system  130  includes a web page  102 , rendering unit  103 , transformation unit  106 , filtering unit  108 , parser unit  109 , selection unit  114 , and activation unit  110 . 
         [0014]    The rendering unit  103  can render the web page  102 , which can include content from web portals, such as Yahoo!, Google, etc. In some embodiments, the selection unit  114  detects when a user has provided input to launch a process for enhancing drag-and-drop functionality in the web page  102 , input indicating a hot key press or voice command, etc. 
         [0015]    The parser unit  109  can search through code of the web page  102  for characters and symbols that signify draggable elements and drop zones. The transformation unit  106  can match hot keys and voice commands with the draggable elements and drop zones identified by parser unit  109 . In some embodiments, the transformation unit  106  can add and/or modify the web page&#39;s code, so users can activate the draggable elements and drop zones using the hot keys and voice commands. 
         [0016]    The filtering unit  108  can reduce the number of draggable elements, drop zones, and hot key options/voice command options in the web page  102 . This reduction can make the drag-and-drop interface more understandable for some uses (e.g., users who perceive the web page&#39;s drag-and-drop options though a voice reader in the rendering unit  103 ). After the reduction, the rendering unit  103  can present identifiers that indicate hot keys or voice commands uses for selecting draggable elements and drop zones within the web page  102 . The selection unit  114  detects hot key presses and voice commands that select draggable elements and drop zones. 
         [0017]    Although not shown in  FIG. 1 , the web content processing system  132  can include other components for acquiring, rendering, and storing web content. Those components can include any suitable code (e.g., Javascript) for processing web content. In some embodiments, one or more of the components the web processing system  132  can be included in a web browser. Furthermore, any of the components described herein can include hardware, firmware, and/or machine-readable media including instructions for performing the operations described herein. Machine-readable media includes any mechanism that provides (i.e., stores and/or transmits) information in a form readable by a machine (e.g., a game machine, computer, etc.). For example, tangible machine-readable media includes read only memory (ROM), random access memory (RAM), magnetic disk storage media, optical storage media, flash memory machines, etc. Machine-readable media also includes any media suitable for transmitting software over a network. 
       System Operations 
       [0018]    This section describes operations performed by some embodiments of the systems described above. In certain embodiments, the operations can be performed by executing instructions residing on machine-readable media (e.g., software), while in other embodiments, the operations can be performed by a combination of software, hardware, and/or other logic (e.g., firmware). In some embodiments, the operations can be performed in series, while in other embodiments, one or more of the operations can be performed in parallel. Moreover, some embodiments can perform less than all the operations shown in the Figures. 
         [0019]      FIG. 2  is a flow diagram illustrating operations for augmenting drag-and-drop-capable web pages to work with other hot keys and other input techniques, according to some embodiments of the invention. The flow  200  will be described with reference to the computer system in  FIG. 1 . In  FIG. 2 , flow  200  begins at block  202 . 
         [0020]    At block  202 , the rendering unit  103  receives and renders web content. For example, the rendering unit  103  receives a web page  102  and presents it on a display device connected to the video controller  124 . The web page  102  can include code, such as the Hyper Text Markup Language (HTML) code or the Extensible Hyper Text Markup Language (XHTML) code. The code can identify graphical objects, text, photos, animations, audio, etc. for presentation by the rendering unit  103 . Some of the graphical objects are drag-and-drop capable, so users can drag and drop those objects using a mouse or other pointing device.  FIG. 4  helps illustrate this concept.  FIG. 4  is a diagram illustrating a web page including graphical objects that are drag-and-drop capable. In  FIG. 4 , a web page  400  includes text  412 , draggable graphical objects  416 ,  420 , &amp;  424 , and drop zones  406  &amp;  410 . The rendering unit  103  can render such a web page by performing the operations of block  202  of  FIG. 2 . In  FIG. 4 , a user can use a mouse to drag and drop the graphical object  416  in the drop zone  406  (see arrow  407 ). Similarly, a user can use a mouse to drag and drop the graphical objects  420  &amp;  424  in the drop zone  410  (see arrows  408 ). 
         [0021]    Referring back to  FIG. 2 , the flow continues at block  204 . 
         [0022]    At block  204 , the activation unit  110  inserts an activation element into the content. In some embodiments, the activation unit  110  adds code (e.g., HTML code) representing the activation element to the code representing the web page  102 . In other embodiments, the activation element is not part of the web page itself, but is part of the user interface containing the web page. The activation element can be a button, a window for receiving voice commands, or any other suitable variation of input components. The flow continues at block  206 . 
         [0023]    At block  206 , the activation unit  110  presents the activation element.  FIG. 5  helps illustrate this concept.  FIG. 5  is a diagram illustrating a web page including drag-and-drop objects that respond to hot keys and other input.  FIG. 5  shows the web page  400 . In  FIG. 5 , the activation unit  110  has added an activation button  502  to the web page  400 . A user can activate the activation button  502  by pressing a keyboard key, such as keyboard key “D”, as shown. Alternatively, the activation element can include a voice reader that responds to a user&#39;s voice commands. Upon activation, the web content processing system  132  performs a process that adds hot key and other features to a web page&#39;s drag-and-drop objects. The flow continues at block  208 . 
         [0024]    At block  208 , the selection unit  114  detects activation of the activation element. For example, the selection unit  114  can detect an activation event, such as a hot key press or voice command associated with the activation element. The flow continues at block  210 . 
         [0025]    At block  210 , the parser unit  109  identifies draggable elements and drop zones in the web page  102 . In some embodiments, the parser unit  109  parses through the web page&#39;s code in search of certain characters or symbols that identify draggable elements and drop zones. The parser unit  109  can compile a list of all draggable elements and drop zones. The flow continues at  FIG. 3 . 
         [0026]      FIG. 3  is a flow diagram (continuing from  FIG. 2 ) illustrating more operations for augmenting a web page&#39;s draggable elements and drop zones to work with hot keys and other input, according to some embodiments of the invention. The flow will be described with reference to the computer system of  FIG. 1 . In  FIG. 3 , the flow continues at block  302 . 
         [0027]    At block  302 , the transformation unit  106  associates hot keys and/or voice commands with draggable elements and drop zones. The hot keys and/or voice commands identifiers are also associated with identifiers (see  514 ,  518 ,  522 , etc.) that identify the hot keys and/or voice commands that can select the draggable graphical objects. For example, in  FIG. 5 , the transformation unit  106  can associate a hot key “A” with the draggable graphical object  416 , hot key “B” with the draggable graphical object  420 , etc. The flow continues at block  304 . 
         [0028]    At block  304 , the transformation unit  106  transforms the web page  102  to function with the hot keys and/or voice commands. In some embodiments, the transformation unit  106  inserts, into the web page  102 , code (e.g., HTML code) that displays identifiers (e.g., see  514 ,  518 ,  522 , etc.) indicating a relationship between the hot keys and the draggable objects and drop zones. In addition, the transformation unit  106  can update the web page  102  to include code that audibly communicates relationships between voice commands and the draggable elements and drop zones. This changes the web page to a state in which users can use hotkeys and voice commands to illicit drag-and-drop functionality. For example, blind users or users without fine motor control can utilize the drag and drop functionality without using a mouse. The flow continues at block  306 . 
         [0029]    At block  306 , the filtering unit  108  determines whether it will filter the identifiers and draggable elements. By filtering the draggable elements and identifiers, the filtering unit  108  can reduce the number of draggable element options to a more manageable number. Filtering can result in a modified arrangement of the objects in the drag-and-drop interface. Filtering may be particularly useful in embodiments in which the rendering unit  103  audibly presents draggable elements and their identifiers. Listening to long lists of draggable elements and identifiers may be tedious for some users. In some embodiments, filtering is automatically turned on, but may be turned off via user input. If filtering is not performed, the flow continues at block  314 . If filtering is performed, the flow continues at block  310 . 
         [0030]    At block  310 , the filtering unit  108  groups identifier options to reduce the number of available identifier options. In some embodiments, the filtering unit  108  reduces the number of identifier options by showing only the most frequently used draggable elements and drop zones in the active section of the web page  102 . As a result, the filtering unit  108  reduces the number of hot key choices a user has in an interface, and it reduces the number of elements the rendering unit  103  audibly presents. The flow continues at block  312 . 
         [0031]    At block  314 , the rendering unit  103  presents, in the web page  102 , the identifiers associated with the hot keys and/or voice commands. The rendering unit  103  can present each identifier near a draggable element, as shown in  FIG. 5  (see  514 ,  518 , &amp;  522 ). The rendering unit  103  can also audibly. The flow continues at block  316 . 
         [0032]    At block  316 , the selection unit  114  detects selection of a draggable element and/or drop zone within web page  102 . Users can select the draggable elements by activating the associated hot key or speaking a voice command. For example, as shown in  FIG. 5 , the draggable graphical object  420  is juxtaposed to the “B” identifier  516 . A user can select the draggable graphical object  410  by pressing keyboard key “B” or by speaking the letter “B” into a microphone connected to the computer system  100 . The flow continues at block  318 . 
         [0033]    At block  318 , after selection of a draggable element, the rendering unit  103  presents identifiers associated with the drop zones. In  FIG. 5 , this operation would cause the rendering unit  103  to present the identifiers  508  &amp;  512 . In some embodiments, the rendering unit  103  audibly presents the identifiers  508  &amp;  512 . The flow continues at block  320 . 
         [0034]    At block  320 , the selection unit  114  detects selection of a drop zone within the web page  102 . For example, in  FIG. 5 , a user selects the drop zone  406  by pressing keyboard key “Z” or by speaking the letter “Z” into a microphone connected to the computer system  100 . Once a drop zone is selected, the system  100  moves the draggable graphical object  416  into the drop zone as if the user dragged-and-dropped the graphical object with a mouse. In some embodiments, the drag-and-drop operation causes addition operations specific to the web page (e.g., a file is deleted, money transferred between accounts, etc.). From block  320 , the flow ends. 
         [0035]    Although  FIG. 3  shows selecting draggable elements and drop zones as two separate operations, some embodiments enable users to select draggable elements and drop zones in a single operation. For example, a user may be working in an email box. If a draggable email message can be dropped in only one drop zone, the filtering unit  108  can associate both the email message and drop zone with a hot key. The user need only press one hot key to drop the email message in the drop zone. 
       Other Embodiments 
       [0036]    While the invention(s) is (are) described with reference to various implementations and exploitations, it will be understood that these embodiments are illustrative and that the scope of the invention(s) is not limited to them. In general, the techniques described herein may be implemented with facilities consistent with any hardware system or hardware systems. Many variations, modifications, additions, and improvements are possible. 
         [0037]    Plural instances may be provided for components, operations or structures described herein as a single instance. Finally, boundaries between various components, operations and data stores are somewhat arbitrary, and particular operations are illustrated in the context of specific illustrative configurations. Other allocations of functionality are envisioned and may fall within the scope of the invention(s). In general, structures and functionality presented as separate components in the exemplary configurations may be implemented as a combined structure or component. Similarly, structures and functionality presented as a single component may be implemented as separate components. These and other variations, modifications, additions, and improvements may fall within the scope of the invention(s).