Patent Application
20090031224
The present invention relates generally to data assistive imagery, and, in particular to visually associating a static graphic image and HTML text.
Currently, users often use a Hypertext Markup Language (HTML) image-map or an HTML anchor link to jump to a specific area of text after clicking on an area of or an entire graphic on a web page. Image maps allow authors to specify regions of an image or object and assign a specific action to each region, e.g., retrieve a document, run a program, etc. When the region is activated by a user “clicking” on it, the action is executed. A link allows a connection from one web resource to another. The link starts at the “source” anchor and points to the “destination” anchor, which may be any web source, e.g., an image, a video clip, a sound bit, a problem an HTML document, an element within an HTML document, etc. By “clicking” on the link, the destination web resource is retrieved.
Clicking on a graphic in a web page to jump to an area of text causes movement to another area of the webpage or to another webpage all together. There is no initial visual cue between the image and text that links the information together, offering additional context to the graphic or associating an area of an image to a written process or action described within HTML text on a particular web page.
According to an exemplary embodiment, a method, a system, and a computer program product are provided for visually associating a static graphic image on a web page with hypertext markup language (HTML) text on the web page. A web page containing multiple static graphic images and HTML text associated with each static graphic image is displayed. Input indicating selection of a static graphic image or HTML text is received. The selection is indicated by movement of a cursor over at least a portion of a selected static graphic image, movement of the cursor over selected HTML text, or focusing on an area of a selected static graphic image or selected HTML text. In response to the input, the web page is displayed with selected HTML text or HTML text associated with a selected static graphic image highlighted with a visual cue on the web page and with the display of a selected static graphic image or a static graphic image associated with selected HTML text updated without moving to another area on the web page or moving to another web page.
Referring to the exemplary drawings, wherein like elements are numbered alike in the several Figures:
Before assistive imagery, a static graphic image on a website was not visually associated with specific copy (HTML text) or content within the same web page or website. According to an exemplary embodiment, using assistive imagery, the user gains visual association between a graphic, an area of a graphic, and/or a process being illustrated in the graphic to copy (HTML text) within that web page or web site that describes or outlines such a graphic or process within that graphic.
Assistive imagery works in both directions, where existing methods, such as an image map and HTML anchor links, work in only one direction. With assistive imagery, the visual association can be triggered from the graphic, image map area of the graphic, the HTML text (not a part of the graphic), or tab index or HTML “in-focus” area. There is no need for the user to mouse click on the graphic to trigger the visual association. This automatically occurs when the user's mouse causes the cursor to be placed over the graphic, over an image map defined are of the graphic, over a text paragraph that describes the graphic or process illustrated within the graphic, or when either text or image is “in focus”. A benefit of showing this visual cue between image and text is that it provides immediate context to what is being illustrated within the graphic, be it a process or action that is being depicted in the graphic. There is no dependency on translation of text either, as the code that provides the function does not focus on language, but rather Cascading Style Sheets (CSS) defined classes, HTML and JavaScript. Thus, for example, the graphic and text may be translated into any language, be it French, German, or any other language, and still retain the visual cue from image to text.
Assistive imagery works by showing a visual association between a static graphic (*.gif,.*.jpeg, *.png or other browser supported bitmap image) and HTML text. Assistive imagery is triggered by user interaction of the mouse over key areas of the graphic, the entire graphic or by user interaction of the mouse over HTML text of by the “in-focus” area as defined by a set of “tabindex” in the HTML code of by the default page “tabindex” focus.
As a first example of visual association according to an exemplary embodiment,
In
For accessibility reasons, if the user cannot use a mouse (or does not desire to do so), a screen reader program or tab index may be used to set focus on either the graphic image or text paragraph. As those skilled in the art will appreciate, a screen reader program is software that enables voice automated reading and description of what is displayed on screen. JAWS is a popular Windows based screen reader application, details of which may be found at. http://www.freedomscientific.com/fs_products/software_jaws.asp. In either case, the same result and visual cue would be provided between the graphic image and the text paragraph that is associated with the graphic image and describes the graphic image. The function of tab indexing to focus on the area of the graphic image or the HTML text may be defined in HTML code or based on a default web page tab index.
Although in the examples described above, the HTML text paragraph associated with a graphic image is highlighted, e.g., with a different color, to show its association with the graphic image, it should be appreciated that the HTML text may be “highlighted” with any type of visual cue to indicate the association between the HTML text and the graphic image.
In response to input from the interface 640 indicating selection of a graphic image or HTML text displayed on a web page, a CPU 620 performs a process, such as that described in
While the invention has been described with reference to exemplary embodiments, it will be understood by those skilled in the art that various changes may be made and equivalents may be substituted for elements thereof without departing from the scope of the invention. In addition, many modifications may be made to adapt a particular situation or material to the teachings of the invention without departing from the essential scope thereof. Therefore, it is intended that the invention not be limited to the particular embodiment disclosed as the best mode contemplated for carrying out this invention, but that the invention will include all embodiments falling within the scope of the appended claims.
