css) a태그안에 img를 tab으로 접근시( :focus효과 ) 테두리 변경은 tabindex="0" !! / tab순서 정하는 방법 / 웹접근성 / 스크린리더

키보드의 TAB키를 사용해 웹페이지를 조작할 때 

 사용자와 상호작용이 가능한 요소들이 focus된다.

대표적으로 <input>, <select>, <button> 같은 양식(form) 관련 요소(element)와 <a>요소들이 있다.

참고로 <div>,  <span>, <h1>, <h2> 포커스가 되지 않는다.

 

아래는 TAB으로 이동시 포커스가 잡히는 곳에 테두리를 주기 위한 코드이다. 

 

 수정전 [ html 코드 ]  

<div class="fir-items mb16">
  <div class="img-box mr16">
    <a href="/"><img class="item-img" src="./assets/discovery/honeytea.jpg" alt="오뚜기꿀생강차"></a>
    <a href="/" class="btn-buy">구매하기<img src="./assets/icon/angle-right-square.svg" alt="오른쪽화살표"></a>
  </div>
  <div class="img-box">
    <a href="/"><img class="item-img" src="./assets/discovery/vaseline.jpg" alt="바세린"></a>
    <a href="/"><img class="btn" src="./stylesheets/common/button.svg" alt="버튼"></a>
  </div>
</div>

 

문제

1. Tab 이동시 foucs를 통해 테두리 색상이 변경되도록 구현중  오류

첫 번째 <div>의 첫번째 <a> 태그줄만 Tab 이동시 focus 가 잡힘. 내가 원한 건 img-box 전체 focus

2.  전체 이미지가 Tab시 위로 이동.  

 

       <a href="/"><img class="item-img" src="./assets/discovery/honeytea.jpg" alt="오뚜기꿀생강차"></a>

 

여기저기 블로거 글을 보다가 두 블로거 글에서 힌트를 발견!!
1. tabindex="0"
참고 : [웹 접근성] focus를 위한 tabindex -   https://jss2981.tistory.com/20
1-2. outline: 1px solid var(--color-blue600);
참고: CSS, border와 outline의 차이 -  https://blog.naver.com/iyakiggun/100159740947

 

 

해결

1.  tabindex 요소를 사용. focus 필요 ⭕ → tabindex="0"    focus 필요❌ →  tabindex="-1" 

Tab이 잡히면 안 되는❗❗ <a>에 tabindex="-1"

Tab이 잡혔으면 하는 img-box에 tabindex="0"

 

 

 수정 후 [ html 코드 ]  

<div class="fir-items mb16">
  <div class="img-box mr16" tabindex="0">
    <a href="/" tabindex="-1"><img class="item-img" src="./assets/discovery/honeytea.jpg" alt="오뚜기꿀생강차"></a>
    <a href="/" class="btn-buy">구매하기<img src="./assets/icon/angle-right-square.svg" alt="오른쪽화살표"></a>
  </div>
  <div class="img-box" tabindex="0">
    <a href="/" tabindex="-1"><img class="item-img" src="./assets/discovery/vaseline.jpg" alt="바세린"></a>
    <a href="/"><img class="btn" src="./stylesheets/common/button.svg" alt="버튼"></a>
  </div>
</div>

 

1-2. outline 적용

  [ css 코드 ]     ( var(--color-blue600) 은  변수로 선언한 파란색 )  

.fir-items .img-box:focus {
  outline: 1px solid var(--color-blue600);
}

 

❗❗❗ 여기서 한 가지 궁금증이 풀리지 않는 점이 보통 라인을 만들 때 border를 사용했는데 이유가 뭔지 라인은 생기는데 색상은 변경이 안된다. 크기변경이 없는 outline으로 적용!

 

2.  css 코드에서 찾았다.  overflow: hidden; 을 지우니 해결!  

 fir-items, sec-items, thi-items  총 세 이미지 블록 중 fir-items 블록만 위로 이동해서 코드를 살펴보니 fir-items에만 overflow: hidden; 이 있었다.  위 코드는 아래에 float: left;  로 이미지를 배치해서 혹시 이미지가 넘치는 상황에 대비해 적은 코드였는데 Tab 이동시 이미지가 위로 이동해 잘리는 상황을 만들었다.  

 

 수정전 [ css 코드 ]  

.fir-items {
  width: 100%;
  height: 310px;
  overflow: hidden; 
}

 

 수정 후 [ css 코드 ]  

.fir-items {
  width: 100%;
  height: 310px;
}

 

 

 

 

 

출처 - 내 글, 뽀짝코딩

---

정리 --퍼옴

 

"  border와 outline 차이  "

• border는 두께 값만큼 사이즈를 늘린다.
• outline은 두께는 그대로, 테두리만 표시된다.
• 둘을 중복 사용하면 두 개의 테두리가 생성된다.
• box-shadow는 ie9 이상 버전에서 지원되며 inset으로 내부 그림자를 주면 비네팅 효과를 줄 수 있다.

 

 

 

 

"  tabindex  "

 

 

웹 접근성을 위한 키보드 Tab 클릭을 통해 focus 이동시,
interactive element인 <a>, <span>, <button>, <input>, <select> 등의 요소들은 자동으로 focus가 잡힙니다.

 

tabindex = "0"

이외의 <span>이나 <div> 등의 요소에도 focus를 잡고 싶다면
tabindex="0"를 추가하시면 됩니다.

<div id="test1" name="test1" tabindex="0">
</div>

 

tabindex = "-1"

기본적으로 focus가 잡히는 요소에 자동으로 focus가 잡히지 않게 하려면
tabindex="-1"를 추가하시면 됩니다.

<a id="test2" name="test2" tabindex="-1">
</a>

 

tabindex = "양수"

원하는 순서대로 focus를 잡고 싶다면
tabindex="1", tabindex="2", tabindex="3",...., tabindex="0" 이러한 양수 순서대로 추가하시면 됩니다.

<input type="text" id="test3" name="test3" tabindex="3" />

<button id="test2" name="test2" tabindex="2" />

<a id="test1" name="test1" tabindex="1" />

focus 잡히는 순서 : id test1 > test2 > test3

 

 

 

 

 

 

참고

1. [웹 접근성] focus를 위한 tabindex -   https://jss2981.tistory.com/20
2. CSS, border와 outline의 차이 -  https://blog.naver.com/iyakiggun/100159740947

 

3. NULI 널리 아티클 - 키보드 접근성을 고려한 tabindex의 사용

https://nuli.navercorp.com/community/article/1132726

4. [HTML] tabindex

https://y00eunji.tistory.com/entry/HTML-tabindex

 

덧

css 호버 효과 모음 블로그 주소

https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EB%B2%84%ED%8A%BC-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%AA%A8%EC%9D%8C

https://inpa.tistory.com/entry/CSS-%F0%9F%92%8D-%EB%A7%81%ED%81%AC-hover-%EB%94%94%EC%9E%90%EC%9D%B8-%F0%9F%96%8C%EF%B8%8F-%EB%AA%A8%EC%9D%8C