上海地区政府网站
无障碍统一服务代码使用说明

  1. 新版无障碍JS部署

    1、插入提供的新版无障碍服务代码

    把获取到的代码插到页面代码的最后</body>标签之前；如果以 JS 方式引入，建议放到最后；代码如以下所示：

    无障碍JS在网页中采用异步加载方式，与当前页面的加载在不同的进程中，不会影响网页加载速度和用户体验。

    
	<body>
		...
		
	   <!-- 无障碍服务 -->
	   <script src="http://jhelper.shanghai.gov.cn/publicJS/SHGOVMHJGWG001_0000000003.js"></script>
	   <!-- 无障碍服务 -->
	</body>

    每个网站引用的JS代码都是定制并且与网站域名绑定， 如果将此代码使用在其他域名的网站中将无法运行！
    页面中的JQuery必须要在引用的无障碍JS之前，且版本不能低于 2.0.1； 低于此版本的建议升级，可能会影响无障碍功能的使用，而且低版本JQuery本身存在的漏洞也会给网站带来严重的安全问题！

  2. 2、清除网页中原有的无障碍工具条代码

    如果网站中已有旧版本的无障碍工具条，需要先清除网页中的无障碍工具条代码，旧代码如以下所示：

    
	<!-- 无障碍工具条 -->
	<link rel="stylesheet" href="http://www.shanghai.gov.cn/jhelper_V2.0/jhelper_tool_style.css">
	<script src="http://www.shpt.gov.cn/shpt/js/jhelper_config.js" charset="gb2312"></script>
	<noscript>不能读取工具条配置</noscript>
	<script src="http://www.shanghai.gov.cn/jhelper_V2.0/jhelper_2.0.js" charset="gb2312"></script>
	<noscript>不能读取工具条</noscript>
	<!-- 无障碍工具条 -->

  3. 3、清除国双统计代码

    政府类的网站中都有国双统计代码，这部分代码已经整合在新版无障碍JS中，因此也需要清除网页中的国双统计代码，旧代码如以下所示：

    						
	<script type='text/javascript' src='http://static.gridsumdissector.com/js/Clients/GWD-000001-888DC0/gs.js'></script>

  4. 4、工具条测试

    1）修改并发布完成后的页面，需要测试无障碍工具条是否能正常运行。实例请点击下面的按钮打开：

    点击打开无障碍辅助阅读工具条

    2）无障碍工具条测试要点

    • 点击无障碍启动按钮，查看无障碍工具条是否能正常展开
    • 使用『放大缩小』按钮，查看页面是否能缩放
    • 使用『配色』按钮，查看页面背景色是否已被替换
    • 使用『辅助线』按钮，查看红色十字辅助线是否显示
    • 使用『开启屏幕』按钮，查看底部屏幕是否已经出现，并检查简繁体、拼音等功能是否显示正常
    • 点击『文本模式』按钮，页面是否已经被转换成纯文本模式

  5. 天气信息服务

    新版无障碍JS中集成了天气服务，网站如有需要可按以下规则引用，代码如以下所示：

    
	<!-- 当前日期 -->     <span weather_date></span>
	<!-- 温度 -->        <span weather_temperature></span>
	<!-- 天气 -->        <span weather_note></span>
	<!-- 实时示意图 -->   <img weather_img /></span>
	<!-- 风向 -->        <span weather_wind></span>
	<!-- PM 2.5 -->     <span weather_pm25></span>
	<!--  空气质量 -->   <span weather_aqi></span>

    显示效果可根据网页风格修改，使之适合网页样式。
    气象信息数据来源：国家气象局

    引入天气服务后显示效果如下：

  6. 文章内容社交媒体分享服务

    新版无障碍JS中集成了文章分享服务，可实现网站中的文章页面的微博分享链接和微信分享二维码生成，代码如以下所示：

    						
	<ul >
		<li>
			<a href="#" title="" onclick="data_share();return false;">微信分享</a>
			<div id="weibo_pos"></div >
		</li>
		<li><a href="#" title="" onclick="data_sendto('tsina');return false;">新浪微博</a></li>
		<li><a href="#" title="" onclick="data_sendto('eastday');return false;">东方微博</a></li>
	</ul>

    显示效果如下，请点击按钮测试：


    显示效果可根据网页风格修改，使之适合网页样式。

  7. 无障碍语音服务

    引用后能自动将网页发布所有文章中的文字转换成语音，供视觉有障碍的人群播放使用。

    1、旧版无障碍语音服务改造

    如果网站中已有旧版的无障碍语音服务，也需要先清除。旧版本无障碍语音代码如以下所示：

    						
	<!-- 无障碍语音服务 -->
	<script src='https://voice.ewdcloud.com/js/ew_msc.js' charset='gb2312'></script>

    2、开通无障碍语音服务

    未使用过无障碍语音服务的网站请按以下步骤实施：

    1）联系工作人员开通无障碍语音服务

    2）确认开通后需要改造网页文章页面代码

    						
	<!-- 标题 -->
	<div id='ivs_title'>李强赴上海自贸区重点围绕“增设上海自贸试验区新片区”开展调研</div>
	<!-- 日期 -->
	<div id='ivs_date'> 2018年11月15日 </div>
	<!-- 语音播放器 -->
	<div id='ivs_player'></div>
	<!-- 文章正文 -->
	<div id='ivs_content' >
	   ... 
		正文内容
	   ... 
	</div>

    无障碍语音示例：

    李强赴上海自贸区重点围绕“增设上海自贸试验区新片区”开展调研
    2018年11月15日

    点击『播放』按钮播放文章内容语音。
    三项新的重大任务是党中央立足全国大局作出的重大战略部署，我们要深入学习贯彻习近平总书记重要讲话精神，充分认识增设上海自贸试验区新片区是开放的深化、功能的强化、布局的优化、动力的转化，是全方位、深层次、根本性的制度创新变革

    开通无障碍语音需联系工作人员开通才能提供正常服务，该服务和网站域名绑定，多个域名的需要把域名清单提交给工作人员配置。

    3、无障碍语音服务测试要点

    • 打开稿件页面，查看语音播放器是否显示正常
    • 点击『播放』按钮，语音是否播放正常，播放内容是否和文本内容相符

  8. 网页简繁体转换服务

    引用简繁体转换服务的网站能一键将网页显示的简体文字转换为繁体文字，包括JS、iframe、输入及选择框等显示的文字都能转换。 启用转换繁体后，用户在跳转浏览所有页面都将显示繁体状态。请点击下面按钮查看转换效果：

    点击此按钮把页面文字转换成繁体

    如需网站请按以下步骤实施：

    1）联系工作人员开通网页简繁体转换服务

    2）确认开通后在指定按钮加上代码，代码如下所示：

    						
	<a name="ft" class="zh_click" href='javascript:zh_tran("s");' charset="UTF-8" id="zh_click_s">繁体</a>

    3）如果网页中有图片中包含文字，则需要采用图片替换的方式。每张包含文字的图片都需要对应一张繁体文字的图片， 图片引入地址可以配在当前页面最下方，或使用一个JS配置文件的方式引入。

    配置代码如下所示：

    	
   <img src="ywtb-S.png" id="img1">					
   <script>
      function EndLangElement(lang){
        if(lang=='s'){
          $("#img1").attr('src','ywtb-S.png');
        }//简体
        if(lang=='t'){
          $("#img1").attr('src','ywtb-T.png');
        }//繁体
      }
   </script>

    示例

    点击上方的『繁体』按钮也可以把页面图片替换成繁体图片

中国上海门户网站管理中心 2018