검사항목

(적절한 대체 텍스트 제공) 텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

IR기법

.blind{position:absolute;line-height:0;overflow:hidden;}
.blind{position:absolute;top:-1000em;line-height:0;overflow:hidden}

visibility : hidden, display:none 사용 No! No!

의미 있는 이미지의 대체 텍스트

⇒ 시각적으로 인지 가능한 이미지 텍스트는 이미지와 동등한 정보를 제공해야함

<img src="../images/sth.jpg" alt="" aria-describedby="blind-text">
<div class="blind-text" class="blind-text">
    이미지 설명
</div>

.blind-text{display:none}

중복된 대체 텍스트를 제공하지 않도록 해야함

의미 있는 배경 이미지의 대체 텍스트

<span class="ico"><sapn class="blind">배경이미지 (간단)설명</span></span>

이미지 또는 초점을 받을 수 없는 요소에 Click 이벤트가 적용된 경우

<dl>
    <dt class="on" tabindex="0" role="button" aria-expaneded="false">클릭</dt>
    <dd>클릭 후 보여질 내용</dd>
</dl>

render : function(){
    $('dl dt').on('click',function(){
            if($(this).hasClass('on')){
                $(this).removeClass('on').attr('aria-expanded', 'false');
                $('dl dd').hide();
            }else{
                $(this).addClass('on').attr('aria-expanded', 'true');
                $('dl dd').show();
            }
    });
}

Owl-carousel Slider

<div class="component">
    <h1>배너</h1>
    <div class="component-box">
        <div class="banner owl-carousel owl-theme owl-load">
            <div class="owl-stage-outer">            
                <div class="owl-item active"><img src="../images/banner-img01.jpg" alt=""></div>
                <div class="owl-item"><img src="../images/banner-img02.jpg" alt=""></div>
                <div class="owl-item"><img src="../images/banner-img03.jpg" alt=""></div>
            </div>
            <div class="button-box">
                <div class="arrow-buttons">
                        <a href="#none" role="button" class="btn-prev"></a>
                        <a href="#none" role="button" class="btn-next"></a>
                </div>
                <div class="owl-paging">
                        <div class="owl-page acive"><a href="#none"><span class="blind"></a></div>
                        <div class="owl-page"><a href="#none"><span class="blind"></a></div>
                        <div class="owl-page"><a href="#none"><span class="blind"></a></div>
                </div>
            </div>    
        </div>
    </div>
</div>

/* owl-slider */
.owl-carousel{display:none;width: 100%; -webkit-tap-highlight-color: transparent;/* position relative and z-index fix webkit rendering fonts issue */z-index: 1;}
.owl-carousel .owl-stage{position: relative;-ms-touch-action: pan-Y;}
.owl-carousel .owl-stage:after{content: "."; display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.owl-carousel .owl-stage-outer{overflow: hidden;/* fix for flashing background */-webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel.owl-loaded{display: block;}
.owl-carousel .owl-item img{transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}

/* owl-paging */
.owl-pagination{position:absolute;}
.owl-page{float:left;margin:0 5px 0 0;width:4px;height:4px;background:#fff;border-radius:4px;}
.owl-page:last-of-type{margin:0;}
.owl-page a{position: relative;display:block;width:100%;height:100%;}
.owl-page a:before {content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border:2px solid #fff;margin:-5px 0 0 -5px;border-radius:10px;}
.owl-page.active a:before {width: 26px !important;margin: -5px 0 0 -15px;background-color: #fff;}

$(window).load(function(){
    $('.component').each(function(idx){
        var com = $(this).find('.component-box').attr('class').replace(/component-box /,'');
        component_list['component_'+com] = rendering.components['component_'+com];
    });
    $('.detail-component').each(function(idx){
        var com = $(this).attr('class').replace(/detail-component /,'');
        component_list['component_'+com] = rendering.components['d_component_'+com];
    });
    for(var com_name in component_list){
        component_list[com_name]();
    }
});

rendering.components = {
    component_banner : function(){
        var slide = [];
        $('component-box .banner').each(function(idx){
            var slider = $(this).owlCarousel({
                items:1,
                stageElement : 'ul',
                itemElement : 'li',
                loop : true,
                dots : true,
                dotsEach : false, // true : item 갯수만큼 버튼 이미지 생성
                autoplay : true,
                autoplaySpeed : 800,
                autoplayTimeout : 3000,
                autoplayHoverPause : true
            });
            slide.push(slider);
            $(this).find('.owl-paging').each(function(idx){
                $(this).find('.blind').text((1+idx)+'번 배너 보기');
            });
        });
        console.log('ready banner!');
    }
}