좋은 ol 'html 목록에 대해 알아야 할 새로운 것들

HTML 목록은 종종 상대적으로 단조롭고 기능이 제한된 것으로 간주되므로 종종 광범위한 응용 프로그램을 무시합니다. 그럼에도 불구하고, 우리는 몇 가지 오래된 방법을 사용하여 태그 제거, 주문 반전 및 사용자 정의 카운터 생성과 같은 목록을 사용자 정의 할 수 있습니다.

그러나주의가 필요한 잠재적 위험을 포함하여 목록을 사용할 때 "새로운"지식 포인트도 있습니다. 이러한 위험의 대부분은 중요하지 않지만 생각보다 훨씬 더 자주 발생합니다. 우리는 이러한 위험과 새로운 목록 사용 및 오래된 방법을 개선하기위한 새로운 아이디어를 탐구 할 것입니다.

명확하게 말하면,이 기사에서 논의 된 HTML 요소는 다음과 같습니다.

정렬 된 목록

정렬되지 않은 목록

설명 목록 대화식 목록

정렬 된 목록, 비 순응 목록 및 대화식 목록에는 모든 목록 항목 ( )이 포함되어 있으며 해당 디스플레이는 목록 유형에 따라 다릅니다. 순서 목록 (<s s>) 목록 옆에 표시되지 않은 목록 (<code> ) 및 메뉴 요소 () 목록 항목 옆에 총알이 표시됩니다. 우리는 이것을 "목록 태그"라고 부르며 <li> pseudo element를 사용하여 스타일을 지정할 수도 있습니다. 설명은 숫자 나 총알이 아닌 설명 용어 () 및 설명 세부 사항 ()을 사용하며 종종 메타 데이터 및 어휘를 표시하는 데 사용되지만 실제 응용 분야에서는 일반적이지 않습니다. </li> <with> 간단한 부분부터 시작하겠습니다. 올바르게 (적어도 내 의견으로는) 목록 스타일을 재설정하십시오. 그 후, 우리는 몇 가지 접근성 문제를 탐색 한 다음 <li> 요소에 초점을 맞출 것입니다. </li> <style style> 목록 스타일을 재설정합니다 <er> 브라우저는 자체 사용자 에이전트 스타일을 자동으로 적용하여 목록의 시각적 구조를 돕습니다. 이것은 때때로 매우 유용합니다! 그러나 스타일이없는 빈 상태로 시작하려면 먼저 해당 스타일을 재설정해야합니다. <li> 예를 들어 <we> 목록 항목 옆에있는 마커를 쉽게 제거 할 수 있습니다. 여기에 새로운 것은 없습니다 : <<> <code><dl></style></with> 그러나 최신 CSS는 특정 목록 인스턴스를 찾는 데 도움이되는 새로운 방법을 제공합니다. 모든 마크 목록을 지우고 싶다고 가정하지만이 목록이 긴 내용 (예 : 기사)에 표시되면 마크를 유지하십시오. 최신 CSS 의사 클래스 함수 및 를 사용하면 이러한 인스턴스를 분리 하고이 경우 태그를 허용 할 수 있습니다.
• 왜 대신 <menu></menu>를 사용합니까? 의 특이성은 항상 0이고
는 선택기 목록에서 가장 구체적인 요소의 특이성을 취합니다. 따라서

를 사용하는 것은 덜 필수 범위의 범위이며 그 자체로 쉽게 다루어집니다.

UA 스타일은 또한 패딩을 적용하여 목록 항목의 내용을 태그에서 분리합니다. 이것은 경우에 따라 좋은 기본 효과이지만 위와 같은 목록 마크 업을 제거한 경우 패딩도 제거 할 수 있습니다. 이것은

: 의 또 다른 사용 사례입니다 :where() 좋아, 마킹되지 않은 목록 항목이 공간에 매달리지 않는 것을 방지 할 것이다. 그러나 우리는 이전에

에서 분리 한 것들을 포함하여 모든 경우에 패딩을 제거하면서 약간 과잉이었습니다. 따라서 이제 마커가있는 목록은 콘텐츠 상자의 가장자리에 약간 매달려 있습니다.

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

UA 스타일은 추가 40px 패딩을

요소에 적용합니다. 따라서 우리가해야 할 일은 목록 마커가 컨테이너 외부에 "매달려"하는 것을 방지하는 것입니다. 우리는 속성을 ​​사용 하여이 문제를 해결할 수 있습니다. 또는 그렇지 않든… 스타일 선호도에 달려 있습니까? <article></article> 목록의 새로운 접근성 문제 불행히도, 현대에도 목록에는 접근성 문제가 있습니다. 한 가지 문제는 UA 스타일을 재설정 할 때했던 것처럼

