一种网站无障碍选项卡可访问性改造方法与流程

1.本发明属于互联网内容无障碍访问领域；具体涉及一种网站无障碍选项卡可访问性改造方法。


背景技术：

2.目前,实施符合国家标准的无障碍网站,主要通过对网站内容管理系统的栏目模版依据国家标准中的技术指标进行逐一改造，实现网站无障碍。而网站无障碍改造中键盘操作指标的改造是难点，其中网站选项卡控件的键盘访问是重点也是改造的痛点。
3.键盘操作：是指网站能通过鼠标操作的必须通过键盘也可以操作，主要是为了支持通过键盘操作借助屏幕阅读器软件访问网站获取信息的群体(例如：盲人，严重视力障碍人群)。
4.未改造的选项卡控件键盘操作访问的顺序是：标题一、标题二、标题三、内容一中的五条信息后跳出选项卡控件。内容二和内容三的信息被键盘操作访问方式跳过了。对于使用键盘操作的残疾人群存在信息丢失问题，同时也不满足国家标准。
5.现有的选项卡改造是通过js脚本把选项卡的第一个标题和对应的内容一的第一个条信息进行绑定，把内容一的最后一条信息与第二个标题进行绑定以此类推。全部绑定后通过键盘的访问顺序就变成了第一个标题对应的第一个内容信息5条信息，第二个标题对应的第二个内容的5条信息，第三个标题对应的第三内容的5条信息，之后跳转出选项卡至此完成键盘访问选项卡全部内容的目的。此方法存在的缺陷有两个：
6.1.焦点陷入问题，一旦选项卡结构改变，例如从三项变成二项或内容从5条信息变成6条信息就会由于绑定的元素丢失造成焦点陷入，即焦点卡在原地不在继续向下一个元素跳转，因为绑定的元素由于改变或删除已经不存在了。进而会影响整个网站的键盘访问进程且不符合标准。
7.2.访问冗余问题，不管用户是不是想浏览所有内容都必须全部浏览一遍。对于用户自主选择想要浏览关注的信息时访问效率较低。例如三项信息中可能只想浏览第三项的内容信息，但必须浏览第一项和第二项中的所有信息无法跳过。无法满足用户快速浏览网站信息的需求。


技术实现要素：

