홈페이지 » 코딩 » 태그를 사용하여 HTML 테이블 접근성을 향상시키는 방법

    태그를 사용하여 HTML 테이블 접근성을 향상시키는 방법

    웹 접근성이란 시각 장애가있는 사람들이 쉽게 사용할 수있는 방식으로 웹 응용 프로그램을 설계하는 것을 말합니다. 이 사용자 중 일부는 스크린 리더 웹 페이지의 내용을 읽는 것. 스크린 리더 페이지에있는 코드를 해석한다.그 내용을 사용자에게 읽어서.

    는 웹 페이지의 구조화 된 방식으로 데이터를 표시하기 위해 널리 사용되는 HTML 요소입니다. 단순한 것부터 복잡한 것까지, 행 헤더, 병합 된 헤더 등으로 완성 된 디자인.

    테이블이 내게 필요한 옵션을 염두에두고 설계되지 않은 경우 화면 판독기가 사용자에게 의미있는 복잡한 테이블의 데이터를 변환하기가 어려울 수 있습니다. 따라서 복잡한 HTML 표를 더 쉽게 이해할 수 있도록 액세스 가능성을 위해 헤더, 열 그룹, 행 그룹 등이 명확하게 정의되었는지 확인하십시오.. 이것이 어떻게 보이는지 아래에서 살펴볼 것입니다. 마크 업에서 달성.

    범위 특성

    간단한 테이블조차도

    마크 업 scope = "col" 보조 기술을 사용하여 같은 열에있는 세포가 학생 이름임을 알 수 있습니다..

    유사하게, 세포는

    함유 scope = "colgroup" 사용자가 해당 열 그룹에 속하는 셀의 데이터가 해당 특정 주제와 연관되어 있음을 식별하도록 도와줍니다.

    그런 다음

    마크 업 범위 = "행" 동일한 행에있는 셀 다음에 “학년” 특정 학생 이름에 관한 정보.

    행 그룹

    이제 다른 예제로 넘어가겠습니다.이 예제는 행과 열 머리글을 바꿔주는 것을 제외하고는 위 예제와 거의 같은 테이블을 가지므로 행 그룹에 대해 작업 할 수 있습니다.

     
    태그를 명확하게 정의하면 태그를 사용하여 액세스 가능성을 향상시킬 수 있습니다. 범위 셀에있는 유사한 유형의 데이터에서 발생할 수있는 혼란을주지 마십시오..

    직원 이름 직원 코드 프로젝트 코드 직원 지정
    존 도우 32456 456789 감독
    미리 암 루터 78902 456789 부국장

    범위 속성은 무엇을합니까? W3C에 따르면 :

    즉, 데이터 셀을 해당 헤더 셀과 연관시키는 데 도움이됩니다..

    위의 예에서 전환 할 수 있습니다.

    ...에 대한 . 한 범위 가치가있다 안부, 해당 열 헤더로 해석됩니다..

    그만큼 범위 속성은이 네 가지 값 중 하나를 가질 수 있습니다. 안부, , 행 그룹, colgroup 열 머리글, 행 머리글, 열 머리글 그룹 및 행 머리글 그룹을 각각 나타냅니다..

    복잡한 테이블

    이제 더 복잡한 테이블로 넘어 갑시다..

    위의 표는 3 명의 과목을 대상으로 한 실습과 이론에서 학생들의 학년과 성적을 나열한 표입니다.

    여기에 대한 HTML 코드입니다. 표가 사용되었습니다. 행간칼 스판 데이터 셀에 병합 된 헤더를 만드는 방법.

    학생 이름 생물학 화학 물리학
    실용적인 이론 실용적인 이론 실용적인 이론
    존 도우 에이 에이+ 에이 에이 에이-
    미리 암 루터 에이 에이 기음 기음+ 에이 에이-

    위 표에서 각 데이터 셀, 즉 각 테이블 셀 성적 표시, 세 가지 정보와 관련되어 있습니다.

    • 이 학년은 어느 학생에게 속해 있습니까??
    • 이 학년은 어느 과목입니까??
    • 실기 또는 이론 섹션에서이 등급입니까??

    이 세 가지 정보는 세 가지 유형의 헤더 셀에서 구조적으로 시각적으로 정의됩니다.

    • 학생 이름
    • 제목 이름
    • 실용적 또는 이론적

    접근성을 위해 같은 것을 정의 해 보겠습니다..

    학생 이름 생물학 화학 물리학
    실용적인 이론 실용적인 이론 실용적인 이론
    존 도우 에이 에이+ 에이 에이 에이-
    미리 암 루터 에이 에이 기음 기음+ 에이 에이-

    위의 마크 업에서 우리는 범위 데이터 셀에 대한 제목 정보가 들어있는 셀.

    열 그룹

    생물학, 화학 및 물리 세포는 각각 두 개의 기둥 (이론 및 실용)의 그룹과 연결되어야합니다. 그냥 추가 colspan = "2" 열 그룹을 만들지 않고 특정 셀이 두 셀의 공간을 차지한다는 것을 나타냅니다.

    열 그룹을 만들려면 반드시 사용해야합니다. colgroup 그런 다음 스팬 컬럼 그룹에 포함 된 컬럼의 수를 나타내는 속성.

    그만큼

    학생 이름 생물학 존 도우
    제목 존 도우 미리 암 루터
    생물학 실용적인 에이 에이
    이론 에이+ 에이
    화학 실용적인 기음
    이론 에이 기음+
    물리학 실용적인 에이 에이
    이론 에이- 에이-

    이제 우리는 예제를 가지고 작업 할 수 있습니다. 이전 예제의 열 그룹과 마찬가지로 행 그룹을 작성하여 시작하겠습니다..

    그러나 행 그룹은 다음과 같은 태그를 사용하여 만들 수 없습니다. colgroup 없다 행 그룹 요소.

    HTML 행은 일반적으로 , 집단. 단일 HTML

    요소는 하나를 가질 수있다. , 하나 및 다중 . 우리는 다중 tbody 테이블에서 행 그룹을 만들고 각 범위를 머리글 셀에 추가합니다..

    제목 존 도우 미리 암 루터
    생물학 실용적인 에이 에이
    이론 에이+ 에이
    화학 실용적인 기음
    이론 에이 기음+
    물리학 실용적인 에이 에이
    이론 에이- 에이-

    행을 추가했습니다. “실용적인” 과 “이론” 각 tbody 각각에 두 개의 행이있는 행 그룹을 작성합니다. 우리는 또한 범위 = "행 그룹" 두 행에 대한 표제 정보를 포함하는 셀 (이 경우 성적이 속한 주체 이름).

    지금 읽기 : CSS로 칼럼 높이 동일