YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » 简单的无障碍阅读辅助工具栏

简单的无障碍阅读辅助工具栏

去年用JavaScript写的一个无障碍阅读辅助工具栏的效果,把代码整理了一下,拿了新浪的首页做测试页,效果还算是实用,这里的演示效果是拿新浪的首页测试的,看看吧!

_r2_c2.gif.thumb.jpg

演示地址:http://www.yaohaixiao.com/scripts/webaccess/

下载地址:webaccess.rar

虽然不是真正意义上的无障碍阅读,不过看上去还是挺唬人的。在JS的注释里,我都把效果的实现原理解释了一下。当然,还有也性能问题要解决,也希望感情趣的朋友一起来改善。看看实现的代码吧:

CSS 代码

    #web-access-toolbar {
        position: fixed;
        _position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        margin: 0 auto;
        width: 100%;
        height: 30px;
        background-color: #FFF;
        padding: 10px 0;
        text-align: center;
        overflow: hidden;
    }

    #web-access-toolbar button {
        font-size: 18px;
            margin:0 5px;
    }

    .webacc-container{
            margin:0 auto;
            width:960px;
    }

    .text-mode,
    .text-mode .text-mode,
    .text-mode .text-mode .text-mode,
    .text-mode .text-mode .text-mode ,text-mode,
    .text-mode .text-mode .text-mode .text-mode .text-mode,
    .text-mode .text-mode .text-mode .text-mode .text-mode .text-mode,
    .text-mode .text-mode .text-mode .text-mode .text-mode .text-mode .text-mode{
        margin: 0 auto;
        background-image: none;
            background-color: #FFF;
            padding:0;
            text-align:left;
            text-indent:0;
            float:none;
            overflow: visible;
            color: 000;
        width: 958px;
        border: 1px solid #000;
    }



    .first-wrap {
        margin-top: 52px;
    }

    .highlight, .highlight .highlight, .highlight .highlight .highlight, .highlight .highlight .highlight .highlight, .highlight .highlight .highlight .highlight .highlight {
        background: none;
        background-color: #000;
        color: #FFF;
        border-color: #FFF;
        text-indent: 0;
    }

    .line-x,.line-y{
            position: absolute;
            background-color:#C80000;
            overflow:hidden;
    }

    // 看效果图,似乎需要更大的z-index,这个大家看情况修改吧
    .line-x{
            z-index:1000;
            left:0;
            width:100%;
            height:5px;
    }

    .line-y{
            z-index:1001;
            top:0;
            width:5px;
            height:100%;
    }

