web-accessibility-guide
Attributes
aria-label
Just add what ever the text you want to make screen reader to read pass as aria-label value. Remember most of the screen readers will read only the aria label value, and they will skip the actual appearing text.
<button aria-label=”button purpose text to describe more about”>Learn more</button>
aria-labelledby
As mentioned by attribute name we can pass more information of different elements by using there id. Refer below example;
<span id="titleComponent">Title of the component</span>
<span id="fieldLabel">Label Name</span>
<input aria-labelledby=" titleComponent myNameId" type="text" id=”capturename”/>
Invisible text to add more information
< label>
<span class=”invisible-text”>Additional detailed information</span>
Field label
</ label>
<style>
.invisible-text{
position: absolute;
left: -10000
width:1px;
height:1px;
overflow: hidden;
white-space: nowrap;
margin: -1px;
}
</style>
colour contrast checker tool
https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF
show focus styling only on keyboard
Keyboard only focus using only with CSS.
<!-- HTML code -->
<a class="itemlink" href="#">
<span class="itemcontent" tabindex="-1">
link label
</span>
</a>
<style>
// remove the default outline
.itemlink:focus,
.itemcontent:focus {
outline: none;
}
.itemlink:focus > .itemcontent {
box-shadow: 0 0 2px red;
}
</style>
using js + css
// Adding css class to body element to giving more previlige to browser to know from where the events are triggering
// Jquery
$("body").on('keydown', function (e) {
$(this).addClass("keyboard-input");
});
$("body").on('mousedown', function (e) {
$(this).removeClass("keyboard-input")
});
//or using vanilla Javascript
document.body.addEventListener('keydown', function() {
document.body.classList.add('keyboard-input');
});
document.body.addEventListener('mousedown', function() {
document.body.classList.remove('keyboard-input');
});
CSS
/* visible */
.keyboard-input :focus {
outline: 1px solid #30a6ca
}
Generic methods to handle keyboard tabbing
// Common method to handle foucs while tabbing along with shift key
function movefocusOnTab(elem, nextElem, checkShiftkey, prevElem ){
$(elem).on("keydown",function (event) {
if(checkShiftkey && event.keyCode == 9 && event.shiftKey){
event.preventDefault();
$(prevElem).focus();
}
else if(event.keyCode == 9 && !event.shiftKey){
event.preventDefault();
$(nextElem).focus();
}
});
}
// call method using arguments
movefocusOnTab("selector", "next selector element", boolean, "previous selector element");
// Common method to handle foucs while shift key
function movefocusOnShiftTab(elem, prevElem){
$(elem).on("keydown",function (event) {
if(event.keyCode == 9 && event.shiftKey){
event.preventDefault();
$(prevElem).focus();
}
});
}
// call method using arguments
movefocusOnShiftTab("selector", "previous Elem selector")