CN115114549A - Website barrier-free tab accessibility transformation method - Google Patents
Website barrier-free tab accessibility transformation method Download PDFInfo
- Publication number
- CN115114549A CN115114549A CN202210583117.1A CN202210583117A CN115114549A CN 115114549 A CN115114549 A CN 115114549A CN 202210583117 A CN202210583117 A CN 202210583117A CN 115114549 A CN115114549 A CN 115114549A
- Authority
- CN
- China
- Prior art keywords
- tab
- title
- website
- floating window
- shortcut key
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/02—Input arrangements using manually operated switches, e.g. using keyboards or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0489—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using dedicated keyboard keys or combinations thereof
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention belongs to the field of accessible access to internet content; a method for modifying accessibility of barrier-free tabs of a website is disclosed. Step 1: adding semantic identification to the tab title; step 2: adding an operation prompt for the tab title; and step 3: accessing the tab contents through a shortcut key based on the semantic identification in the step 1 and the operation prompt in the step 2; and 4, step 4: and (4) performing compatibility test on the tab contents accessed by the shortcut key in the step (3). The invention is used for solving the problem of focus falling caused by the modification of the structure of the tab and the problem of access redundancy caused by forcibly browsing all information through the operation of a keyboard.
Description
Technical Field
The invention belongs to the field of accessible access to internet content; in particular to a method for modifying accessibility of barrier-free tabs of a website.
Background
At present, barrier-free websites meeting the national standards are implemented, and barrier-free websites are realized mainly by modifying column templates of a website content management system one by one according to technical indexes in the national standards. The transformation of the keyboard operation indexes in the barrier-free transformation of the website is a difficult point, wherein the key point of the keyboard access of the website tab control is also the transformation pain point.
And (3) keyboard operation: the method refers to that a website can be operated by a mouse and can also be operated by a keyboard, and mainly aims to support groups (such as blind people and people with serious visual impairment) who access the website to obtain information by keyboard operation and screen reader software.
The order of unmodified tab control keyboard operation access is: and jumping out of the tab control after five pieces of information in the title I, the title II, the title III and the content I. The information of content two and content three is skipped by the keyboard operation access mode. The problem of information loss exists for the disabled who uses the keyboard to operate, and the national standard is not met.
The existing tab modification is to bind a first title of a tab and a first piece of information of a corresponding first content through a JS script, and to bind a last piece of information of the first content with a second title, and so on. After all the binding, the access sequence through the keyboard becomes 5 pieces of information of the first content corresponding to the first title, 5 pieces of information of the second content corresponding to the second title and 5 pieces of information of the third content corresponding to the third title, and then the user jumps out the tab to finish the purpose of accessing all the contents of the tab through the keyboard. This method has two drawbacks:
1. focus is trapped in that once the tab structure changes, e.g., from three to two or content from 5 to 6 pieces of information, focus is trapped due to the loss of bound elements, i.e., the focus card is not in place to continue jumping to the next element, because bound elements are not already present due to changes or deletions. Which in turn affects the keyboard access process for the entire web site and does not meet the standards.
2. Access redundancy issues that must be viewed in their entirety whether the user wants to view all of the content or not. The access efficiency is low when the user autonomously selects the information which the user wants to browse. For example, three items of information may only want to browse the content information of the third item, but all information in the first and second items must be browsed without skipping. The requirement of the user for quickly browsing website information cannot be met.
Disclosure of Invention
The invention provides a method for modifying accessibility of a barrier-free tab of a website, which is used for solving the problem of focus falling caused by modification of a tab structure and the problem of access redundancy caused by forcible browsing of all information through keyboard operation.
The invention is realized by the following technical scheme:
a modification method for accessibility of barrier-free tabs of a website comprises the following steps:
step 1: adding semantic identification to the tab title;
step 2: adding an operation prompt for the tab title;
and step 3: accessing the tab contents through a shortcut key based on the semantic identification in the step 1 and the operation prompt in the step 2;
and 4, step 4: and (4) performing compatibility test on the tab contents accessed by the shortcut key in the step (3).
A method for modifying accessibility of barrier-free tabs of a website is characterized in that a semantic identifier aria-expanded is added to an activated current floating window, and then a screen reader understands the identifier and reads the expanded identifier.
the user can judge whether to further browse the related information according to the content of the title one, and if the selection is yes, the user can obtain the content information according to the prompt operation; if not, skipping the content information of the first title to normally access the second title;
the operation of accessing the title two by the user is the same as the operation of accessing the title one;
the operation of the user to access title three is the same as the operation to access title one.
A method for improving accessibility of barrier-free tabs of a website, wherein, aria-label is' link: title one, currently having a floating window, enters the window by pressing the space key, traverses the information in the floating layer by pressing the tab key after entering, and returns by pressing the esc key.
A method for improving accessibility of a barrier-free tab of a website is characterized in that a shortcut key is entered, specifically, a shortcut key jumps into a content area of a floating window and focuses on first information.
A method for improving accessibility of a barrier-free tab of a website is characterized in that a browsing shortcut key is specifically how to operate browsing information after entering a floating window;
a method for improving accessibility of a barrier-free tab of a website is characterized in that a shortcut exiting key is specifically used for jumping out of a current floating window to continue browsing other information of the website.
A website barrier-free tab accessibility transformation method is disclosed, wherein step 4 is that the shortcut key is set without conflicting with the shortcut key of a screen reader;
because the screen reader has more software and shortcut keys, the screen reader needs to carry out abundant tests;
and the compatibility test of the shortcut key of the website is required.
The invention has the beneficial effects that:
the invention avoids the problems of focus trapping and access redundancy caused by the modification of the tab structure, can greatly reduce the maintenance cost and effectively improve the efficiency of accessing the tab.
The invention carries out compatibility test on the shortcut keys of the website, and avoids the problem that the shortcut keys conflict and cannot be operated.
The invention greatly improves the efficiency of obtaining the tab attention information.
Drawings
FIG. 1 is a diagram of a tab architecture of the present invention.
FIG. 2 is a flow chart of the method of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be described clearly and completely with reference to the accompanying drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The focus is trapped by the fact that the overall structure and relevance binding for the tab is too tight and rigid at the time of transformation, resulting in the tab structure having to be affected once it is modified. After improvement, the title of the tab and the floating window are only bound one by utilizing the characteristic that the title of the tab and the floating window appear in pairs, and the integral structure and the relevance are not bound. The modification effect cannot be influenced by increasing or decreasing the number of items and content information of the tabs at the later stage, and the problem of focus falling caused by modification of the tab structure is solved.
In addition, after improvement, a user can decide whether to check the information in the relevant floating window by himself or herself, and the information which is not concerned about can be skipped. The access efficiency is effectively improved, and the problem of access redundancy of the option cards is solved.
A method for modifying accessibility of a barrier-free tab of a website, the method comprising the steps of:
step 1: adding semantic identification to the tab title;
step 2: adding an operation prompt for the tab title;
and step 3: accessing the tab contents through a shortcut key based on the semantic identification in the step 1 and the operation prompt in the step 2;
and 4, step 4: and (4) performing compatibility test on the tab contents accessed by the shortcut key in the step (3).
A method for modifying accessibility of a website barrier-free tab comprises the following steps that step 1, a semantic identifier is added to the titles (H1, H2 and H3) of the tab (shown in figure 1) through JavaScript codes; if the role is equal to "tab", the screen reader reads according to the added semantic identification, and after the focus of the screen reader focuses on the title element, the screen reader prompts and reads "there is a floating window or a tab at present" to inform the user that there is a floating window in the currently focused element, and activates and displays the floating window in the page.
A method for modifying accessibility of barrier-free tabs of a website is characterized in that a semantic identifier aria-expanded is added to an activated current floating window, and then a screen reader understands the identifier and reads the expanded identifier.
the user can judge whether to further browse the related information according to the content of the title one, and if the selection is yes, the user can obtain the content information according to the prompt operation; if not, skipping the normal access of the content information of the first title (pressing tab key) to the second title;
the operation of accessing the title two by the user is the same as the operation of accessing the title one;
the operation of the user to access title three is the same as the operation to access title one.
A method for improving accessibility of barrier-free tabs of a website, wherein, aria-label is as follows: title one, currently having a floating window, enters the window by pressing the space key, traverses the information in the floating layer by pressing the tab key after entering, and returns by pressing the esc key.
A method for improving accessibility of a barrier-free tab of a website is characterized in that a shortcut key is entered, specifically, a shortcut key jumps into a content area of a floating window and focuses on first information.
A method for improving accessibility of a barrier-free tab of a website is characterized in that a browsing shortcut key is specifically how to operate browsing information after entering a floating window;
a method for improving accessibility of a barrier-free tab of a website is characterized in that a shortcut exiting key is specifically used for jumping out of a current floating window to continue browsing other information of the website.
A website barrier-free tab accessibility transformation method is disclosed, wherein the step 4 is that the shortcut key is set without conflict with the shortcut key of a screen reader;
because the screen reader has more software and shortcut keys, the screen reader needs to carry out abundant tests;
and the compatibility test of the shortcut key of the website is required. The problem that shortcut key conflict cannot be operated is avoided.
Claims (10)
1. A modification method for accessibility of barrier-free tabs of a website is characterized by comprising the following steps:
step 1: adding semantic identification to the tab title;
step 2: adding an operation prompt for the tab title;
and step 3: accessing the tab contents through a shortcut key based on the semantic identification in the step 1 and the operation prompt in the step 2;
and 4, step 4: and (4) performing compatibility test on the tab contents accessed by the shortcut key in the step (3).
2. The method as claimed in claim 1, wherein step 1 is to add semantic identifier roll (tab) to the tab title through JavaScript; the screen reader reads according to the added semantic identification, prompts and reads the 'floating window or tab at present' to inform the user that the currently focused element has the floating window after the focus of the screen reader focuses on the title element, and activates and displays the current floating window in the page.
3. The method of claim 2, wherein the activated current floating window is added with a semantic identifier "true", and the screen reader understands the identifier and reads "unfolded".
4. The method for improving the accessibility of the barrier-free tab of the website according to claim 1, wherein the step 2 is specifically that after a user understands through a screen reader that a currently focused element has a floating window and has been unfolded through voice reading, an operation prompt is added to inform the user how to operate to access the content of the floating window;
the user can judge whether to further browse the related information according to the content of the title one, and if the selection is yes, the user can obtain the content information according to the prompt operation; if not, skipping the content information of the first title to normally access the second title;
the operation of accessing the title two by the user is the same as the operation of accessing the title one;
the operation of the user to access title three is the same as the operation to access title one.
5. The method of claim 4, wherein an aria-label ═ link: title one, currently having a floating window, enters the window by pressing the space key, traverses the information in the floating layer by pressing the tab key after entering, and returns by pressing the esc key.
6. The method for improving accessibility of barrier-free tabs of a website as claimed in claim 1, wherein the step 3 accessing the tab contents through the shortcut keys specifically comprises defining an entry shortcut key, a browsing shortcut key and an exit shortcut key.
7. The method as claimed in claim 6, wherein the access shortcut is a jump to a content area of a floating window and focus on a first piece of information.
8. The method as claimed in claim 6, wherein the browsing shortcut is specifically how to manipulate browsing information after entering a floating window.
9. The method as claimed in claim 6, wherein the exit shortcut key is a jump out of a current floating window to continue browsing other information of the website.
10. The method for improving the accessibility of the barrier-free tab of the website according to claim 1, wherein the step 4 is to set the shortcut key without conflicting with the shortcut key of the screen reader;
because the screen reader has more software and shortcut keys, the screen reader needs to carry out abundant tests;
and the compatibility test of the shortcut key of the website is required.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210583117.1A CN115114549A (en) | 2022-05-26 | 2022-05-26 | Website barrier-free tab accessibility transformation method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210583117.1A CN115114549A (en) | 2022-05-26 | 2022-05-26 | Website barrier-free tab accessibility transformation method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115114549A true CN115114549A (en) | 2022-09-27 |
Family
ID=83327352
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210583117.1A Pending CN115114549A (en) | 2022-05-26 | 2022-05-26 | Website barrier-free tab accessibility transformation method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115114549A (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101986297A (en) * | 2010-10-28 | 2011-03-16 | 浙江大学 | Accessibility web browsing method based on linkage cluster |
| CN102831229A (en) * | 2012-08-30 | 2012-12-19 | 浙大网新科技股份有限公司 | Web page browsing method suitable for blind persons |
| CN104102642A (en) * | 2013-04-03 | 2014-10-15 | 腾讯科技（深圳）有限公司 | Method and device for accessing webpage information |
| CN104111918A (en) * | 2013-04-16 | 2014-10-22 | 腾讯科技（北京）有限公司 | Barrier-free processing method and barrier-free web page device for web page content |
| CN106156268A (en) * | 2016-05-25 | 2016-11-23 | 烟台朱葛软件科技有限公司 | Accessible webpage control method |
| US20210081165A1 (en) * | 2019-09-18 | 2021-03-18 | Bank Of America Corporation | Machine learning webpage accessibility testing tool |
-
2022
- 2022-05-26 CN CN202210583117.1A patent/CN115114549A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101986297A (en) * | 2010-10-28 | 2011-03-16 | 浙江大学 | Accessibility web browsing method based on linkage cluster |
| CN102831229A (en) * | 2012-08-30 | 2012-12-19 | 浙大网新科技股份有限公司 | Web page browsing method suitable for blind persons |
| CN104102642A (en) * | 2013-04-03 | 2014-10-15 | 腾讯科技（深圳）有限公司 | Method and device for accessing webpage information |
| CN104111918A (en) * | 2013-04-16 | 2014-10-22 | 腾讯科技（北京）有限公司 | Barrier-free processing method and barrier-free web page device for web page content |
| CN106156268A (en) * | 2016-05-25 | 2016-11-23 | 烟台朱葛软件科技有限公司 | Accessible webpage control method |
| US20210081165A1 (en) * | 2019-09-18 | 2021-03-18 | Bank Of America Corporation | Machine learning webpage accessibility testing tool |
Non-Patent Citations (2)
| Title |
|---|
| 朱双六: "网页设计无障碍标准应用" * |
| 梁哲炜等: "一款新型盲用浏览器的设计与实现" * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11163849B2 (en) | Identification of content in an electronic document | |
| CN101197849B (en) | Method for commuting internet page into wireless application protocol page | |
| KR100849272B1 (en) | Method for automatically summarizing Markup-type documents | |
| Londoño et al. | Poverty, inequality, and human capital development in Latin America, 1950-2025 | |
| CN102917023B (en) | A kind of method based on Quick Response Code accessed web page and mobile terminal | |
| CN102708174B (en) | Method and device for displaying rich media information in browser | |
| US20090132525A1 (en) | Information retrieval apparatus and computer program | |
| CN101546341A (en) | Information recommendation device and information recommendation method | |
| US20070005649A1 (en) | Contextual title extraction | |
| Cescutti et al. | Galactic astroarchaeology: reconstructing the bulge history by means of the newest data | |
| CN103714115A (en) | Method and device for loading web page content | |
| CN101526953A (en) | WWW transformation technology | |
| CN102065114A (en) | Method and device for mobile terminal to access webpage | |
| CN102831229A (en) | Web page browsing method suitable for blind persons | |
| RU2562397C2 (en) | Method and apparatus for inserting address of hyperlink into bookmark | |
| CN101826096A (en) | Information display method, device and system based on mouse pointing | |
| CN104090923A (en) | Method and device for displaying rich media information in browser | |
| Shahzad et al. | Examining the asymmetric link between clean energy intensity and carbon dioxide emissions: The significance of quantile-on-quantile method | |
| CN115114549A (en) | Website barrier-free tab accessibility transformation method | |
| US20080077641A1 (en) | System and method for editing contract clauses in static web pages | |
| CN110515618B (en) | Page information input optimization method, equipment, storage medium and device | |
| Cisco | Using Design Studio to Transform Web Applications for IP Phones | |
| Falco et al. | Kitten: a tool for normalizing HTML and extracting its textual content. | |
| CN107346302B (en) | Text conversion method and device | |
| CN115964989B (en) | Information display method, device and storage medium of electronic form |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |