An accessible webpage generation method, device, medium and equipment

Abstract

The application relates to the technical field of Internet, in particular to an accessible webpage generation method and device, medium and equipment. The method comprises the following steps: based on a webpage access request of a browser, a webpage application acquires target webpage code corresponding to the webpage access request; for any label element with an accessible label name, the webpage application generates a virtual DOM with accessible information corresponding to the label element according to label attribute information of the label element; the webpage application sends each virtual DOM with accessible information to the browser; and the browser performs rendering based on each virtual DOM with accessible information to generate an accessible webpage. Through the above method, when the accessible webpage is generated, the webpage application first generates a virtual DOM, and sends the virtual DOM to the browser for rendering at one time, so that multiple communications between the webpage application and the browser are not needed, the loss of device performance is reduced, and webpage lag is avoided.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a method, apparatus, medium and device for generating accessible web pages. Background Technology

[0002] With the development of internet technology, the internet has become an essential source for people's daily information access and communication. Users access web pages through browsers to obtain information, including text, images, videos, and audio. This requires web page developers to design the corresponding data and encoding for this content during web page development and store it on the server where the web page resides. When users need to access it, they retrieve it through their browsers.

[0003] Among web users, besides ordinary users, there are also visually impaired individuals who cannot directly see the content. However, most existing web pages were not developed with the special needs of visually impaired users in mind, making it difficult for them to access the content. Currently, mainstream technologies enabling visually accessible web pages typically use special encoding based on accessibility standards for interactive and information-displaying page elements. Screen readers can recognize and respond to this encoding. However, this approach dynamically updates accessibility attributes for all elements requiring accessibility information after the page has been rendered. Each page element needs to be updated, which incurs performance overhead and causes web pages to lag.

[0004] Therefore, there is an urgent need for a method, apparatus, medium, and device for generating accessible web pages, which can reduce the loss of device performance when web pages support accessible access. Summary of the Invention

[0005] This application provides a method, apparatus, medium, and device for generating accessible web pages, which are used to reduce device performance loss when web pages support accessible access.

[0006] In a first aspect, embodiments of this application provide a method comprising: based on a webpage access request from a browser, a webpage application obtains the target webpage code corresponding to the webpage access request; each tag element in the target webpage code is configured with an accessibility tag name and tag attribute information; for any tag element with an accessibility tag name, the webpage application generates a virtual DOM with accessibility information corresponding to the tag element based on the tag attribute information of the tag element; the webpage application sends each virtual DOM with accessibility information to the browser; the browser is used to render based on each virtual DOM with accessibility information to generate an accessible webpage.

[0007] In this way, when generating accessible web pages, the web application first generates a virtual DOM to correspond to the page elements in the final rendered page, and sends the virtual DOM to the browser for rendering all at once. This eliminates the need for multiple communications between the web application and the browser, thereby reducing calls to the DOM API interface, reducing device performance loss, and avoiding web page lag.

[0008] In one possible implementation, the tag attribute information includes the tag name of the tag element and other attribute values ​​of the tag element; the web application generates a virtual DOM with accessibility information corresponding to the tag element based on the tag element attribute information, including: the web application generates a first parameter of the createElement function based on the tag name of the tag element, and generates a context object as a second parameter of the createElement function based on the tag attribute information; the context object includes bound events, parameter attributes, text information, and semantic roles; the web application generates a virtual DOM with accessibility information corresponding to the tag element based on the createElement function.

[0009] By using the above method, when constructing the virtual DOM, the web application uses the tag attribute information containing accessibility information as the parameter of the virtual DOM generation function. Thus, it only needs to construct the accessibility parameters based on the accessibility information, thereby reducing the difficulty of virtual DOM construction and indirectly reducing the difficulty of generating accessible web pages, thus reducing time and cost.

[0010] In one possible implementation, generating a context object based on the label attribute information as the second parameter of the createElement function includes: if the label attribute information includes click information, then adding a click object to the bound event of the context object, and setting the focus attribute value corresponding to the accessibility information in the parameter attributes of the context object.

[0011] In the above method, the inclusion of click information in the label attribute information means that the page element corresponding to the label element can be clicked. For visual accessibility, a clickable page element means that it can be focused by the screen reader. Focusing means using the Tab key or other methods to position the cursor on the page element so that the screen reader can recognize and respond.

