HTML 목록은 지루합니다. 그들은하지 않습니다 do 그래서 우리는 그것들이 얼마나 널리 사용되고 있음에도 불구하고 그것들에 대해 정말로 생각하지 않습니다. 또한 마커 제거, 순서 반전, 사용자 지정 카운터 만들기와 같이 사용자 지정을 위해 항상 수행했던 것과 동일한 작업을 계속 수행할 수 있습니다.
그러나 목록을 사용할 때 알아야 할 몇 가지 "새로운" 사항(위험 포함)이 있습니다. 위험은 대부분 사소하지만 생각보다 훨씬 일반적입니다. 목록을 사용하여 수행할 수 있는 몇 가지 새로운 작업과 이전 솔루션에 접근하는 새로운 방법까지 살펴보겠습니다.
명확히 하기 위해 우리가 말하는 HTML 요소는 다음과 같습니다.
- 주문 된 목록
- 정렬되지 않은 목록
- 설명 목록
- 대화형 목록
정렬된 목록, 정렬되지 않은 목록 및 대화형 목록에는 목록 항목(
) 어떤 종류의 목록을 다루고 있는지에 따라 표시됩니다. 정렬된 목록(
) 목록 항목 옆에 숫자를 표시합니다. 정렬되지 않은 목록(
) 및 메뉴 요소(
) 목록 항목 옆에 글머리 기호를 표시합니다. 우리는 이것을 "목록 마커"라고 부르며 스타일을 지정할 수도 있습니다. 를 사용하여 ::채점자 의사 요소. 설명 목록은 설명 용어(
) 및 설명 세부 정보(
) 대신에
목록 마커가 없습니다. 메타데이터와 용어집을 표시하는 데 사용하기로 되어 있지만 야생에서 본 적이 없다고 말할 수는 없습니다.
목록 스타일을 올바르게(적어도 제 생각에는) 재설정하는 방법과 같은 쉬운 방법부터 시작하겠습니다. 그런 다음 파악하기 어려운 문제에 대해 조명하기 전에 몇 가지 접근성 문제를 살펴보겠습니다.
당신이 알고 놀랄지도 모르는 요소는 사실 목록의 한 유형입니다!
목록 스타일 재설정
브라우저는 자체적인 사용자 에이전트 스타일을 자동으로 적용하여 즉시 사용할 수 있는 목록의 시각적 구조를 지원합니다. 훌륭할 수 있습니다! 하지만 스타일에 대한 의견이 없는 빈 서판으로 시작하려면 먼저 해당 스타일을 재설정해야 합니다.
예를 들어 목록 항목 옆에 있는 마커를 매우 쉽게 제거할 수 있습니다. 여기에 새로운 것은 없습니다:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}그러나 최신 CSS에는 특정 목록 인스턴스를 타겟팅하는 데 도움이 되는 새로운 방법이 있습니다. 해당 목록이 다음에 나타나는 경우를 제외하고 모든 목록에서 마커를 지우고 싶다고 가정해 보겠습니다. 기사와 같은 긴 형식의 콘텐츠. 최신 CSS 의사 클래스 함수의 기능을 결합하면 :where() 및 :not(), 해당 인스턴스를 격리하고 해당 경우 마커를 허용할 수 있습니다.
/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}왜 사용 :where() 대신 :is()? 의 특이성 :where() 는 항상 XNUMX인 반면 :is() 선택자 목록에서 가장 특정한 요소의 특이성을 취합니다. 그래서, 사용 :where() 재정의의 덜 강력한 방법이며 쉽게 재정의할 수 있습니다.
UA 스타일은 패딩을 적용하여 마커에서 목록 항목의 콘텐츠까지 간격을 둡니다. 다시 말하지만, 어떤 경우에는 즉시 사용할 수 있는 매우 좋은 어포던스이지만 위에서 한 것처럼 목록 마커를 이미 제거하고 있는 경우 해당 패딩도 지울 수 있습니다. 이것은 또 다른 경우입니다. :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}그러면 마커가 없는 목록 항목이 공간에 떠 있는 것처럼 보이지 않습니다. 그러나 우리는 목욕물과 함께 아기를 버리고 이전에 격리한 것을 포함하여 모든 경우에 패딩을 제거했습니다.
. 이제 마커가 있는 목록이 콘텐츠 상자의 가장자리에 매달려 있습니다.
UA 스타일은 추가 40px ~로
요소입니다.
따라서 우리가 원하는 것은 목록 마커가 컨테이너 외부에 "매달려" 있는 것을 방지하는 것입니다. 우리는 그것을 고칠 수 있습니다 list-style-position 재산:
아니면... 문체 선호도 때문일까요?
목록에 대한 새로운 접근성 문제
불행하게도 목록과 관련하여 몇 가지 접근성 문제가 있습니다. 더 현대적인 시대에도 마찬가지입니다. 한 가지 우려 사항은 적용 결과입니다. list-style: none; UA 스타일을 재설정할 때와 마찬가지입니다.
한마디로 사파리 하지 않습니다 로 스타일이 지정된 정렬된 목록과 정렬되지 않은 목록을 읽습니다. list-style: none 스크린 리더로 콘텐츠를 탐색할 때와 같이 실제 목록으로. 즉, 마커를 제거하면 목록의 의미론적 의미도 제거됩니다. 그만큼 이 수정에 대한 수정 그것을 적용하는 ARIA list 목록의 역할 및 listitem 목록 항목에 대한 역할 따라서 스크린 리더가 선택합니다.
- ...
- ...
- ...
- ...
- ...
- ...
이상하게도 Safari는 이것을 기능으로 간주합니다. 버그보다는. 기본적으로 사용자는 스크린 리더가 너무 많은 목록을 발표한다고 보고할 것입니다(개발자가 목록을 남용하는 경향이 있기 때문). role="list" 스크린 리더에 의해 발표되는데 실제로 그렇게 이상하지는 않습니다. 스콧 오하라 있다 자세한 런 다운 모든 것이 어떻게 진행되었는지.
두 번째 접근성 문제는 우리가 만든 문제가 아닙니다(만세!). 그래서, 당신은 방법을 알고 당신은해야합니다 를 추가 aria-label 에
제목이 없는 요소? 목록을 설명하는 데 도움이 되는 표제 요소를 포함하지 않는 목록에 대해 동일한 작업을 수행하는 것이 때때로 의미가 있습니다.
Grocery list
당신은 절대적으로 하지 두 가지 방법 중 하나를 사용해야 합니다. 제목이나 ARIA 레이블을 사용하는 것은 요구 사항이 아니라 컨텍스트를 추가하는 것일 뿐입니다. 스크린 리더로 웹 사이트를 테스트하고 상황에 가장 적합한 사용자 경험을 제공하는 작업을 수행해야 합니다.
관련 뉴스에서 Eric Bailey는 다음과 같은 훌륭한 글을 썼습니다. 그가 생각하는 이유와 방법 aria-label 코드 냄새가 나다.
기다림,
목록도요?
좋아요, 그래서 당신은 아마도 모든 것에 대해 궁금해 할 것입니다.
코드 예제에 포함된 요소입니다. 실제로 매우 간단합니다. 메뉴는 대화형 항목용이라는 점을 제외하면 정렬되지 않은 목록입니다. 심지어 정렬되지 않은 목록으로 접근성 트리에 노출됩니다.
시맨틱 웹 초기에는 메뉴가 다음과 같다고 잘못 믿었습니다.
상황에 맞는 메뉴(또는 “도구 모음”)에 대한 것이라고 믿기 전에 사양 말한다) 그것이 HTML 사양의 초기 버전에서 말한 것이기 때문입니다. (MDN에는 흥미로운 글이 있습니다. 더 이상 사용되지 않는 모든 항목에 대해
조금이라도 관심이 있다면.)
그러나 오늘날 이것은 메뉴를 사용하는 시맨틱 방식입니다.
개인적으로 좋은 사용 사례가 있다고 생각합니다.
. 마지막 예는 레이블이 지정된 소셜 공유 버튼 목록을 보여줍니다.
요소에서 주목할만한 측면은 "문서 공유" 레이블이 버튼이 수행하는 작업을 설명하는 데 도움이 되는 상당한 양의 컨텍스트를 제공한다는 것입니다.
메뉴가 꼭 필요한가요? 아니. 그들은 HTML 랜드마크? 절대 아니다. 하지만 적게 즐기면 거기에 있습니다.
s 그리고 당신은 구성 요소가 aria-label 추가 컨텍스트.
다른 건 없니?
예, 앞서 언급한 내용도 있습니다.
(설명 목록) 요소이지만, MDN은 목록을 고려하지 않는 것 같습니다. 같은 방식으로 — 용어를 포함하는 그룹 목록입니다 — 실제로 사용되는 것을 본 적이 없다고 말할 수 없습니다. MDN에 따르면 메타데이터, 용어집 및 기타 유형의 키-값 쌍에 사용되어야 합니다. 나는 모든 스크린 리더가 그것들을 다르게 발표한다는 이유로 그것들을 피할 것입니다.
그러나 부정적인 말로 끝내지 말자. 다음은 목록으로 수행할 수 있는 매우 멋진 작업 목록입니다.
