위키백과:스타일/접근성/데이터 테이블 자습서

Wikipedia:
스타일 매뉴얼(MoS)
내용
서식
이미지들
배치
목록
합법적
주제 영역별
예술
음악
지역
특정 명명 규칙
종교
과학
스포츠
관련 지침
위키프로젝트 접근성
기사지침
템플릿 지침
조정
손상된 사용자의 경우

이 튜토리얼은 위키백과 스타일 매뉴얼의 일부로서 모든 사람이 컨텐츠에 접근할 수 있도록 하기 위해 데이터 테이블(또는 더 자주 목록)을 작성하는 사람들을 돕기 위한 지침이다.

이 페이지의 지침은 우선 순위에 따라, 그 다음에 난이도에 따라 정렬된다.우선순위 수준은 W3C 웹 컨소시엄(Web Content Accessibility Guideline, WCAG) 2.0의 접근성 성공 기준 순위 A, AA 및 AAA(접근성 고려사항으로서 중요도 내림차순으로)에 의해 결정된다.[WCAG 1]난이도는 위키백과 사용자들이 지침을 준수하는 것이 쉬워 보이는지 아닌지를 나타낸다.

본 문서의 지침은 기본적으로 WCAG 2.0의 접근방식과 관련될 경우 WebIM과 같은 평판이 좋은 일부 추가 출처를 따른다.WCAG 2.0이 올바르게 해석되었는지 확인하기 위해 접근성 전문가의 검토가 필요했다. 이 검토는 2010년 9월에 이루어졌다.[note 1]

기본사항 개요

  • 우선 순위: 높음(접근성 수준:A)
  • 어려움: 쉽다(구문은 매우 간단하고 편집자가 익숙해지며, 레이아웃은 사용자의 습관을 바꿀 수 있다)
{class="classable" + 캡션 텍스트 - ! scope="col" 열 헤더 1 ! scope="col" 열 헤더 2 ! scope="col" 열 헤더 3 ! 행 헤더 3 데이터 2 - ! 행 데이터 4 }

다음과 같은 이점을 제공한다.

자막 텍스트
열 머리글 1 열 머리글 2 열 머리글 3
행 헤더 1 data 1 데이터 2
행 헤더 2 데이터 3 데이터 4
캡션(자막) +)
자막은 표의 제목이며 표의 본질을 묘사한다.[WCAG 2]
행 및 열 헤더( ! )
캡션과 마찬가지로, 이것들은 방문자들에게 정보를 논리적인 구조로 제시하는데 도움이 된다.[WCAG 3]헤더 도움말 화면 판독기는 데이터 셀에 대한 헤더 정보를 렌더링한다.예를 들어, 헤더 정보는 셀 데이터 이전에 말하거나, 헤더 정보가 요청에 따라 제공된다.[1]
헤더 범위(scope="col"그리고scope="row")
이는 머리글을 각각 열 머리글 또는 행 머리글로 명확하게 식별한다.[note 2][WCAG 4]

테이블 머리글 레이아웃

위의 예에서 볼 수 있듯이 행 헤더는 기본적으로 굵고 중심적이며 어두운 배경으로 포맷된다.이것은 인터넷 상에서 일반적인 동작이며, 대부분의 브라우저에서 기본 렌더링이다.어떤 상황에서는 특정 경우에 맞게 맞춤화된 스타일을 적용하는 것이 바람직할 수 있다.학급.plainrowheaders편집자가 각 셀에 대해 인라인 CSS 선언으로 헤더 포맷을 재정의할 필요성을 느끼지 않도록 왼쪽 정렬 및 보통 가중치 포맷을 적용한다.[note 3]그 자체로 사용되어,plainrowheaders어두운 배경을 제외하고 머리글이 수정되지 않은 데이터 셀과 유사하게 나타나도록 할 것이다.

사용 방법plainrowheaders, 놓아라 (좋다)wikitable) in the inclass=표의 첫머리에 속하다아래 예제는 굵은 글꼴 대신 큰 글꼴을 사용하여 사용자 정의 행 헤더 스타일을 보여준다.

