MaKeYOurOwN mkyoon

정보통신 접근성 향상 표준화 포럼에서
'웹 접근성을 고려한 신기술 콘텐츠 제작기법
- JavaScript, Flex, Flash를 중심으로 -'을 발표했습니다.

http://iabf.or.kr/Pds/ReportView.asp?board=report&bseq=2867
위 링크에서 해당 PDF 자료를 다운 받을 수 있습니다.
예시 그림과 함께 설명이 자세하네요.^^

목차입니다.

I. 리치 인터넷 애플리케이션의 접근성

1. 연구목적
2. RIA 콘텐츠와 웹 접근성
3. WAI-ARIA 동향
4. RIA 콘텐츠 접근성 평가방법
5. 웹 접근성 관련 사이트

II. 접근성 있는 Javascript 제작기법

1. Javascript 개요
   • DOM과 DOM 스크립트
   • Javascript 프로그램의 확장
2. 웹 접근성과 Javascript
   • Javascript에 관한 오해
   • 접근성 있는 Javascript 코딩 방법
3. Javascript 접근성 지원 프로그래밍 지침
   • 대체 텍스트 제공
   • 키보드의 이용
   • 반응시간의 조절
   • 온라인 서식 구성
   • 신기술의 사용
   • 표준의 준수
4. Javascript 프로그램의 접근성 평가방법
   • II. 3번과 동일
5. Javascript 애플리케이션 콘텐츠 구현 예
   • 네비게이션 제작기법
   • 접근성을 고려한 입력서식 제작기법
   • 효과적인 UI 제작기법
   • Javascript 대체 기법

III. 접근성 있는 Flex 제작기법

1. Flex 개요
2. 웹 접근성과 Flex 콘텐츠
   • Flex 버전
   • 접근성 있는 Flex 콘텐츠 제작
3. Flex 콘텐츠 접근성 기술 지침
   • 대체 텍스트 제공
   • 자막 제공 방법
   • 색상과 접근성
   • 키보드의 이용
   • 읽는 순서의 설정
   • 플러그인 정보 제공
   • 접근성 지원 컴포넌트의 사용
4. Flex 콘텐츠의 접근성 평가방법
   • III. 3번과 동일
5. 접근성 지원 Flex 컴포넌트
6. Flex 애플리케이션 콘텐츠 구현 예
   • 접근성을 고려한 입력서식 제작기법
   • 접근성을 고려한 차트 제작기법
   • 사용자 UI를 고려한 제작기법

IV. 접근성 있는 Flash 제작기법

1. Flash 개요
2. 웹 접근성과 Flash 콘텐츠
   • 접근성 있는 Flash 콘텐츠 제작
   • Flash 콘텐츠의 임베딩
3. Flash 접근성 지원 프로그래밍 지침
   • 대체 텍스트 제공
   • 자막 제공 방법
   • 색상과 접근성
   • 깜빡거리는 객체 사용 제한
   • 키보드의 이용
   • 접근성 지원 애니메이션
   • 비디오/오디오 컨트롤
   • 읽는 순서의 결정
   • 구조의 제공
   • 대체 페이지 제공
   • 플러그인 정보 제공
   • 접근성 지원 컴포넌트의 사용
4. Flash 콘텐츠의 접근성 평가방법
   • IV. 3번과 동일
5. Flash 콘텐츠 구현 예
   • 내비게이션 메뉴
   • 사용자 UI를 고려한 콘텐츠

Posted by mkyoon

아놔.
자바스크립트로 만들었댄다. 괴물-_-;

http://aka-fotos.de/snake/

초등학교 들어가기 전이었던가
GW-Basic 으로 만든 스네이크 게임을 죽어라 한적 있다-_-;
그때가 생각나버렸다-_ㅠ
ㅋㅋ 막 박자 세가면서
비프음으로 음악도 만들고 그랬는데-_-;왜그러고 있었지;

덧붙여-
자바스크립트로 만든 마리오
 OTL... 이분은 또 어느레베루의 괴물?
http://www.nihilogic.dk/labs/mario/mario_small_music.htm

Posted by mkyoon

접근성을 해치지 않는 javascript의 사용

http://hyeonseok.com/docs/accessible-javascript

Posted by mkyoon

function displayDivision(templatetype)
{
	if(templatetype == 1 || templatetype == 2)
	{
		document.getElementById('preview3').style.display = "none";
		document.getElementById('preview2').style.display = "block";
		document.getElementById('cornerTable3').style.display = "none";
		document.getElementById('cornerTable2').style.display = "block";
		
		document.getElementById('imageTable2').style.display = "block";
		
	}
	else if(templatetype == 3 || templatetype == 4)
	{
		document.getElementById('preview2').style.display = "none";
		document.getElementById('preview3').style.display = "block";
		document.getElementById('cornerTable2').style.display = "none";
		document.getElementById('cornerTable3').style.display = "block";
		
		document.getElementById('imageTable2').style.display = "none";
		
	}
		if(templatetype == 1 || templatetype == 3)
	{
		document.getElementById('preview2RMenu').style.display = "none";
		document.getElementById('preview3RMenu').style.display = "none";
		document.getElementById('preview3LCorner').style.display = "none";
		document.getElementById('preview2LMenu').style.display = "block";
		document.getElementById('preview3LMenu').style.display = "block";
		document.getElementById('preview3RCorner').style.display = "block";
	}
	else if(templatetype == 2 || templatetype == 4)
	{
		document.getElementById('preview2LMenu').style.display = "none";
		document.getElementById('preview3LMenu').style.display = "none";
		document.getElementById('preview3RCorner').style.display = "none";
		document.getElementById('preview2RMenu').style.display = "block";
		document.getElementById('preview3RMenu').style.display = "block";
		document.getElementById('preview3LCorner').style.display = "block";
	}
	changed2y();
}

<table width=100% cellspacing=0 cellpadding=0>
	<tr> 
	<td class='g'> 
		<input type="radio" name="templatetype" value="1" onclick=displayDivision(1) style=margin-bottom:-2 /> 2단, 왼쪽메뉴</td>
	<td class='g'> 
		<input type="radio" name="templatetype" value="2" onclick=displayDivision(2) style=margin-bottom:-2 /> 2단, 오른쪽메뉴</td>
	<td class='g'> 
		<input type="radio" name="templatetype" value="3" onclick=displayDivision(3) style=margin-bottom:-2 checked="true" /> 3단, 왼쪽메뉴</td>
	<td class='g'> 
		<input type="radio" name="templatetype" value="4" onclick=displayDivision(4) style=margin-bottom:-2 /> 3단, 오른쪽메뉴</td>
	</tr>
</table>

네이버 레이아웃 설정

Posted by mkyoon