머스트 웹접근성

웹접근성에 관련된 지침 및 규정은 준수 판단,평가 방법에 있어 주관적인 요소가 많다고 생각됩니다.

이 문서는 머스트에서 웹접근성을 높이기 위해 머스트에서 연구된 성과를 바탕으로 머스트 웹접근성에 대해 정리한 문서로 계속 진화되어 업데이트 됩니다.

접근키

대부분의 브라우저들이 웹사이트에 정의되어 있는 키들을 타이핑함으로 특정 링크들로 건너뛰기 하는 것을 지원합니다. 윈도우에서 ALT+접근키 를 눌러서 할 수 있습니다. 매킨토시에서 Control+접근키 를 눌러서 할 수 있습니다.

접근키에 대한 설명은 웹접근성 안내서를 참고하시기 바랍니다.

이득
  • 스크린리드 사용자들의 빠른 접근을 도움을 줍니다.
  • 일반 사용자들의 빠른 접근을 도와줍니다.

표준준수

  • 모든 페이지들은 인터넷 웹 콘텐츠 접근성 지침을 준수하여야 합니다. 이것은 의문의 여지가 있는 주관적 판단입니다. 꼼꼼히 웹접근성 지침에 대한 표준을 살펴보고 점검해야 합니다. 웹접근성 관련지침에 대해서는 웹접근성 관련문서를 참고하시기 바랍니다.
  • 사이트의 모든 페이지들은 웹표준을 준수 해야 합니다. 이것은 의문의 여지가 있는 주관적 판단이 아닌 객관적인 것입니다. 에디터에 의해 등록되거나, 문서 제작 툴에서 복사하여 붙인 게시물도 자동적으로 소스를 교정하여 100% XHTML유효성의 정확성을 가지고 있어야 합니다. XHTML유효성을 체크해보십시오. http://validator.w3c.org
  • 머스트의 연구에 웹표준에 관한 연구에 대해서는 머스트의 웹표준 연구, 웹표준 준수에 도움을 주기 위한 솔루션에 대해서는 웹표준 자동화 솔루션를 참고하시기 바랍니다.

텍스트 전용

  • 텍스트 전용 버전에 대해서는 별도의 페이지를 구성하였습니다.
  • 머스트 홈페이지 텍스트 사이트 변환 솔루션에서 확인하시기 바랍니다.
  • 머스트 홈페이지의 텍스트 사이트 이동은 상단의 텍스트 전용 링크를 클릭하거나 접근키 5번으로 변경 가능 합니다.
  • 머스트에서는 홈페이지를 자동으로 텍스트 사이트를 변환해주는 솔루션을 개발하였습니다. 솔루션에 대한 내용은 텍스트 사이트 변환 솔루션를 참고 하시기 바랍니다.

PC 버전

  • PC 버전 모드는 그래픽과 함께 제공되는 데스트탑용 버전입니다.
  • 머스트 홈페이지 PC모드로 이동은 상단메뉴의 PC버전 링크를 클릭하거나 접근키 6번으로 변경 가능합니다.

모바일

  • 장치에 대한 접근성을 보장하기 위해 모바일웹에 대해서는 별도의 페이지를 구성하였습니다.
  • 머스트 홈페이지 모바일웹에서 확인하시기 바랍니다.
  • 머스트 홈페이지의 모바일웹 보기는 상단의 모바일 링크를 클릭하거나 접근키 7번으로 변경 가능 합니다.
  • 머스트에서는 홈페이지를 자동으로 모바일 환경에 맞게 변환해주는 솔루션을 개발하였습니다. 솔루션에 대한 내용은 모바일웹 변환 솔루션를 참고 하시기 바랍니다.

언어

  • 이 사이트에 사용된 기본 언어는 한국어이며 본문내용에 영어 등 다른 언어가 사용된 경우 사용언어별로 마크업이 되어 있습니다.
  • 모든 콘텐츠는 상대크기폰트로 지정되어 있습니다. 브라우저 텍스트 설정에 따라 재설정할 필요가 없으며 나이에 상관없이 웹페이지를 명확하게 볼 수 있습니다. 텍스트 크기 설정은 글자크기 안내에서 확인하시기 바랍니다.