{class="확장 가능한 일반행 머리글" ! 범위="row" 스타일="model-size: large;"행 머리글 1

적절한 테이블 캡션 및 요약

바로 가기

표 표시는 표에 접근하기 위한 큰 효용인 캡션과 요약을 모두 제공한다.자막은 표에 대한 설명적인 제목을 제공하며 요약은 표의 내용에 대한 "땅콩"을 제공한다.원하면 저널 논문의 제목과 그 추상성과 각각 유사하다고 생각할 수 있다.

캡션

  • 우선 순위: 높음(접근성 수준:A)
  • 난이도: 쉽다(구문은 상당히 단순하고 이미 사용중이며, 레이아웃은 사용자의 습관을 약간 변화시킨다)

모든 데이터 테이블에는 테이블의 내용을 간결하게 설명하는 테이블 캡션이 필요하다.[WCAG 2]표제 역할을 하며, 베스트 프랙티스로 추천한다.[2]어차피 새로운 표를 소개하는 일종의 제목이나 설명이 필요할 것이고, 이것이 캡션 기능이 존재하는 이유 입니다.표 캡션은 다음과 같이 만들어진다. +캡션은 CSS로 스타일링할 수 있으며 위키링크, 인용문 등을 포함할 수 있다.[note 4]다른 위키백과 표제처럼 명시적으로 왼쪽에 넣을 수 있다.style="text-align: left;"(특히 넓은 테이블에서 좋은 생각).캡션은 레이아웃 표에 사용되지 않는다(이 캡션은 위키백과에서 뿐만 아니라 더 광범위하게 사용되지 않지만, 일부 편집자는 나중에 편집자가 달성하려고 했던 어떤 위키코드까지 일시적으로 캡션에 의존한다).

사용하지 않는 임시 사례 +캡션은 접을 수 있는 테이블을 사용할 때 특정 상황에 있다.2010년 9월 현재 「[숨기기]」 / 「[표시]」 붕괴 제어는 (타당성 스크립트가 개선될 때까지) 테이블 헤더 안에 있어야 하며, 그것을 담을 수 있을 만큼 충분히 커야 한다.표에 머리글이 없거나 매우 작은 머리글만 있는 경우, 공통 해결책은 축소 컨트롤러가 부착할 수 있는 표 머리글에 캡션 텍스트를 넣는 것이었다.[clarification needed]

Tobin Bell#Filmography의 적절한 캡션 예:

벨의 텔레비전 출연과 역할
제목 연도 역할 메모들
이퀄라이저 1988 에피소드: "약속의 날"
완벽한 목격자 1989 딜런 TV 영화
에일리언 네이션 1990 브라이언 녹스 에피소드: "Crossing the Line"

자막은 간결해야 한다. 표에 확대 소개가 필요한 경우 일반 기사 산문 중 하나를 제공한 후 더 간단한 자막을 제공하십시오.그러나 토빈 벨의 필모그래피의 이전 개정에서와 같이 "배우", "필름" 또는 "텔레비전"과 같은 단어로 구성된 표 자막은 설명이 충분하지 않기 때문에 불충분하다.

표의 가운데에 있는 열 머리글 방지

지름길
  • 우선 순위: 높음(접근성 수준:A)
  • 난이도: 중간(테이블을 크게 변경해야 함, 편집자는 테이블 분할을 꺼려함, 테스트 및 피드백이 더 필요함)

테이블을 시각적으로 분리하기 위해 테이블 중앙에 열 머리글을 배치하지 마십시오.보조 기술은 첫 번째 헤더가 끝난 후에도 표의 일부에 여전히 적용되는 이전 헤더를 알 수 없기 때문에 혼동될 것이다.[dubious – discuss]

예를 들어, "Stuttgart, 독일" 셀을 읽는 화면 판독기는 셀을 "Venue, Sussia를 대표하는, 벨로루시를 대표하는" 헤더와 연관시킬 수 있다.머리글 세 개를 소리내어 읽는다.첫 번째와 세 번째가 정확하고 기대되는 것이다.그러나 "소련을 대표하는 것"은 테이블의 하반부에 적용되지 않으며, 기계는 그것을 이해하지 못한다.따라서 기계는 헤더와 셀을 올바르게 연결할 수 없으며, 사용자에게 테이블 구조에 대한 잘못된 정보를 제공할 것이다.

대부분의 경우 설명 하위 제목(두 번째 예)이 있는 여러 하위 테이블로 표를 분할하는 것이 더 쉬운 해결책이다.

열 머리글: 잘못된 예제

Vasiliy Captyukh에서 생산하고 {{AccessmentTable}}:

연도 경쟁 장소 포지션 메모들
소비에트 연방 대표
1985 유럽 주니어 선수권 대회 동독, 코트부스 3번째
1986 세계 주니어 선수권 대회 그리스 아테네 3번째
1990 유럽 선수권 대회 스플릿, 유고슬라비아 4일 63.72m
벨라루스 대표
1993 세계 선수권 대회 독일 슈투트가르트 7일 61.64m
1995 세계 선수권 대회 스웨덴 고텐부르크 3번째 65.88m
IAAF 그랑프리 파이널 모나코 몬테카를로 4일

다른 유사한 예는 Yvonne van Gennip, 마스터스 육상 세계 기록 및 레이아웃 엔진 비교(Cascading Style Sheets)에서 찾을 수 있다.선택기.

열 머리글: 좋은 예 1

테이블을 여러 하위 테이블로 분할하는 첫 번째 솔루션.

소련을 대표하는 바실리 카프티우크의 업적
경쟁 연도 장소 포지션 메모들
유럽 주니어 선수권 대회 1985 동독, 코트부스 3번째
세계 주니어 선수권 대회 1986 그리스 아테네 3번째
유럽 선수권 대회 1990 스플릿, 유고슬라비아 4일 63.72m
벨라루스를 대표하는 바실리 카프티우크의 업적
경쟁 연도 장소 포지션 메모들
세계 선수권 대회 1993 독일 슈투트가르트 7일 61.64m
세계 선수권 대회 1995 스웨덴 고텐부르크 3번째 65.88m
IAAF 그랑프리 파이널 모나코 몬테카를로 4일

열 머리글: 좋은 예 2

구현에 조금 더 많은 시간이 걸리는 대안은 표현에 대한 열을 추가하는 것이다.

바실리 카프티우크의 업적
경쟁 연도 대표 장소 포지션 메모들
유럽 주니어 선수권 대회 1985 소비에트 연방 동독, 코트부스 3번째
세계 주니어 선수권 대회 1986 소비에트 연방 그리스 아테네 3번째
유럽 선수권 대회 1990 소비에트 연방 스플릿, 유고슬라비아 4일 63.72m
세계 선수권 대회 1993 벨라루스 독일 슈투트가르트 7일 61.64m
세계 선수권 대회 1995 벨라루스 스웨덴 고텐부르크 3번째 65.88m
IAAF 그랑프리 파이널 1995 벨라루스 모나코 몬테카를로 4일

복합 테이블

한 열에 걸쳐 있는 한 수준의 열 머리글만 있는 단순 테이블과 대조적으로(! scope="col" ) 및/또는 한 행에 걸쳐 있는 행 헤더의 한 수준(! scope="row" )) 복합 테이블에는 명확하지 않고 접근성 문제를 일으킬 수 있는 헤더가 있다.이러한 문제를 피하기 위해서는 관계를 명확히 정의해야 한다.