[0012] In one possible implementation, generating a context object as the second parameter of the createElement function based on the tag attribute information includes: if the tag attribute information includes a disabled attribute, then adding an unavailable object to the parameter attribute of the context object, and setting the unavailable attribute value corresponding to the accessibility information in the parameter attribute of the context object.

[0013] In the above approach, including click information in the tag attribute information means that the page element corresponding to the tag element is unavailable. Since visual accessibility is generally achieved by screen readers recognizing and reading the content on the page, some page elements containing images cannot be read. Therefore, for visual accessibility, these are unavailable page elements. When constructing the context object, an unavailable attribute value is added so that the screen reader can accurately recognize and respond to it.

[0014] In one possible implementation, generating a context object as the second parameter of the createElement function based on the tag attribute information includes: if the tag attribute information includes text information, then setting the text attribute value corresponding to the accessibility information in the parameter attribute of the context object, and setting the text information in the child nodes of the context object.

[0015] In the above method, the text content in the page element is embedded by setting text information in the child node of the context object. Since there is a lot of text content in the page element, setting text information in the child node of a context makes it easier for the context object to obtain the text attribute value.

[0016] In one possible implementation, generating a context object as the second parameter of the createElement function based on the tag attribute information includes: determining the 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.

[0017] By using the above methods, semantic information is provided to page elements that do not have semantic attributes, so that the tag elements in the webpage can accurately express the semantic attributes that the current element is supposed to express, and provide more information for people with disabilities to focus on page elements.

[0018] In one possible implementation, the target webpage code is obtained through the following methods: during the compilation of the webpage source code, the page source code in the webpage source code is passed to an accessibility plugin; through the accessibility plugin, the page source code related to accessibility display in the page source code is replaced with accessibility code; the replaced page source code is compiled to generate the target webpage code. Replacing the page source code related to accessibility information in the page source code with accessibility code through the accessibility plugin includes: matching tag code corresponding to tag elements from the page source code; the tag code includes a tag name and tag content; replacing the tag name with an accessibility tag name, and using the tag content and the tag name as tag attribute information. Matching tag code corresponding to tag elements from the page source code includes: matching HTML template code from the page source code according to HTML template matching rules; and matching tag code corresponding to tag elements from the HTML template code according to tag element matching rules.

[0019] By using the above method, during the compilation of webpage code, an accessibility plugin replaces the webpage source code without requiring intrusive modifications, thus avoiding new code defects. Furthermore, the replacement process follows specific rules, making the form of the replaced code controllable, reducing the likelihood of defective code and minimizing debugging time for developers. This, in turn, lowers the cost of accessibility webpage development.

[0020] Secondly, embodiments of this application provide an accessible webpage generation device, including an acquisition module, used to acquire target webpage code corresponding to a webpage access request based on a browser's webpage access request; each tag element in the target webpage code is set with an accessibility tag name and tag attribute information;

[0021] The generation module is used to generate a virtual DOM with accessibility information corresponding to any tag element with an accessibility tag name, based on the tag attribute information of the tag element.

[0022] The sending module is used to send each virtual DOM with accessibility information to the browser; the browser is used to render based on each virtual DOM with accessibility information to generate an accessible webpage.

[0023] In one possible implementation, the tag attribute information includes the tag name of the tag element and other attribute values ​​of the tag element; the generation module is specifically used for the web application to generate the first parameter of the createElement function based on the tag name of the tag element, and to generate a context object as the second parameter of the createElement function based on the tag attribute information; the context object includes bound events, parameter attributes, text information, and semantic roles; the web application generates a virtual DOM with accessibility information corresponding to the tag element based on the createElement function.

[0024] In one possible implementation, the generation module is specifically used to: if the label attribute information includes click information, add a click object to the binding event of the context object, and set the focus attribute value corresponding to the accessibility information in the parameter attribute of the context object.

[0025] In one possible implementation, the generation module is specifically used to: if the tag attribute information includes a disabled attribute, add an unavailable object to the parameter attribute of the context object, and set the unavailable attribute value corresponding to the accessibility information in the parameter attribute of the context object.

[0026] In one possible implementation, the generation module is specifically used to: if the label attribute information includes text information, set the text attribute value corresponding to the accessibility information in the parameter attribute of the context object, and set the text information in the child node of the context object.

