작성일 : 10-02-23 22:51
플래시 네비게이션의 웹접근성 향상방안
 글쓴이 : hereis
조회 : 6,491  
   http://blog.naver.com/outsider112?Redirect=Log&logNo=80059681164  [1666]
   http://blog.naver.com/outsider112?Redirect=Log&logNo=80053248607 [1787]
플래시 네비게이션 및 플래시 컨텐츠의 대체컨텐츠 에 대해서 알아보겠습니다.

 

플래시파일이 들어간 페이지의 마크업을 할때 대체컨텐츠를 제공하는 방법은

 

<!-- 플래시 플러그인 -->
<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탄|작성자 퍼블리

ㅜㅜㅜ 15-11-30 13:27
 
123456