머스트 웹접근성
접근키
대부분의 브라우저들이 웹사이트에 정의되어 있는 키들을 타이핑함으로 특정 링크들로 건너뛰기 하는 것을 지원합니다. 윈도우에서 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를 전혀 지원하지 않더라도 각 페이지의 내용을 모두 읽을 수 있습니다.
- 자바스크립트를 사용하지 않더라도 모든 페이지의 내용은 여전히 읽혀 질수 있으며, 특히 상단 네비게이션도 정상 작동합니다.