현재 페이지 위치

Home> 광장> 상세보기

목록다음 글 보기9/143이전 글 보기

의견수
16
조회수
5898
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

구분선 ' | ' 을 마크업할때 어떤 방식이 좋은 방법일까요?

접근성

    제목1  |  제목2  |  제목3  |  제목4

구분선 ' | ' 을 마크업할때 어떤 방식이 좋은 방법일까요?

구분선을 텍스트로 사용할수도 있고 < img >태그로 사용할수도 있고 CSS background image로 사용할수도 있습니다.

1. 텍스트 사용

    제목 <span> | </span> 제목

2. < img >태그 사용 (대체텍스트 없음)

    제목 <img src="bar.gif" alt=""> 제목

3. < img >태그 사용 (대체텍스트 있음)

    제목 <img src="bar.gif" alt=" | "> 제목

4. CSS background-image로 사용 (대체텍스트 없음)

    제목 <span></span> 제목

5. CSS background-image로 사용 (대체텍스트 있음)

    제목 <span> | </span> 제목

제작/유지보수 측면에서 또는 웹접근성측면에서 보면 각 사용방법에 장단점이 있습니다.

스크린리더에서 구분선은 구두점자로 구분되어 기본 설정으론 음성 출력이 되지 않고 사용자가 '구두점 문자 읽기'를 추가로 설정해 놓는다면 구분선은 '버티컬바'라고 음성출력이 됩니다.

'버티컬바' 반복 청취를 최소화하기 위해 대체텍스트를 비우는게 좋을지 추가설정이기 때문에 반복청취에 문제가 없을것이라 판단하고 대체 텍스트를 넣는것이 좋을지 다른 분들의 의견이 궁금합니다~!

의견보기

전체 의견
16

Mihwa Bae

회원 등급 : 1

0개1개

저도 이부분 항상 고민되요.. 전 4.번처럼 작업하고 있어요... 과연 어떠한 방법이 가장 적절할까요?

Syung Kim

회원 등급 : 1

0개1개

저는 백그라운드이미지로 넣지만 4번 같이 이미지를 넣기 위해 태그를 추가하진 않구요... 보통 저런경우 리스트로 마크업해서 li에 백그라운드로 넣는 편이예요...

Myungjin Joo

회원 등급 : 1

0개1개
  1. 불필요한 css코드 증가
  2. 실제로 구분이 필요한 텍스트 일경우
  3. 크로스브라우징 대응

요런 이슈가 있어 저는 주로 1번 방법을 사용하는데요, 각 요소들이 링크일 경우 "00링크 버티컬바 00링크 버티컬바" 요런식으로 읽어주게 된다면 사용성이 좋진 않을 것 같네요..

하지만 텍스트 | 텍스트 로 적용된 UI의 경우 구분선을 읽어줌으로서 좀더 명확하게 이해될 수 있을 것 같습니다...

실제 사용자의견이 궁금하네요..^^

Soh Ji-hoon

회원 등급 : 1

0개1개

백그라운드나 border 등 다양한 방법으로 적용할 수 있지만, 정렬을 맞춘다거나 유지보수를 위해 '|' 문자를 사용합니다. 구두점 문자 읽기 설정 후 '버티컬바'라고 읽어주는 것은 이미 사용자가 인지하고 있기 때문에 크게 불편하지는 않을 것 같다는 생각입니다.

저도 실제 사용자의 의견을 들어볼 수 있었으면 좋겠네요 : )

김미김미

회원 등급 : 1

0개1개

대체텍스트를 출력하지 않는 2, 4 방법 선호합니다.
제목이 헤딩태그로 마크업 됐다면 '제목1-헤딩1'이라고 읽어줄테고
a태그로 마크업 됐다면 '제목1-링크'라고 읽어 줄텐데,
개인적인 생각으로는 의미없는(또는 반복적인) 구분선의 내용은 비워두는게 좋을 것 같네요^^

Yongwon Kim

회원 등급 : 1

접근성은 지키는 것이 아니라. 높이는 것입니다.

0개2개

css after 선택자를 활용 content 속성값을 "|" 버티클바로 하시면 센스리더, NVDA는 인식하지 못합니다. 역으로 CSS content 속성을 활용하여 사용자가 인식해야 하는 정보를 제공하는 방법은 사용하지 않아야 겠네요. before 선택자도 동일하겠죠.

Hyeok Min Kwon

회원 등급 : 1

0개1개

저는 구분선을 '|' 문자로 사용하는것을 선호하고 마크업은 다음과 같이 사용합니다.
.bar{display:inline-block;overflow:hidden;width:1px;height:12px;margin:0 2px;background:red;color:red;vertical-align:top}
<span class="bar">|</span>

제 생각에 구분선 '|' 을 텍스트로 사용할지 안할지 고민하게 된다면요.
명확하게 '|' 문자로 사용하는게 좋은 방법이라고 생각합니다.
될 수 있는한 누구에게나 또같은 정보를 어떻게든 전달해줘야 되는게 맞지 않을까하네요.

김혜일

회원 등급 : 1

0개13개

