카테고리 보관물: Front-End Development

웹 접근성 (Web Accessibility)

웹접근성은 장애인뿐만 아니라 모든 사람이 정보 및 서비스를 손쉽게 활용 할 수 있도록 만드는 것입니다.

웹접근성 4가지 원칙과 관련 지침

웹 접근성이란 다양한 장치 및 다양한 환경 그리고 장애를 가진 사람도 웹을 이용할 수 있도록 서비스 및 컨텐츠 제작하는 것입니다.

장애의 종류는 청각, 시각, 지체, 언어, 기억력, 지적, 발작 장애 등 매우 다양하며 중복 장애를 고려하여야 합니다.
중요한 점은 이러한 장애가 장애인들에게만 있는 것이 아니라 일반인들도 나이가 들면서 장애가 생길 수 있다는 것이다. 이처럼 다양한 상황을 고려하기 위해서는 W3C의 웹 콘텐츠 접근성 지침(WCAG)을 준수하여야 합니다.

국내 인증 기준인 KWCAG 2.0은 2008년 12월에 제정된 웹 접근성 관련 국제 표준인 W3C(World Wide Web Consortium)의 ‘웹 콘텐츠 접근성 가이드라인 2.0(WCAG 2.0: Web Content Accessibility Guidelines 2.0)’을 국내 실정에 맞게 반영한 것 입니다.
한국형 웹 콘텐츠 접근성 지침 2.0 개요 (한국정보통신기술협회 표준으로 2009년 12월 22일 제정)

원칙 (목록에 숫자로 시작하는 항목) 지침 (목록에 ○ 로 시작하는 항목) 준수 항목 (목록에 ■ 로 시작하는 항목)
4개 13개 22개

한국형 웹 콘텐츠 접근성 지침 2.0 (KWCAG2.0)은 크게 4가지 원칙을 가지고 있는데,
그 원칙은 인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성이다.

인식의 용이성, 운용의 용이성, 이해의 용이성, 견고성

  1. 인식의 용이성 (모든 콘텐츠는 사용자가 인식할 수 있어야 한다.)
    • 적절한 대체 텍스트 제공 (개발)
      • 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
    • 멀티미디어 대체 수단 제공 (기획, 개발)
      • 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
    • 콘텐츠의 명료성 (기획, 디자인)
      • 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.
      • 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
      • 전경색과 배경색은 충분한 대비를 가지고 있어야 한다.
      • 자동으로 생성되는 배경음을 사용하지 않아야 한다.
  2. 운용의 용이성 (사용자 인터페이스 구성 요소는 조작 가능하고 네비게이션할 수 있어야 한다.)
    • 키보드 접근성 (기획, 개발)
      • 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
      • 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
    • 충분한 시간 제공 (기획, 개발)
      • 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
      • 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
    • 광과민성 발작 예방 (기획)
      • 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
    • 쉬운 네비게이션 (기획, 개발)
      • 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
      • 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
      • 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
  3. 이해의 용이성 (콘텐츠는 이해할 수 있어야 한다.)
    • 가독성 (기획, 개발)
      • 주로 사용하는 언어를 명시하고, 이해하기 쉽게 설명 해야 한다.
    • 예측 가능성 (기획, 개발)
      • 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
    • 콘텐츠의 논리성 (기획, 디자인, 개발)
      • 콘텐츠는 논리적인 순서로 제공해야 한다.
      • 표는 이해하기 쉽게 구성해야 한다.
    • 입력 도움 (기획, 개발)
      • 입력 서식에는 대응하는 레이블을 제공 해야 한다.
      • 입력 오류를 정정할 수 있는 방법을 제공 해야 한다.
  4. 견고성 (웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.)
    • 문법 준수 (개발)
      • 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
    • 웹 애플리케이션 접근성 (기획, 개발)
      • 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

기본적이지만 가장 중요한 항목

  • 의미에 맞는 HTML테그를 사용하여야 한다. (예 – 레이아웃 목적의 테이블 사용은 지양)
  • 텍스트가 아닌 컨텐츠는 모두 레이블 및 대체 텍스트를 제공하여야 한다.
  • 키보드만으로도 온라인 서식 입력 및 서식 간 이동이 가능하여야 한다.

유용한 접근성 평가툴

참고

 

 

순수 CSS3 Transform을 활용한 에니메이션 UI


요즘 프로젝트 때문에 정신없어서 글을 못쓴지 한참됬네요.. ㅜㅜ
어제 순수 CSS3의 Transform을 활용하여 만든 멋진 UI를 보고 한눈에 반해서 분석후 만들어 봤습니다.

HTML5와 CSS3의 속성들의 지원범위가 확대되면서 불과 3~4년전의 플러그인을 설치해야 볼 수 있덨던 플래시에 버금가는 에니메이션 구현이 가능해졌고 사용 범위도 확대 되고 있습니다.
앞으로가 더 기대되네요.

본 UI는 IE 10이상, 파이어폭스, 크롬, 사파리, 오페라 최신버전에서 동작합니다.

참고1: http://www.liftinteractive.com
참고2: Transform 동작원리

jQuery2.0, IE6-7-8 버전 지원 중단.


자바스크립트 개발 프레임워크인 제이쿼리 개발자들이 향후 로드맵에 대한 상세 내용을 공개했다고 하는데, 가볍고 빠른 개발을 지원하는데 초점이 맞춰진다고. 이를 위해 제이쿼리 2.0 버전에선 구형 인터넷 익스플로러(IE)에 대한 지원을 중단할 것이라고 밝혀 주목된다.

아스테크니카에 따르면 제이쿼리 2.0은 IE6, 7, 8을 지원하지 않는다. 그렇다고 웹 개발자들이 너무 걱정할 필요는 없다.
구형 IE를 지원하기 위해 제이쿼리 1.9 버전도 별도로 내놓을 예정이기 때문이다.

제이쿼리 라이브러리는 웹 개발자들 사이에서는 인기가 매우 높다. 편리한 방법과 유틸리티들을 많이 제공해, 대규모 사이트에서도 사용되고 있다. 서드파티 플러그인들도 많다. UI 라이브러나 모바일 웹개발 프레임워크 등 제이쿼리 핵심 기능에 기반한 다른 프레임워크들도 많다.

개발진들에 따르면 현재 베타 버전 상태인 제이쿼리 1.8은 CSS 섹터 엔진 등과 같은 기능이 개선된다. 조만간 최종판이 공개될 예정이다. 1.8 공개 이후 제이쿼리 개발자들은 대규모 개편에 초점을 맞춘다.

이들은 제이쿼리가 가볍고, 빠르고, 보다 모듈화되기를 바라고 있다고. IE 레거시 버전은 여기에 방해가 된다는 설명이다. 제이쿼리 2.0에서 지원을 중단하는 이유다. 그러나 구형 IE를 계속 지원해야하는 개발자들은 1.9 버전을 쓰면 된다. 제이쿼리 1.9는 2.0과 API 호환성을 완벽하게 지원한다. 구형 IE를 지원할 필요가 없는 개발자들은 제이쿼리 2.0을 쓰면 된다.

참조: http://techit.co.kr/7205