를 적용한 결과입니다.

간단히 말해서, Safari는 화면 리더로 컨텐츠를 탐색 할 때와 같은 실제 목록에 를 사용하는 순서 및 변수되지 않은 목록을 읽지 않습니다. 다시 말해, 태그를 제거하면 목록의 의미 론적 의미도 제거됩니다. 해결책은 목록에 ARIA 목록 역할을 적용하고 목록 항목에 목록 항목 역할을 적용하여 화면 리더가 이들을 인식 할 수 있도록하는 것입니다. <menu></menu> 이상하게도 Safari는 이것을 버그가 아닌 기능으로 취급합니다. 기본적으로 사용자는 스크린 리더가 너무 많은 목록을 발표했다고보고 할 것입니다 (개발자가 과도하게 사용하는 경향이 있기 때문에). 이제 list-style-position가있는 목록 만 스크린 리더가 발표한다는 것은 놀라운 일이 아닙니다. Scott O'Hara는이 모든 일이 어떻게 상세하게 일어 났는지 설명합니다.

두 번째 접근성 문제는 우리에 의해 발생하지 않았습니다 (Long Live!). 제목이없는 요소에

를 추가해야한다는 것을 알고 있습니까? 글쎄, 때때로 목록을 설명하는 데 도움이되는 제목 요소가 포함되어 있지 않은 목록에 대해서도 동일하게하는 것이 합리적입니다.

당신은 절대적으로 두 가지 방법을 사용할 필요가 없습니다. 제목 또는 ARIA 태그를 사용하면 요구 사항이 아니라 컨텍스트가 추가됩니다. 화면 리더로 웹 사이트를 테스트하고 현재 상황에 가장 적합한 사용자 경험을 선택하십시오.

관련 뉴스에서 Eric Bailey는 이유와 방법에 대한 기사를 썼습니다.

잠깐, <menu></menu>도 목록입니까?

좋아, 그래서, 당신은 코드 예제에 내가 삽입 한 모든

요소에 대해 궁금 할 것입니다. 이것은 실제로 매우 간단합니다. 메뉴는 대화 형 프로젝트에 사용되기 때문에 변하지 않는 목록입니다. 접근성 트리에서 정렬되지 않은 목록으로 표시됩니다. 시맨틱 웹의 초기 시절, 나는 실수로 메뉴가 <menu></menu>와 비슷하다고 생각한 다음 컨텍스트 메뉴 (또는 사양이 호출되는 "도구 모음"에 사용되었다고 생각했다. (관심이 있으시면 MDN은 와 관련된 모든 더 이상 사용되지 않은 컨텐츠에 대한 흥미로운 소개를 가지고 있습니다.) 그러나 오늘날, 이것은 메뉴를 사용하는 의미 론적 방법입니다. <nav></nav> 개인적으로, 나는 <menu></menu>에 좋은 사용 사례가 있다고 생각합니다. 마지막 예제는 태그가있는

요소에 포함 된 소셜 공유 버튼 목록을 보여 주며 공유 기사 태그가 많은 컨텍스트에 기여하고 버튼의 기능을 설명하는 데 도움이된다는 점에 주목할 가치가 있습니다. 메뉴가 절대적으로 필요합니까? 아니요. 그들은 HTML 이정표입니까? 절대적으로 아닙니다. 그러나 를 덜 좋아하고 구성 요소가

를 사용하여 추가 컨텍스트를 제공 할 수 있다고 생각한다면, 그것들이 있습니다.

/* 清除所有列表标记！ */
ol, ul, menu {
  list-style: none;
}

기타?

예, 앞서 언급 한 <menu></menu> (설명 목록) 요소가 있지만 MDN은 다른 목록과 동일하다고 생각하지 않는 것 같습니다. 용어 그룹 목록이라고 생각합니다. MDN에 따르면 메타 데이터, 어휘 및 기타 유형의 키 가치 쌍에 사용해야합니다. 모든 스크린 리더가 다르게 알리기 때문에 피할 것입니다. 그러나 부정적인 의견으로 끝나지 마십시오. 다음은 목록으로 할 수있는 정말 멋진 일입니다. <menu></menu> <div> 디렉토리 생성 <tim> 이벤트 타임 라인 시각화 <code>aria-label 목록을 수평 쉼표로 변환 분리 된 목록 스타일 태그 (나는 개인적으로 이것을 좋아하지 않지만 여전히 멋지다)