page title

필터링·정렬 컨트롤을 가능한 한 숨기지 않는다.

화면 너비가 충분한 경우 필터링·정렬 컨트롤은 축약된 버튼 형태가 아니라 필터링할 수 있는 주요 옵션이 항상 노출되도록 표현한다. 이를 통해 사용자는 설정한 필터링·정렬 조건에 따른 결과 목록의 변화를 함께 비교할 수 있다.

선택된 필터링·정렬 옵션이 명확하게 구분되도록 표현한다.

라디오 버튼, 체크박스, 셀렉트 등 필터링·정렬 옵션 선택에 활용되는 컴포넌트 가이드라인을 참고하여 선택된 옵션이 명확하게 구분되도록 표현해야 한다.

조건이 적용되었음을 확인할 수 있는 명확한 시각적 단서를 제공한다.

상세 검색 조건이 적용되어 데이터 집합 목록이 변경된 상황을 사용자가 빠르고 직관적으로 인지할 수 있도록 제공해야 한다.

모든 필터링·정렬 컨트롤에 레이블과 그룹 헤딩을 제공한다.

사용자에 따라 각 필터링·정렬 컨트롤에 대한 레이블, 그룹 헤딩이 생략되면 어떤 속성의 옵션을 선택하는 것인지 분명하게 인지하지 못할 수 있다.

필터링·정렬 컨트롤 레이블은 이해가 쉽도록 간결하고 정확한 내용으로 제공한다.

필터링·정렬 컨트롤 레이블을 서술형으로 제공하게 되면 빠른 인지가 어려울 수 있다. 또한 특수한 서비스를 제외하고 레이블에 전문 용어를 사용하거나 축약어를 사용하면 내용을 이해하기 어려우므로 필터링·정렬 옵션의 의미를 정확하게 전달하되 간결하게 작성되어야 한다.

필터링 컨트롤은 우선순위에 따라 좌측 또는 상단부터 순차적으로 배치한다.

사용자가 빈번하게 사용하거나 데이터 집합을 조회하는 데 핵심적인 속성을 설정하기 위한 필터링 컨트롤은 일관된 위치, 사용자가 접근하기 쉬운 영역에 배치하여 빠르게 접근 가능하도록 한다.

관련 있거나 유사한 필터링 컨트롤을 군집화하여 제공한다.

여러 필터링 컨트롤 중 의미적으로 서로 관련 있는 필터링 컨트롤을 군집화하여 제공하게 되면 사용자는 보다 효과적으로 정보를 조회할 수 있다.
예) 지역을 ‘도’, ‘시’, ‘군/구’ 단위로 나누어 조회할 수 있는 경우 세 개의 필터링 컨트롤은 연속적으로 배치함

인라인 형식의 정렬을 사용할 때를 제외하고 정렬 컨트롤은 대상 목록 오른쪽 상단에 배치한다.

디지털 정부서비스를 이용하는 사용자의 일관된 경험을 위해 정렬 컨트롤은 필터링·정렬을 수행하고자 하는 정보 목록의 오른쪽 상단에 배치한다.

필터링 옵션으로 제공되는 메타 데이터가 색인화되고 검색 가능한지 확인한다.

각 필터링 옵션을 선택하였을 때, 선택한 메타 데이터에 속하는 데이터가 적절하게 반환되는지 정기적으로 점검한다. 사용자가 옵션을 자주 이용하지 않거나, 해당 메타 데이터 속성을 가진 데이터가 더 이상 존재하지 않고 앞으로도 존재할 가능성이 낮다면 필터링 옵션을 선택하는 과정의 인지적 부담을 줄이기 위해 필터링 옵션에서 항목을 삭제하는 방안을 검토한다.

데이터 집합의 특성과 사용자의 요구사항에 적합한 수준의 필터링·정렬 옵션을 제공한다.

필터링·정렬 옵션을 지나치게 다양한 유형으로 세분화하여 제공하게 되면 사용자가 압박을 느끼거나 혼란을 느낄 수도 있다. 먼저 데이터 집합의 특성을 고려하여 결과를 좁히는 데 도움이 되는 속성을 중심으로 필터링·정렬할 수 있도록 하고 사용자가 필요로 하는 옵션을 추가 제공한다.

날짜, 시간을 기준으로 한 필터링은 범위를 입력할 수 있도록 제공한다.

단일 날짜만 설정할 수 있도록 제공하게 되면 사용자는 데이터에 부여된 정확한 날짜 메타 데이터를 알지 못하기 때문에 조건을 여러 번 설정해야 한다.

적용된 필터링 옵션을 한 번에 해제할 수 있는 기능을 제공한다.

여러 가지 조건이 적용된 필터링 컨트롤과 옵션을 하나씩 눌러 해제하는 동작이 반복되지 않도록 3개 이상의 속성에 대해 필터링 컨트롤이 제공되는 경우 옵션 선택을 한 번에 해제할 수 있는 기능을 제공해야 한다.

모든 필터링·정렬 컨트롤을 표시하기에 화면 너비가 충분하지 않은 경우, 필터링 및 정렬 컨트롤 버튼을 축약하여 제공한다.

컨트롤 버튼은 목록의 우측 상단에 배치하며, 필터 컨트롤이 먼저 배치되도록 한다.

조건이 적용되었음을 확인할 수 있는 명확한 프로그램적 단서를 제공한다.

전체 검색 결과 수 안내 텍스트에 live-region을 적용하고 값이 변경되자마자 해당 정보가 스크린 리더로 전달될 수 있도록 aria-live="polite"를 사용해야 한다.

• WCAG 2.1 Name, Role, Value (A)
• WCAG 2.1 Status Messages (AA)

정보 조회가 완료된 이후 키보드 초점이 적절한 요소에 유지되도록 한다.

필터링·정렬 결과를 즉각적으로 표시할 때, 키보드 초점은 값을 변경하거나 선택한 옵션 항목에 유지되도록 한다. 결과를 일괄 표시할 때는 키보드 초점을 제출 버튼에 유지시킨다. 사용자가 선택한 옵션 요소를 벗어나 문서 가장 처음이나 예측할 수 없는 요소로 초점이 이동하게 되면 키보드, 스크린 리더 사용자는 추가적인 필터링·정렬 옵션 선택을 실행하기 위해 부가적인 탐색 과정을 거치는 불편을 겪게 된다.

• KWCAG 2.2 초점 이동과 표시
• WCAG 2.1 Focus Order (A)