Page generation method and device, equipment and storage medium

Abstract

The embodiment of the invention provides a page generation method and device, equipment and a storage medium, and relates to the technical field of computers. The method comprises the steps of obtaining first page content of a first program product; front-end components included in the first page content are scanned, at least one problem component is determined, and the problem component refers to a front-end component without a barrier-free function; based on the at least one problem component, a barrier-free component corresponding to the at least one problem component is determined, and the barrier-free component is a front-end component with a barrier-free function; and replacing the at least one problem component with the barrier-free component corresponding to the at least one problem component to obtain second page content. Developers do not need to manually add barrier-free ability to the front-end component included in the first page content, and the construction difficulty of barrier-free products is reduced. And the barrier-free component corresponding to the problem component is automatically determined, so that the maintenance is simpler, and the maintainability and the expandability of the barrier-free product are improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page generation method, apparatus, device, and storage medium. Background Technology

[0002] Due to differences in disability types and ability levels, many people are unable to use app products conveniently.

[0003] In related technologies, after developers build the pages of the application product in the application front-end component library, they need to manually add accessibility capabilities to each icon, button, and form on the page so that the application product can meet the user's accessibility needs.

[0004] However, the above methods require developers to manually add accessibility capabilities, making the construction of accessibility application products difficult. Summary of the Invention

[0005] This application provides a page generation method, apparatus, device, and storage medium. The technical solution is as follows:

[0006] According to one aspect of the embodiments of this application, a page generation method is provided, the method comprising:

[0007] Retrieve the content of the first page of the first program product;

[0008] Scan the front-end components included in the content of the first page to identify at least one problematic component, wherein the problematic component refers to a front-end component that does not have accessibility functionality;

[0009] Based on the at least one problem component, determine the accessibility component corresponding to each of the at least one problem component, wherein the accessibility component refers to a front-end component that has the accessibility function;

[0010] The at least one problem component is replaced with the accessibility component corresponding to each problem component to obtain the content of the second page.

[0011] According to one aspect of the embodiments of this application, a page generation apparatus is provided, the apparatus comprising:

[0012] The acquisition module is used to acquire the content of the first page of the first program product;

[0013] The scanning module is used to scan the front-end components included in the content of the first page and identify at least one problematic component, wherein the problematic component refers to a front-end component that does not have accessibility functionality;

[0014] The determining module is configured to determine, based on the at least one problem component, an accessibility component corresponding to each of the at least one problem component, wherein the accessibility component refers to a front-end component that has the accessibility function;

[0015] The replacement module is used to replace the at least one problem component with the accessibility component corresponding to each of the at least one problem component to obtain the content of the second page.

[0016] According to one aspect of the present application, a computer device is provided, the computer device including a processor and a memory, the memory storing a computer program, and the processor executing the computer program to implement the above-described page generation method.

[0017] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, wherein a computer program is stored in the computer-readable storage medium, the computer program being loaded and executed by a processor to implement the above-described page generation method.

[0018] According to one aspect of the embodiments of this application, a computer program product is provided, the computer program product including a computer program, the computer program being loaded and executed by a processor to implement the above-described page generation method.

[0019] The technical solutions provided in this application embodiment may have the following beneficial effects:

[0020] By replacing non-accessible front-end components in the first page with accessible components, the resulting second page's front-end components become accessible. The detection and replacement of non-accessible front-end components in the first page are handled automatically by the terminal device, eliminating the need for developers to manually add accessibility capabilities to the first page's components, thus reducing the complexity of building accessible products. Furthermore, automatically identifying the corresponding accessible components for problematic components simplifies maintenance and improves the maintainability and scalability of accessible products. Attached Figure Description

[0021] Figure 1 This is a flowchart of a page generation method provided in one embodiment of this application;

[0022] Figure 2 This is a schematic diagram of page annotation provided in one embodiment of this application;

[0023] Figure 3 This is a schematic diagram of a front-end component library provided in one embodiment of this application;

[0024] Figure 4 This is a flowchart of a page generation method provided in one embodiment of this application;

[0025] Figure 5 This is a flowchart of a page generation method provided in another embodiment of this application;

[0026] Figure 6 This is a schematic diagram of an accessibility component library provided in one embodiment of this application;

[0027] Figure 7 This is a schematic diagram of the second page content provided in one embodiment of this application;

[0028] Figure 8 This is a flowchart of a page generation method provided in another embodiment of this application;

[0029] Figure 9 This is a schematic diagram of test results provided in one embodiment of this application;

[0030] Figure 10 This is a flowchart of a method for constructing an accessibility client according to an embodiment of this application;

[0031] Figure 11 This is a flowchart of a method for constructing an accessible webpage according to an embodiment of this application;

[0032] Figure 12 This is a block diagram of a page generation apparatus provided in one embodiment of this application;

[0033] Figure 13 This is a block diagram of a terminal device provided in one embodiment of this application. Detailed Implementation

[0034] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0035] Please refer to Figure 1 This illustration shows a schematic diagram of a system for building an accessible product according to an embodiment of this application. The system may include a terminal device 100 and a server 200.

[0036] Terminal device 100 can be an electronic device such as a PC (Personal Computer), tablet computer, mobile phone, wearable device, in-vehicle terminal, VR (Virtual Reality) device, AR (Augmented Reality) device, or MR (Mixed Reality) device. A client application for the target application can be installed and run on terminal device 100. This target application provides an accessibility component library to support the construction of accessible products. In some embodiments, the accessibility component library includes at least one accessibility component, which refers to a front-end component with accessibility functionality. Furthermore, this application does not limit the form of the target application, including but not limited to apps, mini-programs, etc., installed on terminal device 100, and can also be in web page form.

[0037] Server 200 can be a standalone physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server providing cloud computing services. Server 200 can be the backend server for the aforementioned target application, used to provide backend services to the clients of the target application.

[0038] Terminal device 100 and server 200 can communicate via a network, such as a wired or wireless network.

[0039] The page generation method provided in this application embodiment can be executed by a terminal device at each step. Figure 1 Taking the implementation environment of the scheme shown as an example, the page generation method can be executed by the terminal device 100 (such as the client of the target application installed and running in the terminal device 100 executing the page generation method).

[0040] With the popularization of the internet and the continuous expansion of its application scenarios, more and more people are beginning to access and use various digital products and services. However, due to differences in disability types and ability levels, not everyone can smoothly enjoy the convenience and value of these services. For a long time, technological advancements have greatly facilitated able-bodied individuals, but for people with disabilities, there hasn't been sufficient and targeted adaptation. They haven't enjoyed the benefits of technological progress, nor have they experienced enough convenience, and may even face more inconveniences. For visually impaired individuals, although accessibility technology has greatly improved their online experience, some technical shortcomings still exist, such as compatibility issues, lagging technology updates, over-reliance on developer awareness and skills, limitations of automated testing, and cost and resource constraints. These problems can cause accessibility functions to malfunction in certain environments, affecting the online experience for visually impaired individuals. Front-end technology, as a bridge between the internet and users, is directly related to user experience and is an indispensable link. As the number of users of various application products increases, application product developers are paying more attention to user experience and social responsibility, aiming to improve the accessibility experience of application products and solve related problems.