네비게이션

  • 모든 페이지들은 텍스트만으로 된 브라우저들 안에서 네비게이션을 돕는 rel=previous, next, up, 그리고 home 링크들을 가지고 있습니다. 넷스케이프 6과 모질라 사용자들은 이 특징을 이용할 수 있는데, View menu, Show/Hide, Site Navigation Bar,Show Only As Needed(또는 Show Always)를 선택함으로써 가능합니다.
  • 이 정보들은 몇 가지 방식에서 상호 참조 적입니다. 이 정보들을 사람에 따라, 장애에 따라, 디자인 원칙에 따라, 지원기술에 따라, 출판도구에 따라 살펴볼 수 있습니다.
  • 홈페이지와 모든 페이지들은 검색박스(접근키 4)를 포함합니다. 고급 검색 선택은 고급 검색페이지에서 활용 가능합니다.
상단 풀다운 메뉴 사용
  • 서브메뉴에 접근하기가 쉽습니다.

    가로메뉴를 사용 할 때는 마우스를 잘못 움직여 서브메뉴를 놓일 확률이 많습니다. 고령자나 손 떨림이 있는 사용자 뿐 아니라 일반인들에게도 메뉴 접근을 용이하게 도와줍니다.

  • 서브메뉴를 쉽게 알 수 있습니다.

    가로 메뉴를 사용 했을 때는 서브메뉴의 구분이 어려우나 풀다운 메뉴 사용 시에는 명확한 서브메뉴 구분이 되어 서브 콘텐츠로의 접근이 빠릅니다.

  • 메뉴의 확장성이 좋아 집니다.

    가로로 펼쳐지는 메뉴 사용 시 대게의 경우 1024해상도 기준으로 작업하므로 가로의 한계가 있어 메뉴가 제한적이지만 풀다운 메뉴를 사용하여 더 많은 메뉴를 쉽게 추가할 수 있습니다.

  • 풀다운 메뉴 사용으로 활용공간이 늘어 납니다.

    풀다운 메뉴사용의 경우 가로메뉴와 같이 가로 메뉴를 위한 별도의 높이가 필요치 않기 때문에 가로메뉴와 비교하여 콘텐츠를 더 많이 보여 줄 수 있습니다.

메인콘텐츠의 우선제공

  • 메인콘텐츠를 우선 제공하기위해 서브메뉴를 오른쪽으로 배치합니다.
  • 텍스트브라우저 사용들에게 도움이 됩니다. 텍스트브라우저는 HTML 소스에서 나타나는 순서대로 내용을 보여주기 때문에 페이지를 방문 할 때 마다 네비게이션 바를 스크롤 줄이기 위해서입니다.
  • 스크린 리드 사용자들에게 도움을 줍니다. 진짜 내용을 듣기위해 콘텐츠까지 접근 시간을 시간을 줄이기 위해서입니다.
  • 콘텐츠를 우선 보여주어 시각장애인들의 접근성을 높여 줍니다.
  • 왼쪽에 콘텐츠를 배치하여 콘텐츠에 대한 가독성을 높여 내용에 집중 할 수 있게 도와줍니다.
  • 왼쪽메뉴와 비교했을 때 상대적으로 마우스를 적게 움직이게 되며 마우스 휠로 상하 메뉴이동이 자유롭습니다.

게시판 사용

  • 게시판 호출시 페이지 타이틀을 게시판에 특성에 맞게 제공됩니다.
    • 리스트에서는 페이지타이틀이 게시판 쪽수와 함께 표시 됩니다. 게시판에서 브라우저의 페이지 타이틀을 보십시오. ※ 예) 게시판이름(쪽수)-홈페이지
    • 본문 내용을 읽을 때는 페이지 타이틀이 게시판 레코드 타이틀을 함께 표시 합니다. 게시물을 읽기에서 브라우즈 상단 페이지 타이틀을 보십시오. ※ 예) 게시물 제목- 게시판이름(쪽수) -홈페이지
  • 페이지 처리기능
    • 전체 페이지 (최근 글과 마지막 글)에 대한 페이지 이동이 자유로워야 합니다.
    • 머스트에서는 페이지 처리에 있어서 최근 페이지만 출력해서는 안 되며 중간 이동이 가능한 페이지 처리 기능으로 구현되어 있습니다.
  • 게시판 페이지이동은 키보드 Ctrl + 방향키로 페이지 이동이 가능 해야합니다.
  • 에디터는 웹접근성에 문제가 없는 CKEditor를 사용합니다. 에디터에 대한 자세한 내용은 홈페이지 http://ckeditor.com/을 방문하여 확인하시기 바랍니다.
  • 게시판 기능에 대한 내용은 웹사이트 프레임워크를 참고하시기 바랍니다.
