Станислав Зубович, EPAM
a, a:focus {
outline: none;
outline: 0;
}
$(‘a.trap’).keydown(function(event){
event.preventDefault();
var href = $(this).attr(‘href’);
var text = $(this).text();;
window.open(href, text);
});
<span class="btn toggle">Click to Toggle</span>
<span class="btn toggle">Click to Toggle</span>
<a href="#" class="btn toggle">Click to Toggle</a>
<span class="btn toggle">Click to Toggle</span>
<a href="#" class="btn toggle">Click to Toggle</a>
<button type="button" class="toggle">Click to Toggle</ button>
<label for="[INPUT ID]">
.wcag-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
}
<a href="#" class="icon">
<span class="wcag-hidden">Next</span>
</a>
a {
background: url(next.png);
}
<main role="main">
<li role="list">
<table role="presentation">
<span class="btn toggle">Click</span>
<span class="btn toggle">Click</span><a href="#" class="btn toggle">Click</a>
<span class="btn toggle">Click</span>
<a href="#" class="btn toggle">Click</a><a href="#" role="button" class="btn toggle">Click</a>
Click Button
<table>
<thead>
...
<a href="#">Info</a>
...</table>
table with 2 rows and 1 columns ... Info Link
<table role="presentation">
<thead>
...
<a href="#">Info</a>
...</table>
... Info Link
.btn [role="button] {
background: green;
...
}
<section aria-labelledby="MainHeading">
<div aria-expanded="true">
<label for="choosePassword">Choose Password:</label>
<input id="choosePassword">
<span class="help">Passwords must be 8 characters</span>
Choose Password: edit protected
<label for="choosePassword">Choose Password:
<span class="wcag-hidden">
Passwords must be 8 characters long</span></label><input id="choosePassword" type="password">
<span class="help">Passwords must be 8 characters</span>
Choose Password:Passwords must be 8 characters long
<label for="choosePassword">Choose Password:</label>
<input id="choosePassword"
aria-describedby="choosePasswordHelp"><span class="help" id="choosePasswordHelp">
Passwords must be 8 characters long</span>Choose Password:Passwords must be 8 characters long
<p id="error_choosePassword" class="error">Error</p>
<label for="choosePassword">Choose Password:</label>
<input id="choosePassword" aria-describedby=
"choosePasswordHelp error_choosePassword"><span class="help" id="choosePasswordHelp">
Passwords must be 8 characters long</span>Choose Password:Passwords must be 8 characters long. Error
<button type="button">Print</button>
background: url(sprite.png);
button {
overflow: hidden;
}
button:before {
content: url(sprite.png);
margin: -X 0 0 -Y;
}
@media screen and (-ms-high-contrast: active)