[0041] Accessibility features in related technologies often lack dedicated support for front-end component libraries. This forces developers to manually add accessibility functionality to each icon, button, and form, a method that is inefficient and prone to errors. Secondly, the lack of unified standards and tools can lead to inconsistencies in accessibility implementations by different developers, increasing the difficulty of subsequent management and expansion. Furthermore, manually adding accessibility logic can result in redundant and disorganized code, increasing maintenance complexity and impacting the project's maintainability and scalability.

[0042] In related technologies, such as Figure 2As shown, ARIA (Accessible Rich Internet Applications) technology is used to annotate the page content 210 of the program product. ARIA is a technology used to improve the accessibility of web applications, allowing developers to add additional semantic information to page content to help assistive technologies identify and process this content. Developers need to manually annotate semantic HTML (HyperText Markup Language) tags to ensure that the correct HTML tags are used to represent the page structure so that assistive technologies such as screen readers can correctly parse the page content. Afterwards, it is also necessary to ensure that CSS (Cascading Style Sheets) styles and layouts do not affect page accessibility; for example, avoid using absolute positioning that would prevent elements from being accessed by screen readers. Related technologies also provide component libraries and UI (User Interface) frameworks, such as TDesign and Ant Design, which provide a set of predefined development methods for developers to use. For example, such as... Figure 3 The component libraries shown are examples of UI frameworks that can improve development efficiency, but they typically do not include accessibility features specific to the product. Therefore, developers need to implement this functionality themselves to adhere to certain product accessibility design principles.

[0043] However, the methods described above lack tools specifically for accessibility development in app products. The tools and methods in these technologies typically focus on the overall user experience rather than the interactions of specific pages. This makes it difficult for developers to obtain detailed information about accessibility usage, hindering targeted optimization. Developers need to manually add accessibility capabilities to every icon, button, etc., on the page. This approach is costly, inefficient, and lacks standardized specifications, making it difficult to guarantee the quality of development. Furthermore, manually adding accessibility features to every icon and button on the page can lead to code redundancy and clutter, increasing maintenance difficulty and impacting the project's maintainability and scalability.

[0044] This application provides a page generation method that can use front-end components from an accessibility component library to build accessible products. The aim is to enable application products to automatically possess accessibility functionality when using accessibility components from the library. This method not only improves development efficiency but also ensures the accessibility quality of the application product.

[0045] Please refer to Figure 4 The diagram illustrates a flowchart of a page generation method provided in one embodiment of this application. The method is executed by a terminal device and includes at least one of the following steps 410 to 440.

[0046] Step 410: Obtain the content of the first page of the first program product.

[0047] In some embodiments, the first program product is a program product different from the target application. In some embodiments, the form of the first program product is not limited, including but not limited to Apps, mini-programs, etc. installed on the terminal device 100, and may also be in the form of a webpage.

[0048] In some embodiments, the first program product and the target application may run on the same terminal device or on different terminal devices. In some embodiments, if the first program product and the target application run on different terminal devices, there is a communication connection between the different terminal devices.

[0049] In some embodiments, the content of the first page can be the content of any page in the first application product. In some embodiments, the content of the first page includes elements included in the first page. For example, the content of the first page includes front-end components included in the first page.

[0050] In some embodiments, the method is performed by a target application. In some embodiments, the target application is an application that provides an accessibility component library. In some embodiments, the target application sends a request message to a first program product for retrieving first page content. In response to receiving the request message, the first program product sends the first page content to the target application.

[0051] In some embodiments, a front-end component library is a collection of pre-developed user interface (UI) components and elements that can be used to build the front-end interface of a web application. These components typically include commonly used UI elements such as buttons, forms, navigation bars, and dialog boxes. The purpose of a front-end component library is to help developers quickly build consistent, aesthetically pleasing, and easily maintainable web interfaces.

[0052] In some embodiments, a component refers to a reusable code module with specific functionality and independence in software development. Components typically encapsulate certain business logic and functions, and can be embedded as independent units into other applications or systems. Component development can improve code maintainability, scalability, and reusability, while reducing development costs and time.

[0053] Step 420: Scan the front-end components included in the content of the first page to identify at least one problematic component. A problematic component is a front-end component that does not have accessibility functionality.

[0054] In some embodiments, accessibility refers to a design and implementation approach that enables all people (including people with disabilities, the elderly, etc.) to have equal access to and use of facilities, services, and resources. In the computer and internet fields, accessibility generally refers to the functionality that allows all users to easily access and use websites, applications, and devices. This includes providing support for assistive technologies (such as screen readers, amplifiers, voice input, etc.) and ensuring that content and operation are understandable and usable for all users. In some embodiments, accessibility functionality refers to functionality that enables the realization of the above-described accessibility concept.

[0055] In some embodiments, web accessibility refers to a design and implementation approach that enables all users, including people with disabilities and the elderly, to equally access and use website content and functionality. The goal of web accessibility is to ensure that websites are open to everyone, regardless of their abilities or technical skills. This means that websites should be user-friendly for various assistive technologies (such as screen readers, amplifiers, voice input, etc.) and easy to use and understand.

[0056] In some embodiments, to meet accessibility requirements, front-end components need to adhere to accessibility design principles and guidelines during the construction process. In some embodiments, an accessibility development approach is a method of considering accessibility requirements during the design and development process to ensure that the application product is accessible and usable by all users, including people with disabilities and the elderly. This typically includes following accessibility design principles and guidelines (such as WCAG (Web Content Accessibility Guidelines)), using semantic HTML tags, appropriate ARIA attributes, clear navigation, and understandable content. The goal of the accessibility development approach is to create more inclusive and user-friendly products that improve user experience and meet legal requirements.

[0057] In some embodiments, a problematic component refers to a front-end component that lacks accessibility functionality. In some embodiments, accessibility functionality includes multiple functions, and a problematic component refers to a front-end component that lacks any one or more of these functions.

[0058] In some embodiments, accessibility features may include one or more of the following: support for keyboard access, support for screen readers, and support for high contrast mode.

[0059] Step 430: Based on at least one problem component, determine the accessibility component corresponding to each of the at least one problem component. An accessibility component refers to a front-end component with accessibility functionality.

[0060] In some embodiments, the accessibility component has at least one of the following characteristics: having ARIA attributes, having keyboard accessibility, supporting screen readers, supporting high contrast mode, supporting adjusting color contrast, and supporting customization.

[0061] In some embodiments, the accessibility component is an accessibility component in the accessibility component library provided by the target application. In some embodiments, for any problem component, an accessibility component corresponding to that problem component is searched in the accessibility component library.

[0062] Step 440: Replace at least one problem component with an accessibility component corresponding to at least one problem component to obtain the content of the second page.

[0063] In some embodiments, an accessibility component is used to replace the problem component included in the content of the first page, so that the corresponding front-end component can have accessibility functionality.

[0064] In some embodiments, certain front-end components included in the second page content have accessibility functionality. In some embodiments, these front-end components may be front-end components that carry the functions and / or information of the first page, such as buttons, forms, images, etc. In some embodiments, front-end components that do not have accessibility functionality are front-end components that do not carry the functions and / or information of the first page, such as the background of the first page. In some embodiments, all front-end components included in the second page content have accessibility functionality.

[0065] In some embodiments, accessibility features include multiple functions, and the front-end components included in the second page content may have one or more of these functions. For example, all front-end components included in the second page content support keyboard access.