[0027] In one possible implementation, the generation module is specifically used to: determine the semantic role corresponding to the original tag name of the tag element, and set the semantic role in the parameter attribute of the context object.

[0028] In one possible implementation, the acquisition module is specifically used to: during the compilation of the webpage source code, pass the page source code in the webpage source code to the accessibility plugin; through the accessibility plugin, replace the page source code related to accessibility display in the page source code with accessibility code; and compile the replaced page source code to generate the target webpage code.

[0029] In one possible implementation, the acquisition module is specifically used to: match the tag code corresponding to the tag element from the page source code; the tag code includes a tag name and tag content; replace the tag name with an accessibility tag name, and use the tag content and the tag name as tag attribute information.

[0030] In one possible implementation, the acquisition module is specifically used to: match HTML template code from the page source code according to HTML template matching rules; and match tag code corresponding to tag elements from the HTML template code according to tag element matching rules.

[0031] Thirdly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when run, executes any of the methods described in the first aspect above.

[0032] Fourthly, embodiments of this application provide a computing device, including: a memory for storing program instructions; and a processor for calling the program instructions stored in the memory and executing the method in any of the designs in the first aspect above according to the obtained program.

[0033] Fifthly, embodiments of this application provide a computer program product that, when run on a processor, implements the method as described in any of the designs in the first aspect above.

[0034] The beneficial effects of the second to fifth aspects mentioned above can be specifically referred to as the beneficial effects that can be achieved by any of the designs in the first aspect mentioned above, and will not be elaborated here. Attached Figure Description

[0035] Figure 1 An exemplary illustration shows an application scenario provided by an embodiment of this application;

[0036] Figure 2 This illustration shows a web application provided in an embodiment of the present application.

[0037] Figure 3 The illustration shows a flowchart of an accessible webpage generation method provided in an embodiment of this application.

[0038] Figure 4 An exemplary illustration shows a virtual DOM provided in an embodiment of this application;

[0039] Figure 5 This illustration shows a flowchart of a method for obtaining target webpage code according to an embodiment of this application;

[0040] Figure 6 An exemplary flowchart illustrates a method for replacing accessibility codes provided in an embodiment of this application;

[0041] Figure 7 An exemplary schematic diagram of an accessibility webpage generation device provided in an embodiment of this application is shown. Detailed Implementation

[0042] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are merely some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0043] Figure 1 This illustration shows an application scenario provided by an embodiment of the present application, such as... Figure 1 As shown, a user accesses a web application deployed on a server through a browser. A web application is application software that operates on the internet or a corporate intranet using a browser. It is an application written in web programming languages ​​(such as HTML, JavaScript, CSS, etc.) and needs to be executed through a browser. In a specific example, after logging into Google Chrome, the user accesses Baidu's web application. Figure 2 This illustration shows a web application provided in an embodiment of this application, such as... Figure 2 The web application shown includes both image and text content, such as the Baidu logo and the small camera icon in the search box. Different content has different attributes. For example, the Baidu logo is simply an image and cannot be clicked, while the small camera icon in the search box is clickable; clicking it activates the electronic device's camera, enabling functions like object recognition. The text "Baidu Hot Searches" is clickable, leading to Baidu's trending search list. The "Search on Baidu" button in the search box is also clickable and contains the text "Search on Baidu" in its attributes. These elements are collectively called page elements, designed by the web developer during the webpage development process. The attributes of each page element and their corresponding data are stored on the web application's backend server. When a user accesses the web application through a browser, based on the access request, the browser assembles the attributes and data onto each page element and displays them through browser rendering for the user to view.

[0044] Users can freely click or browse the content of these web applications to obtain information. However, some visually impaired individuals cannot see the displayed content and therefore cannot access the pages normally.

[0045] To enable visually impaired individuals to access web applications normally, these applications need to embed special encoding so that they can be accessed using screen readers. Screen readers are a reading method designed for the visually impaired; they read aloud the content displayed in web applications, converting visual content into auditory content to convey information. Therefore, in order for screen readers to recognize the content in web applications, special encoding of the web content is required.

[0046] The existing implementations primarily rely on the accessibility standards established by the World Wide Web Consortium (W3C) to specially encode the content of web pages. When visually accessible users access the web page using a screen reader, after the page loads, the accessibility information of each element on the page is dynamically updated using the application programming interface (API) provided by the web page, so that the screen reader can recognize and respond accordingly.