열 머리글이 두 열에 걸쳐 있는 경우! scope="colgroup" colspan="2" . 행 헤더가 두 행에 걸쳐 있는 경우! scope="rowgroup" rowspan="2" .[WCAG 4]

헤더가 더 복잡한 테이블의 경우 테이블을 단순화하거나 작은 테이블로 분할하는 것이 좋다.이것이 불가능할 경우, 각 셀을 "scope" 대신 "id" 및 "headers" 속성을 사용하여 각각의 헤더에 연결해야 한다.헤더에서 "id"를 해당 테이블 내에서 고유한 간격 없는 값으로 설정하십시오.헤더로 설명되는 셀에서 "헤더"를 화면 판독기가 읽어야 하는 순서대로 "id" 값을 설명하는 간격의 목록으로 설정하십시오.[WCAG 5]예를 들어, 다음 마크업에는 "ABC" 회사를 설명하는 "회사" 헤더가 있다.! id="col1" Company그리고 headers="col1" ABC).

아래는 시각적으로 명확하지 않은 헤더가 있는 복잡한 표의 예다.각 셀의 "id"와 "header"가 어떻게 정의되는지 보려면 이 절의 소스 코드를 살펴보십시오.

a b
c
w (c) a c w. b c w
x (c) a c x b c x
d
y (d) a d y. b d y
z (d) a d z. b d z