[0066] In some embodiments, the criteria for determining the problematic component in step 420 are related to the accessibility features required by the first application product. For example, if the accessibility feature required by the first application product is support for keyboard access, then the problematic component determined in step 420 is a front-end component that does not support keyboard access. All front-end components included in the second page content obtained in step 440 support keyboard access.

[0067] The technical solution provided in this application replaces front-end components that lack accessibility functionality in the first page content with accessible components, enabling the front-end components included in the resulting second page content to have accessibility functionality. The detection and replacement of the front-end components lacking accessibility functionality in the first page content are automatically implemented by the terminal device, eliminating the need for developers to manually add accessibility capabilities to the front-end components included in the first page content, thus reducing the difficulty of building accessible products. Furthermore, automatically identifying the accessible components corresponding to problematic components simplifies maintenance and improves the maintainability and scalability of accessible products.

[0068] Please refer to Figure 5 The diagram illustrates a flowchart of a page generation method provided in one embodiment of this application. The method includes at least one of the following steps 510 to 590.

[0069] Step 510: Obtain the content of the first page of the first program product.

[0070] In some embodiments, the target application sends a request message to the first application product, which requests the content of a first page. In some embodiments, the request message is an HTTP (Hypertext Transfer Protocol) request. In some embodiments, the target application and the first application product communicate through an interface. Exemplarily, the target application and the first application product communicate through an API (Application Programming Interface) or a third-party library. In some embodiments, a third-party library refers to a reusable code module written and provided by a third-party developer to implement a specific function or solve a specific problem. Third-party libraries are typically designed to be general-purpose and can be integrated into applications by other developers, thereby avoiding redundant development and saving time and effort. In this embodiment, a third party refers to a third party other than the target application and the first application product. In some embodiments, the third-party library application implements communication between the target application and the first application product.

[0071] In some embodiments, upon receiving the request information, the first program product sends a response message to the target application. In some embodiments, the response message includes the content of a first page. In some embodiments, the response message includes the HTML source code of the first page. In some embodiments, the HTML source code is the basis for constructing the first page.

[0072] In some embodiments, the content of the first page of the first program product is obtained through an asynchronous function. In some embodiments, the source code of the content of the first page of the first program product is obtained through an asynchronous function. In some embodiments, the HTML source code of the content of the first page of the first program product is obtained through an asynchronous function.

[0073] In some embodiments, the source code is parsed to obtain a page structure tree. In some embodiments, the page structure tree includes page elements from the first page content. In some embodiments, page elements include front-end components. Exemplarily, the page structure tree is a first DOM tree. Exemplarily, the HTML source code is parsed to obtain a first DOM (Document Object Model) tree, which includes page elements from the first page content. Exemplarily, the HTML source code is parsed using JavaScript. In some embodiments, the HTML source code is parsed using the DOMParser API in JavaScript. In some embodiments, the HTML string in the HTML source code is converted into a DOM object using the DOMParser API to obtain the first DOM tree.

[0074] In some embodiments, the source code is parsed using a source code parser to obtain a page structure tree. For example, the HTML source code is parsed using an HTML parser to obtain a first DOM tree.

[0075] Step 520: Traverse the page structure tree. The page structure tree includes page elements in the content of the first page, and page elements include front-end components.

[0076] In some embodiments, the page structure tree is used to represent the page structure of the first page content. Exemplarily, it is used to represent the hierarchical structure of page elements within the first page content. In some embodiments, the page structure tree is a first DOM tree.

[0077] In some embodiments, the page structure tree is traversed to determine the front-end components included in the page structure tree. In some embodiments, in addition to the front-end components, the page structure tree also includes other elements or parameters from the first page content. The page structure tree is traversed to filter out content related to the front-end components. For example, the first DOM tree is traversed to determine the front-end components included in the first DOM tree.

[0078] Step 530: Check whether the front-end components included in the page structure tree have accessibility features.

[0079] In some embodiments, it is checked whether the front-end components included in the page structure tree have accessibility functionality, that is, whether the front-end components included in the page structure tree have the attributes corresponding to accessibility functionality. For example, it is checked whether the front-end components included in the first DOM tree have accessibility functionality.

[0080] In some embodiments, checking whether the front-end components included in the page structure tree have accessibility features may include at least one of the following:

[0081] If the front-end component is an image component and the front-end component has a first attribute, it is determined that the front-end component has accessibility functionality. The first attribute is used to describe relevant information about the image component.

[0082] If the front-end component is a form element component and has associated tags, then the front-end component has accessibility functionality.

[0083] If a front-end component has the Accessibility Rich Internet Application (ARIA) attribute, then the front-end component has accessibility functionality.

[0084] If the front-end component has a corresponding event handler, it is determined that the front-end component has accessibility functionality. The event handler is used to support keyboard operation in the front-end component.

[0085] In some embodiments, the first attribute refers to the alt attribute. In some embodiments, the first attribute is used to add semantic information to the image component to enable the screen reader to describe the image component based on the first attribute.

[0086] In some embodiments, the associated label can refer to an associated label or an ARIA attribute, such as aria-label or aria-labelledby. In some embodiments, the associated label is used to describe the form element component. When a screen reader is used, for a form element component, the screen reader can read out its associated labels to allow the user to obtain information such as the function and / or style of the form element component.

[0087] In some embodiments, the event handler corresponding to the front-end component is checked. If the front-end component does not have a corresponding event handler, it is determined that the front-end component does not have accessibility functionality; if the front-end component has a corresponding event handler, it is determined that the front-end component has accessibility functionality. In some embodiments, when the front-end component has a corresponding event handler, it is checked whether the keyboard key bound to the front-end component in the event handler corresponds to the keyboard access rules of the first application product. In some embodiments, if the keyboard key bound to the front-end component corresponds to the keyboard access rules of the first application product, it indicates that the front-end component supports keyboard access and has accessibility functionality. If the keyboard key bound to the front-end component does not correspond to the keyboard access rules of the first application product, it indicates that the front-end component does not support keyboard access and does not have accessibility functionality. For example, in the keyboard access rules of the first application product, the keyboard key bound to the front-end component is Y, while the keyboard key bound to the event handler corresponding to the front-end component is C. Since they are different, the user cannot determine which keyboard key to use to access the front-end component.

[0088] In some embodiments, the process of checking whether the front-end components included in the page structure tree have accessibility functionality may include the following steps:

[0089] Check the alt attribute of the image component;

[0090] Check the associated labels of form element components;

[0091] Check ARIA properties;

[0092] Other related checks.

[0093] In some embodiments, the process of checking whether the front-end components included in the page structure tree have accessibility functionality can be automated through code.

[0094] Step 540: Front-end components that do not have accessibility features are identified as problematic components.

[0095] In some embodiments, accessibility features include multiple functions, and problematic components are identified based on the accessibility requirements of the first application product. For example, if the accessibility requirement of the first application product is keyboard accessibility, then only the event handlers of the front-end component may be examined. In some embodiments, where the accessibility requirements of the first application product include multiple accessibility features, if the front-end component lacks any one or more of these features, it is identified as a problematic component; if the front-end component possesses all of these features, it is not identified as a problematic component.

[0096] In some embodiments, after identifying the problematic components, the target application outputs a list of accessibility issues, which includes at least one of the aforementioned problematic components. In some embodiments, the accessibility issue list is stored in the target application. In some embodiments, the accessibility issue list may also be stored in the first application product.

