මූලද්‍රව්‍යයකින් පිටත ක්ලික් කිරීමක් හඳුනා ගන්නේ කෙසේද?
මෙම ප්‍රශ්නය එතරම් ජනප්රිය වීමට සහ බොහෝ පිළිතුරු ඇති වීමට හේතුව එය රැවටිලිකාර ලෙස සංකීර්ණ වීමයි. අවුරුදු අටකට ආසන්න කාලයක් සහ පිළිතුරු දුසිම් ගණනකට පසු, ප්‍රවේශ්‍යතාවයට එතරම් සැලකිල්ලක් නොදක්වා තිබීම ගැන මම ඇත්තෙන්ම පුදුම වෙමි.
පරිශීලකයා මෙනු ප්‍රදේශයෙන් පිටත ක්ලික් කළ විට මෙම අංග සැඟවීමට මම කැමතියි.
මෙය උදාර හේතුවක් වන අතර එය සැබෑ ප්‍රශ්නයයි. ප්‍රශ්නයේ මාතෘකාව - බොහෝ පිළිතුරු ආමන්ත්‍රණය කිරීමට උත්සාහ කරන බව පෙනේ - අවාසනාවන්ත රතු හුරුල්ලන් අඩංගු වේ.
ඉඟිය: එය "ක්ලික් කරන්න" යන වචනයයි !
ක්ලික් හෑන්ඩ්ලර් බැඳීමට ඔබට ඇත්ත වශයෙන්ම අවශ්ය නැත.
සංවාදය වැසීමට ඔබ ක්ලික් හසුරුවන්නන් බැඳ තබන්නේ නම්, ඔබ දැනටමත් අසමත් වී ඇත. ඔබ අසමත් වීමට හේතුව සෑම කෙනෙකුම clickසිදුවීම් අවුලුවාලීමයි . මූසිකයක් භාවිතා නොකරන පරිශීලකයින්ට එබීමෙන් ඔබේ සංවාදයෙන් (සහ ඔබේ උත්පතන මෙනුව Tabවිවාදයට තුඩු දෙන දෙයකි ) ගැලවිය හැකි අතර , පසුව clickසිදුවීමක් අවුලුවාලීමෙන් තොරව සංවාදයේ පිටුපස ඇති අන්තර්ගතය කියවීමට ඔවුන්ට නොහැකි වනු ඇත .
එබැවින් ප්‍රශ්නය නැවත ලියමු.
පරිශීලකයෙකු එය අවසන් කළ විට යමෙක් සංවාදයක් වසා දමන්නේ කෙසේද?
ඉලක්කය එයයි. අවාසනාවට, දැන් අපට userisfinishedwiththedialogසිදුවීම බැඳ තැබිය යුතු අතර , එම බැඳීම එතරම් සරල නැත.
පරිශීලකයෙකු සංවාදයක් භාවිතා කිරීම අවසන් කර ඇති බව අප හඳුනා ගන්නේ කෙසේද?
focusout සිද්ධිය
හොඳ ආරම්භයක් වන්නේ අවධානය දෙබසෙන් ඉවත් වී ඇත්ද යන්න තීරණය කිරීමයි.
ඉඟිය: blurසිදුවීම සමඟ ප්‍රවේශම් වන්න, සිදුවීම blurබුබුලු අවධියට බැඳී ඇත්දැයි ප්‍රචාරය නොකරන්න!
jQuery ගේ focusoutකටයුතු හොඳට කරයි. ඔබට jQuery භාවිතා කළ නොහැකි නම් blur, අල්ලා ගැනීමේ අවධියේදී ඔබට භාවිතා කළ හැකිය :
element.addEventListener('blur', ..., true);
// use capture: ^^^^
එසේම, බොහෝ සංවාද සඳහා ඔබට කන්ටේනරය අවධානය යොමු කිරීමට ඉඩ දිය යුතුය. tabindex="-1"ටැබ් ප්‍රවාහයට බාධා නොකර සංවාදයට ගතිකව අවධානය ලබා ගැනීමට ඉඩ දීම සඳහා එක් කරන්න .
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on('focusout', function () {
$(this).removeClass('active');
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
ඔබ විනාඩියකට වඩා වැඩි කාලයක් එම නිරූපණය සමඟ සෙල්ලම් කරන්නේ නම්, ඔබ ඉක්මනින් ගැටළු දැකීමට පටන් ගත යුතුය.
පළමුවැන්න නම් සංවාදයේ ඇති සබැඳිය ක්ලික් කළ නොහැකි වීමයි. එය මත හෝ ටැබ් එකක් මත ක්ලික් කිරීමට උත්සාහ කිරීම අන්තර්ක්‍රියා සිදුවීමට පෙර සංවාදය වැසීමට හේතු වේ. මෙයට හේතුව අභ්‍යන්තර මූලද්රව්යය නාභිගත කිරීම සිදුවීමක් නැවත focusoutආරම්භ කිරීමට පෙර සිදුවීමක් අවුලුවන focusinබැවිනි.
නිවැරදි කිරීම නම් සිදුවීම් ලූපයෙහි රාජ්ය වෙනස පෝලිම් ගැසීමයි. මෙය භාවිතා කිරීමෙන් setImmediate(...)හෝ setTimeout(..., 0)සහාය නොදක්වන බ්‍රව්සර් සඳහා කළ හැකිය setImmediate. පෝලිම් ගැසූ පසු එය පසුව අවලංගු කළ හැකිය focusin:
$('.submenu').on({
focusout: function (e) {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function (e) {
clearTimeout($(this).data('submenuTimer'));
}
});
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
දෙවන ගැටළුව නම් සබැඳිය නැවත එබූ විට දෙබස වැසෙන්නේ නැත. මෙයට හේතුව සංවාදයේ අවධානය නැති වී සමීප හැසිරීම අවුලුවන අතර පසුව සබැඳිය ක්ලික් කිරීමෙන් දෙබස නැවත විවෘත කිරීමට පටන් ගනී.
පෙර නිකුතුවට සමානව, නාභිගත තත්වය කළමනාකරණය කළ යුතුය. රාජ්ය වෙනස දැනටමත් පෝලිම් කර ඇති හෙයින්, එය සංවාද ප්රේරක කෙරෙහි අවධානය යොමු කිරීමේ සිදුවීම් හැසිරවීමේ කාරණයක් පමණි:
මෙය හුරුපුරුදු විය යුතුය
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
}
});
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
Esc යතුර
නාභිගත තත්වයන් හැසිරවීමෙන් ඔබ සිදු කර ඇතැයි ඔබ සිතුවා නම්, පරිශීලක අත්දැකීම් සරල කිරීම සඳහා ඔබට තවත් බොහෝ දේ කළ හැකිය.
මෙය බොහෝ විට "තිබීම සතුටක්" ලක්ෂණයකි, නමුත් ඔබට කිසියම් ආකාරයක මොඩලයක් හෝ උත්පතන ඇති විට Escයතුර එය වසා දමනු ඇත.
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}
$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});
$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}
});
$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});
div {
display: none;
}
.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>
සංවාදය තුළ ඔබට අවධානය යොමු කළ හැකි අංග ඇති බව ඔබ දන්නේ නම්, ඔබට කෙලින්ම දෙබස් යොමු කිරීමට අවශ්ය නොවේ. ඔබ මෙනුවක් සාදන්නේ නම්, ඒ වෙනුවට ඔබට පළමු මෙනු අයිතමය යොමු කළ හැකිය.
click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
}
$('.menu__link').on({
click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
},
focusout: function () {
$(this.hash).data('submenuTimer', setTimeout(function () {
$(this.hash).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('submenuTimer'));
}
});
$('.submenu').on({
focusout: function () {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('submenuTimer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('submenu--active');
e.preventDefault();
}
}
});
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu:after {
clear: both;
content: '';
display: table;
}
.menu__item {
float: left;
position: relative;
}
.menu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
background-color: black;
color: lightblue;
}
.submenu {
border: 1px solid black;
display: none;
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
}
.submenu--active {
display: block;
}
.submenu__item {
width: 150px;
}
.submenu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
.submenu__link:hover,
.submenu__link:focus {
background-color: black;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="#menu-1">Menu 1</a>
<ul class="submenu" id="menu-1" tabindex="-1">
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
</ul>
</li>
<li class="menu__item">
<a class="menu__link" href="#menu-2">Menu 2</a>
<ul class="submenu" id="menu-2" tabindex="-1">
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
<li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
</ul>
</li>
</ul>
lorem ipsum <a href="http://example.com/">dolor</a> sit amet.
WAI-ARIA භූමිකාවන් සහ වෙනත් ප්‍රවේශ්‍යතා සහාය
මෙම පිළිතුර මෙම විශේෂාංගය සඳහා ප්‍රවේශ විය හැකි යතුරුපුවරුව සහ මූසික සහාය පිළිබඳ මූලික කරුණු ආවරණය කරයි, නමුත් එය දැනටමත් සෑහෙන තරම් ප්‍රමාණවත් බැවින් මම WAI-ARIA භූමිකාවන් සහ ගුණාංග පිළිබඳ කිසිදු සාකච්ඡාවකින් වැළකී සිටිමි , කෙසේ වෙතත් ක්රියාත්මක කරන්නන් විස්තර සඳහා පිරිවිතර වෙත යොමු වන ලෙස මම තරයේ නිර්දේශ කරමි ඔවුන් භාවිතා කළ යුතු භූමිකාවන් සහ වෙනත් සුදුසු ගුණාංග පිළිබඳව.