이미지 및 색상

접근성 요구 사항을 준수하는 대비의 색상과 이미지는 유도 효과(기타 이점 중)로 그레이스케일 방식으로 잘 인쇄된다는 점에 유의하십시오.

이미지

  • 우선 순위: 높음(접근성 수준:A)
  • 난이도: 알 수 없음(정확한 등급을 위해 더 많은 테스트와 피드백 필요)

표 안의 이미지는 위키백과의 일반적인 요구 사항을 충족해야 한다.영상에 대한 대체 텍스트.그러나 작은 아이콘은 표에서 접하는 주요 사례다.두 가지 범주로 나뉜다.

  1. 기호 아이콘은 아이콘과 동일한 정보를 전달하는 최소의 알트 텍스트를 가져야 한다(그림: if ifincrease증가세를 나타내다. alt=increase);
  2. 장식 아이콘(정보가 없거나 유사한 정보를 제공하는 텍스트와 연관된 아이콘)은 연결을 해제하고 빈 alt 텍스트가 있어야 한다. link= alt=연결 해제할 수 없는 경우 최소한의 alt 텍스트만 있으면 된다.

헤더의 이미지가 잘못 처리된 경우 화면 판독기 사용자에게 특히 방해가 될 수 있다는 점에 유의하십시오.이미지가 위의 기준에 맞지 않을 경우 파일 이름은 헤더 제목의 일부가 된다.파일 이름은 아이콘을 포함하는 헤더 아래의 모든 셀에서 소리내어 읽힐 것이다.alt 텍스트도 파일 이름처럼 반복되는데, 제목과 무관하거나 너무 길면 성가신 일이 될 수도 있다.

색

  • 우선 순위: 높음(접근성 수준:A)
  • 난이도: 중간(정확한 등급을 위해 테스트 및 피드백 필요)

테이블 내부의 색상은 색상의 요구 사항을 충족해야 한다.

  • 자유 색상 대비 분석기로 측정한 색상 대비는 충분해야 한다.
  • 대비되는 색상을 선택하는 데 도움이 될 수 있는 매우 간단한 도구는 "Windows, Mac, Linux를 위한 무료 색맹 시뮬레이터인 Color Oracle"이다.

그러나 더 중요한 것은 정보가 색상만으로 전달되어서는 안 된다.정보는 또한 텍스트로 이용할 수 있어야 한다.각주나 텍스트 기호는[note 5] 또한 세포가 특정한 의미를 가지고 있다는 것을 보여주는 데 사용될 수 있다.


색의 나쁜 사용

재정 달력#다른 회계 연도 차트:

나라별
나라 목적 J F M A M J J A S O N D J F M A M J J A S O N D
호주.
캐나다

색채의 좋은 사용

참고: 이것은 접근 가능한 표를 제공하기보다는 색상을 사용하는 예다.대신 테이블 머리글에 테이블 캡션을 사용하면 액세스할 수 없는 테이블이 생성된다.

범례: " year"로 표시된 셀은 회계연도에 포함된다.

국가별 회계연도
나라 목적 J F M A M J J A S O N D J F M A M J J A S O N D
호주. ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
캐나다 ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
국가별 회계연도
나라 목적 J F M A M J J A S O N D J F M A M J J A S O N D
호주. 7월 1일부터 6월 30일까지
캐나다 4월 1일부터 3월 31일까지

