iFrame 상위 태그 안에 제목 요소를 포함해야 합니다.</p></li> <li><p><iframe>에서 스크롤을 "auto" 또는 "yes"로 설정하는 것이 가장 좋습니다. 태그 설정. 이를 통해 시력이 낮은 사용자도 <iframe> 내의 콘텐츠로 스크롤할 수 있습니다. 그렇지 않으면 볼 수 없을 수도 있습니다.</p></li> </ul> <h2> 집중 순서 </h2> <ul> <li>기본 초점 순서는 논리적이고 직관적이어야 하며 페이지의 시각적 순서와 일치해야 합니다.</li> </ul> <h2> 탭인덱스 </h2> <ul> <li><p>일반적으로 포커스를 받을 수 있지만 비활성 상태인 요소(예: 비활성화된 입력 상자 또는 버튼)에는 음수 tabindex(tabindex="-1")가 지정되어야 합니다.</p></li> <li><p>활성화되거나 필요할 때 요소에 포커스를 다시 추가해야 합니다(JS 또는 TS 사용 가능).</p></li> <li><p>양수 tabindex를 피해야 합니다. 비대화형 요소에 초점을 맞추고 일반적인 초점 순서를 방해하면 사용자가 혼란스럽고 좌절감을 느낄 수 있습니다. 포커스를 받을 수 없는 요소에 tabindex=1과 같은 양수 tabindex를 추가해야 하는 상황은 거의 없습니다.</p></li> </ul> <h2> 링크 건너뛰기 </h2> <ul> <li><p>사용자가 탐색 메뉴를 우회할 수 있도록 건너뛰기 링크를 포함해야 합니다.</p></li> <li><p>스킵 링크에는 링크 목적에 대한 컨텍스트(예: "기본 콘텐츠로 건너뛰기")가 포함되어야 하며 aria-labelledby, aria-label과 같은 추가 ARIA 속성을 사용할 수 있습니다.</p></li> <li><p>사용자가 탭할 때까지 건너뛰기 링크를 표시하거나 시각적으로 숨길 수 있습니다(디자인에 따라).</p></li> </ul> <h2> 초점 표시기 </h2> <ul> <li>초점 표시가 다른 구성 요소 아래에 숨겨져 있지 않은지 확인하세요.</li> </ul> <h2> 브라우저 기본 스타일 </h2> <ul> <li><p>기본 브라우저 포커스 스타일(예: "개요: 0" 또는 "개요: 없음")을 재정의하면 안 됩니다.</p></li> <li><p>사용자 정의 초점 스타일이 허용됩니다.</p></li> </ul> <h2> 자바스크립트 </h2> <h3> 이벤트 트리거 </h3> <ul> <li>클릭 이벤트(예: onClick())가 의미 없는 요소(예: <div>)에 적용되는 경우 Enter 또는 Space 키 누름을 감지하기 위해 keydown/keyup 이벤트를 추가해야 합니다.</li> </ul> <h3> 페이지 제목 </h3> <ul> <li>각 페이지에는 제목이 있어야 합니다. 이 목적으로 document.title 속성이나 타사 패키지를 사용하는 것이 허용됩니다</li> </ul> <h3> 동적 콘텐츠 </h3> <div><table> <tr> <th>Possible misuse</th> <th>Correct use</th> </tr> <tr> <td>Render large chunks of non-semantic HTML</td> <td>Render smaller pieces of semantic HTML</td> </tr> <tr> <td>Not allowing time for dynamic content to be recognized by assistive technology</td> <td>Using a setTimeout() time delay to allow users to hear the full message</td> </tr> <tr> <td>Applying style attributes for onFocus() dynamically</td> <td>Use :focus for the related elements in your CSS stylesheet</td> </tr> <tr> <td>Applying inline styles may cause user stylesheets to not be read properly</td> <td>Keep your styles in CSS files to keep the consistency of the theme</td> </tr> <tr> <td>Creating very large JavaScript files that slow down overall site performance</td> <td>Use less JavaScript; prefer CSS for animations or sticky navigation for better performance</td> </tr> </table></div> <h3> 구성요소 수준 집중 관리 </h3> <ul> <li>사용자가 모달을 열 때 Tab 키를 사용하여 모달 내에서 실행 가능한 요소(예: 취소 및 제출 버튼) 사이를 탐색할 수 있어야 합니다. 그러나 포커스는 모달에만 국한되어 있어야 하므로 사용자가 모달을 명시적으로 닫지 않는 한 외부 요소에 액세스할 수 없습니다. 이렇게 하면 초점이 모달 내에 갇히게 됩니다.</li> </ul> <h3> 페이지 수준 포커스 관리 </h3> <ul> <li><p>사용자가 페이지에서 페이지로 이동할 때도 포커스가 유지되어야 합니다.</p></li> <li><p>사용자가 애플리케이션 내의 다른 페이지로 이동하기 위해 링크를 클릭할 때마다 초점은 같은 위치에 유지되거나 잠재적으로 완전히 다른 곳에 배치됩니다.</p></li> <li><p>사용자가 한 페이지에서 다른 페이지로 이동할 때 제안되는 포커스 배치는 다음과 같습니다.</p></li> <li><p>아리아 라이브 안내로 메인 컨테이너에 집중하세요.</p></li> <li><p>메인 콘텐츠로 건너뛰려면 링크에 다시 초점을 맞추세요.</p></li> <li><p>새 페이지의 최상위 제목으로 초점을 이동하세요.</p></li> </ul> <h3> 구성요소 수준 상태 관리 </h3> <ul> <li><p>구성 요소 상태는 ARIA 속성을 사용하여 관리해야 합니다(예: aria-expanded 속성을 사용하여 드롭다운 메뉴 또는 목록이 확장되었는지 또는 축소되었는지 사용자에게 알려줍니다.)</p></li> <li><p>ARIA 속성을 적용할 때는 선택적으로 선택하는 것이 중요합니다. 사용자 흐름을 고려하여 사용자에게 어떤 중요한 정보를 전달해야 하는지 이해하세요.</p></li> </ul> <h3> 페이지 수준 상태 관리 </h3> <ul> <li><p>페이지에 콘텐츠가 동적으로 추가되거나 업데이트되는 경우(예: 경고 메시지 또는 텍스트 변경) 이를 사용자에게 알려야 합니다.</p></li> <li> <p>사용하는 것이 더 좋습니다 </p> <ul> <li>반응: 반응-아리아-라이브 또는 반응-a11y-아나운서 </li> <li>Angular: 라이브아나운서 </li> <li>Vue: vue-a11y-utils </li> </ul> </li> </ul> <p>(계속...)</p>
