Accessibility AA Tip and tricks

 

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', "");

});