CN115905759A - Barrier-free webpage generation method, device, medium and equipment - Google Patents
Barrier-free webpage generation method, device, medium and equipment Download PDFInfo
- Publication number
- CN115905759A CN115905759A CN202211286789.2A CN202211286789A CN115905759A CN 115905759 A CN115905759 A CN 115905759A CN 202211286789 A CN202211286789 A CN 202211286789A CN 115905759 A CN115905759 A CN 115905759A
- Authority
- CN
- China
- Prior art keywords
- tag
- barrier
- free
- webpage
- information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The present application relates to the field of internet technologies, and in particular, to a method, an apparatus, a medium, and a device for generating a barrier-free web page. The method comprises the following steps: based on a webpage access request of a browser, a webpage application acquires a target webpage code corresponding to the webpage access request; aiming at any label element with an accessible label name, the webpage application generates a virtual DOM (document object model) with accessible information corresponding to the label element according to the label attribute information of the label element; the webpage application sends each virtual DOM with barrier-free information to the browser; the browser renders based on each virtual DOM with the barrier-free information to generate a barrier-free web page. By the method, when the barrier-free webpage is generated, the webpage application generates the virtual DOM firstly, and sends the virtual DOM to the browser for rendering at one time, multiple communications between the webpage application and the browser are not needed, the loss of equipment performance is reduced, and the webpage is prevented from being jammed.
Description
Technical Field
The present application relates to the field of internet technologies, and in particular, to a method, an apparatus, a medium, and a device for generating a barrier-free web page.
Background
With the development of internet technology, the internet is now a necessary source for people to acquire and communicate information on a daily basis. A user accesses a webpage in the Internet through a browser to acquire information in the webpage, wherein the information comprises some character information, picture information, video information or audio information and the like. Therefore, a web page developer is required to design data and codes corresponding to the contents well when developing the web page, store the data and the codes in a server where the web page is located, and call the data and the codes through a browser when a user needs to visit the web page.
Among users who access a web page, there are some visually impaired people, other than ordinary users, who cannot directly see the content in the web page. However, most of the existing web pages do not consider the special situation of the visually impaired people at the beginning of development, and the visually impaired people cannot normally access the web page contents. In the mainstream technical scheme of making a webpage support visual barrier-free access, page elements related to interaction operation and information display in the webpage are usually specially encoded based on barrier-free standard syntax, and a screen reader can identify and feed back the codes. However, in this way, after the page rendering is completed, the barrier-free attribute is dynamically updated for all elements that need barrier-free information. Each page element needs to be updated once, which causes some loss in device performance, resulting in the web page becoming stuck.
Based on this, there is a need for a barrier-free web page generation method, apparatus, medium, and device, which are used to reduce the loss of device performance when a web page supports barrier-free access.
Disclosure of Invention
The embodiment of the application provides a barrier-free webpage generating method, device, medium and equipment, which are used for reducing the loss of equipment performance when a webpage supports barrier-free access.
In a first aspect, an embodiment of the present application provides a method, including: based on a webpage access request of a browser, a webpage application acquires a target webpage code corresponding to the webpage access request; each label element in the target webpage code is provided with an accessible label name and label attribute information; for any tag element with an unobstructed tag name, the webpage application generates a virtual DOM with unobstructed information corresponding to the tag element according to tag attribute information of the tag element; the webpage application sends each virtual DOM with barrier-free information to the browser; the browser is used for rendering based on the virtual DOMs with the barrier-free information so as to generate the barrier-free webpage.
By the method, when the barrier-free webpage is generated, the webpage application generates a virtual DOM for corresponding to the page elements in the page to be finally generated by rendering, and sends the virtual DOM to the browser for rendering at one time, and multiple communications between the webpage application and the browser are not needed, so that call of DOM API interfaces is reduced, loss of equipment performance is reduced, and jamming of the webpage is avoided.
In a possible implementation manner, the tag attribute information includes a tag name of a tag element and other attribute values of the tag element; the webpage application generates a virtual DOM (document object model) with barrier-free information corresponding to the label element according to the attribute information of the label element, and the method comprises the following steps: the webpage application generates a first parameter of a createElement function according to the tag name of the tag element, and generates a context object as a second parameter of the createElement function according to the tag attribute information; the context object comprises a binding event, parameter attributes, text information and semantic roles; and the webpage application generates a virtual DOM (document object model) with barrier-free information corresponding to the tag element according to the createElement function.
Through the method, when the virtual DOM is constructed, the webpage application takes the tag attribute information containing the barrier-free information as the parameter of the virtual DOM generating function, so that the barrier-free parameter is constructed only according to the barrier-free information, the difficulty of constructing the virtual DOM is reduced, the difficulty of generating the barrier-free webpage is indirectly reduced, and the time is shortened.
In a possible implementation manner, generating a context object as a second parameter of the createlementfunction according to the tag attribute information includes: if the tag attribute information comprises click information, adding a click object in the binding event of the context object, and setting a focus attribute value corresponding to barrier-free information in the parameter attribute of the context object.
In the above manner, the inclusion of the click information in the tag attribute information means that the page element corresponding to the tag element can be clicked, and for visual non-obstacle, the clickable page element means that the page element can be focused by the screen reader, that is, the focusing is to use Tab key or other means, and a cursor can be positioned on the page element for the screen reader to recognize and feed back.
In a possible implementation manner, generating a context object as a second parameter of the createlementfunction according to the tag attribute information includes: if the tag attribute information comprises a forbidden attribute, adding an unavailable object in the parameter attribute of the context object, and setting an unavailable attribute value corresponding to barrier-free information in the parameter attribute of the context object.
In the above manner, the inclusion of the click information in the tag attribute information means that the page element corresponding to the tag element is unavailable, and since the visually accessible implementation manner is generally read after the content on the page is identified by means of a screen reader, the page element of some picture content cannot be read, and therefore, the page element that is unavailable for visually accessible is added with an unavailable attribute value when the context object is constructed, so that the screen reader can accurately identify and feed back the page element.
In a possible implementation manner, generating a context object as a second parameter of the createElement function according to the tag attribute information includes: if the label attribute information comprises text information, setting a text attribute value corresponding to barrier-free information in the parameter attribute of the context object, and setting the text information in the child node of the context object.
In the above manner, the text content in the page element is embedded by setting the text information in the child node of the context object, and since there are many text contents in the page element, the text information is set in the child node of one context, so that the context object can more easily acquire the text attribute value.
In a possible implementation manner, generating a context object as a second parameter of the createElement function according to the tag attribute information includes: and determining semantic roles corresponding to the original tag names of the tag elements, and setting the semantic roles in the parameter attributes of the context objects.
Through the method, the semantic information is provided for the page elements without the semantic attributes, so that the tag elements in the webpage can accurately express the semantic attributes to be expressed by the current elements, and more information focusing on the page elements is provided for the barrier-free people.
In a possible implementation manner, obtaining the target webpage code by the following method includes: in the process of compiling the webpage source code, transmitting the webpage source code in the webpage source code into an obstacle-free plug-in; replacing, by the barrier-free plug-in, page source code of the page source code that is associated with barrier-free display with barrier-free code; and compiling the replaced page source code to generate a target webpage code. Replacing, by the barrier-free plug-in, the page source code in the page source code that is related to the barrier-free information with barrier-free code, including: matching a tag code corresponding to the tag element from the page source code; the label code comprises a label name and label content; and replacing the tag name with a barrier-free tag name, and using the tag content and the tag name as tag attribute information. Matching a tag code corresponding to a tag element from the page source code, including: matching HTML template codes from the page source codes according to HTML template matching rules; and matching the tag codes corresponding to the tag elements from the HTML template codes according to the tag element matching rules.
By the method, the barrier-free plug-in is used for replacing the webpage source code in the process of compiling the webpage code, so that the webpage source code does not need to be modified invasively, and the generation of new code defects is avoided. And the replacement process follows a specific replacement rule, so that the form of the replaced code is controllable, the probability of generating defective codes is reduced, and the debugging times of developers are reduced. Thus, the cost of barrier-free web page development is reduced.
In a second aspect, an embodiment of the present application provides an accessible web page generation apparatus, including an obtaining module, configured to obtain a target web page code corresponding to a web page access request based on the web page access request of a browser; each label element in the target webpage code is provided with an accessible label name and label attribute information;
the generating module is used for generating a virtual DOM (document object model) with barrier-free information corresponding to any label element with a barrier-free label name according to the label attribute information of the label element;
the sending module is used for sending each virtual DOM with barrier-free information to the browser; the browser is used for rendering based on each virtual DOM with barrier-free information so as to generate a barrier-free webpage.
In a possible implementation manner, the tag attribute information includes a tag name of a tag element and other attribute values of the tag element; the generation module is specifically configured to generate, by the web application, a first parameter of a createlement function according to the tag name of the tag element, and generate a context object as a second parameter of the createlement function according to the tag attribute information; the context object comprises a binding event, a parameter attribute, text information and a semantic role; and the webpage application generates a virtual DOM (document object model) with barrier-free information corresponding to the tag element according to the createElement function.
In a possible implementation manner, the generating module is specifically configured to: if the tag attribute information comprises click information, adding a click object in the binding event of the context object, and setting a focus attribute value corresponding to barrier-free information in the parameter attribute of the context object.
In a possible implementation manner, the generating module is specifically configured to: if the tag attribute information comprises a forbidden attribute, adding an unavailable object in the parameter attribute of the context object, and setting an unavailable attribute value corresponding to barrier-free information in the parameter attribute of the context object.
In a possible implementation manner, the generating module is specifically configured to: if the label attribute information comprises text information, setting a text attribute value corresponding to barrier-free information in the parameter attribute of the context object, and setting the text information in the child node of the context object.
In a possible implementation manner, the generating module is specifically configured to: and determining a semantic role corresponding to the original tag name of the tag element, and setting the semantic role in the parameter attribute of the context object.
In a possible implementation manner, the obtaining module is specifically configured to: in the process of compiling the webpage source code, transmitting the webpage source code in the webpage source code into an obstacle-free plug-in; replacing, by the barrier-free plug-in, page source code of the page source code that is associated with barrier-free display with barrier-free code; and compiling the replaced page source code to generate a target webpage code.
In a possible implementation manner, the obtaining module is specifically configured to: matching a label code corresponding to the label element from the page source code; the label code comprises a label name and label content; and replacing the tag name with an unobstructed tag name, and using the tag content and the tag name as tag attribute information.
In a possible implementation manner, the obtaining module is specifically configured to: matching HTML template codes from the page source codes according to HTML template matching rules; and matching the tag codes corresponding to the tag elements from the HTML template codes according to the tag element matching rules.
In a third aspect, an embodiment of the present application provides a computer-readable storage medium, where a computer program is stored, and when the computer program is executed, the method in any one of the above first aspects is performed.
In a fourth aspect, an embodiment of the present application provides a computing device, including: a memory for storing program instructions; and the processor is used for calling the program instructions stored in the memory and executing the method in any one of the designs of the first aspect according to the obtained program.
In a fifth aspect, the present application provides a computer program product, which when run on a processor, implements the method as designed in any one of the first aspects above.
The advantageous effects of the second aspect to the fifth aspect may specifically refer to any one of the advantageous effects that can be achieved by the design of the first aspect, and are not described in detail here.
Drawings
Fig. 1 schematically illustrates an application scenario provided by an embodiment of the present application;
FIG. 2 is a schematic diagram illustrating an application of a web page provided by an embodiment of the present application;
FIG. 3 is a schematic flow chart diagram illustrating a method for generating a barrier-free webpage according to an embodiment of the present application;
FIG. 4 is a schematic diagram illustrating a virtual DOM provided by an embodiment of the present application;
FIG. 5 is a flowchart illustrating a target webpage code obtaining method provided by an embodiment of the present application;
FIG. 6 illustrates a flow chart of an alternative barrier-free code method provided by an embodiment of the present application;
fig. 7 schematically illustrates an apparatus for generating a barrier-free web page according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention clearer, the present invention will be described in further detail with reference to the accompanying drawings, and it is apparent that the described embodiments are only a part of the embodiments of the present invention, not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Fig. 1 is a schematic diagram illustrating an application scenario provided by an embodiment of the present application, as shown in fig. 1, a user accesses a web application deployed in a server through a browser, where the web application is application software that operates on the internet or an intranet using the browser. Is an application written in a web language (e.g. programming languages such as HTML, javaScript, CSS, etc.), and needs to be executed through a browser. In one specific example, after a user logs into google browser, a hundredth web application is accessed. Fig. 2 schematically illustrates a schematic diagram of a web application provided in an embodiment of the present application, where the web application illustrated in fig. 2 includes: picture content and text content, e.g., a hundredth logo, a small camera in a search box, etc.; different contents have different attributes, for example, the mark of the hundred degrees is only a display picture and cannot be clicked, the small camera in the search frame can be clicked, and the camera of the electronic equipment is called after clicking, so that the functions of object identification and the like can be realized; the word content 'Baidu hot search' can be clicked, and the word content enters the Baidu hot search list after clicking; the "hundredth" button in the search box is clickable and there is text content "hundredth" in the attribute. The contents are collectively called page elements and designed by a webpage developer in the process of developing a webpage, and the attributes and corresponding data of each page element are stored in a background server of a webpage application. When a user accesses a webpage application through a browser, the browser assembles attributes and data to each page element based on an access request, and the attributes and the data are displayed through rendering of the browser for the user to view.
During the use process of the user, the user can freely click or browse the content in the webpage applications, thereby obtaining the information. However, some visually impaired people cannot see the displayed contents, and thus cannot perform normal page access.
In order to satisfy the normal access of the visually impaired people to the web application, a special code needs to be embedded in the web application, so that the visually impaired people can normally access the web application by using the screen reader. The screen reader is a reading way for the visually impaired, and can read the contents displayed in the webpage application, convert the visual contents into the auditory contents and further convey information for the visually impaired. Therefore, in order for the screen reader to identify the content in the web application, the web content needs to be specially encoded.
In the existing implementation manner, the content in the Web page is specially encoded based on the barrier-free standard established by World Wide Web Consortium (W3C). When the vision barrier-free person accesses the webpage by means of the screen reader, after the webpage is loaded, the barrier-free information of each element in the webpage can be dynamically updated by means of an Application Programming Interface (API) provided by the webpage, so that the barrier-free information can be identified and fed back by the screen reader.
Illustratively, the type of interface is a Document Object Model interface (DOM), which is a standard programming interface recommended by W3C for handling extensible markup language. It is a platform and language independent application program interface that can dynamically access barrier-free code.
When a page element is changed, the web application will again dynamically update the barrier-free information of the relevant page element so that the barrier-free person can access the latest web content. However, when the web application is accessed through the browser, the rendering of the page element and the execution of the page element data acquisition belong to two different threads, the page element data acquisition is executed through the Javascript thread, the Javascript thread reads the page element through the DOM API, binds the data of the page element into the page element, and the rendering thread executes the rendering. When more elements of the web page are needed, the more times of DOM API needs to be called, the more times of communication between the rendering thread and the Javascript thread is needed, and thus, the loss of equipment performance is brought, for example, the occupation of memory resources and central processing unit resources is increased, and the web page may become stuck.
In addition, in the above process, barrier-free information is added to the web application, and the web source code needs to be specially encoded to support barrier-free access. When the page elements are newly added or modified, barrier-free related coding content needs to be synchronously modified, and the labor cost of development is increased. Moreover, the modification mode is to carry out invasive modification on the source code of the webpage, and new code defects are easy to generate.
Therefore, a barrier-free web page generation method is needed to reduce the loss of device performance, reduce the cost of barrier-free code development, and avoid the generation of code defects when the web page supports barrier-free access.
Fig. 3 is a schematic flowchart illustrating a method for generating a barrier-free web page according to an embodiment of the present application, where the method includes:
301, based on a web page access request of a browser, a web page application acquires a target web page code corresponding to the web page access request; each tag element in the target web page code is provided with a barrier-free tag name and tag attribute information.
In the above steps, after the user logs in the browser, an access request is generated through default settings of the browser or an access purpose of the user. For example, after logging in google browser, the default display interface is the main interface of google browser, including the search box and the like. If the user needs to access the hundred-degree webpage, inputting the hundred degrees in a search box, or clicking a button of the hundred degrees on a main interface to generate an access request of the hundred-degree webpage, transmitting the access request to a server where a webpage application is located through the Internet, and acquiring a target webpage code corresponding to the access request by the webpage application based on the access request. For example, the target webpage code may be stored in a server where the webpage application is located, or may be a separate storage unit for storing the target webpage code written in advance by a developer. In the above example, the target web page code is the code of the hundred-degree web page and is stored in the hundred-degree server.
The target web page code includes barrier-free information, and specifically, each tag element of the target web page code is provided with a barrier-free tag name and tag attribute information. Illustratively, the tag element may be a tag element of HTML. Refers to all codes from the start tag to the end tag in the HTML file. Tab elements can be divided into block-level elements and intra-row elements according to their representation, with block-level elements occupying an entire row in the browser and excluding other elements from being in the same row as it is. That is, the width of the block-level element is 100%. Common block-level elements are as follows:
watch 1
| Block level elements | Description of the preferred embodiment |
| div | Most typical block elements |
| p | Presentation paragraph |
| h1-h6 | Indicating a 1-6 level title (bold by default) |
| br | Indicating line feed |
| ol | Ordered lists |
| ul | Unordered list |
The in-line elements can occupy one line with other in-line elements in the browser, and the line is only displayed when the total width of the plurality of elements is larger than the width of the browser. Common intra-row elements are as follows:
watch two
| Inline elements | Description of the invention |
| a | Hyperlink |
| span | Common row level |
| strong | Increase the thickness and emphasize |
| b | Increased thickness and no emphasis |
| em | Italics, emphasis |
| i | Italics, not to emphasize |
| img | Picture frame |
| input | Input box |
| select | Drop down list |
The elements in the left column of the two tables are wrapped with "< >" as the tag names of the tag elements, e.g., < p > \8230;, i.e., the start tag and the end tag of the "p" tag element.
For the barrier-free tag name, since the tag element is read through the special component, the tag element can be flexibly configured, for example, the tag name of the barrier-free component can be set to "accessible", and then the corresponding tag element is < accessible > \8230;. Accessible >. The tag attribute information is information contained in the content between the start tag and the end tag in the tag element.
The DOM is a browser, platform and language-independent interface according to the definition of W3C, and the attributes of other standard component DOM tree nodes in the page can be accessed, including tag name, node type, node content, father node object set, son node object set, brother node object set and the like. The DOM tree nodes give the basic content and structural information of the web application page.
Fig. 4 exemplarily illustrates a virtual DOM schematic diagram provided by an embodiment of the present application, and as shown in fig. 4, after the web application acquires the target web code from the server, the web application assembles barrier-free information for each tab element, and generates a virtual DOM corresponding to each tab element. Illustratively, one tag element may correspond to one virtual DOM, or multiple tag elements may correspond to one virtual DOM. As shown in FIG. 4, a total of six tab elements correspond to generating a virtual DOM.
Before assembling barrier-free information to the tag elements, a barrier-free global component is also required to be registered, after the registration is completed, tag attribute information can be obtained, barrier-free information assembly is performed according to the tag attribute information, and then the virtual DOM can be generated. The tag attribute information is derived from the target web page code, and how to obtain the tag attribute information from the target web page code will be described in detail below.
Fig. 5 is a flowchart illustrating a method for acquiring a target webpage code according to an embodiment of the present application, where as shown in fig. 5, the method includes:
step 501, in the process of compiling the webpage source code, transmitting the webpage source code in the webpage source code into a barrier-free plug-in.
And 502, replacing the page source code related to the barrier-free display in the page source code by barrier-free plug-in.
In step 501, the web page source code is pre-written by a developer, and after the web page source code is written, the web page source code is compiled by using a compiling tool. The webpage source code comprises a webpage source code, and in the compiling process, if the webpage source code is detected to be compiled, the webpage source code is transmitted into the barrier-free plug-in. The barrier-free plug-in is a replacement plug-in provided by the barrier-free component for replacing content in the page code.
Fig. 6 is a schematic flow chart illustrating an alternative barrier-free code method provided by an embodiment of the present application, and as shown in fig. 6, the method includes:
Illustratively, the HTML template matching rule may be: satisfy < template >? The </template > structure, for example, in the following page code:
according to the rule, matching the following HTML template code:
Exemplarily, the tag element matching rule may be that < S + >? (S +) structure:
for example, in the HTML template code of step 601, the HTML template code satisfies < S + >? The tag code of the structure is as follows:
< h1 class = "title" > title </h1>
< p class = "text" > descriptive text >
< button @ click = "submit" class = "submit-btn" >)
Illustratively, the barrier-free tag name is set to "accessible", and taking the third tag code in the above example as an example, the barrier-free tag after replacement is as follows:
< accessible tag-name = "button" @ click = "submit" class = "submit-btn" > submission </accessible >.
It can be seen that the original tag name "button" is replaced with "accessible", and the original tag name "button" is assigned as an attribute value to the "tag-name" attribute in the barrier-free tag. The "tag-name" attribute is a custom attribute that can be retrieved by the barrier-free global component. In addition, two pieces of attribute information of @ click = "submit" and class = "submit-btn" in the original tag and the text information of "submit" are also used as the attribute information of the tag after replacement.
The two tags < h > and < p > are replaced in the same manner as < button > described above, and will not be described in detail.
The tag contents after replacement are as follows:
< accessible tag-name = "h1" class = "title" > title >
< available tag-name = "p" class = "text" > descriptive text >
< accessible tag-name = "button" @ click = "submit" class = "submit-btn" > submission </accessible >.
The page code for compilation after replacement is as follows:
<template>
< accessible tag-name = "h1" class = "title" > title >
< available tag-name = "p" class = "text" > descriptive text >
< access tag-name = "button" @ click = "submit" class = "submit-btn" > submission </access >
</template>
<script>
export default{…}
</script>
<style>
.title{font-size:30px；color:red；}
.text{background-color:#FFF；font-size:18px；}
</style>。
In step 503, the replaced page source code is returned to the compiling tool for compiling, and a target webpage code is generated. Thus, the tag code in the target web page code includes the barrier-free tag name and tag attribute information.
In one possible implementation, a VUE component interface is provided to register the barrier-free components in the VUE framework provided by the web application. Illustratively, this registration mode provides a render function that defines the structure and content of the barrier-free component rendering. The Render function includes two parameters, one is a createlementelement that generates the virtual DOM, and the other is a context object.
In the above-described tag attribute information, the tag name of the tag element and other attribute values of the tag element are included. The barrier-free component transmits the label attribute information into a render function, so that the webpage application generates a first parameter of a createlement function according to the label name of the label element, and generates a context object as a second parameter of the createlement function according to the label attribute information.
Illustratively, for the above-described tags: and after reading the tag-name custom attribute in the component, transmitting a createElement ('p') into a createElement function.
The second parameter context object includes: the information such as the binding event, the parameter attribute, the text information, the semantic role and the like is constructed according to the label attribute information, and the information types and the number contained in different label attribute information are different.
Illustratively, a context object may be a structure as follows:
if the tag attribute information comprises click information, adding a click object in a binding event of the context object, and setting a focus attribute value corresponding to the barrier-free information in the parameter attribute of the context object.
Continuing with the above tag < available tag-name = "button" @ click = "submit" class = "submit-btn" > submit </available >:
click information is included in the attribute information of this tag: @ click = "submit", then add "click" object in context.
The tag attribute information includes click information, which means that a page element corresponding to the tag element can be clicked, for example, the text content "hundred degrees" in fig. 2 is clickable, and for visually unobstructed, the clickable page element means that the page element can be focused by a screen reader, and the focusing is to use Tab keys or other ways to position a cursor on the page element for the screen reader to identify and feed back.
And if the tag attribute information comprises the forbidden attribute, adding an unavailable object in the parameter attribute of the context object, and setting an unavailable attribute value corresponding to the barrier-free information in the parameter attribute of the context object.
Illustratively, a "enabled: true" object may be added to the context.data.attrs and a "aria-enabled: true" key-value pair set in the context.data.attrs, building the following context structure:
the fact that the click information is included in the tag attribute information means that the page element corresponding to the tag element is unavailable, and since the visual barrier-free implementation mode is generally realized by reading the content on the page after a screen reader is used for identifying the content on the page, the page element of some picture content cannot be read, and therefore, the page element which is unavailable for visual barrier-free is added with an unavailable attribute value when the context object is constructed.
If the label attribute information comprises text information, setting a text attribute value corresponding to the non-obstacle information in the parameter attribute of the context object, and setting the text information in the child node of the context object.
Continuing to take the example of the above tag < accessible tag-name = "button" @ click = "submit" class = "submit-btn":
exemplarily, an attribute value of "aria-label: commit" may be set in context.data.attrs, and the following is written in context.children { }: "submit", construct the following context structure:
the click information included in the tag attribute information means that the page element corresponding to the tag element is a page element containing text content, and therefore, the text content needs to be embedded in the context object.
By the method, the context object required by the virtual DOM can be constructed, but most tag elements in the webpage cannot accurately express the semantic attribute to be expressed by the current element, and a screen reader cannot provide more information focusing on the page element for an accessible person, so that the semantic information needs to be provided for the page element without the semantic attribute.
In one possible implementation, a semantic role corresponding to the original tag name of the tag element may be determined according to a predefined semantic role list, and the semantic role may be set in the parameter attribute of the context object.
Illustratively, the tag element is < available tag-name = "button" @ click = "submit" class "=" submit-button ">, and the context object constructed through the above steps is:
the data structure of the semantic role list may be:
and reading the class name of the tag element from the context object context, wherein the value is 'submit-button', and traversing the semantic role list at this time, and detecting whether each item in the role map has a semantic role in partial matching. In the above example, the button 'in roleMap [' button ',' btn '] is partially matchable to the sub-button', at which time the key-value pair of role: 'button' is added to context.
Thereby, the second parameter of the complete createlementfunction is obtained.
The createlement function creates a virtual DOM according to the first parameter and the second parameter, and sends the virtual DOM to the browser, and the browser renders the virtual DOM to generate a real DOM.
By the method, when the barrier-free webpage is generated, the webpage application generates a virtual DOM for corresponding to the page elements in the webpage to be rendered and generated, and sends the virtual DOM to the browser for rendering at one time, and multiple communications between the webpage application and the browser are not needed, so that call of DOM API interfaces is reduced, loss of equipment performance is reduced, and the webpage is prevented from being jammed.
Based on the same technical concept, the embodiment of the application also provides a barrier-free webpage generating device. Fig. 7 is a schematic diagram illustrating an apparatus for generating a barrier-free web page according to an embodiment of the present application, where the apparatus may perform the foregoing network address translation method, and as shown in fig. 7, the apparatus includes: the acquisition module is used for acquiring a target webpage code corresponding to a webpage access request based on the webpage access request of a browser; each label element in the target webpage code is provided with a barrier-free label name and label attribute information;
the generating module is used for generating a virtual DOM (document object model) with barrier-free information corresponding to any label element with a barrier-free label name according to the label attribute information of the label element;
a sending module, configured to send each virtual DOM with barrier-free information to the browser; the browser is used for rendering based on each virtual DOM with barrier-free information so as to generate a barrier-free webpage.
In a possible implementation manner, the tag attribute information includes a tag name of a tag element and other attribute values of the tag element; the generation module is specifically configured to generate, by the web application, a first parameter of a createlement function according to the tag name of the tag element, and generate a context object as a second parameter of the createlement function according to the tag attribute information; the context object comprises a binding event, parameter attributes, text information and semantic roles; and the webpage application generates a virtual DOM (document object model) with barrier-free information corresponding to the tag element according to the createElement function.
In a possible implementation manner, the generating module is specifically configured to: if the tag attribute information comprises click information, adding a click object in the binding event of the context object, and setting a focus attribute value corresponding to barrier-free information in the parameter attribute of the context object.
In a possible implementation manner, the generating module is specifically configured to: if the tag attribute information comprises a forbidden attribute, adding an unavailable object in the parameter attribute of the context object, and setting an unavailable attribute value corresponding to barrier-free information in the parameter attribute of the context object.
In a possible implementation manner, the generating module is specifically configured to: if the label attribute information comprises text information, setting a text attribute value corresponding to the barrier-free information in the parameter attribute of the context object, and setting the text information in the child node of the context object.
In a possible implementation manner, the generating module is specifically configured to: and determining a semantic role corresponding to the original tag name of the tag element, and setting the semantic role in the parameter attribute of the context object.
In a possible implementation manner, the obtaining module is specifically configured to: in the process of compiling the webpage source code, transmitting the webpage source code in the webpage source code into an obstacle-free plug-in; replacing, by the barrier-free plug-in, page source code of the page source code that is associated with barrier-free display with barrier-free code; and compiling the replaced page source code to generate a target webpage code.
In a possible implementation manner, the obtaining module is specifically configured to: matching a label code corresponding to a label element from the page source code; the label code comprises a label name and label content; and replacing the tag name with an unobstructed tag name, and using the tag content and the tag name as tag attribute information.
In a possible implementation manner, the obtaining module is specifically configured to: matching an HTML template code from the page source code according to an HTML template matching rule; and matching the tag codes corresponding to the tag elements from the HTML template codes according to the tag element matching rules.
Based on the same technical concept, an embodiment of the present invention further provides a computing device, including: a memory for storing program instructions;
a processor for calling the program instructions stored in said memory and executing the method illustrated in fig. 3, 5 and 6 according to the obtained program.
Based on the same technical concept, embodiments of the present invention also provide a computer-readable storage medium, which when running on a processor implements the method illustrated in fig. 3, 5 and 6.
Based on the same technical concept, the embodiment of the present invention also provides a computer program product, which when running on a processor, implements the method as illustrated in fig. 3, 5 and 6.
As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present application without departing from the spirit and scope of the application. Thus, if such modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is intended to include such modifications and variations as well.
Claims (12)
1. A barrier-free web page generation method is characterized in that,
based on a webpage access request of a browser, a webpage application acquires a target webpage code corresponding to the webpage access request; each label element in the target webpage code is provided with an accessible label name and label attribute information;
for any tab element with an unobstructed tab name, the webpage application generates a virtual DOM with unobstructed information corresponding to the tab element according to the tab attribute information of the tab element;
the webpage application sends each virtual DOM with barrier-free information to the browser; the browser is used for rendering based on the virtual DOMs with barrier-free information so as to generate barrier-free webpages.
2. The method of claim 1, wherein the tag attribute information includes a tag name of a tag element and other attribute values of the tag element;
the webpage application generates a virtual DOM with barrier-free information corresponding to the tag element according to the attribute information of the tag element, and the method comprises the following steps:
the webpage application generates a first parameter of a createElement function according to the tag name of the tag element, and generates a context object as a second parameter of the createElement function according to the tag attribute information; the context object comprises a binding event, parameter attributes, text information and semantic roles;
and the webpage application generates a virtual DOM (document object model) with barrier-free information corresponding to the tag element according to the createElement function.
3. The method of claim 2, wherein generating a context object as a second parameter of a createlementfunction according to the tag attribute information comprises:
if the tag attribute information comprises click information, adding a click object in the binding event of the context object, and setting a focus attribute value corresponding to barrier-free information in the parameter attribute of the context object.
4. The method of claim 2, wherein generating a context object as a second parameter of a createlement function according to the tag attribute information comprises:
if the tag attribute information comprises a forbidden attribute, adding an unavailable object in the parameter attribute of the context object, and setting an unavailable attribute value corresponding to barrier-free information in the parameter attribute of the context object.
5. The method of claim 2, wherein generating a context object as a second parameter of a createlement function according to the tag attribute information comprises:
if the label attribute information comprises text information, setting a text attribute value corresponding to barrier-free information in the parameter attribute of the context object, and setting the text information in the child node of the context object.
6. The method of claim 2, wherein generating a context object as a second parameter of a createlement function according to the tag attribute information comprises:
and determining a semantic role corresponding to the original tag name of the tag element, and setting the semantic role in the parameter attribute of the context object.
7. The method of any of claims 1-6, wherein the target web page code is obtained by:
in the process of compiling the webpage source code, transmitting the webpage source code in the webpage source code into an obstacle-free plug-in;
replacing, by the barrier-free plug-in, page source code of the page source code that is associated with barrier-free display with barrier-free code;
and compiling the replaced page source code to generate a target webpage code.
8. The method of claim 7, wherein replacing, by the barrier-free plug-in, page source code of the page source code that is related to barrier-free information with barrier-free code comprises:
matching a tag code corresponding to the tag element from the page source code; the label code comprises a label name and label content;
and replacing the tag name with an unobstructed tag name, and taking the tag content and the tag name as tag attribute information.
9. The method of claim 8, wherein matching out the tag code corresponding to the tag element from the page source code comprises:
matching an HTML template code from the page source code according to an HTML template matching rule;
and matching the tag codes corresponding to the tag elements from the HTML template codes according to the tag element matching rules.
10. An apparatus for generating a barrier-free web page, the apparatus comprising:
the acquisition module is used for acquiring a target webpage code corresponding to a webpage access request based on the webpage access request of a browser; each label element in the target webpage code is provided with an accessible label name and label attribute information;
the system comprises a generating module, a judging module and a display module, wherein the generating module is used for generating a virtual DOM (document object model) with barrier-free information corresponding to any tag element with a barrier-free tag name according to tag attribute information of the tag element;
the sending module is used for sending each virtual DOM with barrier-free information to the browser; the browser is used for rendering based on the virtual DOMs with barrier-free information so as to generate barrier-free webpages.
11. A computer-readable storage medium, characterized in that it stores a computer program which, when executed, performs the method according to any one of claims 1 to 9.
12. A computing device, comprising:
a memory for storing program instructions;
a processor for calling program instructions stored in said memory to perform the method of any of claims 1 to 9 in accordance with the obtained program.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211286789.2A CN115905759A (en) | 2022-10-20 | 2022-10-20 | Barrier-free webpage generation method, device, medium and equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211286789.2A CN115905759A (en) | 2022-10-20 | 2022-10-20 | Barrier-free webpage generation method, device, medium and equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115905759A true CN115905759A (en) | 2023-04-04 |
Family
ID=86496461
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211286789.2A Pending CN115905759A (en) | 2022-10-20 | 2022-10-20 | Barrier-free webpage generation method, device, medium and equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115905759A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117056637A (en) * | 2023-09-26 | 2023-11-14 | 之江实验室 | Barrier-free webpage generation method, barrier-free webpage generation device, computer equipment and storage medium |
-
2022
- 2022-10-20 CN CN202211286789.2A patent/CN115905759A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117056637A (en) * | 2023-09-26 | 2023-11-14 | 之江实验室 | Barrier-free webpage generation method, barrier-free webpage generation device, computer equipment and storage medium |
| CN117056637B (en) * | 2023-09-26 | 2024-03-12 | 之江实验室 | Barrier-free webpage generation method, barrier-free webpage generation device, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9652441B2 (en) | System and method for creation of templates | |
| Akpınar et al. | Vision based page segmentation algorithm: Extended and perceived success | |
| US11194884B2 (en) | Method for facilitating identification of navigation regions in a web page based on document object model analysis | |
| US10229220B2 (en) | Automatic entry of suggested translated terms in an online application program | |
| EP1927922A1 (en) | Data managing apparatus, data editing apparatus, data browsing apparatus, data managing method, data editing method, and data browsing method | |
| CN108762743B (en) | Data table operation code generation method and device | |
| EP2291806A2 (en) | Presenting advertisements based on web-page interaction | |
| US10572566B2 (en) | Image quality independent searching of screenshots of web content | |
| CN104025068A (en) | Conflict resolution of css definition from multiple sources | |
| US20090083300A1 (en) | Document processing device and document processing method | |
| CN108446136B (en) | Element code extraction method and system | |
| US10282398B1 (en) | Editing tool for domain-specific objects with reference variables corresponding to preceding pages | |
| US8799256B2 (en) | Incorporated web page content | |
| CN115905759A (en) | Barrier-free webpage generation method, device, medium and equipment | |
| US20080005662A1 (en) | Server Device and Name Space Issuing Method | |
| RU2632149C2 (en) | System, method and constant machine-readable medium for validation of web pages | |
| US20090137202A1 (en) | Information distribution system | |
| CN112016267A (en) | Icon font processing method and device and storage medium | |
| WO2017049715A1 (en) | Page construction method, apparatus and device, and nonvolatile computer storage medium | |
| US20080005085A1 (en) | Server Device and Search Method | |
| CN113656000B (en) | Webpage processing method and device | |
| Johnson | Programming in HTML5 with JavaScript and CSS3 | |
| CN114968220A (en) | Dynamic portal design method and device | |
| CN113918850A (en) | Method for automatically correcting pattern, electronic equipment and storage medium | |
| Kyrnin | Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |