JavaScript가 동작하지 않아도 작동하는 동적 기능을 배포하세요.
이 보드는 웹 전문가를 위한 검토 체크리스트로, 기능이 배포되기 전에 동적 페이지나 컴포넌트에서 실행해야 할 17가지 점검 항목을 제공하며, 그 아래의 정적 기반, 실패 시 발생하는 상황, 업데이트 인지 여부, 스크린 리더 사용자와 키보드 전용 사용자가 해당 기능을 사용할 수 있는지를 다룹니다.
정적 HTML 기반:
초기 HTML에 필수 콘텐츠, 링크 및 메타데이터가 포함되어 제공됩니다
JavaScript가 없더라도 페이지는 보기만 가능한 것이 아니라 실제로 사용 가능해야 합니다
동적 기능은 작동하는 기본 구조를 대체하지 않고 그 위에 덧붙여져야 합니다
검색 엔진 크롤러가 접근할 수 없는 JavaScript 전용 위젯에 필수 요소가 묻혀 있어서는 안 됩니다
점진적 저하:
모든 요청에는 명시적인 오류 처리가 있어 실패가 묵인되거나 무한 로딩 상태로 남지 않아야 합니다
동적 기능이 완전히 실패할 경우 동작하는 대체 수단이 있어야 합니다
동적 업데이트 후 뒤로 가기 및 앞으로 가기 버튼이 예상대로 동작해야 합니다
비슷해 보이는 요소는 동작도 같아야 합니다
업데이트를 눈에 띄게 하기:
사용자가 방금 작업한 항목 옆에 피드백이 표시됩니다
업데이트는 크기, 대비 또는 움직임으로 주의를 끕니다
일시적 메시지는 지속되는 표시를 남깁니다
어떤 상호작용도 두 곳을 동시에 확인해야 하지 않습니다
ARIA 및 스크린 리더 접근성:
사용자 정의 위젯에는 적절한 ARIA 역할이 부여되어 있습니다
구조적 영역에는 랜드마크 또는 HTML5 시맨틱 요소를 사용합니다
동적으로 업데이트되는 영역에는 aria-live로 표시되어 있습니다
실제 스크린 리더로 빌드를 테스트했습니다
키보드만으로 전체 탐색이 가능하며 포커스가 사라지거나 갇히지 않습니다
보드 사용 방법:
자신의 복사본을 만들려면 보드 > 세부정보 > 복제로 이동하세요. 무료 Miro 계정만 있으면 됩니다.
항목에 체크하려면 해당 상자를 더블클릭한 다음 x를 입력하세요.
각 동적 기능, 컴포넌트 또는 스프린트마다 카드를 복제하세요.
이 템플릿은 Interaction Design Foundation의 코스 UX Essentials: Accessibility, SEO and Dynamic Interfaces와 함께 제공됩니다.
