khsbory.github.io/hiding.html at master · khsbory/khsbory.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>화면에서 콘텐츠를 숨기거나 표시할 때의 접근성</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- <link rel="stylesheet" href="styles.css" /> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>

.toggle-content{
  height: 0;
  overflow: hidden;
  transition: height 350ms ease-in-out;
}

.toggle-content.is-visible {
   height: auto;
}

.toggle-content2{
  height: 0;
  overflow: hidden;
  transition: height 350ms ease-in-out;
}
.toggle-content2.is-visible {
   height: auto;
}
button {
    background: none;
    border: 0;
    color: inherit;
    /* cursor: default; */
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
       -moz-user-select: none;
        -ms-user-select: none;
}


</style>
<script>
// Show an element
var show = function (elem) {

// Get the natural height of the element
var getHeight = function () {
  elem.style.display = 'block'; // Make it visible
  var height = elem.scrollHeight + 'px'; // Get it's height
  elem.style.display = ''; //  Hide it again
  return height;
};

var height = getHeight(); // Get the natural height
elem.classList.add('is-visible'); // Make the element visible
elem.style.height = height; // Update the max-height

// Once the transition is complete, remove the inline max-height so the content can scale responsively
window.setTimeout(function () {
  elem.style.height = '';
}, 350);

};

// Hide an element
var hide = function (elem) {

// Give the element a height to change from
elem.style.height = elem.scrollHeight + 'px';

// Set the height back to 0
window.setTimeout(function () {
  elem.style.height = '0';
}, 1);

// When the transition is complete, hide it
window.setTimeout(function () {
  elem.classList.remove('is-visible');
}, 350);

};

// Toggle element visibility
var toggle = function (elem, timing) {

// If the element is visible, hide it
if (elem.classList.contains('is-visible')) {
  hide(elem);
  return;
}

// Otherwise, show it
show(elem);

};

// Listen for click events
document.addEventListener('click', function (event) {

// Make sure clicked element is our toggle
if (!event.target.classList.contains('toggle')) return;

// Prevent default link behavior
event.preventDefault();

// Get the content
var content = document.querySelector(event.target.hash);
if (!content) return;

// Toggle the content
toggle(content);

}, false);


</script>
</head>

<body>

  <h1>화면에서 콘텐츠를 숨기거나 표시할때</h1>
  <p>overflow hidden 을 통하여 시각적으로 콘텐츠를 숨기는 경우에는 스크린 리더에서는 콘텐츠를 읽을 수 있으므로 이에 대한 접근성 대응이 필요합니다.</p>

  <div class="bad">
  <h2>접근성 미적용 예제</h2>
  <p>
    <a class="toggle" href="#example">환불 규정</a>
  </p>

  <div class="toggle-content" id="example">
    <p>주문하신 햄버거를 드시지 않고 다시 환불하는 것은 사실 말이 되지 않습니다. 그러나 꼭 환불하기를 원하신다면 먼저 전화를 주시기 바랍니다.</p>
    <p>그러나 되도록 환불은 하지 마세요.</p>
    <button id="refund" onclick="refundFunction()">환불하기</button>
      </div>

</div>


<div class="good">
  <h2 id="accessible">접근성 적용 예제</h2>
  <p>
    <button aria-describedby="accessible" id="toggle2" aria-expanded="false">환불 규정</button>
  </p>
  <div class="toggle-content2" id="example2" aria-hidden="true">
    <p>주문하신 햄버거를 드시지 않고 다시 환불하는 것은 사실 말이 되지 않습니다. 그러나 꼭 환불하기를 원하신다면 먼저 전화를 주시기 바랍니다.</p>
    <p>그러나 되도록 환불은 하지 마세요.</p>
    <button id="refund2" tabindex="-1" onclick="refundFunction2()">환불하기</button>
      </div>
  </div>
</body>
<script>
  $(function(){

var btn = $("#toggle2");
var content = $("#example2");
var refund2 = $("#refund2");
  btn.on('click',function(){
        if(btn.attr('aria-expanded') == 'true'){
          $("#example2").removeClass("toggle-content2.is-visible");
          $("#example2").addClass("toggle-content2");
      btn.attr('aria-expanded','false');
      content.attr('aria-hidden','true');
refund2.attr("tabindex","-1");
    }else{
      btn.attr('aria-expanded','true');
      content.attr('aria-hidden','false');
      refund2.removeAttr("tabindex");
      $("#example2").removeClass("toggle-content2");
          $("#example2").addClass("content2.is-visible");
    }

    console.log(btn.attr('aria-expanded'));
    });

});
</script>
</html>