작성일 : 10-02-23 22:51
|
플래시 네비게이션의 웹접근성 향상방안
|
|
글쓴이 :
hereis
 조회 : 10,502
|
 http://blog.naver.com/outsider112?Redirect=Log&logNo=80059681164 [3275] |
| http://blog.naver.com/outsider112?Redirect=Log&logNo=80053248607 [3362] |
|
플래시 네비게이션 및 플래시 컨텐츠의 대체컨텐츠 에 대해서 알아보겠습니다.
플래시파일이 들어간 페이지의 마크업을 할때 대체컨텐츠를 제공하는 방법은 <!-- 플래시 플러그인 --> <object data="hello.swf" type="application/x-shockwave-flash"> <!-- PNG 이미지 --> <object data="hello.png" type="images/png"> <!-- GIF 이미지 --> <object data="hello.gif" type="images/gif"> <!-- 일반 text --> <p>Hello!</p> </object> </object> </object> 이런식으로 합니다. 그러나 여기서 object 태그를 그대로 사용할 경우 인터넷 익스프롤러 6 버전의 경우 사용동의를 묻는 얼럿창이 뜨게 되므로, 얼럿창을 클릭해야하는 불편함이 있죠 그래서 보통 자바스크립트에 감싸는 방법을 사용합니다. 사실 이 방법은 한때 이올라스 소송 관련으로 인하여 ActiveX 컨트롤을 활성화해주기 위해 자바스크립트를 이용한 방법인데 현재까지 가장 보편적으로 사용하고 있습니다. 사용방법은 <script type="text/javascript">함수명("플래시경로 및 파일","1000","77");</script> * 1000 은 플래시의 넓이 * 77 은 플래시의 높이 의 형태로사용하게 됩니다. 자바스크립트는 <noscript> 태그를 이용하여 자바스크립트가 불가한 웹브라우져 환경에 대응하는 대체컨텐츠를 제공하여야 합니다. 1. 자바스크립트 웹접근성을 보장하는 대체컨텐츠 추가 <script type="text/javascript">ACTIVEX_PATCH.write("menu.swf","1000","77");</script> <noscript> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul> </noscript> 의 형태로 <noscript> 부분에 대체컨텐츠를 추가합니다. 2. 스타일을 제거하였을 경우를 대비하는 대체컨텐츠 추가 <script type="text/javascript">ACTIVEX_PATCH.write("menu.swf","1000","77");</script> <noscript> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul> </noscript> <div id="menu_alt"> <ul> <li>메뉴1</li> <li>메뉴2</li> <li>메뉴3</li> </ul> </div> 스타일 제거 대체컨텐츠를 추가하는 이유는, 스타일을 사용하지 않은 상태에서 스크린리더기가 화면을 낭독하므로, 플래시 메뉴에 대한 접근성이 보장받지 못하므로, 텍스트나 이미지로 된 대체컨텐츠를 추가하였습니다. <자바스크립트 기능을 해제한 상태> <자바스크립트 및 스타일을 제거한 상태> 3. 상단 바로가기 메뉴의 링크에 대체메뉴에 대한 링크를 걸어주면 스타일을 사용하지 않은 상태에서 대체컨텐츠 쪽으로 포커스가 이동되므로, 플래시 메뉴는 자연히 건너띄게 되는 것이죠 <h2>바로가기</h2> <ul> <li><a href="#menu_alt" title="메뉴로 바로이동합니다.">메뉴바로가기</a></li> <li><a href="#content" title="본문내용으로 바로이동합니다.">본문내용바로가기</a></li> <li><a href="#foot" title="하단메뉴로 바로이동합니다.">하단메뉴바로가기</a></li> </ul> 플래시를 사용하지 마라는 것이 아니라, 사용하더라도 최대한의 웹접근성을 보장하고, 사용자 관점에서 한번쯤 생각해 보는 것이 중요하다고 하겠습니다. [출처] 플래시 네비게이션의 웹접근성 향상방안 2탄|작성자 퍼블리 |
