자바 스크립트 와 웹 접근성 - javascript accessibility

accessible-javascript.pdf

원문 : http://smack.kr/186

자바 스크립트 와 웹 접근성에 대한 고민은 각각의 웹브라우저의 종류 및 버전별로 javascript 또는 ECMCAScript (이하 javascript) 런타임의 구현이 다르기 때문에 호환성의 문제의 여지가 있고, 보안 또는 성능 문제로 javascript disable 설정 브라우저 사용자에게 최대한 접근성을 제공하고자 하는 것이다.




참조 웹사이트 : WebAIM , Creating Accessible JavaScript
http://www.webaim.org/techniques/javascript/

아래의 경우는 마우스 오버 및 아웃의 미관상의 이유로 사용하게 되는 JavaScript의 예(ex)와 롤오버의 JavaScript를 사용하지 않는 방법의 제시

Place your mouse over the following image to see a JavaScript example that does not impact accessibility.

Problems

None. In this example, there is no important content or functionality introduced by the JavaScript. The swapping of images is purely cosmetic.

Solution

No additional accessibility techniques are required. Remember, the image itself must have alternative text (i.e., <img alt="home"...>). You can also accomplish image rollovers without using JavaScript - external link.

JavaScript 의존성 테스트 방법

Follow the directions to disable or enable JavaScript in your browser. You can also determine if JavaScript is disabled. Test a JavaScript enabled web page and see if the content and functionality are accessible. Be sure to re-enable JavaScript when you're done.

Internet Explorer 6.X

1. Open Internet Explorer.
2. Select Tools > Internet Options.
3. In Internet Options dialog box select the Security tab.
4. Click Custom Level button at bottom. The Security Settings dialog box will pop up.
5. Under the Scripting category, enable/disable Active Scripting, Allow paste options via script and Scripting of Java applets.
6. Click OK twice to close out.
7. Click Refresh.

Netscape 7.X

1. Open Netscape.
2. Select Edit > Preferences.
3. Click the arrow next to Advanced.
4. Click Scripts & Plugins.
5. Check/uncheck Navigator beneath "Enable Javascript for".
6. Click OK.
7. Click Reload.

Opera 7.X

1. Open Opera.
2. Select File > Quick Preferences.
3. Check/uncheck Enable Javascript.
4. Click Reload.

신현석님의 블로그 : 접근성을 해치지 않는 자바스크립트의 사용
http://hyeonseok.com/docs/accessible-javascript/ 
pdf 다운로드 : accessible-javascript(pdf 225KB)
미러 :

accessible-javascript.pdf

자바스크립트 선언

<script language="Javascript">
//code
</script>

자바스크립트는 <script> 엘리먼트로 선언을 한다. 모든 <script>엘리먼트는 type을 명시해 주어야 하고 자바스크립트의 type은 "text/javascript" 이다. 많은 경우 language 만을 선언해서 자바스크립트버젼을 명시하는데 반드시 type도 같이 명시를 해 주어야 한다.

<script type="text/javascript">
//code
</script>

<a>의 href 속성과 자바스크립트의 사용

href는 Hypertext REFerence의 약자이다. 다시 말해서 hypertext의 위치를 나타내는 uri를 그 값으로 갖는다. 하지만 많은 경우 이 href안에 "javascript:myFunction()"과 같이 잘못된 구문을 이용하는 것을 볼 수 있다. 이와 같이 href안에 잘못된 값이 들어가게 될 경우, 북마크나 새창, 새탭으로 열기 등의 href 관련된 브라우저의 기능들이 정상적으로 작동하지 않게 된다. 따라서 href안에는 항상 uri가 들어가도록 하고 자바스크립트 적용은 onclick과 같은 이벤트 속성을 이용해야 한다.

<a href="#" onclick="...."> 의 적절한 사용법
sh 님의 블로그 : http://hardworker.tistory.com/4

<a href="http://www.amazon.com/some/path/" onclick="window.open(this.href, '', ''); return false;">
위의 코드의 경우 자바 스크립트가 인식되지 않더라도 링크로서 접근성을 보장 받는다.


JavaScript를 사용하지 않는 Image 롤오버
http://www.alistapart.com/stories/rollovers/