网站无障碍访问学习

2022-11-23 本文已影响0人 squidbrother

概要

无障碍辅助版：通过辅助工具条网页文字放大缩小、网页界面放大缩小、阅读辅助十字光标、阅读配色器、文字放大专用屏等帮助浏览者更加便捷的浏览网页信息。
无障碍语音版：把网站上的文字转化成语音，通过语音读屏，读出网站上的信息。
无障碍全程导航：盲人全程导航通过数字键导航功能为视障浏览者在无读屏辅助软件的情况下通过导航语音的方式进行网页内容的浏览，该浏览的方式只要通过按选计算机键盘的相应数字键即能完成。

总之就是为了满足特殊人群浏览页面内容

无障碍说明文案参考内容

本网站坚持以人为本，倡导信息公平、权利平等，注重服务智能高效、受益人群广泛，在满足残障人士获取信息的同时，健全人也能从中受益。网站无障碍服务覆盖计算机网站及客户端和移动网站及APP等传输渠道，达到中国政务信息无障碍服务体系要求。

本网站严格遵循W3C《WCAG2.0》国际标准和《网站设计无障碍技术要求》及《Web信息无障碍交流通用设计规范》国内标准进行设计，充分满足信息无障碍重点服务人群盲人用户的需求，并通过提供全程键盘和人机语音互动等替代操作方式，网页文本信息影音化和特大文字网页等推送方式，为行动障碍的残疾人，低弱视力的视障人士，文化认知有障碍人士，以及阅读能力下降的老年人提供更加便捷高效、更加智能友好的服务。

计算机网站及客户端页面的所有内容可被键盘全程操作，移动网站及APP支持智能手势和人机语音互动替代操作。所有网页提供智能盲道和操作提示服务，所有图片和按钮控件均标示文字说明。为网页及文字提供色彩变化、大小设置、语音阅读服务。提供信息自定义和信息扁平化大字幕影音服务。

具体功能

借鉴了若干网站，如首都之窗，类似的可以在开发时候看看。
虽然大部分网站业务中，是不考虑这块的，但政府网站或者官方平台，对残障人士是照顾有加的，如果业务上遇到了，可以知道怎么回事儿。

页面放大缩小功能
实现：
主要实现的方式，通过css3 改变内容区，transform:scale(xxx)来实现
细节：

如果页面中存在fixed元素，不要将该元素，放入到缩放区域，否则会丢失fixed效果，变为absolute
可以将变化区域单独放在一个DIV内，进行css3变大缩小，fixed元素同其平级即可
页面放大是css3实现的，真实盒模型并未放大，因此会出现页面内容溢出窗口的情况，因此需要考虑放大的最大值，此外，要动态修改页面的高度（新的页面高度 = 页面高度乘以放大系数）

页面文字放大缩小

方法1：
通过对页面内容中文字，修改单位px变化为rem，后续可以修改html字体来实现，统一变化
方法2：
通过类名来控制，给需要调整的文字都加上统一的类名，如'willChangeFontSize'，然后点击文字放大缩小按钮后，在事件处理函数中修改最外层类名，如'fontSizeStyle1'、'fontSizeStyle2'

.fontSizeStyle1  .willChangeFontSize { transform:scale(1); }
.fontSizeStyle2  .willChangeFontSize { transform:scale(1.1); }

方法3:
类似方法2，给需要改变文字的元素，加上统一类名，如'willChangeFontSize'
然后通过DOM操作遍历操作这些元素的fontSize，设置为原先字体的多少倍，当然原始字体大小，可以获取挂载元素的自定义属性上，方便二次修改

修改配色（高对比度），满足色盲人群
如白字紫底、黑字蓝底、红字白底等
实现：
操作，可以通过像body上挂载类名，然后通过通配符(*) ，来实现其效果，但是需要注意调高css渲染优先级(id名，或者 !important)等
通过查看，也有操作所有DOM，修改行内样式style来实现的，这个感觉性能开销大，还是算了
大字幕(文字提示)
功能效果，开启后，页面会出现一个浮层，当鼠标滑过文本时候，浮层内会出现鼠标触碰的文字，以大号字体出现
实现：
无障碍区域内，通过DOM选择通配符，查看其内部有无children，如果没有，

查看能否获取到innerText，有那么就是文本
无innerText，且标签类型为图片，那么查看图片是否有alt，有那么展示alt内容
富媒体视频，感觉也可以尝试类似方式，看一看，如查看视频名称 'xxxx.mp4'，把xxxx解析出来

超大指针
方便眼镜不便人群，查看鼠标位置，就是一个大一点的鼠标图标
实现：
body挂载类名，类名内样式内引用大鼠标图，如 cursor:url(/static/dzb/images/bigCursor.cur),auto;
细节：
cur格式文件要比png格式文件，兼容性好
参考线
一个十字线，鼠标移动到哪里，通屏的横线和竖线的交叉点就在哪里
实现：
DOM操作body，鼠标滑动，将提前备好的 (通屏横线修改top值，通屏竖线修改left值)，
细节：

其一，如果页面有滚动条，那么这两条线，最好包裹在一个fixed的盒子里
其二，参考线不可影响用户正常使用，因此，需要css设置其pointer-events:none;，防止其覆盖正页面中按钮或链接，无法进行正常操作

