[웹접근성] 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. 정보
다음(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에서도 정상작동됩니다.
0