福州市自然资源和规划局网站页面统一规范、适老化和无障碍改造项目建设方案.docx

福州市自然资源和规划局网站页面统一规范、适老化和无障碍改造项目建设方案目录1、项目概述21.1项目名称与业主单位21.2 项目背景21.3 建设目标21.4 建设内容31.5 项目要求42、项目建设方案52.1 网站升级改造52.1.1 网站页面统一规范改造52.1.2 网站适老版开发112.1.3 1.3网站无障碍改造122.2 网站维护服务141、项目概述1.l项目名称与业主单位项目名称：福州市自然资源和规划局网站页面统一规范、适老化和无障碍改造项目业主单位：福州市自然资源和规划局1.2 项目背景近年来，国务院办公厅、省政府办公厅先后发布了相关文件，对政府网站的建设工作都提出了相应要求：一是福建省政府网站页面统一规范针对网站页面进行改版优化提出要求，实现页面框架、头尾标识、栏目设置、字体字号、颜色搭配等方面的统一，提升网站整体服务水平和用户体验。二是国务院办公厅关于印发政府网站发展指引的通知（国办发201747号）针对无障碍适老化改造要求：“根据用户群体特点和需求，围绕残疾人、老年人等特殊群体获取网站信息的需求，不断提升信息无障碍水平。；三是福建省人民政府办公厅关于建立全省政府网站和政务新媒体突出问题通报制度的通知要求：“政府网站IPV6支持度、适老化和无障碍浏览改造未达到国家要求的”进行通报。按照上述相关要求，为切实提升网站服务能力和绩效水平，亟待开展福州市自然资源和规划局网站统一规范及无障碍和适老化网站建设项目，包括网站标准化改造、网站适老化开发、网站无障碍改造、网站个性化运维服务。1.3 建设目标本项目充分响应了国办、省委、省政府相关文件精神要求，在建设上立足于网站的实际情况，通过本次项目建设，能够提升网站整体服务水平，打造具有福州市自然资源和规划局的特色，整体协同，规范、权威、良好的网上政府形象,实现对外服务统一门户。为公众和企业提供更加智能化、个性化、高质量的政务服务、公共服务和便民服务，实现网站对外服务人性化。优化用户体验，将网站打造成更加及时的政务公开平台、更加权威的政策发布平台、更加便捷的公众服务平台。1.4 建设内容(1)网站页面统一规范改造按照省政府办公厅确认的福建省政府网站页面设计统一规范对网站进行规范性改造，实现网站整体协同。具体改造内容包括：网站头部、底部页面设计切图、首页和一级页面设计切图，以及页面展现设计改造、模板实施、测试等工作，引入响应式设计，确保改造完成页面能够符合规范要求，并满足电脑、平板和手机等多种终端访问。(2)网站适老版开发根据互联网网站适老化通用设计规范对互联网网站进行入口设置、网页设计、功能开发、响应式设计和焦点状态以及全站网页源码改造，对全站页面进行适老化设计，量身定制“长者模式”，为老年人提供能用、好用的政务信息和服务。(3)网站无障碍改造根据2021年福建省政务公开第三方评估指标体系的要求：需评估网站相同栏目内容的一致性、无障碍服务的可用性。因此需要为视力障碍或因环境等因素不能正常浏览网页的人群提供网站无障碍浏览服务。(4)网站个性化运维服务为保障网站能够不断满足国办、省政府、市政府和福州市自然资源和规划局网站的工作要求以及日常维护需要，根据日常维护需要，对网站栏目、页面和相关功能进行不断的调整优化。项目要求1.技术条件要求本次网站改版开发工作需要在福州市级政府网站统一技术平台上进行，应用体系整体上需采用技术成熟稳定的J2EE架构，和原福州市政府网站平台的各系统基础架构保持一致。系统实现完全采用B/S模式，基于关系型数据库和主流中间件。其他功能可在相应层次上利用产品的应用开发接口定制开发Q项目中涉及到的软件和开发功能需支持虚拟化技术，能够在政务云平台的虚拟机上正常运行，实现节约资源、集中管理的目的。代码的设计和开发应该遵循相应的国际、国内、地方或行业标准，需要对数据和代码安全性作充分考虑，并提供较完善的数据备份和恢复功能，保证网站和系统的稳定和安全。2.版面设计要求本次改版应基于福州市级政府网站统一技术平台，按照国务院办公厅政府网站发展指引、国办秘书局政府网站与政务新媒体检查指标及主流的政府网站绩效评估机构指标相关要求，并结合福建省政府网站页面统一规范，对网站进行全面改版升级，包括网站页面设计、模板开发、配置实施等工作，采用扁平化和响应式设计,实现网站自动适应各种终端访问的移动化要求，全面提升网站服务水平。2、项目建设方案2.1 网站升级改造2.1.1 网站页面统一规范改造福建省人民关于2021年第四季度全省政府网站与政务新媒体检查情况的通报中要求：各级各部门严格按照国办和福建省政府网站页面统一规范要求，加快本单位网站页面、栏目、标识等设计，确保各级各部门网站与省政府门户网站整体协调、风格统一。各地市要加强对所属县（市、区）及市直部门网站页面统一规范设计的指导，确保全省统一、规范、权威，充分体现“一体化网上政府”理念。具体内容要求如下：1 .1.1.1改造内容编号模块名称内容说明1网站头部、底部基于原有页面设计切图根据规范要求，对网站的头部和底部进行基于原有页面设计、切图。2首页和一级页面基于原有页面设计切图网站首页及一级页面基于原有页面设计、切图。3页面展现设计改造页面大小：通过调整样式扩宽全站界面的宽度。字体字号：通过调整样式修改全站页面的字体字号大小。颜色：通过调整样式修改全站页面全站色彩搭配，包括主色和辅色。图片图标：根据规范修改网站图片和图标。页面控件：根据规范规范修改网站页面控件，包括切换、按钮、分页条和表单等。交互：根据规范，统一全站的页面交互。4响应式改造全站页面进行响应式切图，自动适应各种终端访问。全站页面模板实施5模板实施网站头部、底部页面模板实施开发。6页面替换测试根据设计页面，对全站页面样式替换和测试。2 .1.1.2改造规范需要对网站页面进行设计，符合省政府规范性改造要求。网站首页网页原则上应包括头部标识区、频道导航区、头条图片区、要闻推荐区、办事服务区、政务公开区、解读回应区、互动交流区、专题推荐区、底部功能区等。2.1.1.2.1头部标识区样式规范（一）网站功能原则上应包括用户中心、智能搜索、智能问答、繁体版、移动版、适老版、无障碍浏览、IPv6访问标识等。（二）统一链接规范市级部门网站头部链接至少包含国务院、省政府和市政府、用户中心等。（三）网站名称政府网站要使用规范的单位名称和正确的英文名称，以及规范的域名地址。（四）搜索功能展示“站内搜索”和“全市搜索”两个选项。（五）导航栏目设置体现“政务公开、解读回应、办事服务、互动交流”四大功能，各级各部门网站需开设本单位“概况信息”（通用名称，根据实际情况自行设置名称）。2.1.1.2.2底部功能区样式规范（一）网站标识展示党政机关标识、网站标识码、ICP备案编号、公安机关备案标识。（二）站点信息原则上应展示网站主办及承办单位、“关于我们”“网站声明”“隐私保护”“站点地图”“联系我们”等信息。（三）网站功能展示“我为政府网站找错”。2.1.1. 2.3页面展现规范（一）页面大小按适配常用分辨率的规格设计，PC端页面分辨率一般为72像素每英寸，页面画布尺寸至少宽度1920像素，中间内容区域至少宽度1300像素（必选）。网页自动匹配适应多种终端访问，在移动端浏览器上宜进行结构重排及样式重新渲染，与移动端浏览器显示方式相匹配，页面整齐不变形，不出现文字错行、表格错位、功能和控件不可用的情况。（二）字体字号1 .中文版导航：微软雅黑24px;二级导航：微软雅黑24px;栏目名称：微软雅黑20px18px;正文标题：微软雅黑32px;正文内容：微软雅黑18px,行高32px,段间距15px；或者宋体16px,行高32px,段间距15px；2 .英文版(若有)导航：Arial,24px;栏目名称：Arial,26px;正文标题：Arial,32px;正文内容：AriaI,文px;行高:24px；(三)颜色网站整体色彩：网站整体色彩为“新时代蓝”(#1658a0),主要辅色为浅蓝色、浅灰色。颜色选择应和网页内容保持协调。各颜色在使用上主要遵循重点突出位置用蓝色，但在使用时不要过大面积地使用蓝色块，可以“点”的形式适当运用导航、按钮、文字、图标等色彩的搭配起到突出重点的作用。次要重点位置用蓝色，浅灰色的背景用于区域划分，内容区域底色为白色。增加对比度的使用，如在深色背景中使用浅色字，在浅色背景中使用深色字。通用文字色：标题和正文的文字要有颜色和大小的区别，便于网民浏览。中文版与英文版正文字体颜色色值均为#333333。通用文字链接色：为使用户更快捷地访问链接资源，对已经链接过的和未链接的文字以颜色区分，并保证色差缓和不影响视觉。文字前景色和背景色要有足够的亮度差以保证对比度。中文版链接字体鼠标经停颜色为蓝色(#1658a0)O（注：界面主色调保持一致的前提下可使用辅助色彩进行搭配使用，如图片、文字、图标、按钮等，辅助色不能作为主色调使用。）（四）图片网站各页面使用的图片应清晰准确，与页面内容一致；所有图片应定义高度和宽度，并设置替代文本（即定义alt属性），替代文本应与主题保持一致；为保证网站浏览速度，图片应使用JPG或PNG格式，图片分辨率不低于72像素每英寸，单张图片大小不得超过200KB；避免使用可能存在或潜在纠纷的图片。（五）图标统一风格图标。建立各自统一风格的图标，包括造型规则、圆角大小、线框粗细、图形样式和个性化细节等元素应按各自规则统一设计。（六）页面控件统一网页控件。网页设计中常用的控件包含切换、按钮、分页、步骤流程等。默认文本标签以右对齐方式位于输入框左侧，各元素间距尽可能遵循以4px为增量单位的规则。（七）交互交互的统一性。组件的操作流程应与用户的常规操作流程认知保持一致；组件样式应支持主流浏览器和主流操作系统，不应因用户使用的浏览器或操作系统不同而发生变化。（）地图网站使用地图时，要采用测绘地信部门发布的标准地图或依法取得审图号的地图。（九）其他显示内容中图片、附件、视频等应有效可用，名称要直观准确。附件采用OFD或PDF、视频采用MP4等主流常用格式，其中附件宜使用网页阅读(尽量不用浏览器插件)模式，便于跨平台的兼容性和浏览的流畅度，图片大小不超过1M,MP4等多媒体文件不超过50Mo2.1.1.2.4办事服务模块规范具有对外服务职能的部门网站还要提供办事服务功能，在网站导航栏提供链接至省网上办事大厅本单位分厅页面。2.L1.3网站后台模版实施和功能定制将设计的页面转换为模板，部署到市统一平台，页面风格统一，美观大方,并支持各种主流的浏览器访问。网站页面设计完成后，能够将页面设计效果转换为HTML页面，并制作成网站页面模板，部署到福州市政府网站统一技术平台中，并对网站相关功能进行定制开发。具体如下：(1)网站页面设计完成后，能够将页面设计效果转换为HTML页面，并制作成网站页面模板，并对发布的页面效果进行调试。(2)网站发布的文章行距、字体能够根据要求进行统一，美观大方。(3)网站支持各种主流的浏览器访问，如：IE、360、火狐、谷歌、浏览器等，访问时网站不会出现页面缺失、变形的情况。2.1.1.4响应式改造根据互联网发展变化和公众使用习惯，本次对新改版页面引入响应式设计,实现政府网站网页自动匹配适应多种终端访问，PC网站+手机站+平板网站“三站合一”。具体实现方式包括弹性网格和布局、图片、CSSmediaquery的使用等。确保网站能够识别不同的访问终端，自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。2.1.2网站适老版开发根据2023年3月发布的福建省人民政府办公厅关于建立全省政府网站和政务新媒体突出问题通报制度的通知中要求政府网站适老化和无障碍浏览改造未达到国家要求的收到通报后需第一时间整改。本次适老化发需按照国务院办公厅和工业和信息化部要求，兼顾老年人、视障听障等群体需求，根据互联网网站适老化通用设计规范，对政府网站开展适老化改造。页面设计采用大字体、大图标、高对比度文字等，简化页面浏览路径、加大可点击区域、减少手动输入。具体内容如下：2.1.2.1人口设置入口放在政府网站头部，能够让老年人用户快速找到该入口。加入动态效果,鼠标指针放在图标上时，图标整体变成较鲜艳的颜色提醒老年人用户进入适老版页面。2.1.2.2页面设计适老版页面要针对老年人用户的浏览习惯进行设计，需要设计包括首页、一级页面、列表页面、详细内容页面等。2.1.2.3功能开发适老版页面需要加入返回首页、键盘操作、大字幕、鼠标样式、放大页面、缩小页面、语音阅读等功能。(1)返回首页：点击后返回大字版首页；(2)键盘操作：点击后需要能用键盘控制网页，键盘上下左右控制移动选择栏目；(3)大字幕：提供厅网站无障碍中的字幕功能；(4)鼠标样式：点击“鼠标样式”按钮后指针整体变大变黑；(5)放大页面：根据老年用户的需求自由放大页面最大可到200%。(6)缩小页面：根据老年用户的需求自由缩小页面最大可到200%。（7）语音阅读：点击后连续阅读整个网页或指读。语音播报老年人正在进行的操作和网页所有内容。（8）重置：重置功能条中的所有功能恢复到初始状态。（9）高对比度：针对老年人可能出现的色弱等情况，提供网站高对比度设置方便老年人浏览。（10）语速调节：设定阅读速度的快慢。（Il）音量调节：设定阅读时声音的大小。（12）语音关闭：开启和关闭语音阅读。（13）显示屏：提供网站大字屏幕方便老年用户浏览信息。（14）区域指引：将网页划分为“导航区”“视窗区”“交互区”“服务区”等内容模块并可以通过快捷键在模块间跳转获取各个模块信息。2.1.2.4响应式设计和焦点状态页面需支持响应式设计。鼠标、指读、键盘操作聚焦到页面各组件时，该组件应有明显的状态提示。2.1.3网站无障碍改造根据福建省人民政府办公厅关于建立全省政府网站和政务新媒体突出问题通报制度的通知2021年福建省政务公开第三方评估指标体系等文件要求：需评估网站相同栏目内容的一致性、无障碍服务的可用性。因此需要为视力障碍或因环境等因素不能正常浏览网页的人群提供网站无障碍浏览服务。本次无障碍浏览页面改造主要为老年人提供字体放大缩小、页面放大缩小功能；为斜视人群提供辅助线功能；为色盲色弱人群提供色彩高对比度功能，同时还提供放大镜、简繁转换、拼音标注、语音朗读等辅助获取信息的功能。2.1.3.1提示服务和文字说明所有网页提供智能盲道和操作提示服务，所有图片和按钮控件均标示文字说明。2.1.3.2无障碍网站浏览辅助功能(1)网页浏览者可根据自己的需求调整网页朗读的语速，支持加快的语速和正常的语速；(2)网页浏览者可根据自己的需求自行调整网页文字的大小，点击放大按钮能放大整个网页；点击缩小按钮能缩小整个网页；(3)提供页面色彩对比功能,所谓页面色彩对比是将当前页面网页的前景内容和背景的颜色对比调到最大，为弱视用户能够清晰地访问网页内容提供了帮助。点击图中圆盘图标可以提供颜色选择，包括白底黑字、蓝底黄字、黄底黑字、黑底黄字；(4)提供页面内容放大显示区，会在页面下方出现一个显示区域，该区域会显示当前鼠标所指到的文字信息并进行放大，同时支持简繁体互转及拼音显示。2.1.3.3全网站页面可用键盘操作为方便记忆及使用，定义基础键加数字和符号组合快捷键，复合键多以数字、符号键代替。具体快捷键功能包括关闭无障碍辅助工具、朗读工具条功能、跳转首页、跳转帮助、退出无障碍辅助工具、页面后退、页面前进、刷新页面、切换光标、切换纯文本、文字放大、文字缩小、配色开关、页面放大、页面缩小、语音开关、语音调节、指读、连读、切换显示屏、切换全屏、向上选择配色、向下选择配色、减缓语速和加快语速。2.1.3.4源码改造根据信息技术互联网内容无障碍可访问性技术要求与测试方法和行业标准YD/T1822-2008信息无障碍身体机能差异人群网站无障碍评级测试方法对网站源码进行改造，帮助各类残障人士更好地适应并融入智慧社会，进一步提升政务信息和服务获取感、体验感，包括全键盘导航、非文本内容添加描述、验证码改造、兼容性升级、区域导航标签优化、实时语音读屏等，该项改造的工作涉及到网页的所有模板及各网页中的内容。(1)支持键盘导航网站支持键盘导航是无障碍很最关键的一个方面，对于依赖于屏幕阅读器的失明人士和没有精确肌肉控制的人士，都需要使用键盘来导航内容。改造后可通过全键盘流畅操作页面所有内容同时，在浏览页面时，遵循从左到右、从上到下的操作原则，确保键盘操作有顺序、有逻辑、可预测、可感知。（2）为非文本内容添加替代文本视障人士经常会利用屏幕阅读器来“聆听”网站内容，网页的图片、控件和各类组件等内容是无法通过屏幕阅读器读出来。通过对全站所有的图片、控件、链接和各类组件等非文本内容添加详细的文本描述，让视障人士快速获取信息，并在脑海中形成网页画面。（3）提供语音验证码无论是传统的数字验证码还是图形验证码对于视隙人士来说都很难被识别，除提供更容易被识别的文本验证码之外，增加语音验证码功能，点击即可播放验证码，彻底解决了对验证码识别的问题。（4）区域指引导盲。由于网站的内容丰富，用户在访问网站时是更希望能直接访问页面中的某些内容，通过按区域对网页进行标准化、规范化分区，划分为导航区、服务区、视窗区、交互区，当用户使用键盘操作时，可播放网页整体结构和区域信息的详细描述，提供各区域跳转快捷键，提高操作效率。（5）实时语音读屏。如果没有屏幕阅读器等辅助阅读工具时，提供语音播放功能，让相关政务信息和服务不仅“看得到”还“听得见”同时兼容读屏软件完整获取全站信息。2.2网站维护服务基于福州市级政府网站统一技术平台，为网站提供1年的网站日常维护和个性化需求调整服务。提供7义24的电话支持和5X8的在线支持，故障诊断、功能和漏洞修复，并根据故隙严重程度提供限时解决故障的现场服务，确保网站的正常运行和使用，具体内容如下表：序号项目子项目说明数量时限1界面网站首页、一不改变网站页面整体风格和布局的42次3个调整级页面中的局部模块设计调整情况下，对网站首页、一级页面中局部内容进行设计调整（如首页页面中信息公开、网上办事和互动交流展示模块的展示设计调整）工作日通知、声明制作网站横幅/背景图/飘窗/对联效果/头部flash/按钮/图标制作15个3个工作日网站前端功能界面调整如信箱提交类的功能调整、查询类功能的字段调整、问卷调查的功能调整、在线访谈的功能调整、网站检索的功能调整20次3个工作日2内容维护栏目、文档的批量调整、处理网站前端栏目、文档顺序的批量调整;含指定敏感信息文档批量处理；M）RD文档的批量导入；页面显示问题的批量处理W5次3个工作日协助进行特殊文档的录入和发布协助对格式复杂的文档编辑发布和特大附件上传W5篇1个工作日音视频处理音视频文件的转码和上传W5个1个工作日图片处理根据提供的图片进行格式修改，美化调整W3O张1个工作日信息（内容）抓取抓取指定的目标网站栏目信息，并导入到网站后台指定栏目Wlo个3个工作日网站错链、死链修改调整对网站模板中的错链、死链接配合修改调整（不包含信息录入的链接、历史数据中包含的错误链接等）不限3个工作日3特殊定制信件模版定制信件打印模版的定制、信件导出模版的定制1次3个工作日开发网站信息录入功能个性化定制根据需求，对后台编辑器的录入功能进行扩展字段的定制1次3个工作日短信接口的定制短信接口对接，并配置短信提醒功能1次3个工作日4培训自行组织的网站操作培训（培训时间为半天）WI次5技术支持现场技术支持W3次