이득
  • 웹접근성을 향상 시켜줍니다.

    키보드로 페이지 이동이 가능하며, 게시물 별로 페이지 타이틀을 함께 제공하여 스크린리드 사용자들에게 도움을 줍니다.

  • 일반 사용자들의 빠른 접근을 도와줍니다.

    게시물 타이틀을 바로 표시하여 일반사용자들이 현재 위치를 쉽게 알수 있습니다.

  • 구글에게 도움을 줍니다.

    검색엔진이 페이지 정보를 수집할 때 페이지 게시물별 페이지 타이틀 기준으로 색인하므로 제대로 된 색인과 사용자 검색을 유리하게 도와줍니다.

링크

  • 많은 링크들이 타이틀 속성들을 가지고 있는데, 이것은 링크의 텍스트가 (글의 제목과 같은) 내용을 충분히 설명하고 있지 않다면, 그 링크를 상세하게 설명합니다.
  • 링크들은 문맥에서 떠나서도 이해할 수 있도록 쓰여 있습니다.

이미지

  • 이 사이트에 사용된 모든 내용 이미지들은 설명적인 ALT 속성을 포함합니다. 단순히 장식적인 그래픽들은 공백 ALT 속성들을 포함합니다.
  • 복잡한 이미지들은 시각적으로 각 이미지를 보지 못하는 사람들에게 설명하기 위해 LONGDESC 속성이나 inline 설명을 포함합니다.
  • 사용된 모든 이미지는 포토샵 등 이미지 제작툴 로는 만들 수 없는 고압축 이미지로 되어 있어 로딩속도가 빠릅니다.

자바스크립트 사용

  • 이 사이트의 모든 페이지는 자바스크립트 사용 하지 않더라도 사용이 가능하게 설계되었습니다. 메인메뉴도 자바스크립트를 지원하지 않더라도 하위메뉴가 나타납니다.
  • 자바스크립트를 사용하지 않더라도 레이아웃이 변경되어서는 안됩니다. 일부 웹접근성 인증마크 획득한 사이트에서 자바스크립트를 사용하지 않은상태에서는 레이아웃부터 깨어지는 현상이나 메뉴이동 또한 자유롭지 않은 사이트가 많습니다.
  • 자바스크립트는 보조적으로 사용하며 모든 브라우즈에서 지원하는 jQuery를 사용합니다. 자세한 내용 홈페이지http://jquery.com/을 방문하여 확인하시기 바랍니다.

머리글자 사용

  • 이 사이트에 사용된 모든 약어들은 머리글자를 사용합니다.
  • 오페라브라우저 사용자들은 머리글자 제목을 툴팁으로 나타내기 때문에 약어이해에 도움을 줍니다.
  • 모질라는 약어에 자동적으로 점선으로 밑줄 쳐진 머리글자를 표시하여 줍니다.
  • 사용 방법에 대해서는 머스트 창의공학연구실 http://lab.must.or.kr/Defining-acronyms.ashx을 참고하시기 바랍니다.

비주얼 디자인

  • 이 사이트는 시각적 레이아웃을 위한 cascading style sheets를 사용합니다.
  • 사용된 폰트는 상대적 폰트 사이즈들을 사용하는데, 이는 시각적 브라우저 사용자들의 텍스트크기 조절에서 설정합니다. 브라우저별 글자크기 조절은 사이트도우미 글자크기 안내에서 설정방법을 보실 수 있습니다.
  • 브라우저가 stylesheets를 전혀 지원하지 않더라도 각 페이지의 내용을 모두 읽을 수 있습니다.
  • 자바스크립트를 사용하지 않더라도 모든 페이지의 내용은 여전히 읽혀 질수 있으며, 특히 상단 네비게이션도 정상 작동합니다.
공유
QR link to local page