当前位置:首页 > 网站建设 > 正文内容

在已有网页上运行js脚本(js脚本怎么在其他网站上运行)

网站建设1年前 (2023-08-19)552

深圳市信科网络科技有限公司,成立于2013年,总部位于深圳,自成立以来一直致力于各类数字化系统应用技术的服务,专业从网站适老化与无障碍,更多详细内容请自行搜索“深圳市信科网络科技有限公司”获取方案及建议。

整体页面模板的无障碍改造

从网站整体结构来看,政府门户网站结构复杂,需要提供多种方式保证用户以正常的顺序浏览网页栏目信息;

具体改造如下:

页面采取统一的声明标准。

对于页面采取统一的声明标准,确保各种用户代理均可以正常理解页面的信息。

对页面设置正确的头部标签,并进行seo优化。

通过进行seo优化。确保搜索引擎可以有效地搜索页面。同时辅助设备(读屏软件等)可以更好的理解当前页面的内容。

修正错误的代码,确保代码元素符合语义化

根据W3C中(x)html代码书写规范,确保代码元素语义化,使网站符合国际规范;

合理规划网站元素

将行为元素和交互行为放到同一的脚本语言文

文本的无障碍改造

网站的文本内容是用户接受信息的渠道。文本内容的可预测性和可读性对于残障人士来说是至关重要的。为了确保政府门户网站文本内容可以保证被屏幕读取器正常阅读和判断。

具体改造如下:

明确语义化标签,以确保屏幕读取器可以理解当前的文本内容,分清标题、段落等。通常屏幕读取器会针对标题和段落采取不同的阅读语速,为政府门户网站增加文字转换拼音和简繁转换插件。

图片的无障碍改造

图片已经成为了现在网站页面中的最重要的组成部分,包含大量的功能性、装饰性、内容性的图片,大量装饰性图片对于残障人士人士来说,对网站的阅读理解以及网站操作容易带来迷惑性与增加操作复杂度。

具体改造如下:

将政府门户网站功能性、描述性图片添加解释性标签,通过前台js插件自动复制上说明,将无意义和背景图片通过研发的js插件隐藏掉,只要开启无障碍,就自动隐藏无意义和背景的图片。

展开全文

视频音频的无障碍改造

为原有视频同步视窗增加时间同步滚动功能,保障视频内容和滚动字幕可以在所有时间点上同步。

具体改造如下:

针对视频提供可视化滚动字幕,确保视频播放到什么位置,听力障碍人士都可以正常的浏览字幕。

为视频提供一个标题与内容的文本形式的介绍,以确保视频无法播放的时候,屏幕读取器仍然可以告诉盲人当前视频的内容是什么。

为音视频增加快捷键,通过快捷键可以快速的播放、暂停、音量大小、快进、快退的控制。

表单的无障碍改造

提供一个可以方便用户方便的用键盘或其他非鼠标设备进行操作的表单,可确保肢体障碍的人士能够使用任何设备方便简单的操作表单。

具体改造如下:

针对所有只能通过鼠标操作的交互行为,提供相应键盘操作方式。

为每个表单控件,提供一个文本介绍,并确保这个文本介绍可以正确的指向这个表单。

为表单进行分组和分组标题,以确保屏幕读取器可以理解表单的内容。

为下拉框表单提供分组和分组标题。以确保下拉框内的内容可以正确的被屏幕读取器所理解。

在已有网页上运行js脚本(js脚本怎么在其他网站上运行)

为每个验证码提供,键盘或者键盘操作能获取验证码,通过快捷键,可以语音播放验证码。

导航功能无障碍改造

本次项目将对政府门户网站的导航无障碍功能进行改造,改造后的导航不仅可以完全符合无障碍标准,还要符合人性化的要求。比如:盲人在使用屏幕读取器的时候,读到一级导航的时候,会朗读对应的2级导航内容。而不是朗读另外的一级导航。

国际通用快捷键功能:我们采取国际化统一的快捷键方式,确保外籍用户无需任何培训,即可直接使用当前页面的快捷键。

快捷键主要包括直接跳转到主要内容,跳转会导航链接,回到首页链接等。

