Accessibility:
·
Flow of information
·
Correct proof reading
·
Right colour contrast and text size to help
users with visual problems
·
Right tabbing , focus and click ordering.
Logical arrangement of information’s. Right speech, right flow of speech with
correct pause. Simple example.. Go Slow, work is in progress. Well what if
speak tool reads out in this way. Go pause, slow work is in progress. There
should be balance of proper read out in very meaningful way. Instruction text
and design has to be considered while accessibility is taken care. Content author
must be trained to understand such implications with good examples.
§
Visually – Colour medium to communicate
o Problem
statement- The color Red with Arrow indicates you are here in this section
whereas grey without bottom arrow indicates there are sub menu item to be viewed.
·
List of headings
·
Headings structure and hierarchy
·
Logical orders of tabbing
·
Skip Links back to top
·
Text size 200% in IE Or Zoom
·
Colour Contrast and Text size
·
Progress Bar- Such as you completed 1 of 3 step
·
Avoid abbreviation like Q&A , FAQ
§ FAQ
read as Fack and so on.
·
Reading out numbers , units etc
§ Take
care MB, cents, Dollar, KB, telephone number, credit card sample numbers etc.
·
Button should be informative.
§ Submit
button and Review Button. If there are case where text on a button is very
generic in nature such as continue, Read more, Add, More information,View . We
can make information more elaborate for visually challenged users.
§ For
e.g what do you mean by more information, related to what . These are the
questions that may be reviewed and assessed.
§ Role=button
·
Anchor tag
§ Target=_blank
its important to add explicit Opens in new window. If there is link with
download, mention what is going to be downloaded like PDF, word doc and so on
§ Ensure
we have role=button, role=link appropriately marked in anchor tag for IOS,
android to call it as interactive element
§ Ensure
href got some value. Href=”#!”
·
Call out table structure properly
·
Most used ARIA tags
§ Aria-hidden
§ Aria-label
Some handy Jquery To set focus
$('select').on('change', function () { $(this).next().focus(); });
For Empty Alt text attribute
//empty image alt tags
$("img").each(function (index) {
$('.ccs1).attr('alt', "");
$('.ccs2').attr('alt', "");
$('.ccs3').attr('alt', "");
});
