부트 스트랩 모달 닫기 버튼 아리아 - 숨겨진 = <a href="http://getbootstrap.com/javascript/#modals" rel="nofollow">the bootstrap document</a> 당으로

Question

사실, aria-hidden="true"를 추가 메인 modal div에서 aria-hidden=true의 존재를 설명 모달의 DOM 요소를 건너 보조 기술을 알려줍니다.

modal-header div의 모달 닫기 버튼에 aria-hidden=true을 추가하는 목적은 무엇입니까?

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     **<*div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div>*** 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Answer 1

아리아 숨겨진 닫기 버튼의 목적은에 -symbol 많은 스크린 리더를 말하지 않을 것 "X"또는 "시간"마크 업이다.

<button type="button" title="Close"> 
    <span aria-hidden="true">&times;</span> 
    <span class="hide">Close</span> 
</button> 

을 시각적으로 CSS와 .hide 내용을 숨기 :

은 접근 닫기 버튼은 다음과 비슷한 모습이 될 것입니다 확인하십시오.

Answer 2

그러나 최근에이 문제에 대한 답변을 얻었는지 확실하지 않으며 이것이 내 답변이었습니다. 도움이 되었기를 바랍니다.

닫기 버튼은 특히 사용하여 화면 판독기, 장애인의 웹 접근성을하는 데 사용되는이

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 

또는

<button type="button" class="close" data-dismiss="modal">&times;</button> 

Answer 3

ARIA 속성처럼 보일 수 있습니다. 시력의 도움으로 × (x) 기호가 'X'기호로 사용됨을 알 수 있습니다.이 기호를 클릭하면 모달이 닫힙니다. 모달이 적절하게 설정되어있는 경우, 화면 판독기를 사용하는 사람의 경우 : 화면 판독기가이 코드를 통해 갈 때

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 

, 그것은 단순히 읽기 "닫기 버튼"을 읽습니다.

---

스크린 리더로 읽을 때이 두 가지 모두 같은 결과로 이어질 것입니다

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button> 

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button> 

는, 그 효과에 "닫기 곱셈 기호 버튼"또는 무언가를 말하고. 추가이 지난 경우

---

<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button> 

, 아리아 - 숨겨진을 발견하기 전에 바닥 글을 읽는 계속 사용자를 강제로 자체가 화면 판독기가 전체 닫기 버튼을 무시하게됩니다 버튼에 = "true"로 닫기 버튼 (바닥 글에 닫기 버튼이있는 경우 닫지 않을 경우 닫기가 어려워 짐)

일반적인 웹 사용자의 기능은이 모든 예에서 동일하지만 인구 집단의 경우 디자인, 레이아웃 및 태그 배치에주의하고 고려하면 자주 방문하는 웹 사이트와 웹 사이트의 차이 일 수 있습니다 사이트가 다시 방문한 적이 없습니다.

아리아 속성을 사용할 때 화면 판독기를 실행하고 시각적으로 만 볼 수있는 콘텐츠를 시각적으로 보여주는 척하는 것은 아리아가 숨겨진 태그가 있어야한다는 것입니다. ARIA 태그 시스템은 화면 판독기에서만 볼 수있는 요소를 포함하여 추가 정보를 제공하는 데 필요한 많은 유형의 태그를 제공합니다.자세한 내용은

는 : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Answer 4

는 다니엘 손자의 대답 @ 허용 대답해야합니다.

는 조금 뭔가를 추가 : 또한 "접근성"요소를 숨기려면 SR 전용 클래스를 제공한다 부트 스트랩.

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 

<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button> 

Gode Agarunov @ - 당신의 아주 유익한 대답과 아리아 라벨 주셔서 감사합니다. 새로운 요소를 기존 요소에 중첩하는 것이 아니라 접근성을위한 요소를 추가하는 것이 더 합리적이라고 생각합니다.