Wednesday, November 25, 2015

Sitecore Quick Reference

Angularjs Quick Reference

Regular Expression

Jquery Quick Reference

The below reference help you code selectors appropiately.

Basic Selectors:
Attribute    $("[href]")
ID             $("#ID")
Class         $(".className")
tags            $("p")

Thursday, November 12, 2015

Known Issue: Predictive Search- Accessibility

UX and technical design specifications, framework and guideline must be lay out for predictive search.

The best example is google predictive search.

Now remember one thing we sometime create custom predictive search with UL/LI with div tag and predictive search text box.

Important to note here:-

Dropdownlist aka combo box default behaviour does have up and down arrow keys to navigate through list items but this behaviour needs to be constructed when we use div-UL-LI options.

So remember next time when you working on something like this do take care of input field with predictive search.

I've seen developer using ARIA

The only problem with this tags are they do not have universal acceptance. They works in some device, OS , browsers etc. 

Known Issue: Accessibility -Select Picker Item behaviour in Iphone Voice over

The select html combo box behaviour in Iphone voice is causing problem with accessibility. It doesn't enable the focus on picker selection of IOS when we double tap to activate the picker control( Select Id= > Option in html.

Now this very well works out in IOS 8.0 and above. There is some defect in IOS 7.0 and higher version. Having said that , the focus and default behaviour of picker for voice over is still a problem.

1. Double tap does not set the focus on picker item values.
2. After picker item is selected focus never moves to next element.

Bottom line is:-

Combo box aka dropdown box( select Option) must be customised to suit requirement.

Do add Label for at least for select .


Wednesday, November 4, 2015

Accessibility AA Tip and tricks

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