8.本发明提供一种网站无障碍选项卡可访问性改造方法，用以解决由于选项卡结构修改导致的焦点陷入问题和通过键盘操作强制浏览全部信息导致的访问冗余问题。
9.本发明通过以下技术方案实现：
10.一种网站无障碍选项卡可访问性改造方法，所述改造方法包括以下步骤：
11.步骤1：为选项卡标题添加语义化标识；
12.步骤2：为选项卡标题添加操作提示；
13.步骤3：基于步骤1的语义化标识与步骤2的操作提示，将选项卡内容通过快捷键访
问；
14.步骤4：对步骤3通过快捷键访问选项卡内容进行兼容性测试。
15.一种网站无障碍选项卡可访问性改造方法，所述步骤1具体为，通过javascript代码为选项卡的标题添加语义化标识role＝"tab"；屏幕阅读器根据添加的语意化标识进行解读，当屏幕阅读器的焦点聚焦到标题元素上后会提示并朗读“当前有浮动窗口或选项卡”告知用户当前聚焦的元素有浮动窗口，同时把当前浮动窗口进行激活并显示到页面中。
16.一种网站无障碍选项卡可访问性改造方法，将激活的当前浮动窗口，再添加语义标识aria-expanded＝"true"，则屏幕阅读器理解这个标识并朗读“已展开”。
17.一种网站无障碍选项卡可访问性改造方法，所述步骤2具体为，当用户通过屏幕阅读器语音朗读理解到当前聚焦的元素有浮动窗口后并且已经展开后，再添加操作提示告知用户如何操作才能访问浮动窗口的内容；
18.用户可根据标题一的内容判断是否进一步浏览相关信息，若选择是，则可按提示操作获取内容信息；若选择否，则跳过标题一的内容信息正常访问标题二；
19.用户访问标题二的操作与访问标题一的操作相同；
20.用户访问标题三的操作与访问标题一的操作相同。
21.一种网站无障碍选项卡可访问性改造方法，aria-label＝"链接：标题一,当前有浮动窗口,按空格键进入窗口,进入后按tab键在浮动层中遍历信息,按esc键返回。
22.一种网站无障碍选项卡可访问性改造方法，所述步骤3将选项卡内容通过快捷键访问具体为，定义进入快捷键、浏览快捷键与退出快捷键。
23.一种网站无障碍选项卡可访问性改造方法，所述进入快捷键具体为，跳转进入浮动窗口的内容区域并聚焦到第一条信息。
24.一种网站无障碍选项卡可访问性改造方法，所述浏览快捷键具体为，进入浮动窗口后如何操作浏览信息；
25.一种网站无障碍选项卡可访问性改造方法，所述退出快捷键具体为，跳出当前浮动窗口继续浏览网站其他信息。
26.一种网站无障碍选项卡可访问性改造方法，所述步骤4具体为，设定快捷键时不要和屏幕阅读器的快捷键相冲突；
27.由于屏幕阅读器的软件较多快捷键也不同需要进行丰富的测试；
28.还需对网站本身的快捷键进行兼容性测试。
29.本发明的有益效果是：
30.本发明避免由于选项卡结构修改导致焦点陷入和访问冗余问题，可以大大减少维护成本有效提高访问选项卡的效率。
31.本发明对网站本身的快捷键进行兼容性测试，避免快捷键冲突无法操作问题。
32.本发明大大提高了获取选项卡关注信息的效率。
附图说明
33.附图1是本发明的选项卡结构图。
34.附图2是本发明方法流程图。
具体实施方式
35.下面将结合本发明实施例中的附图对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
36.焦点陷入问题是改造时针对选项卡的整体结构和关联性绑定过于紧密和严格造成的，导致选项卡结构一旦修改必会有所影响。改进后利用选项卡的标题和浮动窗口成对出现的特性，只对选项卡的标题和对应的浮动窗口进行一一绑定，不对整体结构和关联性进行绑定。后期增减选项卡的项目和内容信息的多少都不会对改造效果造成影响，解决了由于选项卡结构的修改导致的焦点陷入问题。
37.另，改进后用户可自行决定是否查看关联浮动窗口内的信息，可以跳过不关注的信息。有效提高了访问效率，解决了选项卡访问冗余问题。
38.一种网站无障碍选项卡可访问性改造方法，所述改造方法包括以下步骤：
39.步骤1：为选项卡标题添加语义化标识；
40.步骤2：为选项卡标题添加操作提示；
41.步骤3：基于步骤1的语义化标识与步骤2的操作提示，将选项卡内容通过快捷键访问；
42.步骤4：对步骤3通过快捷键访问选项卡内容进行兼容性测试。
43.一种网站无障碍选项卡可访问性改造方法，所述步骤1具体为，通过javascript代码为选项卡(图1)的标题(h1、h2、h3)添加语义化标识；如role＝"tab"，屏幕阅读器根据添加的语意化标识进行解读，当屏幕阅读器的焦点聚焦到标题元素上后会提示并朗读“当前有浮动窗口或选项卡”告知用户当前聚焦的元素有浮动窗口，同时把当前浮动窗口进行激活并显示到页面中。
44.一种网站无障碍选项卡可访问性改造方法，将激活的当前浮动窗口，再添加语义标识aria-expanded＝"true"，则屏幕阅读器理解这个标识并朗读“已展开”。
45.一种网站无障碍选项卡可访问性改造方法，所述步骤2具体为，当用户通过屏幕阅读器语音朗读理解到当前聚焦的元素有浮动窗口并且已经展开后，再添加操作提示告知用户如何操作才能访问浮动窗口的内容；
46.用户可根据标题一的内容判断是否进一步浏览相关信息，若选择是，则可按提示操作获取内容信息；若选择否，则跳过标题一的内容信息正常(按tab键)访问标题二；
47.用户访问标题二的操作与访问标题一的操作相同；
48.用户访问标题三的操作与访问标题一的操作相同。
49.一种网站无障碍选项卡可访问性改造方法，aria-label＝"链接：标题一,当前有浮动窗口,按空格键进入窗口,进入后按tab键在浮动层中遍历信息,按esc键返回。
50.一种网站无障碍选项卡可访问性改造方法，所述步骤3将选项卡内容通过快捷键访问具体为，定义进入快捷键、浏览快捷键与退出快捷键。
51.一种网站无障碍选项卡可访问性改造方法，所述进入快捷键具体为，跳转进入浮动窗口的内容区域并聚焦到第一条信息。
52.一种网站无障碍选项卡可访问性改造方法，所述浏览快捷键具体为，进入浮动窗
口后如何操作浏览信息；
53.一种网站无障碍选项卡可访问性改造方法，所述退出快捷键具体为，跳出当前浮动窗口继续浏览网站其他信息。
54.一种网站无障碍选项卡可访问性改造方法，所述步骤4具体为，设定快捷键时不要和屏幕阅读器的快捷键相冲突；
55.由于屏幕阅读器的软件较多快捷键也不同需要进行丰富的测试；
56.还需对网站本身的快捷键进行兼容性测试。避免快捷键冲突无法操作问题。