[0097] In some embodiments, the content of a first page is first obtained, the source code of the first page content is parsed to obtain a page structure tree, and the page structure tree is scanned to identify the problematic component. For example, the HTML source code corresponding to the first page content is obtained, the HTML source code is parsed to obtain a first DOM tree, and the problematic component is identified by traversing the first DOM tree.

[0098] Step 550: Search the accessibility component library to obtain at least one accessibility component corresponding to each problem component. The accessibility component library includes at least one accessibility component.

[0099] In some embodiments, to implement a front-end component library that supports accessibility design principles, an accessibility component library is implemented based on Vue. In some embodiments, the accessibility components in the accessibility component library already have built-in features such as WAI-ARIA attributes, good keyboard accessibility, screen reader support, and support for high-contrast modes. Furthermore, the accessibility components in the accessibility component library are highly customizable to allow for accessibility optimization according to product needs, such as adjusting color contrast through CSS styles to increase visual accessibility.

[0100] In some embodiments, the accessibility component library includes at least one component set, and each component set includes at least one accessibility component. In some embodiments, the component sets are categorized based on one or more of the functionality, style, and identifier of the accessibility components. In some embodiments, the accessibility component library searches for a corresponding accessibility component based on the functionality of the problematic component. In some embodiments, the accessibility component library searches for a corresponding accessibility component based on the style of the problematic component. In some embodiments, the accessibility component library searches for a corresponding accessibility component based on the identifier of the problematic component.

[0101] In some embodiments, each accessible component in the accessibility component library is categorized and named to facilitate searching for or selecting a suitable accessible component. In some embodiments, the corresponding accessible component in the accessibility component library is searched based on the description of the problem component in the page structure tree.

[0102] Step 560: For the first accessible component in at least one accessible component, obtain the first demo code corresponding to the first accessible component, wherein the first accessible component is the accessible component corresponding to the first problem component in at least one problem component.

[0103] In some embodiments, each accessibility component in the accessibility component library provides corresponding demo code. In some embodiments, the demo code is used to implement the functionality of the accessibility component. In some embodiments, the demo code includes code that implements the accessibility functionality of the accessibility component. In some embodiments, the demo code includes configuration parameters for the accessibility component, which need to be set by the developer based on the requirements of the first application product.

[0104] In some embodiments, the configuration parameters of the accessibility component include at least one of the following: type, size, text, loading state, loading mode, whether to display a thin border for the button, button shape, whether the background color is transparent, whether to disable, type used in the form component, throttling time, setting the button color, and external styles to be used. For example, such as... Figure 6 The configuration parameters 620 for button component 610 are shown.

[0105] In some embodiments, the demo code can be edited in a code editor.

[0106] In some embodiments, the design process of an accessibility component takes into account information such as the main title, type, size, and text of the accessibility component.

[0107] Step 570: Replace the demo code corresponding to at least one problem component with the demo code corresponding to at least one accessibility component to obtain the demo code corresponding to the second page content. The demo code corresponding to the second page content is used to respond to operations on the second page content.

[0108] In some embodiments, for any one of the at least one problem component described above, the demo code corresponding to that problem component is replaced with the demo code of the accessibility component corresponding to that problem component to obtain the demo code corresponding to the second page content. In some embodiments, the demo code of the second page content is sent to the first program product, and the first program product runs the demo code of the second page content to display the second page content. For example, after running the demo code of the second page content, the following is displayed: Figure 7 The second page content 710 is shown. The second page content after applying accessibility components supports accessibility features, such as indicating a screen reader and having a read-aloud button 711 when focused.

[0109] Step 580: Adjust the tag index attribute of at least one accessibility component so that the content of the second page is compatible with the keyboard access rules of the first program product. The tag index attribute is used to determine the binding relationship between the front-end component and the keyboard key.

[0110] In some embodiments, after determining the accessibility component, the configuration parameters of the accessibility component can also be adjusted. Here, step 580 is illustrated using the tag index attribute of the accessibility component as an example.

[0111] In some embodiments, the tabindex property of the accessibility component is adjusted to achieve the keyboard navigation order desired by the user. In some embodiments, the keyboard navigation order is the binding relationship between the accessibility component and the keyboard keys. In some embodiments, the first program product accepts set event handlers, allowing users to perform common operations such as opening / closing dialog boxes and switching tabs via keyboard shortcuts.

[0112] Step 590, in response to an edit operation on a second accessible component in at least one accessible component, modify at least one of the functions and styles of the second accessible component.

[0113] In some embodiments, the font, font size, line height, color contrast, and other parameters in the accessibility components can be adjusted to ensure visual accessibility. In some embodiments, the accessibility components adopt a plug-in design, allowing developers to load and extend components on demand, and providing rich APIs and hook functions to implement custom component functions and styles, achieving configurability and extensibility. This not only improves the flexibility of the accessibility component library but also enhances the user experience and satisfaction of the first application product.

[0114] The technical solution provided in this application replaces the front-end components that do not have accessibility functionality in the first page content with accessibility components, so that the front-end components included in the second page content after replacement have accessibility functionality. Developers can also adjust the configuration parameters of the accessibility components, or customize the functions and / or styles of the accessibility components, so as to realize the configurability and extensibility of the accessibility components, making the accessibility component library highly flexible, and the accessibility products built based on the accessibility component library can also have higher maintainability and scalability.

[0115] Please refer to Figure 8 The diagram illustrates a flowchart of a page generation method provided in another embodiment of this application. After configuring the second page content, the target application also supports accessibility testing of the second page content and adjustments based on feedback.

[0116] In some embodiments, an automated accessibility test is performed on the content of the second page to obtain test results, which include at least one of the following: at least one test item, test issues existing in the content of the second page, and recommended fixes; if the test results include test issues existing in the content of the second page, the content of the second page is fixed to obtain the fixed content of the second page.

[0117] In some embodiments, automated accessibility testing is provided by the target application. In some embodiments, automated accessibility testing automatically triggers an accessibility detection tool via a scheduled task to check the demo code of the second page content to automatically identify accessibility issues. Exemplarily, automated accessibility testing can identify at least one of the following issues: missing text tags, insufficient color contrast, and invalid HTML structure. In some embodiments, the accessibility detection tool is axe-core. In some embodiments, the scheduled task is pre-recorded. In some embodiments, the target application can provide multiple accessibility testing schemes, and developers can select a target accessibility testing scheme based on the second page content. In some embodiments, different accessibility testing schemes include different scheduled tasks.

[0118] In some embodiments, in addition to automated accessibility testing, this application also supports developers in manually testing the content of the second page. In some embodiments, the target application provides a simulated interface for the second page content, in which developers can manually test the content. In some embodiments, the target application receives a user's test instruction and simulates the corresponding assistive technology operation based on the test instruction to check whether the front-end component supports access to assistive technologies and whether the front-end component can run on different versions of devices or websites. In some embodiments, the aforementioned assistive technologies include keyboard access, screen readers, etc.

[0119] In some embodiments, after performing the automated accessibility tests and manual tests described above, the target application may collect the data generated during the testing process and generate test results. In some embodiments, the test results include at least one of the following: at least one test item, test issues existing in the second page content, and recommended fixes.

[0120] In some embodiments, if the test results include a test issue with the content of the second page, the target application triggers a remediation process. In some embodiments, the remediation process includes at least one of the following: creating an issue report, assigning a remediation task, modifying code, and retesting. In some embodiments, the test results are as follows: Figure 9 As shown, test results 900 display a test overview 910 and test conclusions 920.

