프프프

웹접근성

4개 발견
  1. 2016.12.09 - 진징

    iOS10 viewport user-scalable 적용 불가 문제
  2. 2016.11.11 - 진징

    HTML5 TABLE 접근성
  3. 2016.11.03 - 진징

    테이블 scope 속성의 적용 범위
  4. 2016.10.17 - 진징

    레이어팝업 위치조정, 초점처리(for웹접근성)

iOS10 viewport user-scalable 적용 불가 문제

2016. 12. 9. 10:02 - 진징

iOS10 viewport user-scalable 적용 불가 문제

애플은 iOS10의 사파리 브라우저에서 더이상 viewport user-scalable을 사용할 수 없도록 만들었다. 공식적으로 접근성을 위해서 적용시키지 않겠다고 발표했다.

To imporve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

Safari의 웹 사이트에 대한 접근성을 높이기 위해 웹 사이트에서 뷰어에 사용자 확장 가능 = 아니오를 설정 한 경우에도 사용자가 손가락으로 확대 / 축소 할 수 있습니다.

그럼에도 확대를 막고 싶다면 아래의 스크립트를 적용해주면 된다.



저작자표시 비영리 변경금지

'Front > HTML&CSS' 카테고리의 다른 글

[IE] position 초기화 해결법  (1) 2016.12.08
[CSS] box-sizing:border-box issue  (0) 2016.12.03
반응형 박스  (0) 2016.10.31
[IE] table 요소에 position과 background 사용 주의  (0) 2016.10.26
<iframe>으로 올린 유투브 동영상 z-index 문제  (0) 2016.10.19
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/HTML&CSS 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

HTML5 TABLE 접근성

2016. 11. 11. 17:57 - 진징 
/* table caption 입력 */
$(".table_wrap").each(function(){
    if (!$(this).find("caption").length){
        $(this).find(".table").prepend("<caption class=\"caption\"></caption>");
    }
    var txtSum = [];
    if ($(this).find("thead").length) {
        $(this).find("thead th").each(function(){
            txtSummary = $(this).text();
            txtSum.push(txtSummary);
        });
    } else {
        $(this).find("th").each(function(){
            txtSummary = $(this).text();
            txtSum.push(txtSummary);
        });
    }
    var txtDiv = txtSum.join(', ');
    var tit_tab = " " + $(".tab_menu a.on").text();
    if ($(this).find(".tit").length){
        var txt_tit = $(this).find(".tit").text();
        $(this).find("caption").text(txtDiv + " 순으로 구성되어 있는 " + txt_tit + tit_tab + " 목록입니다.");
    } else {
        var tit = $("#contentBox h3").text();
        $(this).find("caption").text(txtDiv + " 순으로 구성되어 있는 " + tit + tit_tab + " 목록입니다.");
    }
});
/* [end]: table caption 입력 */


'Front > JavaScript' 카테고리의 다른 글

문자열 존재 확인  (0) 2016.12.12
최대값, 최소값 구하기 (arr sort)  (0) 2016.11.15
변수 추가하기  (0) 2016.11.09
유튜브 재생 제어  (0) 2016.10.31
이벤트 버블링  (0) 2016.10.28
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/JavaScript 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

테이블 scope 속성의 적용 범위

2016. 11. 3. 16:37 - 진징

See the Pen XNrPOp by parkjinhyung (@gutmate) on CodePen.

출처: 웹접근성연구소

댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/웹접근성 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

레이어팝업 위치조정, 초점처리(for웹접근성)

2016. 10. 17. 18:10 - 진징
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$('.layer_open').click(function(){
    var el = $(this);
    $('.layer_popup').show();
    $('.dim').show();
    el.attr('data-focus','on'); // 레이어 팝업이 닫힐 때를 위한 표시 - 웹접근성
 
    /* modalPopup팝업 위치조정 */
    window.setTimeout(function(){
        var target = $("#layerPopup");
        var win_height = $(window).height();
        var pop_height = target.height();
        var top_value = $(window).scrollTop() + (win_height - pop_height) /2;
        target.attr("tabindex","0");
        target.show().css("top",top_value);
        target.focus();
    },500);// ajax 팝업을 고려한 딜레이 추가
    /* [end]: modalPopup팝업 위치조정 */
});

$('.layer_close').click(function(){
    $('.layer_popup').hide();
    $('.dim').hide();
    $("a[data-focus~=on]").focus(); // 표시해둔 곳으로 초점 이동
    window.setTimeout(function(){
        $("a[data-focus~=on]").removeAttr("data-focus");
    },500); // 역할을 다하고 필요없어진 표시 삭제
});
cs


'Front > JavaScript' 카테고리의 다른 글

유튜브 재생 제어  (0) 2016.10.31
이벤트 버블링  (0) 2016.10.28
스크롤 이동  (0) 2016.10.11
테이블 서머리, 캡션 삽입 스크립트  (0) 2016.09.22
백그라운드이미지 애니메이션  (0) 2016.09.22
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

카테고리의 다른 글 목록

Front/JavaScript 카테고리의 다른 글을 둘러봅니다 프프프의 모든 글을 둘러봅니다

티스토리툴바