흐음... 제생각에 가장 중요한 포인트는 "|" 기호를 사용자에게 "정보"로서 전달할 것이냐 같습니다. | 는 눈으로 볼 때 두 항목을 구분하기위한 "구분선"의 의미로 사용됩니다. 구분선은 블릿이나 라인과 같은 개념이라고 봐야할거 같아요. 그렇다면 이런 구분선을 사용자가 음성으로 들었을 때 과연 도움이 될 것이냐? 절대 아니죠. 사용자는 구분선을 인지하지 못하더라도 링크1-링크2-링크3 으로 링크 요소를 서로 구분할 수 있습니다. 링크 목록을 구분하는 용도라면 음성으로 듣지 않도록 CSS 배경이미지로 처리하는게 좋을 듯합니다.

BUT 링크가 아닌 일반 텍스트의 사이에 구분자로 "|"를 사용하는 경우에는 화면낭독기가 텍스트를 별도로 분리하지 못하고 하나의 문장으로 인식할 수 밖에 없습니다. 그러므로 "|"을 문자로 입력해서 사용자가 필요한 경우 음성으로 구분자인 "|"를 들을 수 있도록 하는 것이 가장 바람직할 것 같습니다.

"|"를 버티컬바로 읽는 것과 "구분선"으로 읽는 부분은 물론 alt="구분선"으로 주는 것이 더 명확할 수 있겠지만 저한테는 크림빵이 좋으냐 단팥빵이 좋으냐와 같은 질문인 것 같습니다. ㅎㅎㅎ 이 부분은 상황에 맞게 적절한 방법을 선택하는게 좋을 것 같습니다. ㅎㅎ

Seunggi Kim

회원 등급 : 1

0개1개

김혜일님 의견처럼 '|'를 정보로 전달 안하는 경우라면은 마크업 자체를 리스트로 해야 하는것 아닌가 싶네요.

Check out this Pen!

현영배

회원 등급 : 1

0개10개

의미상 버티컬을 넣는것 보다 seunggi 님 말처럼 목록으로 만들면 구분을 안해도 list 기 때문에 인지가 가능할것 같습니다.... 목록 으로 마크업 하기 좀 애매한 경우가 있을수 있는데.. 이런 경우 4번 처럼 텍스트를 넣지 않습니다. 목록으로 만들지 않아도 된다는 것은 의미상 구분이 아닌 디자인상 시각적 구분으로 쓰는 경우라고 생각해서 입니다...

Keun Kim

회원 등급 : 1

1개2개

^^ 생각이야 모두 다르겠지만  | 이건 좀 아닌것 같고~ ㅎㅎ 제가 자주 쓰는 방법은 1번이네요. class를 넣을것 같네용.

Samseok Han

회원 등급 : 1

0개1개

4번 방식으로 작업하시는 분들도 많은 것 같은데요.. 'ㅡ';

한정동

회원 등급 : 1

0개1개

아무래도 네비게이션이니.. ul 로 마크업을 하고, 스타일의 list-style 이용하는게 좋을것 같네요.

[ 스타일 ]

<style>
nav li
{
    list-style:url( 'images/bullet.png' );
    float:left;
    margin-left:1em;
    padding-right:1em;
}
nav li:first-child
{
    list-style: none;
}
</style>

[ 마크업 ]

<nav>
    <ul>
        <li>제목1</li>
        <li>제목2</li>
        <li>제목3</li>
        <li>제목4</li>
        <li>제목5</li>
    </ul>
</nav>

샘플 : http://dogking88.cafe24.com/sticker-js/wa/tabnavi.html

이형국

회원 등급 : 1

0개1개

저런 UI는 관습적으로 리스트이거나, 각 텍스트가 앵커인 경우가 많으므로, 저는 버티컬바 사용을 피하고 있습니다.

<ul>
<li><a href="#">제목1</a></li>
<li><a href="#">제목2</a></li>
<li><a href="#">제목3</a></li>
</ul>

인 경우, 저는 개인적으로...

  1. a 를 inline 으로 잡고 line-height, 상하 padding 을 줘서 버튼의 크기를 잡고
  2. li 엔 height 를 지정한 후 border 를 넣습니다.

구분선의 height가 텍스트의 line-height보다 작은 경우 디자이너를 설득합니다....

정희

회원 등급 : 1

0개1개

김미김미님의 말씀과 동일한 생각입니다. 이번에 웹 접근성 품질인증마크 획득 시 수정 및 보안사앙으로 나온 비슷한 류의 고민거리가 있었는데, 의미없는 반복의 경우 이미지처리 후 alt="" 왼쪽과 같이 화이트 스페이스 처리하라고 권고 수정사항도 오더군요 ^^

이하 김미김미님의 의견

대체텍스트를 출력하지 않는 2, 4 방법 선호합니다. 제목이 헤딩태그로 마크업 됐다면 '제목1-헤딩1'이라고 읽어줄테고 a태그로 마크업 됐다면 '제목1-링크'라고 읽어 줄텐데, 개인적인 생각으로는 의미없는(또는 반복적인) 구분선의 내용은 비워두는게 좋을 것 같네요^^

af****

회원 등급 : 1

5개5개
저같은 경우는 선이나 배경 스타일을 줍니다.
span{display:inline-block;width:1px;height:20px;background:#ddd}

혹은 
span{display:inline-block;width:0;height:20px;border-width:0 1px 0 0;border-style:solid;border-color:#ddd}



목록다음 글 보기135/143이전 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0