提供栏目跳转快捷键,通过ALT + Z 键切换Tab键的状态为栏目之间切换,使用户可以通过Tab 在各栏目之间进行切换,以便快速浏览用户感兴趣的栏目。再次使用ALT + Z 键可以讲Tab键的状态改变为原有锚点切换状态。

键盘操作无障碍改造

读屏软件是帮助盲人等视力障碍人士上网的工具,针对盲人等视力障碍人士上网不仅仅是支持了读屏软件就可以的,还需要对网站进行全键盘操作的改造,让盲人通过键盘的切换操作,就能够对网站进行浏览、操作。为读屏软件用户专门设计了一套统一的键盘快捷键操作方案,例如:

(1)支持全键盘操作,无需依赖于鼠标。一般采用Tab键、光标键切换、回车键确认等,辅以读屏软件配置的朗读功能键实现网页的浏览和内容页的朗读。

(2)栏目跳转,实现栏目分组间的跳转;一般采用Ctrl + Z键。

(3)区域跳转,实现页面内各区块的跳转,主要包括:顶部导航区、左部导航区、中间内容区、主要内容区、底部内容区等区块;一般采用组合键:Alt + Shift + 数字键 1,2,3,…,等。

(4)热点跳转快捷键,可分别快速定位到:跳转到无障碍操作说明页面、跳转到主菜单(网站导航)、跳转到主要内容区域、跳转到网站地图链接等。

一般采用Ctrl( 或 Alt) + 数字键 1,2,3,…,等。

无障碍使用指南及声明

对于政府门户网站的无障碍改造所遵循的标准说明、功能讲解说明、以及其它相关信息说明等内容给予详细的介绍和讲解。

将网站地图链接和无障碍声明链接嵌入网页头部(底部),使用户能够通过链接进入对应页面,了解无障碍网站的整体结构和相关功能的基本操作方法。

无障碍工具条部署

为了满足色盲、弱视、老花眼、癫痫、光泽性过敏等人群对网站访问的特殊性要求,提供无障碍辅助功能工具条。在保证现有网站基础上进行全网信息无障碍及适老化建设,对所有页面进行优化,使网站适应不同人群的访问需求。此工具条是基于服务端的应用模式,不需要在计算机上安装任何插件,并且兼容当今主流浏览器,符合无障碍关于兼容性的要求。

无障碍工具条主要提供了多种视觉增强辅助效果(改变颜色,放大字体等),同时对于需要文化认知辅助的用户可在线听读、语音播报等功能,使用户通过听取语音从而快速方便地获取网页内容。

无障碍浏览

老年人、残障访问者可以通过“无障碍浏览”下的辅助工具浏览政府网站。

专用读屏

专用读屏能够自动开启大字辅助屏显示功能,并在页面底部提供辅屏放大展示鼠标指向文字自动朗读页面文字,同时支持繁简转换,拼音标注;专用读屏功能支持鼠标或键盘快捷键切换导航区、浏览区、交互区、服务区。

声音开关

语音播报是指对网站内容进行语音读取,并可对读取模式进行切换设置功能。用户利用此功能,可开启/关闭语音播报,并且可以控制语音朗读时的语速及音量。

用户利用声音控制功能,实现智能语音读屏。支持页面内容声音朗读,可对声音开关控制、声音语速及音量调节及连读模式和指读模式。指读模式是指只读当前所指标签内的内容,连读模式是指从当前所指内容开始依次往下读完该页面所有可读标签内容。

阅读方式

为用户提供指读模式和连读两种模式。阅读方式的设置不仅可以采用鼠标选择点击的方式,还支持键盘快捷方式进行操作;同时支持全程操作与操作结果语音播报。

文字缩放

文字缩放是指设置文字大小的控制功能,以满足用户视觉感官需要。用户可通过对鼠标、键盘快捷键指向的文本内容进行缩放显示。同时可切换简体、繁体、拼音等不同字体。

页面缩放

页面缩放是指用户对浏览器显示比例进行设置。用户可以根据自身视力情况,对页面进行缩放显示浏览,页面大小可缩放至原始页面的200%。

页面配色

