티스토리 뷰
목차
저번에 했던 글에 이어서
두 번째 파트를 알아보자.
1편 (인식의 용이성) : sirong.tistory.com/41
운용의 용이성
웹 콘텐츠에 포함된 모든 기능은 누구나 쉽게 사용할 수 있어야 한다.
웹 콘텐츠의 기능을 모두가 쉽게 사용할 수 있어야 한다는 뜻이다.
인식의 용이성과는 다른 점이,
인식의 용이성은 정보를 습득하는 것을 뜻하고,
운용의 용이성은 웹사이트 기능을 사용하는 것을 뜻한다.
이미지 맵
이미지 맵(이미지 내의 특정 영역에 링크를 거는 기술)
이미지 맵 기법이 필요할 경우, 클라이언트 측 이미지 맵을 권장 하며, 서버 측 이미지 맵을 사용할 경우 해당내용 및 기능을 사용할 수 있는 대체 콘텐츠를 제공해야 한다.
클라이언트 측 이미지맵은 사용자 측에 이미지의 링크가 html내에 존재하는 것을 의미,
서버측 이미지맵은 사용자가 클릭한 좌표를 서버에서 받아 좌표를 반환하는 과정을 거침.
클라이언트 측 이미지맵은 인식의 용이성과 같이 alt(대체 텍스트를 사용하면 되며)
서버측 이미지맵은 링크를 직접적으로 제공하지 않으니,
키보드로 접근 가능한 대체 링크가 필요하다는 뜻이다.
프레임
프레임 사용을 최소화하는 것을 권장.
프레임을 사용할 경우 적절한 제목(title 속성)을 제공
짧고 간결하게 제공해야 한다.
깜박임
깜박이는 콘텐츠 제공 시, 사전에 경고, 회피할 수 있는 수단을 제공해야 함.
광과민성 발작증세를 가진 이용자도 무리 없이 사용할 수 있음을 위해서이다.
키보드 이용
키보드 만으로 웹 콘텐츠의 모든 기능을 수행할 수 있어야 한다.
Tab키, 방향키로 마우스와 같은 기능을 사용할 수 있으면 된다.
onfocus = "this.blur" 사용금지
<a href="https://google.co.kr" alt="" onfocus="this.blur();">aa</a>
<a href="https://google.co.kr" alt="">bb</a>
링크를 눌렀을 때 이미지의 테두리가 생기는 것을 방지하는 것이
onfocus="this.blur()"이다.
하지만 이 경우 키보드로 링크를 선택할 수 없다.
이는 키보드로 해당 콘텐츠를 사용할 수 없다는 뜻이다.
건너뛰기 링크
반복적인 링크를 뛰어넘어( ex. 메뉴)
페이지의 핵심 콘텐츠로 이동할 수 있는 건너뛰기 링크를 제공해야 함.
시간제한 콘텐츠
일정 시간이 지나면 다음 페이지로 넘어가는 콘텐츠일 경우,
사용자가 이 기능을 제어하고(멈출 수 있고), 지나간 콘텐츠를 다시 확인할 수 있어야 한다.
새 창(팝업창) 사전 알림
새 창(팝업창)을 열기 전 이를 명시적으로 알려야 한다.
title, 아이콘을 통해서 알릴 수도 있으며,
과도한 팝업창을 사용하는 것도 자제해야 한다.
또한 팝업창의 기능 또한 키보드로 접근이 가능해야 한다.
끝
3편 (이해의 용이성) : sirong.tistory.com/43
보너스 (웹접근성 체크 사이트) : sirong.tistory.com/44
'웹개발(프론트)' 카테고리의 다른 글
웹접근성 체크 사이트 (0) | 2021.03.01 |
---|---|
웹접근성(이해의 용이성) (0) | 2021.02.28 |
웹 접근성(인식의 용이성) (0) | 2021.02.26 |
이미지 크기 아는법(+다운로드) (0) | 2021.02.25 |
html 입력받기 form input (0) | 2021.02.22 |
- Total
- Today
- Yesterday
- homebrew
- react
- Redux
- SVG
- 웹접근성
- dom
- 이쁜코드
- 아이콘
- async
- switch
- 서버
- 랜더링
- Router
- html
- nodejs
- 무료아이콘
- Expo
- 쿠키
- 클릭
- visualcode
- 접근성
- Hook
- useReducer
- usecookies
- 비동기
- CSS
- touchable
- 에러
- 가상샐렉터
- proptype
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 27 | 28 |