[0047] For example, the interface type is the Document Object Model (DOM) interface, which is a W3C-recommended standard programming interface for processing Extensible Markup Language (EXPLAIN). It is a platform- and language-independent application programming interface that allows dynamic access to accessible code.

[0048] When page elements change, web applications dynamically update the accessibility information for those elements to ensure accessible users can access the latest content. However, when accessing a web application through a browser, the rendering of page elements and the fetching of page element data occur in two separate threads. Page element data fetching is handled by a JavaScript thread, which uses the DOM API to read page elements and bind their data. The rendering thread then performs the rendering. The more elements a webpage has, the more times the DOM API needs to be called, leading to increased communication between the rendering and JavaScript threads. This can negatively impact device performance, increasing memory and CPU resource consumption and potentially causing page lag.

[0049] Furthermore, adding accessibility information to web applications requires special encoding of the webpage source code to support accessibility. Every time a page element is added or modified, the accessibility-related code needs to be modified synchronously, increasing development manpower costs. Moreover, this modification method is an intrusive change to the webpage source code, which can easily introduce new code defects.

[0050] Therefore, there is an urgent need for an accessible webpage generation method to reduce device performance degradation when webpages support accessibility, and to reduce the cost of accessibility code development and avoid code defects.

[0051] Figure 3 This illustration shows a flowchart of an accessible webpage generation method provided in an embodiment of this application. The method includes:

[0052] Step 301: Based on the browser's webpage access request, the web application obtains the target webpage code corresponding to the webpage access request; each tag element in the target webpage code is set with accessibility tag name and tag attribute information.

[0053] In the steps described above, after a user logs into their browser, an access request is generated based on the browser's default settings or the user's intended purpose. For example, after logging into Google Chrome, the default display interface is the Google Chrome main screen, including the search box. If the user needs to access the Baidu webpage, they enter "Baidu" in the search box or click the "Baidu" button on the main screen, generating an access request for the Baidu webpage. This access request is then transmitted over the internet to the server hosting the web application. The web application retrieves the target webpage code corresponding to this access request. Exemplarily, the target webpage code can be stored on the server hosting the web application, or it can be stored in a separate storage unit pre-written by the developers. In the example above, the target webpage code is the code for the Baidu webpage, stored on Baidu's server.

[0054] The target webpage code contains accessibility information. Specifically, each tag element in the target webpage code has accessibility tag names and tag attribute information. For example, the tag element can be an HTML tag element. It refers to all the code in an HTML file from the start tag to the end tag. Tag elements can be divided into block-level elements and inline elements based on their appearance. Block-level elements occupy an entire line in the browser and exclude other elements from being on the same line. That is, the width of a block-level element is 100%. Common block-level elements are shown in Table 1 below:

[0055] Table 1

[0056] block-level elements illustrate div The most typical block element p Paragraph h1-h6 This indicates heading levels 1-6 (bold by default). br Indicates a newline ol ordered list ul Unordered list

[0057] Inline elements can share a line with other inline elements in a browser. They will only wrap to a new line when the total width of the multiple elements exceeds the browser's width. Common inline elements are shown in Table 2 below:

[0058] Table 2

[0059] Inline elements illustrate a Hyperlink span Common row levels strong Bold, emphasized b Bold, not emphasized em Italics, for emphasis i Italics, not emphasized img picture input Input box select dropdown list

[0060] In the two tables above, the elements in the left column are enclosed in "<>" and used as the tag names for the tag elements. For example, …… These are the start and end tags of the "p" tag element.

[0061] For accessibility labels, since the label element is read through a special component, it can be flexibly configured. For example, you can set the accessibility component's label name to "accessible", and the corresponding label element will be... <accessible> ……< / accessible> Tag attribute information refers to the information contained in the content between the start and end tags of a tag element.

[0062] Step 302: For any tag element with an accessibility tag name, the web application generates a virtual DOM with accessibility information corresponding to the tag element based on the tag attribute information of the tag element.

[0063] In contrast to the virtual DOM, there is the real DOM. According to the W3C definition, the DOM is a browser-, platform-, and language-independent interface that allows access to other standard components on a webpage. DOM tree node attributes include tag name, node type, node content, parent node object collection, child node object collection, and sibling node object collection. DOM tree nodes provide the basic content and structural information of a web application page.