[0121] In some embodiments, after determining that the second page content meets accessibility requirements, the first application product can apply the second page content. In some embodiments, after the second page content is applied, the target application can also monitor user feedback on the second page content to continuously update the accessibility component library.

[0122] In some embodiments, feedback information from a first program product is obtained, which reflects the application status of the content on the second page; based on the feedback information, accessibility components are optimized.

[0123] In some embodiments, feedback information related to accessibility issues from a first application product is obtained. In some embodiments, whether the feedback information is related to accessibility issues can be determined by analysis of the first application product or by analysis of the target application.

[0124] In some embodiments, the feedback information is parsed to obtain accessibility issues included in the feedback information; and the configuration information of the accessibility components is adjusted for the accessibility issues.

[0125] In some embodiments, the configuration information of the accessibility component corresponding to the accessibility issue in the feedback information is adjusted. In some embodiments, the configuration information of the accessibility component may include the demo code of the accessibility component, the elements included in the accessibility component, the style of the accessibility component, etc.

[0126] The technical solutions provided in this application require extensive testing to ensure that the first program product meets accessibility requirements. Integrating automated testing capabilities into an accessibility component library can help development teams conduct accessibility testing more effectively, such as automatically detecting issues like color contrast and text readability. By using automated testing tools, teams can simplify the testing process and improve development efficiency and quality.

[0127] In some embodiments, building an accessibility-enabled front-end component presents numerous challenges. First, compatibility is a critical issue, as different browsers, operating systems, and devices may offer varying levels of support for accessibility features. To ensure the component functions correctly across diverse environments, a deep understanding of different assistive technologies is necessary, along with compatibility strategies to address potential differences. Specific considerations include Android / iOS compatibility and system versions.

[0128] Secondly, interaction design needs to cater to all users, especially those who rely on the keyboard. This means components must provide clear keyboard focus management, ensuring users can easily navigate and manipulate components using the keyboard. To achieve this, developers need to follow accessibility guidelines such as WAI-ARIA, providing appropriate semantic markup and keyboard event handling for components.

[0129] Furthermore, screen reader support is crucial for visually impaired users. Accessibility components need to provide accurate semantic information and descriptions so that screen readers can translate them into voice prompts. Careful consideration is needed on how to add appropriate ARIA attributes to accessibility components and ensure that screen readers can correctly interpret this information. Color and contrast design are equally important, as low-vision users may have difficulty recognizing text and graphics with low color or low contrast. To meet the needs of these users, appropriate color schemes need to be selected, and sufficient contrast must be ensured for accessibility components.

[0130] When accessibility component content is dynamically updated, screen reader users need to be notified to avoid them missing important information. This can be achieved by using ARIA's "aria-live" attribute, which marks the areas of dynamic updates that need to be notified to screen readers.

[0131] Implementing accessibility features for complex components, such as tables, tree controls, or form controls, is more challenging. It requires a deep understanding of accessibility specifications and the implementation of each part of the component individually to ensure they meet the needs of different users.

[0132] In some embodiments, the technical solutions provided in this application can be applied to the development process of various program products. For example, they can be applied to the development process of accessible clients or accessible web pages.

[0133] I. Accessible Client

[0134] In some embodiments, the first program product is implemented as an accessibility client, the first page content is implemented as the first client page content, and the second page content is implemented as the second client page content. Please refer to [reference needed]. Figure 10 The diagram illustrates a flowchart of a method for constructing an accessibility client according to an embodiment of this application. The method may include at least one of the following steps 1010 to 1040.

[0135] Step 1010: Obtain the content of the first client page of the accessibility client.

[0136] Step 1020: Scan the front-end components included in the content of the first client page to identify at least one problematic component. A problematic component refers to a front-end component that does not have accessibility functionality.

[0137] In some embodiments, the page structure tree is traversed, the page structure tree includes page elements in the content of the first client page, and the page elements include front-end components; it is checked whether the front-end components included in the page structure tree have accessibility functionality; front-end components that do not have accessibility functionality are identified as problem components.

[0138] In some embodiments, checking whether the front-end components included in the page structure tree have accessibility features includes at least one of the following:

[0139] If the front-end component is an image component and the front-end component has a first attribute, it is determined that the front-end component has accessibility functionality. The first attribute is used to describe relevant information about the image component.

[0140] If the front-end component is a form element component and has associated tags, then the front-end component has accessibility functionality.

[0141] If a front-end component has the Accessibility Rich Internet Application (ARIA) attribute, then the front-end component has accessibility functionality.

[0142] If the front-end component has a corresponding event handler, it is determined that the front-end component has accessibility functionality. The event handler is used to support keyboard operation in the front-end component.

[0143] Step 1030: Based on at least one problem component, determine the accessibility component corresponding to each of the at least one problem component. An accessibility component refers to a front-end component with accessibility functionality.

[0144] In some embodiments, an accessibility component corresponding to at least one problematic component is obtained by searching in the accessibility component library, and the accessibility component library includes at least one accessibility component.

[0145] Step 1040: Replace at least one problem component with an accessibility component corresponding to at least one problem component to obtain the content of the second client page.

[0146] In some embodiments, the accessibility component has at least one of the following characteristics: having ARIA attributes, having keyboard accessibility, supporting screen readers, supporting high contrast mode, supporting adjusting color contrast, and supporting customization.

[0147] In some embodiments, for a first accessible component among at least one accessibility component, a first demo code corresponding to the first accessible component is obtained, wherein the first accessible component is an accessible component corresponding to a first problem component among at least one problem component; the demo code corresponding to at least one problem component is replaced with the demo code corresponding to each of the at least one accessible component to obtain the demo code corresponding to the second client page content, and the demo code corresponding to the second client page content is used to respond to operations on the second client page content.

[0148] In some embodiments, the tag index attribute of at least one accessibility component is adjusted so that the content of the second client page is compatible with the keyboard access rules of the accessibility client, the tag index attribute being used to determine the binding relationship between the front-end component and the keyboard keys; in response to an edit operation on the second accessibility component among the at least one accessibility component, at least one of the functions and styles of the second accessibility component is modified.

[0149] In some embodiments, automated accessibility testing is performed on the content of the second client page to obtain test results, which include at least one of the following: at least one test item, test issues existing in the content of the second client page, and recommended remediation solutions; if the test results include test issues existing in the content of the second client page, the content of the second client page is repaired to obtain the repaired content of the second client page.

[0150] In some embodiments, feedback information from the accessibility client is obtained, which reflects the application status of the content on the second client page; based on the feedback information, the accessibility component is optimized.

[0151] In some embodiments, the feedback information is parsed to obtain accessibility issues included in the feedback information; and the configuration information of the accessibility components is adjusted for the accessibility issues.

[0152] II. Accessible Web Pages

[0153] In some embodiments, the first program product is implemented as an accessible webpage, the first page content is implemented as first webpage content, and the second page content is implemented as second webpage content. Please refer to [reference needed]. Figure 11 The diagram illustrates a flowchart of a method for constructing an accessible webpage according to an embodiment of this application. The method may include at least one of the following steps 1110 to 1140.

[0154] Step 1110: Obtain the first page content of the accessible webpage.

[0155] Step 1120: Scan the front-end components included in the content of the first webpage and identify at least one problematic component. A problematic component is a front-end component that does not have accessibility functionality.

