플래시 오브젝트 삽입과 noscript
dev | 2009-09-07
플래시 넣는 방법은 정말로 다양합니다. 그중에 제가 오늘 읽은 [웹접근성]Flash의 Object의 접근성(noscript포함)에서는 접근성을 높이면서 플래시를 페이지에 넣는 방법을 고민하고 있습니다. 플래시에 대한 대체 콘텐츠도 제공하면서 noscript를 사용하여 스크립트 대체 기능도 제공하려하고 있습니다. 하지만 잘못 사용되고 있는 부분이 있습니다.
제가 만든 IE_HtmlRewrite 스크립트를 이용하고 있는데, 이 스크립트는 HTML 콘텐츠를 변경하지 않기 때문에 noscript가 필요 없습니다. 제가 처음에 IE_HtmlRewrite를 만들 때에는 분쟁이 임시적일 것이라고 생각했기 때문에 나중에 간단하게 지울수 있는 방법을 고민하고 만들었습니다. MS와 Eolas가 이미 합의를 했기 때문에 HTML은 그냥 두고 스크립트 태그만 살짝 지우면 됩니다.
이제 이올라스 패치에 영향을 받는 사용자는 윈도우 업데이트를 하지 않은 취약한 운영체제를 사용하는 사용자이기 때문에 그 수가 매우 적을 것으로 생각 됩니다. 혹시나 클라이언트가 아직도 플래시에 테두리 생기는 컴퓨터를 사용한다면 윈도우 업데이트를 권장해 주세요. 그리고 혹시나 업데이트를 하지 않더라도 실제로 콘텐츠를 사용하는데는 클릭 한 번 해줘야 한다는 것을 제외하고는 아무런 문제가 없기 때문에 스크립트를 써가면서 복잡하게 만들 필요가 없습니다.
조건부 주석(conditional comment)도 IE8의 표준 모드에서는 표준대로 object 안의 콘텐츠를 대체 콘텐츠로 인식하기 때문에 더이상 필요없습니다. IE8만을 위해서라면 표준 구문에 무비 경로를 나타내는 param 요소만 추가해서 쓰면 됩니다.
<object type="application/x-shockwave-flash" data="abc.swf" width="100" height="100">
<param name="movie" value="abc.swf">
<p><img src="abc.jpg" alt="abc"></p>
</object>물론 IE6, IE7 호환을 무시하는 것은 아주 위험한 행동이기 때문에 보통 사이트를 제작 할 때에는 조건부 주석까지는 사용하고 스크립트 없이 표준 코드만 사용해도 충분합니다.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="100" height="100">
<param name="movie" value="abc.swf">
<!--[if !IE]> <-->
<object type="application/x-shockwave-flash" data="abc.swf" width="100" height="100">
<p><img src="abc.jpg" alt="abc"></p>
</object>
<!--> <![endif]-->
</object>그래도 혹시 1명이라도 있을 사용자를 위해서 스크립트 방식을 써야겠다는 분들은 noscript없이 사용하시면 됩니다. HTML 코드에 모든 콘텐츠가 있다면 noscript는 사용하지 않아야 합니다. 자신의 코드가 옳다고 확신하신다면 카도와같은 접근성 평가 프로그램이 경고를 나타내는 것은 무시하셔도 됩니다.
Comments
저도 근래 이올라스 패치를 염두해두지 않고 직접 플래시 OBJECT HTML소스를 넣고 있는데 많은 분들이 이에 동의하지 않더라고요. 이 분야에서 인지도 있는 현석님께서 이렇게 먼저 얘기 꺼내주시니 다른 많은 분들의 이올라스패치 관련한 인식이 변하기를 기다려봅니다.
아직도 이올라스패치를 적용하고 있는 곳들이 있었군요.. 오브젝트 안에 HTML이 대체콘텐츠가 되는군요. 새로운걸 배웠네요. 아이팟터치에서는 플래시안되기 때문에(사파리이지만 플래시가 아예 없죠.) 플래시는 안뜨고 noscript에도 안걸리게 되서 이건 어떻게 해결해야 하는건가 싶었는데 좋은 정보 얻어갑니다. ^^
제시해주신 코드로 파일을 만든 후 IE8에서 플래시를 끄고 봤더니 대체 이미지 부분이 안 보입니다. 혹시나 하고 대체 이미지 부분을 주석 코드 밖으로 빼 보니 그제서야 보이네요. 하지만 이렇게 하면 비 IE 브라우저에서는 플래시와 대체 이미지가 둘 다 보이고요. IE가 주석 안쪽을 모두 무시하고 렌더링해서 그런 것이 아닐까 싶은데 다른 분들은 말씀이 없으신 것을 보니 저만 이런가 봅니다; 왜 이럴까요?;;
컨디셔널 코멘트 안의 내용은 IE에서는 인식이 되지 않습니다. 컨디셔널 코멘트의 조건을 IE7이하로 바꾸면 될 것 같습니다.
안녕하세요 저도 퍼블리싱 하면서 플래시 부분에 대한 고민을 항상 해왔고, 여러가지 방법을 통해 플래시 요소를 삽입하여보았습니다. 그런데 현석님이 말씀하신 웹표준방법인 오브젝트를 직접 선언하는 방법을 통하여 마크업을 하니 키보드 탭키로 이동을 하였을때 ie 에서 플래시 부분에서 멈춰버리는 현상이 일부 발생하였습니다. 설마 플래시 표준태그로 인해 탭키가 안먹히리라고는 상상도 못하고 원인분석을 했는데 결국 플래시 요소때문에 그다음 태그로 넘어가지 못하더군요. 그래서 기존에 이올라스 패치때 사용하던 스크립트를 사용하고 noscript 를 통하여 대체내용을 넣는 방식으로 사용하고 있습니다. 키보드 탭키가 안먹히는 현상은 ie 브라우져 에서만 일부 나타나며, 타브라우져에서는 이상없이 탭키로 이동되더군요. ie 에서도 되는곳이 있고 안되는곳이 있고.. 정말 힘든 브라우져군요. 표준을 지키고자 하는 맘은 굴뚝같으나 브라우져가 지원을 안해주니 답답합니다. ㅜㅜ
codebase 뒷부분에 =" 이게 빠져있습니다! 작년부터 봤었는데 이제야 눈에 들어왔네요--;
http://www.alistapart.com/articles/flashsatay 요기 나와있는 방법으로도 충분히 크로스로 플래시 불러오는게 가능하던데 이건 뭐가 문제가 있나요??
오류 수정했습니다. 알려주셔서 감사합니다. Flash Satay 방법을 써본 적이 있는데 클라이언트가 처음 컨테이너 무비 로딩될 때 잠깐 보이는 박스가 싫다고 하더군요. 그것만 빼면 크게 문제 없습니다. http://hyeonseok.com/pmwiki/index.php/Markup/Object 여기 보시면 제가 적어놓은 글이 또 있습니다.