[0064] Step 303: The web application sends each virtual DOM containing accessibility information to the browser; the browser then renders the virtual DOM based on the accessibility information to generate an accessible webpage.

[0065] Figure 4 An exemplary illustration of a virtual DOM provided in an embodiment of this application is shown, such as... Figure 4 As shown, after obtaining the target webpage code from the server, the web application assembles accessibility information for each tag element, generating a virtual DOM corresponding to each tag element. For example, one tag element can correspond to one virtual DOM, or multiple tag elements can correspond to one virtual DOM. As shown in Figure 4, a total of six tag elements correspond to one virtual DOM.

[0066] Before attaching accessibility information to tag elements, a global accessibility component needs to be registered. After registration, the tag attribute information can be obtained, and the accessibility information can be attached based on this information before the virtual DOM can be generated. The tag attribute information comes from the target webpage code; the following section will explain in detail how to obtain this information.

[0067] Figure 5 This illustration shows a flowchart of a method for obtaining target webpage code according to an embodiment of this application. Figure 5 As shown, the method includes:

[0068] Step 501: During the compilation of the webpage source code, the page source code in the webpage source code is passed into the accessibility plugin.

[0069] Step 502: Replace the page source code related to accessibility display in the page source code with accessibility code using the accessibility plugin.

[0070] Step 503: Compile the source code of the replaced page to generate the target webpage code.

[0071] In step 501 above, the webpage source code is pre-written by the developers. After the webpage source code is written, it is compiled using a compilation tool. The webpage source code contains the page source code. During the compilation process, if the page source code is detected as being compiled, it is passed to the accessibility plugin. The accessibility plugin is a replacement plugin provided by the accessibility component, used to replace content in the page code.

[0072] Figure 6 An exemplary flowchart illustrates a method for replacing accessibility codes provided in an embodiment of this application, such as... Figure 6 As shown, the method includes:

[0073] Step 601: Match the HTML template code from the page source code according to the HTML template matching rules.

[0074] For example, the HTML template matching rule can be: satisfying <template> .*？< / template> Structure, for example, in the following page code:

[0075]

[0076]

[0077] Based on the above rules, the following HTML template code was matched:

[0078]

[0079] Step 602: Based on the tag element matching rules, match the tag code corresponding to the tag element from the HTML template code. The tag code includes the tag name and tag content.

[0080] For example, the tag element matching rule can be satisfied with<S+> .*?< / S+> structure:

[0081] For example, in the HTML template code of step 601 above, it satisfies<S+> .*?< / S+> The tag code for the structure is:

[0082] <h1 class＝"title”> title< / h1>

[0083] <p class＝"text”> Description copy

[0084] <button@click=“submit”class=“sumit-btn”> submit

[0085] Step 603: Replace the tag name with the accessibility tag name, and use the tag content and tag name as tag attribute information.

[0086] For example, let's set the accessibility label to "accessible". Taking the third label code from the example above as an example, the replaced accessibility label is as follows:

[0087] <accessible tag-name=“button”@click=“submit”class=“sumit-btn”> submit.

[0088] It can be seen that the original tag name "button" has been replaced with "accessible," and the original tag name "button" has been assigned as the attribute value to the "tag-name" attribute in the accessibility tag. The "tag-name" attribute is a custom attribute that can be accessed by the global accessibility component. In addition, the two attributes "@click="submit" and "class="submit-btn" from the original tag, as well as the text "Submit," have been used as attribute information for the replaced tag.

[0089] <h>and The two labels are as described above. <button>The same method of replacement will be used, and will not be repeated here.

[0090] The replaced tag content is as follows:

[0091] <accessible tag-name="h1”class="title”> title

[0092] <accessible tag-name="p”class="text”> Description copy

[0093] <accessible tag-name="button”@click="submit”class="sumit-btn”> submit.

[0094] The page code used for compilation after the replacement is as follows:

[0095] <template>

[0096] <accessible tag-name="h1”class="title”> title

[0097] <accessible tag-name="p”class="text”> Description copy

[0098] <accessible tag-name="button”@click="submit”class="sumit-btn”> submit

[0099] < / template>

[0100] <script>

[0101] export default{…}

[0102] < / script>

[0103] <style>

[0104] .title{font-size:30px；color:red；}