[0156] In some embodiments, the page structure tree is traversed, the page structure tree includes page elements in the first web page content, and the page elements include front-end components; it is checked whether the front-end components included in the page structure tree have accessibility functionality; front-end components that do not have accessibility functionality are identified as problem components.

[0157] In some embodiments, checking whether the front-end components included in the page structure tree have accessibility features includes at least one of the following:

[0158] If the front-end component is an image component and the front-end component has a first attribute, it is determined that the front-end component has accessibility functionality. The first attribute is used to describe relevant information about the image component.

[0159] If the front-end component is a form element component and has associated tags, then the front-end component has accessibility functionality.

[0160] If a front-end component has the Accessibility Rich Internet Application (ARIA) attribute, then the front-end component has accessibility functionality.

[0161] If the front-end component has a corresponding event handler, it is determined that the front-end component has accessibility functionality. The event handler is used to support keyboard operation in the front-end component.

[0162] Step 1130: Based on at least one problem component, determine the accessibility component corresponding to each of the at least one problem component. An accessibility component refers to a front-end component with accessibility functionality.

[0163] In some embodiments, an accessibility component corresponding to at least one problematic component is obtained by searching in the accessibility component library, and the accessibility component library includes at least one accessibility component.

[0164] Step 1140: Replace at least one problem component with an accessibility component corresponding to at least one problem component to obtain the content of the second webpage.

[0165] In some embodiments, the accessibility component has at least one of the following characteristics: having ARIA attributes, having keyboard accessibility, supporting screen readers, supporting high contrast mode, supporting adjusting color contrast, and supporting customization.

[0166] In some embodiments, for a first accessible component among at least one accessibility component, a first demo code corresponding to the first accessible component is obtained, wherein the first accessible component is an accessible component corresponding to a first problem component among at least one problem component; the demo code corresponding to at least one problem component is replaced with the demo code corresponding to each of the at least one accessible component to obtain the demo code corresponding to the second web page content, and the demo code corresponding to the second web page content is used to respond to operations on the second web page content.

[0167] In some embodiments, the tag index attribute of at least one accessibility component is adjusted to make the second web page content applicable to the keyboard access rules of the accessibility web page, the tag index attribute being used to determine the binding relationship between the front-end component and the keyboard keys; in response to an editing operation on the second accessibility component among the at least one accessibility component, at least one of the functions and styles of the second accessibility component is modified.

[0168] In some embodiments, an automated accessibility test is performed on the second webpage content to obtain test results, which include at least one of the following: at least one test item, test problems existing in the second webpage content, and recommended repair solutions; if the test results include test problems existing in the second webpage content, the second webpage content is repaired to obtain repaired second webpage content.

[0169] In some embodiments, feedback information from an accessible webpage is obtained, which reflects the application status of the second webpage content; based on the feedback information, the accessibility component is optimized.

[0170] In some embodiments, the feedback information is parsed to obtain accessibility issues included in the feedback information; and the configuration information of the accessibility components is adjusted for the accessibility issues.

[0171] Of course, the technical solutions provided in this application can also be applied to the construction process of accessible mini-programs, or to the construction process of other accessible program products, such as the construction process of accessible quick apps. This application will not elaborate on these in detail here.

[0172] The technical solutions provided in this application aim to improve the development efficiency of accessible application products and optimize their user experience, thereby helping users better utilize these products. Specifically, the technical solutions provided in this application can help solve the following product-level problems:

[0173] I. Improve the usability and accessibility of accessibility application products

[0174] Improving the usability and accessibility of accessible application products is one of the core goals of accessibility development. By ensuring that accessible application products can be accessed and understood by all users (including people with disabilities), accessibility development can improve the overall usability of accessible application products, thereby expanding the user base and increasing market share and user satisfaction.

[0175] 1.1 Enhance product usability

[0176] Accessibility development focuses on the usability of accessible application products, ensuring that all users can easily get started and use them efficiently. This includes optimizing navigation, layout, and text readability so that users of all skill levels can quickly find the information and functions they need. By improving the usability of accessible application products, businesses can attract more potential customers and increase user retention rates.

[0177] 1.2 Optimize Interaction Design

[0178] Accessibility development emphasizes optimizing interaction design to meet the needs of diverse users. For example, providing visually impaired users with sufficient color contrast and large font options; offering visual cues and subtitles for hearing-impaired users; and providing easy-to-use input methods for users with mobility limitations. Optimizing interaction design ensures that accessible applications meet the needs of different users and improves their accessibility.

[0179] 1.3 Support for auxiliary technologies

[0180] Accessible development ensures that accessible application products are compatible with various assistive technologies, such as screen readers and speech recognition software. These assistive technologies help users with disabilities better access and use accessible application products. By supporting assistive technologies, companies can further expand their user base and increase the market share of accessible application products.

[0181] 1.4 Adaptable to diverse equipment and environments

[0182] With the widespread adoption of mobile devices and the continuous development of the internet, users' needs for using products on different devices and in different environments are increasing. Accessibility development takes these changes into account, ensuring that accessible application products function properly on different devices (such as smartphones, tablets, laptops, etc.) and in different environments (such as low light, noise interference, etc.). This will help improve the usability and accessibility of accessible application products, meeting the needs of more users.

[0183] II. Improve development efficiency and team collaboration

[0184] Accessibility development methods based on accessibility component libraries enable cross-business reuse of these libraries, reducing repetitive work and lowering development and maintenance costs. Furthermore, combining them with automated testing tools and best practices simplifies the accessibility testing process, further improving development efficiency.

[0185] 2.1 Leveraging the advantages of the accessibility component library

[0186] An accessibility component library is a reusable codebase containing a set of pre-built UI components and functional modules. By using the accessibility component library, developers can quickly build application interfaces that conform to accessibility standards. This not only saves time and effort but also ensures consistency and accessibility of accessible application products across projects.

[0187] 2.2 Use automated testing tools

[0188] To ensure that accessible application products meet accessibility standards, extensive testing is required. Integrating automated testing capabilities into component libraries can help development teams conduct accessibility testing more effectively, such as automatically detecting issues like color contrast and text readability. By using automated testing tools, teams can streamline the testing process, improving development efficiency and quality.

[0189] 2.3 Establish an accessible development process and best practices

[0190] Implementing accessible development requires a clear process and a set of best practices. This includes creating accessibility requirements documents, conducting accessibility design reviews, and writing accessible code standards. By establishing accessible development processes and best practices, teams can ensure that accessibility is a constant focus throughout the development process, improving the accessibility of accessible application products.

[0191] 2.4 Promote team collaboration and knowledge sharing

[0192] Accessibility development methodologies based on accessibility component libraries encourage team members to adhere to unified standards and specifications. This helps promote knowledge sharing and team collaboration, improving the overall technical skills of the team and the quality of accessibility application products. Simultaneously, by sharing experiences and lessons learned in accessibility development, the team can continuously learn and improve, laying a solid foundation for the company's long-term development.

[0193] The technical solutions provided in this application embodiment can have the following beneficial effects:

[0194] 1. Reduced Development Costs and Improved R&D Efficiency: The technical solution provided in this application offers developers an efficient and practical method for developing accessible application products. By using an accessible component library, developers can reuse existing accessible code and components, thereby reducing the time and effort spent writing and debugging new code. Accessible development specifications and guidelines provide developers with a unified development standard, avoiding code inconsistencies caused by different developers' personal habits and reducing maintenance and iteration costs.

