[웹접근성] 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. 정보

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

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

3. ul태그를 사용한다.

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

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

 solution. 

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

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

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

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

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

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

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