[웹접근성] ol과 ul 에 대해 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

[웹접근성] ol과 ul 에 대해 정보

웹접근성 [웹접근성] ol과 ul 에 대해

본문

순차적 목록일때는 ol(order list)를 작성하고, 비순차적 목록일때는 ul(un-order list)라는 

시멘틱태그를 사용하게 됩니다.

 

디자인된 컨텐츠 구현을 위해 대다수의 작업자들은 list-style-type을 none처리하게 됩니다.

비순차적 목록이야 ul로 작업을하고 불릿으로 디자인적요소를 표현하는데 아무런 문제가 되질 않습니다.

 

but, 순차적인 목록일때는 한번쯤 생각을 해봐야합니다. 

list-style-type:none; 처리된 시점에서 디자인으로 표현된 숫자를 표현함에 있어서 방법은 총 3가지로 구분됩니다.

 

1. bg를 이용한다.

  • bg를 이용하는 방법은 별도의 이미징 작업을 해야되기 때문에, 상대적으로 손이 많이가고 숫자가 최대 몇까지 늘어날지에 대해 대응을 할수 없는 단점이 있습니다.

2. ol태그를 사용하고, li안에 <span>이나 <em>같은 인라인요소로 감싼다.

  • 가장 많이 쓰이는 방법으로 작업시 효율적이나, 정보가 중복되는 단점이 있습니다. ex)1. 1. 정보, 2. 2. 정보

22304D3C574F9372347FC5

다음(daum)의 경우 ol태그 li안에 <span>태그으로 감쌌으며,


233C5C3C574F93732E93C5

네이버(naver)의 경우 ol태그 li안에 <em>태그로 감싼걸 확인하실 수 있습니다.

 

 

3. ul태그를 사용한다.

  • 정보가 중복되지 않는 장점이 있으나, 비순차적목록태그에 순차적인곳에 쓰인다면 의미에 맞지 않는 단점이 있습니다.

257D4C4B574F953B2D8986

삼성화재(인증마크획득사이트)의 경우 ul에 step01 ~ step04로 작업하였습니다.

 

 

 solution. 

인터넷 서칭과 고민 끝에 모두에게 만족할 만한 방법을 찾았습니다.

ol태그를 사용하면서도 확장성을 고려되며, 정보 중복현상이 없습니다.

 

 

방법은 li에 counter-increment: number;를 지정해주고, li의 before태그를 이용하여, bullet역할을 합니다.(before태그는 기본적으로 앞에 위치하기때문에 포지셔닝을 안해도 되는 장점이 있습니다.)

그리고 before태그에 contentcounter(number, decimal)를 넣어줍니다.

그러면 number(숫자), decimal(10진수) 10진수의 숫자로 카운팅 되게 됩니다.

 

css로 자유롭게 커스터마이징도 되면서, 의미에도 맞고, 소스코드도 짧고 좋은 방법입니다.

확인결과 ie8에서도 정상작동됩니다.

추천
0

댓글 1개

전체 15
퍼블리셔팁 내용 검색 웹접근성에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT