접근성 대화상자 (Accessibility Dialog Box)

접근성 대화상자는 웹 문서의 접근성과 사용성을 높이기 위한 코드의 생성을 지원하고 있습니다.

접근성 대화상자 환경설정(Ctrl+U)

Preferences > Accessibility 에서 접근성 대화상자의 사용 여부를 체크 합니다.

  1. Preferences(Ctrl+U)
  2. Accessibility
  3. Show attributes when inserting:
    • Form object
    • Frames
    • Media
    • Images

Preferences-Accessibility

Show attributes when inserting 항목에 모두 체크하면 접근성 속성을 지닌 엘리먼트 <form> <frame> <object> <img> 요소를 삽입할 때 접근성 관련 속성의 입력을 도와주는 대화상자가 나타납니다. 모두 체크하는 것을 권장합니다.

Form 접근성 대화상자

Input Tag Accessibility Attributes CS3-Input Tag Accessibility Attributes

<label for="textfield">아이디</label>
<input type="text" name="textfield" id="textfield" />

접근성 속성 대화상자 입니다. Form 요소의 하나인 <input type="text">와 같은 요소를 삽입하고자 할 때 Label 텍스트를 함께 입력할 수 있습니다. (이미지 설명 : 좌측은 Dreamweaver 8, 우측은 Dreamweaver CS3 버전 입니다. CS3 버전은 Form요소의 ID를 접근성 속성 대화상자에서 입력할 수 있도록 지원을 추가 하였습니다.)

» Style:

이 가운데 for 속성을 사용하여 label 요소를 마크업 하는 두 번째 방법이 현실적으로 가장 접근성이 높습니다. label요소를 사용하더라도 for 속성을 사용하지 않는 경우 대부분의 스크린리더는 이것을 해석하지 못한다고 합니다. for 속성을 사용하여 label 요소를 마크업 하는 경우 input 요소에 포커스가 맺힐 때 스크린리더는 label 텍스트를 읽어줍니다. 장애를 갖지 않은 일반 사용자들은 label 텍스트를 클릭하는 것만으로도 form 요소를 클릭하게 되는 효과가 있어 사용성에도 도움이 됩니다. 이것은 특히

바로 위 예제로 제공된 체크박스와 라디오 버튼의 우측에 위치한 라벨 텍스트를 클릭해 봅니다. 텍스트를 클릭하여 form 요소를 제어할 수 있게 됩니다.

접근성 속성 대화상자에서 Position: 항목은 라벨텍스트를 <input> 요소의 앞에 넣을 것인지 뒤에 넣을 것인지를 묻습니다. Access key 항목은 브라우징 기기의 단축키 조합과 충돌할 가능성이 항상 존재하기 때문에 권장하지 않으며 Tab Index는 Tab키의 이동경로를 예측하는 사용자의 자연스러운 흐름을 방해할 우려가 있어 역시 권장되지 않습니다. Tab Index 속성을 사용하지 않은 상태에서 Tab 키의 순서가 사용자의 예측을 벗어나지 않고 논리적으로 흐르도록 순서에 유의하며 마크업 하는 방법이 가장 좋습니다.

Image 접근성 대화상자(Ctrl+Alt+I)

Image Tag Accessibility Attributes

<img src="image.gif" alt="대체 텍스트" width="100" height="100" />

이미지 요소를 삽입할 때 만나는 접근성 속성 대화상자 입니다. 이미지에 대한 대체텍스트 또는 Long Description 속성을 사용할 수 있습니다. 현실적으로 Long Description을 사용하는 경우는 매우 드문데 스크린 리더 조차 이것을 지원하는 경우도 드물다고 하는군요. 하지만 스크린 리더는 언제라도 개선될 수 있습니다.

Media 접근성 대화상자(Ctrl+Alt+F)

Object Tag Accessibility Attributes

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','400','height','325','title','Global Standards, Global Business, Global Mind!','src','mainVisual','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','mainVisual' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="325" title="Global Standards, Global Business, Global Mind!">
<param name="movie" value="mainVisual.swf" />
<param name="quality" value="high" />
<embed src="mainVisual.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="325"></embed>
</object>
</noscript>

Media 요소를 삽입할 때 만나는 접근성 속성 대화상자 입니다. Flash등의 Object를 삽입할 때 <object> 태그에 title 속성을 추가해 줍니다. Flash는 제작단계에서 버튼 심볼 등에 description속성을 추가해 주면 스크린리더가 그것을 대체텍스트로 인지하는 것이 가능합니다. 하지만 아직 국산 스크린리더들은 대부분의 경우 Flash 오브젝트를 인지하지 못하고 그냥 건너 뛰기 때문에 Flash를 주요 네비게이션에 사용하는 것은 바람직하지 않습니다.

Frame 접근성 대화상자

Frame Tag Accessibility Attributes

<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="menu.html" name="menu" scrolling="No" noresize="noresize" id="menu" title="사이트 메뉴" />
<frame src="main.html" name="content" id="content" title="나라디자인-홈" />
</frameset>

Frames 요소를 삽입할 때 만나는 접근성 속성 대화상자 입니다. Frameset문서에서 각각의 프레임에 대한 title 속성을 입력하도록 지원합니다. 하지만 이러한 프레임 구조는 접근성을 치명적으로 훼손시킬 수 있기 때문에 권장하지 않습니다.

Table 접근성 대화상자(Ctrl+Alt+T)

Table 접근성 대화상자

Table 삽입 대화상자는 기본적으로 접근성 관련속성을 함께 입력하도록 구성되어 있으며 환경설정에서는 이것을 제어하는 별도의 옵션을 제공하고 있지 않습니다. Header 셀(th)을 지정하고 Caption 요소와 Summary 속성을 한꺼번에 입력할 수 있도록 지원하고 있는데 이 대화상자에서 Header 셀을 지정하게 되면 th 엘리먼트에 scope 속성이 함께 작성되어 접근성이 매우 높은 표가 생성 됩니다.

자장면과 짬뽕의 가격과 열량 비교
구분 자장면 짬뽕
가격 3,000 3,500
열량 300 350
<table cellspacing="0" summary="짬뽕은 자장면보다 500원이 비싸고 열량이 50 높다">
<caption>
자장면과 짬뽕의 가격과 열량 비교
</caption>
<thead>
<tr>
<th scope="col"> 구분</th>
<th scope="col"> 자장면</th>
<th scope="col"> 짬뽕</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 가격</th>
<td class="ta_right"> 3,000</td>
<td class="ta_right"> 3,500</td>
</tr>
<tr>
<th scope="row"> 열량</th>
<td class="ta_right"> 300</td>
<td class="ta_right"> 350</td>
</tr>
</tbody>
</table>

시각 장애인들이 사용하는 스크린리더는 이 표를 이렇게 읽어줄 것입니다.

  1. 표 제목 - 자장면과 짬뽕의 가격과 열량 비교
  2. 표 요약 - 짬뽕은 자장면보다 500원이 비싸고 열량이 50 높다
  3. 표 머릿글 - 구분, 자장면, 짬뽕
  4. 표 내용 - 가격, 자장면 가격 3,000원, 짬뽕 가격 3,500원, 열량, 자장면 열량 300, 짬뽕 열량 350