JavaScript 代码:

    (function(){
            /**
             * jQuery.cookie
             */
        jQuery.cookie = function(key, value, options){
            if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(value)) || value === null || value === undefined)) {
                options = $.extend({}, options);
                if (value === null || value === undefined) {
                    options.expires = -1;
                }
                if (typeof options.expires === 'number') {
                    var days = options.expires, t = options.expires = new Date();
                    t.setDate(t.getDate() + days);
                }
                value = String(value);
                return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join(''));
            }
            options = value || {};
            var decode = options.raw ? function(s){
                return s;
            } : decodeURIComponent;
            var i = 0;
            var pairs = document.cookie.split('; ');
            for (var pair; pair = pairs[i] && pairs[i].split('='); i++) {
                if (decode(pair[0]) === key) {
                    return decode(pair[1] || '');
                }
            }
            return null;
        };
           
        (function(){
            var head = $($('head')[0]),
                    body = $(document.body),
                    wraps = $('div'),
                    firstWrap = $($('.w_first')[0]),
                    imgs = null,
                    allElements = null,
                    cssLinks = $('link'),
                    cssStyles = $('style'),
                    cssAccLink = $('<link />').attr({
                'id': 'web-access-style',
                'href': 'webaccessbility.css',
                'rel': 'stylesheet',
                'type': 'text/css',
                'media': 'all'
            }),
                    btnTxt = null,
                    btnPageZoomOut = null,
                    btnPageZoomIn = null,
                    btnFontZoomOut = null,
                    btnFontZoomIn = null,
                    btnHighlight = null,
                    btnHelpline = null,
                    btnIntro = null,
                    btnReset = null,
                    btnClose = null,
                    lineX = null,
                    lineY = null,
                    isToolBar = $.cookie('toolbar'),
                    isTextMode = $.cookie('textMode'),
                    isPageZoom = $.cookie('pageZoom'),
                    isFontSize = $.cookie('fontSize'),
                    isHighLight = $.cookie('highLight'),
                    isHelpLine = $.cookie('helpLine'),
                    maxFontSize = 20,
                    minFontSize = 12,
                    maxPageZoom = 2,
                    minPageZoom = 1,
                    lnkAccess = $('lnk-webaccess')[0],
                    toolbar = null,
                    toolbarHTML = '<button type="button" class="toolbutton" id="btntoolbartxt">纯文本通道</button><button type="button" class="toolbutton" id="btntoolbarpagezoomout">页面放大</button><button type="button" class="toolbutton" id="btntoolbarpagezoomin">页面缩小</button><button type="button" class="toolbutton" id="btntoolbarfontzoomout">文字放大</button><button type="button" class="toolbutton" id="btntoolbarfontzoomin">文字缩小</button><button type="button" class="toolbutton" id="btntoolbarhighlight">高对比度</button><button type="button" class="toolbutton" id="btntoolbarhelpline">开启辅助线</button><button type="button" class="toolbutton" id="btntoolbarreset">重置</button><button type="button" class="toolbutton" id="btntoolbarclose">关闭</button>',
                    showToolBar = function(){
                            // 本程序使用的jQuery 1.7.1 还有browser属性,如果你使用最新版本的jquery
                            // 它使用的是功能探测,不能判断浏览器版本(这也是我在的一篇博文中提到的,这个升级不向下兼容,有点太激进)
                var isIE = $.browser.msie,
                                styleAccess = $('web-access-style')[0];
                           
                            // 页面中没有toolbar的样式标,则需要创建       
                if (!styleAccess) {
                                    // 只有在IE<9的浏览器才必须使用document.createStyleSheet在页面中动态添加样式表
                                    // 而不能使用jQuery提供的方法创建link,至少在 jQuery v1.7.1 版本中不行
                                    // $('<link />').attr({
                    // 'id': 'web-access-style',
                    // 'href': 'webaccessbility.css',
                    // 'rel': 'stylesheet',
                    // 'type': 'text/css',
                    // 'media': 'all'
                    // })
                    if (isIE && isIE < 9) {
                        cssAccLink = document.createStyleSheet('webaccessbility.css');
                                           
                    }
                }
                else {
                                    // 已经有了,直接定位到link节点就OK了
                    if (styleAccess) {
                        cssAccLink = $(styleAccess);
                    }
                }
                           
                            // 讲toolbar的样式表添加到head标签中
                            head.append(cssAccLink);
                           
                            // 创建toolbar工具栏
                toolbar = $('<div>').attr('id', 'web-access-toolbar');
                // 讲控制按钮写入工具栏
                            toolbar.html(toolbarHTML);
                            // 将工具栏插入到文档的最前面
                toolbar.insertBefore(firstWrap);
                           
                            // 获得各个控制按钮
                            getButtons();
                           
                            // 个各个按钮添加绑定处理事件
                            bind();
                           
                firstWrap.addClass('first-wrap');
                
                            // 写入已装载工具栏的cookie值
                $.cookie('toolbar', 'toolbar');
            }, getButtons = function(){
                btnTxt = $('#btntoolbartxt');
                btnPageZoomOut = $('#btntoolbarpagezoomout');
                btnPageZoomIn = $('#btntoolbarpagezoomin');
                btnFontZoomOut = $('#btntoolbarfontzoomout');
                btnFontZoomIn = $('#btntoolbarfontzoomin');
                btnHighLight = $('#btntoolbarhighlight');
                btnHelpLine = $('#btntoolbarhelpline');
                btnReset = $('#btntoolbarreset');
                btnClose = $('#btntoolbarclose');
            },
                    // 切换纯文本模式
                    switchTextMode = function(evt){
                var isTextMode = $.cookie('textMode');
                           
                if (!isTextMode) {
                    setTextMode();
                }
                else {
                    resetTextMode();
                }
            },
                    // 切换为纯文本模式
                    setTextMode = function(){
                var isToolBar = $.cookie('toolbar');
                           
                if (!isToolBar) {
                    showToolBar();
                }
                           
                            // 获得所有的图片
                imgs = $('img');
                           
                            // 存文本的实现就是将页面中所有外联和内联的CSS样式都去掉
                cssLinks.remove();
                cssStyles.remove();
                            // 并且隐藏所有的图片
                imgs.css('display', 'none');
                            // 给所有div都添加text-mode样式
                wraps.addClass('text-mode');
                           
                btnTxt.html('切换为可视模式');
                
                $.cookie('textMode', 'textMode');
            }, resetTextMode = function(){
                            // 恢复有CSS的原始样式
                            // 其实就是去掉textMode的cookie
                            // 并且刷新页面即可(不刷新想实现太过麻烦)
                btnTxt.html('纯文本通道');
                $.cookie('textMode', '');
                window.location.reload();
            },
                    // 页面放大
                    pageZoomOut = function(evt){
                var curPageZoom = $.cookie('pageZoom') * 1 || minPageZoom;
                if (curPageZoom < maxPageZoom) {
                    curPageZoom += 0.1;
                    pageZoom(curPageZoom);
                }
            },
                    // 页面缩小
                    pageZoomIn = function(evt){
                var curPageZoom = $.cookie('pageZoom') * 1 || minPageZoom;
                if (curPageZoom > minPageZoom) {
                    curPageZoom -= 0.1;
                    pageZoom(curPageZoom);
                }
            },
                    // 字体放大
                    fontZoomOut = function(evt){
                var curFontSize = parseInt($.cookie('fontSize'), 10) || minFontSize;
                if (curFontSize < maxFontSize) {
                    curFontSize += 1;
                    fontZoom(curFontSize);
                }
            },
                    // 字体缩小
                    fontZoomIn = function(evt){
                var curFontSize = parseInt($.cookie('fontSize'), 10) || minFontSize;
                if (curFontSize > minFontSize) {
                    curFontSize -= 1;
                    fontZoom(curFontSize);
                }
            },
                    // 切换高对比度模式
                    switchHighLightMode = function(evt){
                var isHighLight = $.cookie('highLight');
                if (!isHighLight) {
                    setHighLight();
                }
                else {
                    resetHighLight();
                }
            },
                    // 显示高亮
                    setHighLight = function(){
                var isToolBar = $.cookie('toolbar');
                if (!isToolBar) {
                    showToolBar();
                }
                           
                            // 高亮显示的事件就是给页面中所有元素添加heightlight样式
                            // 不过你也看到了,页面DOM很多的话,会有性能问题,特别是IE6
                            // TODO: 提高性能,希望大家都想下办法,怎么处理更高效
                allElements = wraps.find('*');
                           
                body.addClass('highlight');
                wraps.addClass('highlight');
                allElements.addClass('highlight');
                           
                btnHighLight.html('还原对比度');
                           
                $.cookie('highLight', 'highLight');
            },
                    // 去掉高亮
                    resetHighLight = function(){
                allElements = wraps.find('*');
                body.removeClass('highlight');
                wraps.removeClass('highlight');
                allElements.removeClass('highlight');
                btnHighLight.html('高对比度');
                $.cookie('highLight', '');
            },
                    // 切换显示辅助线
                    switchHelpLine = function(evt){
                var isHelpLine = $.cookie('helpLine');
                if (!isHelpLine) {
                    setHelpLine();
                }
                else {
                    resetHelpLine();
                }
            },
                    setHelpLine = function(){
                var isToolBar = $.cookie('toolbar');
                if (!isToolBar) {
                    showToolBar();
                }
                           
                            // 实现辅助线,其实就是创建两个绝对定位的div,一个是横向,一个纵向
                            // 辅助线离鼠标有10px,不能就在鼠标点击的位置,这样就妨碍了阅读了
                lineX = $('<div></div>').addClass('line-x');
                lineY = $('<div></div>').addClass('line-y');
                body.append(lineX).append(lineY);
                lineY.css('height', body.height() + 'px');
                           
                            // 鼠标移动的时候,辅助线就要重新定位(也有些耗资源的)
                $(body).on('mouserover', positionLine);
                $(body).on('mousemove', positionLine);
                           
                btnHelpLine.html('关闭辅助线');
                $.cookie('helpLine', 'helpLine');
            }, resetHelpLine = function(){
                $(body).off('mouserover', positionLine);
                $(body).off('mousemove', positionLine);
                lineX.remove();
                lineY.remove();
                btnHelpLine.html('开启辅助线');
                $.cookie('helpLine', '');
            }, reset = function(evt){
                $.cookie('toolbar', '');
                $.cookie('textMode', '');
                $.cookie('pageZoom', '');
                $.cookie('fontSize', '');
                $.cookie('highLight', '');
                $.cookie('helpLine', '');
                window.location.reload();
            }, closeToolBar = function(evt){
                toolbar.remove();
                firstWrap.removeClass('first-wrap');
                $.cookie('toolbar', '');
            }, bind = function(){
                btnTxt.click(switchTextMode);
                btnPageZoomOut.click(pageZoomOut);
                btnPageZoomIn.click(pageZoomIn);
                btnFontZoomOut.click(fontZoomOut);
                btnFontZoomIn.click(fontZoomIn);
                btnHighLight.click(switchHighLightMode);
                btnHelpLine.click(switchHelpLine);
                btnReset.click(reset);
                btnClose.click(closeToolBar);
            },
                    // 页面的缩放是通过CSS的transform来实现的
                    // 要注意的就是需要针对不同的浏览器设置不同的属性
                    // 浏览器的判断还是有它用处的,都用功能判断好像会比较复杂
                    pageZoom = function(value){
                var browser = $.browser, isToolBar = $.cookie('toolbar');
                if (!isToolBar) {
                    showToolBar();
                }
                if (browser.webkit) {
                    body.css({
                        '-webkit-transform-origin': 'top left',
                        '-webkit-transform': 'scale(' + value + ')'
                    });
                }
                else {
                    if (browser.mozilla) {
                        body.css({
                            '-moz-transform-origin': 'top left',
                            '-moz-transform': 'scale(' + value + ')'
                        });
                    }
                    else {
                        if (browser.opera) {
                            body.css({
                                '-o-transform': 'scale(' + value + ')'
                            });
                        }
                        else {
                            if (browser.msie) {
                                body.css('zoom', value);
                            }
                        }
                    }
                }
                $.cookie('pageZoom', value);
            },
                    // 缩放字体
                    fontZoom = function(value){
                var isToolBar = $.cookie('toolbar');
                if (!isToolBar) {
                    showToolBar();
                }
                            // 只能是统一显示某个字体大小
                            // 想记住原有的值,然后在增加真的不太现实,也没有必要
                allElements = wraps.find('*');
                $(allElements).css('font-size', value);
                $.cookie('fontSize', value);
            },
                    // 定位辅助线
                    positionLine = function(evt){
                var pageX = evt.pageX, pageY = evt.pageY;
                lineX.css('top', (pageY + 10) + 'px');
                lineY.css('left', (pageX + 10) + 'px');
            };
                   
            jQuery.webAccess = function(lnkAcc,firstDiv){
                            // 延时启动,先让内容都显示出来,当然你也可以不延时
                // setTimeout(function(){
                                    if(lnkAcc){
                                            lnkAccess = $(lnkAcc)[0];
                                    }
                                   
                                    // 没有无障碍阅读的链接则退出程序
                    if (!lnkAccess) {
                                            return false;
                        
                    }
                   
                                    // 包装成一个jQuery对象
                    lnkAccess = $(lnkAccess);
                                   
                                    if(firstDiv){
                                            firstWrap = $(firstDiv);
                                    }
                                   
                                    // 显示无障碍阅读工具栏
                    if (isToolBar) {
                        showToolBar();
                    }
                                   
                                    // 判断是否为纯文本模式
                    if (isTextMode) {
                        setTextMode();
                    }
                                   
                                    // 是否设置了页面缩放
                    if (isPageZoom && parseFloat(isPageZoom, 10) > 1) {
                        pageZoom(parseFloat(isPageZoom, 10));
                    }
                                   
                                    // 是否设置了字体缩放
                    if (isFontSize && parseInt(isFontSize, 10) > 12) {
                        fontZoom(parseInt(isFontSize, 10));
                    }
                                   
                                    // 是否为高对比读模式
                    if (isHighLight) {
                        setHighLight();
                    }
                                   
                                    // 是否显示了辅助线
                    if (isHelpLine) {
                        setHelpLine();
                    }
                                   
                                    // 绑定链接的 click事件
                    lnkAccess.click(function(evt){
                                            // 只在未显示工具栏时触发
                        if (!isToolBar) {
                            showToolBar();
                        }
                        evt.preventDefault();
                        evt.stopPropagation();
                    });
                // }, 4000);
            };
        })();
    })();

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:简单的无障碍阅读辅助工具栏

« »

1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)