[0195] 2. Enhanced User Experience: Accessible design ensures that all users (including people with disabilities) can equally use and enjoy accessible application products and services, improving the universality and user satisfaction of accessible application products. The accessibility component library provides well-designed and optimized user interface components, making the interface of accessible application products more beautiful and easy to use, thus enhancing the overall user experience.

[0196] 3. Improve the quality of accessibility application products: Accessibility component libraries typically undergo rigorous testing and quality control to ensure code stability and reliability. Accessibility development standards require accessibility application products to fully consider various possible user scenarios and needs during the design, development, and testing processes, thereby improving the robustness and adaptability of accessibility application products.

[0197] 4. Accelerate Development: The accessibility component library provides a wealth of pre-built components and functional modules, allowing developers to quickly build prototypes and implement features, shortening the development cycle. Automated tools and checklists for accessibility development help developers promptly identify and fix accessibility issues, avoiding the tedious process of manual testing and modification.

[0198] 5. Enhance the accessibility and maintainability of accessible application products: Accessibility design ensures that accessible application products can be correctly parsed and used by various assistive technologies (such as screen readers), improving the accessibility of accessible application products. The modular design of the front-end component library makes the code structure clear and easy to understand, facilitating later maintenance and upgrades.

[0199] The following are embodiments of the apparatus described in this application, which can be used to execute the embodiments of the method described in this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the method described in this application.

[0200] Please refer to Figure 12 This diagram illustrates a block diagram of a page generation apparatus according to an embodiment of this application. The apparatus has the functionality to implement the method example described above; this functionality can be implemented in hardware or by hardware executing corresponding software. The apparatus can be the terminal device described above, or it can be installed within a terminal device. For example... Figure 12 As shown, the device 1200 includes: an acquisition module 1210, a scanning module 1220, a determination module 1230, and a replacement module 1240.

[0201] The acquisition module 1210 is used to acquire the content of the first page of the first program product.

[0202] The scanning module 1220 is used to scan the front-end components included in the content of the first page and identify at least one problematic component, wherein the problematic component refers to a front-end component that does not have accessibility functionality.

[0203] The determining module 1230 is used to determine, based on the at least one problem component, an accessibility component corresponding to each of the at least one problem component, wherein the accessibility component refers to a front-end component that has the accessibility function.

[0204] The replacement module 1240 is used to replace the at least one problem component with an accessibility component corresponding to the at least one problem component to obtain the content of the second page.

[0205] In some embodiments, the scanning module 1220 is configured to traverse a first document object model (DOM) tree, the page structure tree including page elements in the content of the first page, the page elements including the front-end components; check whether the front-end components included in the page structure tree have the accessibility function; and identify front-end components that do not have the accessibility function as the problematic components.

[0206] In some embodiments, the scanning module 1220 is configured to: determine that the front-end component has the accessibility function if the front-end component is an image component and the front-end component has a first attribute, wherein the first attribute is used to describe relevant information of the image component; determine that the front-end component has the accessibility function if the front-end component is a form element component and the front-end component has associated tags; determine that the front-end component has the accessibility function if the front-end component has an Accessibility Rich Internet Application (ARIA) attribute; and determine that the front-end component has the accessibility function if the front-end component has a corresponding event handler, wherein the event handler is used for the front-end component to support keyboard operation.

[0207] In some embodiments, the determining module 1230 is configured to search for accessible components corresponding to the at least one problematic component in an accessible component library, wherein the accessible component library includes at least one accessible component.

[0208] In some embodiments, the accessibility component has at least one of the following characteristics: having ARIA attributes, having keyboard accessibility, supporting screen readers, supporting high contrast mode, supporting adjusting color contrast, and supporting customization.

[0209] In some embodiments, the replacement module 1240 is configured to obtain, for a first accessibility component among the at least one accessibility components, a first demo code corresponding to the first accessibility component, wherein the first accessibility component is an accessibility component corresponding to the first problem component among the at least one problem components; and replace the demo code corresponding to the at least one problem component with the demo code corresponding to the at least one accessibility component to obtain the demo code corresponding to the second page content, wherein the demo code corresponding to the second page content is used to respond to operations on the second page content.

[0210] In some embodiments, the device 1200 further includes an adjustment module (not shown).

[0211] The adjustment module is used to adjust the tag index attribute of the at least one accessibility component so that the content of the second page is applicable to the keyboard access rules of the first program product. The tag index attribute is used to determine the binding relationship between the front-end component and the keyboard key. In response to an editing operation on the second accessibility component among the at least one accessibility component, the module modifies at least one of the functions and styles of the second accessibility component.

[0212] In some embodiments, the adjustment module is further configured to perform automated accessibility testing on the content of the second page to obtain test results, the test results including at least one of the following: at least one test item, test problems existing in the content of the second page, and recommended repair solutions; if the test results include test problems existing in the content of the second page, the second page content is repaired to obtain repaired second page content.

[0213] In some embodiments, the adjustment module is further configured to obtain feedback information from the first program product, the feedback information being used to reflect the application status of the second page content; and to optimize the accessibility component based on the feedback information.

[0214] In some embodiments, the adjustment module is configured to parse the feedback information to obtain accessibility issues included in the feedback information; and adjust the configuration information of the accessibility component in response to the accessibility issues.

[0215] The technical solution provided in this application replaces front-end components that lack accessibility functionality in the first page content with accessible components, enabling the front-end components included in the resulting second page content to have accessibility functionality. The detection and replacement of the front-end components lacking accessibility functionality in the first page content are automatically implemented by the terminal device, eliminating the need for developers to manually add accessibility capabilities to the front-end components included in the first page content, thus reducing the difficulty of building accessible products. Furthermore, automatically identifying the accessible components corresponding to problematic components simplifies maintenance and improves the maintainability and scalability of accessible products.

[0216] Please refer to Figure 13 This illustration shows a schematic diagram of the structure of a terminal device provided in one embodiment of this application. This terminal device can be used to implement the page generation method provided in the above embodiments. Specifically:

[0217] The terminal device 1300 includes a central processing unit (such as a CPU, GPU, or FPGA) 1301, a system memory 1304 including RAM (Random-Access Memory) 1302 and ROM (Read-Only Memory) 1303, and a system bus 1305 connecting the system memory 1304 and the central processing unit 1301. The computer device 1300 also includes a basic input / output system (I / O system) 1306 to facilitate information transfer between various devices within the server, and a large-capacity storage device 1307 for storing the operating system 1313, application programs 1314, and other program modules 1315.

[0218] In some embodiments, the basic input / output system 1306 includes a display 1308 for displaying information and an input device 1309 for user input, such as a mouse or keyboard. Both the display 1308 and the input device 1309 are connected to the central processing unit 1301 via an input / output controller 1310 connected to the system bus 1305. The basic input / output system 1306 may also include the input / output controller 1310 for receiving and processing input from multiple other devices such as a keyboard, mouse, or electronic stylus. Similarly, the input / output controller 1310 also provides output to a display screen, printer, or other types of output devices.

[0219] The mass storage device 1307 is connected to the central processing unit 1301 via a mass storage controller (not shown) connected to the system bus 1305. The mass storage device 1307 and its associated computer-readable media provide non-volatile storage for the terminal device 1300. That is, the mass storage device 1307 may include computer-readable media (not shown) such as a hard disk or a CD-ROM (Compact Disc Read-Only Memory) drive.