适老版
大概是没有花哨的布局，内容以大文字，纵向逐一罗列下来即可
实现：
首都之窗，是用过在body上挂载新类名useOldFixed，对页面所有部分进行了样式覆盖实现的
文本模式
类似适老版，但是还要进一步删除样式，类似于缺少样式表的页面效果
实现：
感觉body下包裹一层div，类名aaa，所有css样式书写都嵌套一层aaa，如果要文本模式，那么把这个div类名aaa去除即可
语音模式
效果：
滑过内容，会语音播报，或者开启，会自动阅读整个页面内容
实现：
暂时不清楚，怎么实现这个功能

大字幕(文字提示)实现

滑过所有元素，如果只有一个元素节点的情况下，根据节点类型来获取文案
如果文本类型，那么通过nodeValue取值
如果元素类型，非图片视频音频的富媒体标签，获取其具体文案(innerText 或者 jQuery的text())
如果元素类型，如图片标签，那么根据alt，查看有无图片描述内容可获取

※ nodeType 属性返回节点类型。

元素节点: 1
属性节点: 2
文本节点: 3

获取节点相关

jquery 获取元素包含的第一层节点（所有 [直接] 子元素） -- （包含文本和注释节点）

$(this).contents();

javascript 获取元素包含的第一层节点（所有 [直接] 子元素） -- （包含文本和注释节点）

$(this).get(0).childNodes;

jquery 获取元素包含的元素节点

$(this).children();

如果元素节点包含0个子节点，如: 一个图片元素

元素节点包含0个子节点
如果元素节点包含1个子节点，如: <em>xxx演示账号</em>

元素节点包含1个子节点
如果元素节点包含3个子节点，如:

<a href="###">
    <i class="iconfont icon-gongdanqueren icon"></i>
    <i class="iconfont icon-xiayiyeqianjinchakangengduo arrow"></i>
    <b>信息报送</b>
</a>

元素节点包含3个子节点

代码： -- (待完善：视频、音频等等....)

$('*').bind('mouseover',function(event){
    var _tar = $(this);
    //var _tarNode = _tar.get(0).childNodes;
    //返回被选元素的所有 [直接] 子元素（包含文本和注释节点）
    var _tarContNode = _tar.contents();
    //文本节点数组
    var _txtNodeArr = [];
    //文本
    var _txtNodeTxt = '';

    //浮层显示的情况下
    if(_wordTipBox.hasClass('wordTipBoxAc')){
        //节点数量(元素节点，属性节点，文本节点，注释节点)
        //console.log(_tarContNode.length,_tarContNode);
        
        if(_tarContNode.length == 0){
            //-- [直接子元素 - 0个]
            if(_tarContNode.context.nodeName.toLowerCase() == 'img'){
                //图片
                _txtNodeTxt = _tarContNode.context.alt || _tarContNode.context.title || '一张图片';
            }else{
                if(_tarContNode.context.classList && _tarContNode.context.classList.value && _tarContNode.context.classList.value.indexOf('iconfont')!=-1){
                    //iconfont图标
                    _txtNodeTxt = '一个图标';
                }else{
                    //其他(视频、音频等...)
                    _txtNodeTxt = _tarContNode.context.nodeValue || _tarContNode.context.title;
                };
            };
        }else if(_tarContNode.length == 1){
            //-- [直接子元素 - 1个]
            if(_tarContNode[0].nodeType == 3){
                //文本节点
                _txtNodeTxt = _tarContNode[0].nodeValue || _tarContNode[0].title;
            }else if(_tarContNode[0].nodeType == 1){
                //元素节点
                if(_tarContNode[0].nodeName.toLowerCase() == 'img'){
                    //图片
                    _txtNodeTxt = _tarContNode[0].alt || _tarContNode[0].title || '一张图片';
                }else{
                    //其他(视频、音频等...)
                    _txtNodeTxt = _tarContNode[0].nodeValue || _tarContNode[0].title;
                };
            };
        }else if(_tarContNode.length > 1){
            //-- [直接子元素 - 多个]
            //包含子节点的元素节点计数变量
            var _sumEleNodeNum = 0;
            for(var i=0; i<_tarContNode.length; i++){
                if(_tarContNode[i].nodeType == 1){
                    //元素节点
                    _sumEleNodeNum += _tarContNode[i].childNodes.length;
                }else if(_tarContNode[i].nodeType == 3){
                    //文本节点
                    _txtNodeArr.push(_tarContNode[i].nodeValue);
                };
            };
            //同级元素节点都没有子节点的情况下
            if(_sumEleNodeNum == 0){
                _txtNodeTxt = _txtNodeArr.join('');
            };
        };
        if(_txtNodeTxt != '' && _wordTipMes.html()!=_txtNodeTxt){
            _wordTipMes.html(_txtNodeTxt);
        };
    };

    //阻止事件冒泡
    event.stopPropagation && event.stopPropagation();
});

未完待续....

网站无障碍访问学习

获取节点相关

猜你喜欢

热点阅读

网站无障碍访问 学习

获取节点相关

猜你喜欢

热点阅读

网站无障碍访问学习