页面配色是指用户对页面配色按照喜好进行选择设置。弱视用户群体可通过此功能选择页面的配色模式,可根据自身需要切换网站配色,为弱视等用户访问网页内容提供帮助。

背景配色包括白底黑字、黑底黄字、黄底蓝字、蓝底黄字等符合弱视用户群体浏览需求的配色。

鼠标放大

鼠标放大是为视觉障碍用户定制的一键放大鼠标的功能操作。用户可通过此功能将鼠标切换为大鼠标,通过放大鼠标尺寸及样式便于用户进行鼠标操作与定位。

辅屏

辅屏是指用于对鼠标所指的文本内容进行放大显示。辅屏工具提供繁体、简体、拼音等三种不同模式。

十字线

辅助线功能是以两条红线为基准线,为视力障碍用户校队阅读的位置提供帮助。

大字幕

提供一键放大字幕的功能。与文字随访功能不同,大字幕基于固定的放大比例和正常字幕,用户点击一次即可呈现固定放大比例的字幕,再点击一次即可恢复至原有比例。

页面后退/页面前进

页面后退/页面前进功能是对页面进行前后页面的跳转。用户利用此功能,可实现页面的前后页面的跳转,相当于浏览器上方的前进和后退键。

页面重置

页面重置功能是指将选择的功能还原到初始状态。用户通过此功能可迅速恢复功能初始状态。

说明

说明功能为用户提供无障碍阅读的文字使用说明。打开帮助页面,用户通过阅读帮助文档可快速掌握使用“无障碍浏览”下阅读工具进行操作浏览。

退出

支持关闭无障碍辅助工具界面,退出后页面将回到正常浏览模式。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://7s3x.cn/post/51814.html

分享给朋友:

“在已有网页上运行js脚本(js脚本怎么在其他网站上运行)” 的相关文章

徐州网站优化(徐州网站优化公司)

徐州网站优化(徐州网站优化公司)

本篇文章给大家谈谈徐州网站优化,以及徐州网站优化公司对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、徐州seo排名哪家安全 2、徐州建网站,徐州网络公司,哪家做网站最好? 3、徐州做一个普通的企业网站大概需要多少钱? 4、沛县网站制作公司里技术好,价格低的有哪...

制作图片的网站(免费制作图片的网站)

制作图片的网站(免费制作图片的网站)

今天给各位分享制作图片的网站的知识,其中也会对免费制作图片的网站进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、制作照片的网站 2、说几个图片制作网站~~ 3、有哪些制做图片的网站,类似“创客贴”的求推荐,感谢! 4、有什么国外的图片素材网站?...

入职简历电子版填写模板(入职简历填写样本)

入职简历电子版填写模板(入职简历填写样本)

今天给各位分享入职简历电子版填写模板的知识,其中也会对入职简历填写样本进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、入职个人简历怎么写? 2、入职个人简历模板格式5篇 3、电子档个人简历怎么写 入职个人简历怎么写? 个人简历写法:一、要善于写出那...

零花钱怎么用活动设计(零花钱活动设计方案)

零花钱怎么用活动设计(零花钱活动设计方案)

今天给各位分享零花钱怎么用活动设计的知识,其中也会对零花钱活动设计方案进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、小学综合实践课 《零用钱该怎么花》课堂实录 ,急,要详细些的。 2、话题讨论 零用钱怎么花 3、以如何使用零花钱制定一份计划 4...

情感书单图片(情感书单图片空白)

情感书单图片(情感书单图片空白)

今天给各位分享情感书单图片的知识,其中也会对情感书单图片空白进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、表达强烈爱国情感的书籍有哪些? 2、书单怎么制作 3、女生看哪些书籍可以摆脱情感烦恼,治愈内心? 4、抖音里的全民任务中,情感书单又是那一...

APP设计说明模板(app开发说明文档)

APP设计说明模板(app开发说明文档)

本篇文章给大家谈谈APP设计说明模板,以及app开发说明文档对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、如何根据用户体验设计出APP 2、如何产出一份交互设计说明文档 3、APP开发需要什么,具体流程有哪些 4、手机app制作流程 如何根据用户体验设计出...