[0220] Without loss of generality, the computer-readable medium may include computer storage media and communication media. Computer storage media include volatile and non-volatile, removable and non-removable media implemented using any method or technology for storing information such as computer-readable instructions, data structures, program modules, or other data. Computer storage media include RAM, ROM, EPROM (Erasable Programmable Read-Only Memory), EEPROM (Electrically Erasable Programmable Read-Only Memory), flash memory or other solid-state storage technologies, CD-ROM, DVD (Digital Video Disc) or other optical storage, magnetic tape cassettes, magnetic tape, disk storage, or other magnetic storage devices. Of course, those skilled in the art will recognize that the computer storage medium is not limited to the above-mentioned types. The system memory 1304 and mass storage device 1307 described above can be collectively referred to as memory.

[0221] According to an embodiment of this application, the terminal device 1300 can also be connected to a remote computer on a network, such as the Internet. That is, the computer device 1300 can be connected to the network 1312 through the network interface unit 1311 connected to the system bus 1305, or the network interface unit 1311 can be used to connect to other types of networks or remote computer systems (not shown).

[0222] The memory also includes a computer program stored in the memory and configured to be executed by one or more processors to implement the page generation method described above.

[0223] In an exemplary embodiment, a computer-readable storage medium is also provided, wherein the storage medium stores a computer program that, when executed by a processor of a computer device, implements the above-described page generation method.

[0224] Optionally, the computer-readable storage medium may include: ROM (Read-Only Memory), RAM (Random-Access Memory), SSD (Solid State Drives), or optical disc, etc. The random access memory may include ReRAM (Resistance Random Access Memory) and DRAM (Dynamic Random Access Memory).

[0225] In an exemplary embodiment, a computer program product is also provided, the computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and executes the computer instructions, causing the computer device to perform the page generation method described above.

[0226] It should be noted that this application may display prompt interfaces, pop-ups, or output voice prompts before and during the collection of user data. These prompt interfaces, pop-ups, or voice prompts are used to inform users that their data is being collected. This ensures that the application only begins the steps for collecting user data after receiving confirmation from the user regarding the prompt interface or pop-up. Otherwise (i.e., without receiving confirmation from the user), the steps for collecting user data end, meaning no user data is collected. In other words, all user data collected by this application (including the content of the first page of the first program product, etc.) is processed strictly in accordance with the requirements of relevant national laws and regulations. The informed consent or separate consent of the personal information subject is obtained only with the user's consent and authorization. Subsequent data use and processing are conducted within the scope of laws and regulations and the authorization of the personal information subject. Furthermore, the collection, use, and processing of relevant user data must comply with the relevant laws, regulations, and standards of the relevant countries and regions.

[0227] It should be understood that "multiple" as used in this article refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0228] The above description is merely an exemplary embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A page generation method, characterized in that, The method includes: Retrieve the content of the first page of the first program product; Scan the front-end components included in the content of the first page to identify at least one problematic component, wherein the problematic component refers to a front-end component that does not have accessibility functionality; Based on the at least one problem component, determine the accessibility component corresponding to each of the at least one problem component, wherein the accessibility component refers to a front-end component that has the accessibility function; The at least one problem component is replaced with the accessibility component corresponding to each problem component to obtain the content of the second page.

2. The method according to claim 1, characterized in that, The step of scanning the front-end components included in the content of the first page to identify at least one problematic component includes: Traverse the page structure tree, which includes page elements in the content of the first page, and the page elements include the front-end components; Check whether the front-end components included in the page structure tree have the accessibility function; Front-end components that do not have the accessibility function are identified as problematic components.

3. The method according to claim 2, characterized in that, The step of checking whether the front-end components included in the page structure tree have the accessibility function includes at least one of the following: If the front-end component is an image component and the front-end component has a first attribute, it is determined that the front-end component has the accessibility function, and the first attribute is used to describe the relevant information of the image component; If the front-end component is a form element component and the front-end component has associated tags, then the front-end component is determined to have the accessibility function; If the front-end component has the Accessibility Rich Internet Application (ARIA) attribute, it is determined that the front-end component has the accessibility function. If the front-end component has a corresponding event handler, it is determined that the front-end component has the accessibility function, and the event handler is used for the front-end component to support keyboard operation.

4. The method according to any one of claims 1 to 3, characterized in that, The step of determining the accessibility components corresponding to the at least one problem component, based on the at least one problem component, includes: The accessibility component library is searched to obtain the accessibility components corresponding to the at least one problematic component. The accessibility component library includes at least one accessibility component.

5. The method according to any one of claims 1 to 4, characterized in that, The step of replacing the at least one problem component with the accessibility component corresponding to each of the at least one problem component to obtain the content of the second page includes: For the first accessible component among the at least one accessible components, obtain the first demo code corresponding to the first accessible component, wherein the first accessible component is the accessible component corresponding to the first problematic component among the at least one problematic components; The demo code corresponding to the at least one problem component is replaced with the demo code corresponding to the at least one accessibility component to obtain the demo code corresponding to the second page content. The demo code corresponding to the second page content is used to respond to operations on the second page content.

6. The method according to any one of claims 1 to 5, characterized in that, After replacing the at least one problem component with the accessibility component corresponding to each of the at least one problem component to obtain the second page content, the method further includes: Adjust the tag index attribute of the at least one accessibility component so that the content of the second page is applicable to the keyboard access rules of the first program product, wherein the tag index attribute is used to determine the binding relationship between the front-end component and the keyboard key; In response to an edit operation on the second accessibility component of the at least one accessibility component, at least one of the functions and styles of the second accessibility component is modified.

7. The method according to any one of claims 1 to 6, characterized in that, The method further includes: Perform automated accessibility testing on the content of the second page to obtain test results, which include at least one of the following: at least one test item, test problems existing in the content of the second page, and recommended repair solutions; If the test results include test issues present in the content of the second page, the content of the second page is repaired to obtain the repaired content of the second page.

8. The method according to any one of claims 1 to 7, characterized in that, The method further includes: Obtain feedback information from the first program product, the feedback information being used to reflect the application status of the content on the second page; Based on the feedback information, the accessibility component is optimized.

9. The method according to claim 8, characterized in that, The optimization of the accessibility component based on the feedback information includes: The feedback information is analyzed to obtain the accessibility issues included in the feedback information; To address the accessibility issue, the configuration information of the accessibility components is adjusted.

10. A page generation apparatus, characterized in that, The device includes: The acquisition module is used to acquire the content of the first page of the first program product; The scanning module is used to scan the front-end components included in the content of the first page and identify at least one problematic component, wherein the problematic component refers to a front-end component that does not have accessibility functionality; The determining module is configured to determine, based on the at least one problem component, an accessibility component corresponding to each of the at least one problem component, wherein the accessibility component refers to a front-end component that has the accessibility function; The replacement module is used to replace the at least one problem component with the accessibility component corresponding to each of the at least one problem component to obtain the content of the second page.

11. A terminal device, characterized in that, The terminal device includes a processor and a memory, the memory storing a computer program, and the processor executing the computer program to implement the method as described in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, which is loaded and executed by a processor to implement the method as described in any one of claims 1 to 9.

13. A computer program product, characterized in that, The computer program product includes a computer program that is loaded and executed by a processor to implement the method as described in any one of claims 1 to 9.

Images