[0105] .text{background-color:#FFF；font-size:18px；}

[0106] < / style> .

[0107] In step 503 above, the replaced page source code is returned to the compilation tool for compilation, generating the target webpage code. Therefore, the tag code in the target webpage code contains accessibility tag names and tag attribute information.

[0108] One possible implementation involves providing a `Vue.component` interface within the Vue framework provided by the web application to register accessibility components. For example, this registration model provides a `render` function to define the structure and content for rendering the accessibility component. The `render` function takes two parameters: a `createElement` function to generate the virtual DOM, and a context object.

[0109] The aforementioned tag attribute information includes the tag name of the tag element and other attribute values ​​of the tag element. The accessibility component passes the tag attribute information to the render function so that the web application can generate the first parameter of the createElement function based on the tag name of the tag element, and generate a context object as the second parameter of the createElement function based on the tag attribute information.

[0110] For example, regarding the labels mentioned above:<accessible tag-name="button”@click="submit” class="sumit-btn”> After submitting, the component reads the custom tag-name attribute and passes createElement('p') to the createElement function.

[0111] The second parameter, the context object, includes information such as bound events, parameter attributes, text information, and semantic roles. It is constructed based on tag attribute information, and different tag attribute information contains different types and quantities of information.

[0112] For example, the context object can have the following structure:

[0113]

[0114]

[0115] If the label attribute information includes click information, then add the click object in the bound event of the context object, and set the focus attribute value corresponding to the accessibility information in the parameter property of the context object.

[0116] Continue using the above tags<accessible tag-name="button”@click="submit”class="sumit-btn”> For example, submitting:

[0117] If the tag's attribute information includes click information: @click = "submit", then add a "click" object to context.listeners, and set the key-value pair "tabindex: '0'" in context.data.attrs, resulting in the following context structure:

[0118]

[0119] The inclusion of click information in the tag attributes means that the page element corresponding to the tag element is clickable, for example, Figure 2 The text content "Baidu Search" is clickable. For visual accessibility, clickable page elements mean that they can be focused on by the screen reader. Focusing means using the Tab key or other methods to position the cursor on the page element so that the screen reader can recognize and respond.

[0120] If the tag attribute information includes a disabled attribute, then add an unavailable object to the parameter attribute of the context object, and set the unavailable attribute value corresponding to the accessibility information in the parameter attribute of the context object.

[0121] For example, you can add a "diabled:true" object to context.data.attrs and set a key-value pair "aria-diabled:true" in context.data.attrs to construct the following context structure:

[0122]

[0123] The inclusion of click information in the tag attribute information means that the page element corresponding to the tag element is unavailable. Since visual accessibility is generally achieved by screen readers recognizing and reading the content on the page, some page elements containing images cannot be read. Therefore, for visual accessibility, page elements that are unavailable are added with the "unavailable" attribute value when constructing the context object.

[0124] If the label attribute information includes text information, then set the text attribute value corresponding to the accessibility information in the parameter attribute of the context object, and set the text information in the child node of the context object.

[0125] Continue using the above tags<accessible tag-name="button”@click="submit”class="sumit-btn”> For example, submitting:

[0126] For example, you can set the attribute value "aria-label: Submit" in context.data.attrs and write "Submit" in context.children:{} to construct the following context structure:

[0127]

[0128] The inclusion of click information in the tag attribute information means that the page element corresponding to the tag element is a page element containing text content. Therefore, the text content needs to be embedded in the context object.

[0129] The above method can construct the context object required to create a virtual DOM. However, most tag elements in a webpage cannot accurately express the semantic attributes that the current element is supposed to express. For screen readers, this means that they cannot provide more information for people with disabilities to focus on page elements. Therefore, it is necessary to provide semantic information for page elements that do not have semantic attributes.

[0130] In one possible implementation, the semantic role corresponding to the original tag name of the tag element can be determined based on a predefined list of semantic roles, and the semantic role can be set in the parameter property of the context object.

[0131] For example, the tag element is<accessible tag-name="button”@click="submit”class="submit-button”> Submit. The context object constructed through the above steps is as follows:

[0132]

[0133] The data structure for the semantic role list can be:

[0134]

[0135] The class name of the tag element is read from the context object, with a value of 'submit-button'. Then, the semantic role list is traversed, checking if any item in the roleMap partially matches the semantic role. In the example above, 'button' in roleMap:['button','button','btn'] partially matches 'submit-button'. Therefore, a key-value pair with role:'button' is added to context.data.attrs, resulting in the following structure:

[0136]

[0137] Thus, we obtain the second parameter of the complete createElement function.

[0138] The `createElement` function creates a virtual DOM based on the first and second parameters and sends it to the browser. The browser then renders the virtual DOM to generate the real DOM.

[0139] In this way, when generating accessible web pages, the web application first generates a virtual DOM to correspond to the page elements in the final rendered page, and sends the virtual DOM to the browser for rendering all at once. This eliminates the need for multiple communications between the web application and the browser, thereby reducing calls to the DOM API interface, reducing device performance loss, and avoiding web page lag.

[0140] Based on the same technical concept, this application also provides an accessible webpage generation device. Figure 7 The illustration shows a schematic diagram of an accessible webpage generation device provided in an embodiment of this application. This device can perform the aforementioned network address translation method, such as... Figure 7 As shown, the device includes: an acquisition module, used to acquire the target webpage code corresponding to the webpage access request based on the browser's webpage access request; each tag element in the target webpage code is set with accessibility tag names and tag attribute information;

[0141] The generation module is used to generate a virtual DOM with accessibility information corresponding to any tag element with an accessibility tag name, based on the tag attribute information of the tag element.

[0142] The sending module is used to send each virtual DOM with accessibility information to the browser; the browser is used to render based on each virtual DOM with accessibility information to generate an accessible webpage.

[0143] In one possible implementation, the tag attribute information includes the tag name of the tag element and other attribute values ​​of the tag element; the generation module is specifically used for the web application to generate the first parameter of the createElement function based on the tag name of the tag element, and to generate a context object as the second parameter of the createElement function based on the tag attribute information; the context object includes bound events, parameter attributes, text information, and semantic roles; the web application generates a virtual DOM with accessibility information corresponding to the tag element based on the createElement function.

[0144] In one possible implementation, the generation module is specifically used to: if the label attribute information includes click information, add a click object to the binding event of the context object, and set the focus attribute value corresponding to the accessibility information in the parameter attribute of the context object.

[0145] In one possible implementation, the generation module is specifically used to: if the tag attribute information includes a disabled attribute, add an unavailable object to the parameter attribute of the context object, and set the unavailable attribute value corresponding to the accessibility information in the parameter attribute of the context object.

[0146] In one possible implementation, the generation module is specifically used to: if the label attribute information includes text information, set the text attribute value corresponding to the accessibility information in the parameter attribute of the context object, and set the text information in the child node of the context object.

[0147] In one possible implementation, the generation module is specifically used to: determine the semantic role corresponding to the original tag name of the tag element, and set the semantic role in the parameter attribute of the context object.

[0148] In one possible implementation, the acquisition module is specifically used to: during the compilation of the webpage source code, pass the page source code in the webpage source code to the accessibility plugin; through the accessibility plugin, replace the page source code related to accessibility display in the page source code with accessibility code; and compile the replaced page source code to generate the target webpage code.

[0149] In one possible implementation, the acquisition module is specifically used to: match the tag code corresponding to the tag element from the page source code; the tag code includes a tag name and tag content; replace the tag name with an accessibility tag name, and use the tag content and the tag name as tag attribute information.

[0150] In one possible implementation, the acquisition module is specifically used to: match HTML template code from the page source code according to HTML template matching rules; and match tag code corresponding to tag elements from the HTML template code according to tag element matching rules.

[0151] Based on the same technical concept, embodiments of the present invention also provide a computing device, including: a memory for storing program instructions;

[0152] The processor is used to call program instructions stored in the memory and execute them according to the obtained program. Figure 3 , Figure 5 and Figure 6 The method shown.

[0153] Based on the same technical concept, embodiments of the present invention also provide a computer-readable storage medium, which, when the computer program product is run on a processor, implements the following... Figure 3 , Figure 5 and Figure 6 The method shown.

[0154] Based on the same technical concept, embodiments of the present invention also provide a computer program product, which, when run on a processor, implements the following: Figure 3 , Figure 5 and Figure 6 The method shown.

[0155] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can 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, etc.) containing computer-usable program code.

