바로 이전 포스트(원숭이 엉덩이는…)에서 유트브 동영상을 삽입했는데.

HTML Validator 를 통과하지 못했습니다. (본 블로그는 xhtml, css 2.1 을 준수하고 있습니다. -_-a)

워드프레스에 유트브 영상 삽입시 HTML Validator 에러

유트브영상 삽입 하나로 9개의 HTML Validator 오류가 ...

유트브에서 제공한 코드는 다음과 같습니다.

view sourceprint?
1.<object width="425" height="344">
2.<param name="movie" value="http://www.youtube.com/v/39a1jzuqGGQ&;amp;amp;hl=ko_KR&amp;amp;fs=1&amp;amp;rel=0"></param>
3.<param name="allowFullScreen" value="true"></param>
4.<param name="allowscriptaccess" value="always"></param>
5.<embed src="http://www.youtube.com/v/39a1jzuqGGQ&;amp;amp;hl=ko_KR&amp;amp;fs=1&amp;amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
6.</object>

웹 표준

위의 코드는 HTML4에서 폐기된 EMBED 태그를 사용하기 때문에 오류로 인식되며, 더불어 태그에 포함된 type, width, height 등의 모든 속성이 오류로 인식됩니다.

그렇다고 EMBED 태그를 제거하면 OBJECT 태그의 classid 와 몇몇 이유 때문에 파이어폭스에서는 재생되지 않는 문제가 생깁니다.

아래와 같은 태그를 사용하면 모든 브라우저에서 동일한 플래시 영상을 표시할 수 있습니다.

view sourceprint?
1.<object type="application/x-shockwave-flash" width="425" data="플래시 url" height="344">
2.<param name="movie" value="플래시 url" />
3.</object>

ie6,ie7,ie8,chrominum 4,firefox 3.5,opera 10,safai 4 에서 테스트했습니다.

웹 접근성

플래시는 웹 접근성 관련해서 아래와 같은 제약이 존재합니다.

  • 플래시 요소에 대체 텍스트 제공이 녹녹치 않습니다. accessibility 패널을 이용해 대체 텍스트와 탭 순서 제공이 가능하지만 이는 스테이지에 보이는 요소에 한정되며, 대부분의 네비게이션이 액션스크립트에의해 생성 되는걸 고려하면 좀 … 복잡해집니다.
  • IE외의 브라우저에서 키보드로 접근이 힘듭니다. (tabindex=”0″ 을 주는 편법이 있다고 하지만, 꽁수는 꽁수.)
  • 키보드 접근을 허용하려면 플래시의 윈도우 모드를 window로 설정해햐 합니다.
  • 플래시 플러그인이 없는 환경을 고려해 플래시 외부에 대체 텍스트를 제공해야 합니다.
  • 미래에는 어떨지 모르지만, 현재는 검색엔진이 플래시의 텍스트를 인덱싱 하지 못합니다. (혹시 있나요 ?)
  • 페이지가 확~ 무거워져요.

반드시, 플래시 사용을 해야 한다면 위의 사항들을 고려해야 합니다. (쉽지 않아요. ㅠㅠ)

그래서, 웹 접근성 까지 고려 한다면 플래시 자체의 접근성을 확보한 후 아래의 태그를 사용합니다.

view sourceprint?
1.<object type="application/x-shockwave-flash" width="425" data="플래시 url" height="344">
2.<param name="movie" value="플래시 url" />
3.<p>대체 텍스트... <a href="플래시 플레이어 얻기 링크"><img src="플래시 플레이어 얻기" width="" height="" alt=""/></a></p>
4.</object>

(워드 프레스에서는 위와 같이 작성한 경우 P 태그를 임의로 조정해 <p></object></p> 와 같은 코드를 만들어버리네요 ㅠㅠ)

하지만,  위의 경우 IE에서 플래시 무비가 모두 다운로드 되기 전까지 플래시 플레이어가 보이지 않습니다. 이러한 문제를 피하기 위해서는 힉시 메소드를 사용하거나 A List Apart 에서 제안하는 Flash Satay 방법을 사용합니다.

힉시 메소드 (IE 의 condition comment 를 이용합니다.)

view sourceprint?
01.<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="160" height="75" id="a" align="middle">
02.<param name="movie" value="플래시 url" />
03.<!-- Hixie method -->
04.<!--[if !IE]> < -->
05.</object><object type="application/x-shockwave-flash" data="플래시 url" width="160" height="75">
06.<param name="movie" value="플래시 url" />
07.<p>대체 텍스트</p>
08.</object>
09.<!--> < ![endif]-->

이 방법은 정보화진흥원에 접근성 교육 받으면서 성민장군님에게서 들었습니다. (꾸벅 ^^)

Flash Satay (container.swf 에서 원래의 플래시 무비를 loadMovie를 이용해 로드 합니다.)

view sourceprint?
1.<object type="application/x-shockwave-flash data="container.swf?path=플래시 url"  width="400" height="300">
2.<param name="movie" value="container.swf?path=플래시 url" />
3.<p>대체 텍스트</p>
4.</object>

Flash Satay 방법의 경우 URL이 꼬이는 수가 있습니다. 결국, 가장 쉬운 방법은 코드를 더 적어야 하긴 하지만 힉시 메소드가 아직은 제일 낫네요.

생각해보세요 위의 플래시가 사이트의 주요 네비게이션 용도로 사용된다면 플래시 자체 접근성도 확보해야 하고 “대체 텍스트”부분에 ul, li 등을 이용해 동일한 네비게이션을 제공해야 합니다. 것 보세요, 쉽지 않죠. 플래시는 자제, 자제…


출처 : http://www.yangkun.pe.kr/post/773