는 HTML

나는 대략 다음과 같이 표시됩니다 데이터 테이블 제공하고 있습니다

접근성에 대한 암시 열 머리글을 표시 : - 위치 이름 - 일반적으로 시력 독자는 HTML

|     | 2009 | 2010 | 2011 | 
| location 1  | pass | pass | fail | 
| location 2  | fail | pass | pass |

, 첫 번째 열의 의미입니다 명확하고 시각적으로 열 머리글을 벗어나는 것이 좋습니다. 그러나 이는 스크린 리더를 사용하는 사람들에게는 도움이되지 않으며 당연히 WAI 확인에 실패합니다.

이

<table> 
<thead> 
    <tr> 
    <th>&nbsp;</th> <!-- question here --> 
    <th>2009</th> 
    <th>2010</th> 
    <th>2011</th> 
    </tr> 
</thead> 
...

그래서 제 질문은 다음과 같습니다 : 같은

내 마크 업 보이는 내가 지금 그것을 필요로하는 사람에 대한 지원 및 컨텍스트를 제공 할 것으로 표시된 th에 무엇을 추가해야하지만, 시각적 혼란을 추가하지 않습니다 그렇지 않은 사람들을 위해서?

내가 생각한 한 가지 옵션은 마크 업에 열 제목을 추가하는 것이지만, 눈에 보이는 독자에게는 CSS를 사용하여 보이지 않게 렌더링하는 것입니다. 그러나 ARIA 메타 데이터 또는 이와 유사한 것을 사용하는 것이 더 나은 (의미 론적) 방법이 있는지 궁금합니다.

출처

2013-06-11 Ian Dickinson

그냥 ' –

'로' 을'표시하지만 의미는 헤더 셀이 아닌 데이터 셀입니다. 특히'scope = 'col ''을 설정하고 싶습니다.'td' 요소에 대해 유효성을 검사 (또는 유용 할 것)한다고 생각하지 않습니다. –

어떻게 헤더 셀입니까? 테이블에 컨텍스트를 제공하지 않습니다. 'scope = col'은 위치 1과 2가 대부분 "무시"하는 공백 문자 ""로 그룹화된다고 말하기 때문에 부적절합니다. –

호기심에서 벗어나 WAI 유효성 검사를 위해 어디에서 확인 했습니까? this web accessibility checker에 코드를 입력해도 오류가 발생하지 않기 때문에 묻습니다. 그래서 당신이 가진 것이 실행 가능할 것 같습니다. 어떤 경우

, 그것은 자신의 테이블에서 비슷한 example이 (아래쪽으로) 그들이 단순히 <td> </td> 대신 th 사용에 WebAIM에서 사람처럼 보인다.

더 중요한 측면은 각 th에있는 scope 속성을 사용하여 해당하는 열 또는 행을 가리키는 지 확인하는 것입니다. 예를 들어 :

<th scope="col">2009</th>

및

<th scope="row">location 1</th>

더 많은 정보

는 문서의 here를 찾을 수 있습니다.

출처

2013-06-11 16:04:46 gotohales

Wave (http://www.webaim.org)에서 "빈 표 머리글. 표 머리글 ()에 텍스트가 없습니다"가 표시됩니다. 웨이브는 WAI 적합성 검사기로 널리 사용되고 있으며, 더 중요한 것은 내 클라이언트가 검사하고있는 것입니다! –

위의 내 의견은 본질적으로 웨이브가 말한 것을 반향하고, 나는 그것을 체크하지 않았다. –

TL; DR : 열 1, 세포 하나가되어야합니다 :

: <td> </td>

참고이 말마다 대답하지, 난

이안 the following comment을 왼쪽으로 더 형식화하는 공간이 필요

하지만 정확히 그 점입니다. 이 칼럼에 사용자가 화면 판독기에 의존하면서 다른 사용자를 산만하게하는 데 도움이 될만한 내용으로 주석을 달고 싶습니다.

...하지만 그 이유는 무엇입니까? 내가 본 표의 99 %는이 칸을 공란으로 남겨 두었습니다. 그래서 당신은 가방에 렌치를 던지지 않았습니다.

CSS를 사용하여 "이 셀을 의도적으로 비워 두십시오"라고 추가하여 텍스트를 숨기면 값 옆에 이 추가됩니다. 사람들이 듣지 않아도되는 쓸데없는 농담을 더합니다. 또한 스크린 리더를 매일 사용하는 사람들은 대개 셀 단위로 읽지 않습니다. 그들이 테이블을 만날 때, 보조 기술은 행과 열의 수를 발표 한 다음 요약 (아래 참조) 다음에 <caption>을 발표합니다.

이 셀에 표를 설명하려면 다음을 입력하십시오. 예 : (표에 ~부터 일까지의 xxx가 포함 된 데이터가 있습니다.), 그렇지 않습니다. 이전 방법은 summary 속성 (<table summary='...'>)을 사용하는 것이 었습니다. W3c 유효성 검사기가 이제 말합니다

"요약 속성은 사용되지 않습니다. 캡션 요소 또는 표가 포함 된 Figure 요소에 설명하는 것이 좋으며 설명이 없도록 표의 구조를 단순화하십시오. 필요합니다. "

HTML5를 사용할 때. 발리 오류 위가에서 WorkingGroup decision from April 2011을 받고 같은 몇 가지 빠른 연구 [1]에서
는 [2], [3, 그것은 보인다. 그들은 더 많은 사람들이 그것에 접근 할 수있는 <caption> 태그를 사용하여 제안 된 나의 직감을, 더 많이 보편적으로 설계되었습니다. 나는 당신이 aria-describedby="{ID}"을 사용할 수 없다는 말에 반대하거나 반대하는 것을 보지 못했고 그 단락을 스크린 밖으로 밀었습니다.

출처

2013-06-13 19:54:19

자세한 설명을 주셔서 감사합니다. 그러나 "이 셀은 의도적으로 비어 있음"을 추가하는 것은 내가 달성하려고 시도한 것이 아니며, 이는 스크린 리더 사용자를 도울 수 없기 때문에 문제를 이해할 수 있기 때문입니다. 현재 문제를 해결하는 방법에 대한 답변을 추가 했으므로 앞으로 내가하려는 일을 명확하게 알 수 있습니다. –

이제 그 셀에 데이터를 넣으려는 시도는 ' '입니다. 숨길 수는 없습니다. –

나는 순간이 해결 해요 방법은 다음과 같습니다 다음

<table> 
    <tr> 
    <th scope='col'><span class='nodisplay'>Location</span></th> 
    <th scope='col'>2009</th> 
    <th scope='col'>2010</th> 
    <th scope='col'>2011</th> 
    </tr> 
    ... 
</table>

과 :

그래서 오히려 사용자가 액세스하는 내용을 추가하는 대신 시력 독자의 내용을 숨기고있어

.nodisplay { 
    position:absolute; 
    left:-10000px; 
    top:auto; 
    width:1px; 
    height:1px; 
    overflow:hidden; 
}

콘텐츠를 스크린 리더를 통해 그러나 이것이 최선의 접근 방식인지 확실하지 않습니다.

출처

2013-06-14 09:41:43

물론 가능합니다. 나는 아마 유용성 목적으로 그것을 숨기지 않을 것을 옹호 할 것이다. –

그러나 내가 말한 테이블의 99 %는이 셀을 비워 둡니다. 시각 장애가있는 독자는 시각적 산만 함을 느낄 수 있습니다. 눈에 잘 띄는 독자는 칼럼에 눈을 돌리고 그 내용을 알 수 있습니다. –

답변

관련 문제