[0156] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can 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, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0157] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0158] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0159] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.< / button> < / h>

Claims

1. A method for generating accessible web pages, characterized in that, Based on a browser's webpage access request, the web application obtains the target webpage code corresponding to the webpage access request; each tag element in the target webpage code is set with an accessibility tag name and tag attribute information; wherein, the target webpage code is obtained in the following way: during the compilation of the webpage source code, the page source code in the webpage source code is passed into the accessibility plugin; the tag code corresponding to the tag element is matched from the page source code; the tag code includes a tag name and a tag content; the tag name is replaced with an accessibility tag name, and the tag content and the tag name are used as tag attribute information; the replaced page source code is compiled to generate the target webpage code; For any tag element with an accessibility tag name, the web application generates a virtual DOM with accessibility information corresponding to the tag element based on the tag attribute information of the tag element; the tag attribute information includes the tag name of the tag element and other attribute values ​​of the tag element; the web application generates the virtual DOM with accessibility information corresponding to the tag element based on the attribute information of the tag element, including: the web application generates a first parameter of the createElement function based on the tag name of the tag element, and generates a context object as a second parameter of the createElement function based on the tag attribute information; the context object includes bound events, parameter attributes, text information, and semantic roles; the web application generates the virtual DOM with accessibility information corresponding to the tag element based on the createElement function; The web application sends each virtual DOM containing accessibility information to the browser at once; the browser is used to render based on each virtual DOM containing accessibility information to generate an accessible webpage.