드웨인 챔버스(테이블 캡션과 구조가 개선되었지만 원래 색상 사용은 양호함):

드웨인 챔버스 경기 기록
경쟁 연도 장소 포지션 이벤트
유럽 선수권 대회 1998 헝가리 부다페스트 두 번째 100미터
IAAF 월드컵 남아프리카 공화국의 요하네스버그 3번째 100미터
영연방 경기 대회 말레이시아 쿠알라룸푸르 첫 번째 400m 계주
유러피언컵 1999 프랑스 파리 첫 번째 100미터
IAAF 세계 선수권 대회 스페인 세빌 3번째 100미터
두 번째 400m 계주


중첩 데이터 테이블 방지

  • 우선 순위: 높음(접근성 수준:A)
  • 난이도: 알 수 없음(아직 등급 미정)

중첩된 테이블은 아래와 같이 화면 판독기 사용자에게 매우 혼란스럽다.그러므로, 그것들은 피해야 한다.

스크린 리더와 점자 디스플레이를 사용하는 방문객들은 한 단어씩 페이지를 넘나들거나 HTML 마크업으로 "항목"이 정의되는 "항목"에서 다른 항목으로 이동할 수 있다.페이지의 항목을 이동하는 명령은 시스템마다 다르지만 이 프로세스를 Tab 키를 누르는 것과 유사하게 모델링할 것이다.

당신은 테이블과 테이블 안의 탭을 탭할 수 있다.그리고 여기서부터 문제가 시작된다.다른 표에 내포되지 않은 단순 레이아웃 테이블의 경우 셀에서 셀로 이동하는 것은 문제가 되지 않는다.그러나 중첩된 테이블이 있는 경우 화면 판독기 사용자는 결국 하나의 테이블이 다른 테이블 내부에서 형성된 미로 내에서 작업하게 된다.

눈에 띄는 방문자가 모든 중첩된 테이블의 순 모양을 감상할 경우 화면 판독기 사용자는 기본 구조를 탐색한다.중첩된 표를 코드화하려고 시도하다 보니 알겠지만, 그 구조는 정말 알아내기가 어렵다.이제 음성 출력을 통해 그 구조를 역설계해 보십시오.

사실상, 중첩된 테이블을 사용함으로써, 당신은 블라인드 방문자들을 오디오만으로 당신의 페이지의 코딩을 디버깅하도록 강제한다.

— Joe Clark, Tables and frames, joeclark.org[3]


자원

추가 정보는 데이터 테이블 자습서/내부 가이드라인에서 확인할 수 있다.단, 이 가이드라인은 시행을 의미하지 않으며, 위키프로젝트 접근성 회원에게는 자원의 역할만 한다.

스크린 리더가 소리내어 읽는 표의 예들이다.접근 가능한 테이블이 화면 판독기 사용자에게 어떻게 이득이 되는지를 커뮤니티가 이해하는데 어려움이 있을 때, 그것들은 커뮤니티에 보여주는 구체적인 예로서 유용할 수 있다.

노트

  1. ^ 이 페이지는 fr:에 의해 검토되었다.사용자:Lgd, 2010년 9월 프랑스어 위키백과의 접근성 전문가.어떤 사람이 가이드라인에 대해 우려하는 경우 전문가의 다른 검토는 환영할 만하다.예를 들어 WebIM 전문가에게 연락할 수 있다.
  2. ^ HTML4, 3.6 부재 속성: HTML5와의 차이점을 참조하십시오."scope의 탓으로 돌리다td"는 HTML 5에서 더 이상 사용되지 않을 것이다. 변화에 대비하기 위해 우리는 오로지scope의 탓으로 돌리다th.
  3. ^ MediaWiki Talk에서 토론 내용을 참조하십시오.Common.css 몇 가지 위키 아이디어와 대담한 행 머리글.
  4. ^ 표 캡션은 또한 다음과 같이 만들 수 있다.<caption>Caption here</caption>, 및 요약<table summary="Summary text here.">그러나 기사에서는 위키 세금이 선호되어야 한다.
  5. ^ 그러나 위키피디아에 따라 유니코드 문자를 사용하지 마십시오.스타일 매뉴얼(접근성)#텍스트. 특집 후보 문맥에서 그레이엄87의 설명도 참조한다.

