Adobe [드림위버/웹접근성] 접근성 대화상자 (Accessibility Dialog Box)
페이지 정보
본문
접근성 대화상자는 웹 문서의 접근성과 사용성을 높이기 위한 코드의 생성을 지원하고 있습니다.
접근성 대화상자 환경설정(Ctrl+U)
Preferences > Accessibility 에서 접근성 대화상자의 사용 여부를 체크 합니다.
1. Preferences(Ctrl+U)
2. Accessibility
3. Show attributes when inserting:
* Form object
* Frames
* Media
* Images
Show attributes when inserting 항목에 모두 체크하면 접근성 속성을 지닌 엘리먼트 "
" 요소를 삽입할 때 접근성 관련 속성의 입력을 도와주는 대화상자가 나타납니다. 모두 체크하는 것을 권장합니다.
* Keep focus in the panel when opening
패널이 열릴 때 포커스 유지하기. 시각장애인이 드림위버를 사용하는 경우 패널이 새로 열릴 때 포커스를 새 패널에 맺히도록 합니다.
* Offscreen rendering (need to disable when using screen readers)
오프스크린 렌더링. 스크린리더를 사용하는 경우 체크를 해제 합니다.
Form 접근성 대화상자
<label for="textfield">아이디</label>
<input type="text" name="textfield" id="textfield" />
접근성 속성 대화상자 입니다. Form 요소의 하나인 <input type="text">와 같은 요소를 삽입하고자 할 때 Label 텍스트를 함께 입력할 수 있습니다. (이미지 설명 : 좌측은 Dreamweaver 8, 우측은 Dreamweaver CS3 버전 입니다. CS3 버전은 Form요소의 ID를 접근성 속성 대화상자에서 입력할 수 있도록 지원을 추가 하였습니다.)
≫ Style:
* Wrap with label tag [권장안함]
for 속성을 사용하지 않고 label 요소가 텍스트와 input을 모두 감싸도록 하는 방법
<label>아이디
<input type="text" name="textfield" />
</label>
* Attach label tag using 'for' attribute [권장]
for 속성을 사용하여 label 요소를 마크업 하는 방법
<label for="textfield">아이디</label>
<input type="text" name="textfield" id="textfield" />
* No label tag [권장안함]
label 요소를 사용하지 않는 방법
<input type="text" name="textfield" />
이 가운데 for 속성을 사용하여 label 요소를 마크업 하는 두 번째 방법이 현실적으로 가장 접근성이 높습니다. label요소를 사용하더라도 for 속성을 사용하지 않는 경우 대부분의 스크린리더는 이것을 해석하지 못한다고 합니다. for 속성을 사용하여 label 요소를 마크업 하는 경우 input 요소에 포커스가 맺힐 때 스크린리더는 label 텍스트를 읽어줍니다. 장애를 갖지 않은 일반 사용자들은 label 텍스트를 클릭하는 것만으로도 form 요소를 클릭하게 되는 효과가 있어 사용성에도 도움이 됩니다. 이것은 특히
접 근성 속성 대화상자에서 Position: 항목은 라벨텍스트를 <input> 요소의 앞에 넣을 것인지 뒤에 넣을 것인지를 묻습니다. Access key 항목은 브라우징 기기의 단축키 조합과 충돌할 가능성이 항상 존재하기 때문에 권장하지 않으며 Tab Index는 Tab키의 이동경로를 예측하는 사용자의 자연스러운 흐름을 방해할 우려가 있어 역시 권장되지 않습니다. Tab Index 속성을 사용하지 않은 상태에서 Tab 키의 순서가 사용자의 예측을 벗어나지 않고 논리적으로 흐르도록 순서에 유의하며 마크업 하는 방법이 가장 좋습니다.
Image 접근성 대화상자(Ctrl+Alt+I)
<img src="image.gif" alt="대체 텍스트" width="100" height="100" />
이 미지 요소를 삽입할 때 만나는 접근성 속성 대화상자 입니다. 이미지에 대한 대체텍스트 또는 Long Description 속성을 사용할 수 있습니다. 현실적으로 Long Description을 사용하는 경우는 매우 드문데 스크린 리더 조차 이것을 지원하는 경우도 드물다고 하는군요. 하지만 스크린 리더는 언제라도 개선될 수 있습니다.
Media 접근성 대화상자(Ctrl+Alt+F)
<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 접근성 대화상자
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="main.html" name="mainFrame" id="mainFrame" title="해피정닷컴" />
<frame src="menu.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="메뉴" />
</frameset>
Frames 요소를 삽입할 때 만나는 접근성 속성 대화상자 입니다. Frameset문서에서 각각의 프레임에 대한 title 속성을 입력하도록 지원합니다. 하지만 이러한 프레임 구조는 접근성을 치명적으로 훼손시킬 수 있기 때문에 권장하지 않습니다
Table 접근성 대화상자(Ctrl+Alt+T)
Table 삽입 대화상자는 기본적으로 접근성 관련속성을 함께 입력하도록 구성되어 있으며 환경설정에서는 이것을 제어하는 별도의 옵션을 제공하고 있지 않습니다. Header 셀(th)을 지정하고 Caption 요소와 Summary 속성을 한꺼번에 입력할 수 있도록 지원하고 있는데 이 대화상자에서 Header 셀을 지정하게 되면 th 엘리먼트에 scope 속성이 함께 작성되어 접근성이 매우 높은 표가 생성 됩니다.
<table cellspacing="0" summary="행복은 성적순일까?">
<caption>
행복 성적
</caption>
<tr>
<th width="50" scope="col">구분</th>
<th width="50" scope="col">영어</th>
<th width="50" scope="col">수학</th>
</tr>
<tr>
<th scope="row">점수</th>
<td>50</td>
<td>70</td>
</tr>
<tr>
<th scope="row">행복</th>
<td>90</td>
<td>80</td>
</tr>
</table>
시각 장애인들이 사용하는 스크린리더는 이 표를 이렇게 읽어줄 것입니다.
1. 표 제목 - 행복 성적
2. 표 요약 - 행복은 성적순일까?
3. 표 머릿글 - 구분, 영어, 수학
4. 표 내용 - 점수, 50, 70, 행복, 90, 80
자료인용 : http://naradesign.net/open_content/lecture/DW&CSS/1_2.html
접근성 대화상자 환경설정(Ctrl+U)
Preferences > Accessibility 에서 접근성 대화상자의 사용 여부를 체크 합니다.
1. Preferences(Ctrl+U)
2. Accessibility
3. Show attributes when inserting:
* Form object
* Frames
* Media
* Images
Show attributes when inserting 항목에 모두 체크하면 접근성 속성을 지닌 엘리먼트 "
" 요소를 삽입할 때 접근성 관련 속성의 입력을 도와주는 대화상자가 나타납니다. 모두 체크하는 것을 권장합니다.
* Keep focus in the panel when opening
패널이 열릴 때 포커스 유지하기. 시각장애인이 드림위버를 사용하는 경우 패널이 새로 열릴 때 포커스를 새 패널에 맺히도록 합니다.
* Offscreen rendering (need to disable when using screen readers)
오프스크린 렌더링. 스크린리더를 사용하는 경우 체크를 해제 합니다.
Form 접근성 대화상자
<label for="textfield">아이디</label>
<input type="text" name="textfield" id="textfield" />
접근성 속성 대화상자 입니다. Form 요소의 하나인 <input type="text">와 같은 요소를 삽입하고자 할 때 Label 텍스트를 함께 입력할 수 있습니다. (이미지 설명 : 좌측은 Dreamweaver 8, 우측은 Dreamweaver CS3 버전 입니다. CS3 버전은 Form요소의 ID를 접근성 속성 대화상자에서 입력할 수 있도록 지원을 추가 하였습니다.)
≫ Style:
* Wrap with label tag [권장안함]
for 속성을 사용하지 않고 label 요소가 텍스트와 input을 모두 감싸도록 하는 방법
<label>아이디
<input type="text" name="textfield" />
</label>
* Attach label tag using 'for' attribute [권장]
for 속성을 사용하여 label 요소를 마크업 하는 방법
<label for="textfield">아이디</label>
<input type="text" name="textfield" id="textfield" />
* No label tag [권장안함]
label 요소를 사용하지 않는 방법
<input type="text" name="textfield" />
이 가운데 for 속성을 사용하여 label 요소를 마크업 하는 두 번째 방법이 현실적으로 가장 접근성이 높습니다. label요소를 사용하더라도 for 속성을 사용하지 않는 경우 대부분의 스크린리더는 이것을 해석하지 못한다고 합니다. for 속성을 사용하여 label 요소를 마크업 하는 경우 input 요소에 포커스가 맺힐 때 스크린리더는 label 텍스트를 읽어줍니다. 장애를 갖지 않은 일반 사용자들은 label 텍스트를 클릭하는 것만으로도 form 요소를 클릭하게 되는 효과가 있어 사용성에도 도움이 됩니다. 이것은 특히
- input type="checkbox" 또는
- input type="radio" 형식일 때 더욱 그렇습니다.
접 근성 속성 대화상자에서 Position: 항목은 라벨텍스트를 <input> 요소의 앞에 넣을 것인지 뒤에 넣을 것인지를 묻습니다. Access key 항목은 브라우징 기기의 단축키 조합과 충돌할 가능성이 항상 존재하기 때문에 권장하지 않으며 Tab Index는 Tab키의 이동경로를 예측하는 사용자의 자연스러운 흐름을 방해할 우려가 있어 역시 권장되지 않습니다. Tab Index 속성을 사용하지 않은 상태에서 Tab 키의 순서가 사용자의 예측을 벗어나지 않고 논리적으로 흐르도록 순서에 유의하며 마크업 하는 방법이 가장 좋습니다.
Image 접근성 대화상자(Ctrl+Alt+I)
<img src="image.gif" alt="대체 텍스트" width="100" height="100" />
이 미지 요소를 삽입할 때 만나는 접근성 속성 대화상자 입니다. 이미지에 대한 대체텍스트 또는 Long Description 속성을 사용할 수 있습니다. 현실적으로 Long Description을 사용하는 경우는 매우 드문데 스크린 리더 조차 이것을 지원하는 경우도 드물다고 하는군요. 하지만 스크린 리더는 언제라도 개선될 수 있습니다.
Media 접근성 대화상자(Ctrl+Alt+F)
<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 접근성 대화상자
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="main.html" name="mainFrame" id="mainFrame" title="해피정닷컴" />
<frame src="menu.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="메뉴" />
</frameset>
Frames 요소를 삽입할 때 만나는 접근성 속성 대화상자 입니다. Frameset문서에서 각각의 프레임에 대한 title 속성을 입력하도록 지원합니다. 하지만 이러한 프레임 구조는 접근성을 치명적으로 훼손시킬 수 있기 때문에 권장하지 않습니다
Table 접근성 대화상자(Ctrl+Alt+T)
Table 삽입 대화상자는 기본적으로 접근성 관련속성을 함께 입력하도록 구성되어 있으며 환경설정에서는 이것을 제어하는 별도의 옵션을 제공하고 있지 않습니다. Header 셀(th)을 지정하고 Caption 요소와 Summary 속성을 한꺼번에 입력할 수 있도록 지원하고 있는데 이 대화상자에서 Header 셀을 지정하게 되면 th 엘리먼트에 scope 속성이 함께 작성되어 접근성이 매우 높은 표가 생성 됩니다.
<table cellspacing="0" summary="행복은 성적순일까?">
<caption>
행복 성적
</caption>
<tr>
<th width="50" scope="col">구분</th>
<th width="50" scope="col">영어</th>
<th width="50" scope="col">수학</th>
</tr>
<tr>
<th scope="row">점수</th>
<td>50</td>
<td>70</td>
</tr>
<tr>
<th scope="row">행복</th>
<td>90</td>
<td>80</td>
</tr>
</table>
시각 장애인들이 사용하는 스크린리더는 이 표를 이렇게 읽어줄 것입니다.
1. 표 제목 - 행복 성적
2. 표 요약 - 행복은 성적순일까?
3. 표 머릿글 - 구분, 영어, 수학
4. 표 내용 - 점수, 50, 70, 행복, 90, 80
자료인용 : http://naradesign.net/open_content/lecture/DW&CSS/1_2.html
댓글목록
등록된 댓글이 없습니다.