2. The method as described in claim 1, characterized in that, Generate a context object based on the tag attribute information as the second parameter of the createElement function, including: If the label attribute information includes click information, then add a click object to the bound event of the context object, and set the focus attribute value corresponding to the accessibility information in the parameter attribute of the context object.

3. The method as described in claim 1, characterized in that, Generate a context object based on the tag attribute information as the second parameter of the createElement function, including: If the label attribute information includes a disabled attribute, then an unavailable object is added to the parameter attribute of the context object, and the unavailable attribute value corresponding to the accessibility information is set in the parameter attribute of the context object.

4. The method as described in claim 1, characterized in that, Generate a context object based on the tag attribute information as the second parameter of the createElement function, including: If the label attribute information includes text information, then the text attribute value corresponding to the accessibility information is set in the parameter attribute of the context object, and the text information is set in the child node of the context object.

5. The method as described in claim 1, characterized in that, Generate a context object based on the tag attribute information as the second parameter of the createElement function, including: Determine the semantic role corresponding to the original tag name of the tag element, and set the semantic role in the parameter attribute of the context object.

6. The method as described in claim 1, characterized in that, The tag code corresponding to the tag element is matched from the page source code, including: Based on the HTML template matching rules, the HTML template code is matched from the page source code; According to the tag element matching rules, the tag code corresponding to the tag element is matched from the HTML template code.

7. An accessible webpage generation device, characterized in that, The device includes: The acquisition module is used to acquire the target webpage code corresponding to the webpage access request based on the browser's webpage access request. Each tag element in the target webpage code has an accessibility tag name and tag attribute information. The target webpage code is obtained as follows: during the compilation of the webpage source code, the page source code in the webpage source code is passed to the accessibility plugin; the tag code corresponding to the tag element is matched from the page source code; the tag code includes a tag name and tag content; the tag name is replaced with an accessibility tag name, and the tag content and the tag name are used as tag attribute information; the replaced page source code is compiled to generate the target webpage code. A generation module is used to generate a virtual DOM with accessibility information corresponding to any tag element with an accessibility tag name, based on the tag attribute information of the tag element; the tag attribute information includes the tag name of the tag element and other attribute values ​​of the tag element; the generation module is specifically used to generate the virtual DOM with accessibility information corresponding to the tag element based on the attribute information of the tag element by: generating a first parameter of the createElement function based on the tag name of the tag element, and generating a context object as a second parameter of the createElement function based on the tag attribute information; the context object includes bound events, parameter attributes, text information, and semantic roles; the web application generates the virtual DOM with accessibility information corresponding to the tag element based on the createElement function; The sending module is used to send each virtual DOM with accessibility information to the browser at once; the browser is used to render based on each virtual DOM with accessibility information to generate an accessible webpage.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed, performs the method as described in any one of claims 1 to 6.

9. A computing device, characterized in that, include: Memory, used to store program instructions; A processor is configured to invoke program instructions stored in the memory and execute the method as described in any one of claims 1 to 6 according to the obtained program.

Images