참조

  1. ^ 표 셀: TH 및 TD 요소, W3C
  2. ^ "Ensure table captions are provided explicitly". Accessibility Management Platform (AMP). San Francisco, California: SSB BART Group. 2015. "Best Practices" section. Retrieved 13 July 2015. GSA 스케줄 70.WCAG 외에 여러 표준을 인용한다. 여기에는 JIS X 8341-3: 2004 - 기술 표준 하위 파트 5; KWCAG; 47 CFR 14가 포함된다.고급 통신 서비스, §14.21 성능 목표, HHS HTML 508 점검표 및 미국 전기통신법 접근성 지침 1193.41–43.
  3. ^ 테이블과 프레임, joeclark.org.참고: 이 소스는 오래된 것이지만, 중첩된 테이블에 관한 부분은 2010년 10월 현재도 유효하다.

WCAG 참조 자료

  1. ^ 웹 접근성 이니셔티브(5월 5일 1999년).치점, 웬디, Slatin, 존은 화이트, 제이슨(eds.)."웹 콘텐츠 접근성 지침 2.0".W3.org.메사추세츠 캠브리지:월드 와이드 웹 컨소시엄(W3C).1112월 2008년 Retrieved.혼란스럽게도, 웹 문서 접근성 지침 2.0의 순위는 A, AA(또는 Double-A), AAA(트리플 A)두지만 서로 밀접한 다른 개념의 두번째 규칙도 지켜야 할 것:사용된다.
    1. 이 위키백과 지침에서 사용된 것 – 접근성 달성에 있어 A가 가장 필수적이거나 영향력 있는 특정 "성공 기준"의 상대적 중요성 및 AAA는 AA가 중간 정도의 긴급성을 가지고 있는 사이트로 만들어야 하는 덜 긴급한 접근성 수당을 나타낸다.각 기준은 각각의 접근성 권장사항에 대해 WCAG 2.0 섹션의 "만나는 방법" 링크에서 설명되며, "WCAG 2.0 충족 방법: 사용자 정의 가능한 빠른 참조"에서 수집된다.
    2. 접근성 권고사항에 대한 최소한의 준수 수준을 나타내는 "A"와 "AAA"가 가장 접근성이 높은 웹 사이트의 준수 수준은 모든 레벨 A, AA 및 AAA 성공 기준을 충족한다.따라서 "레벨 AAA 준수"는 "레벨 AAA 성공 기준만 준수"와 반대되는 것을 의미한다.위키피디아는 가장 중요한 접근성 요건을 가장 빨리 충족하기 위해 A에서 AA로 AAA 준수를 진행하는 것을 우선시하면서 AAA 준수를 위해 자연스럽게 노력한다.

    현재 시스템은 1999년 WCAG 1.0 시스템(A, AA 및 AAA)을 우선순위 1, 2, 3 권고사항의 체크리스트로 대체한다. 반면, 대략 현재 A, AA 및 AAA의 성공 수준에 해당하는 반면 2.0은 1.0에는 없었던 많은 기준을 추가했다."WCAG 2.0과 WCAG 1.0의 차이점"을 참조하십시오.

  2. ^ a b "H39: 캡션 요소를 사용하여 데이터 테이블 캡션을 데이터 테이블과 연결", 접근성 수준: A.
  3. ^ "H51: 표 표식을 사용하여 표식 정보 표시"
  4. ^ a b "H63: 스코프 속성을 사용하여 데이터 테이블의 헤더 셀과 데이터 셀을 연결", 접근성 수준:a
  5. ^ "H43: ID 및 헤더 속성을 사용하여 데이터 셀을 데이터 테이블의 헤더 셀과 연결" 접근성 수준:a