Tuesday, March 19, 2013

ADA Compliance to Rich Faces Tab Panel and Tabs

Adding ADA Compliance to Rich Faces Tab Panel and Tabs
Few components in Rich Faces are not ADA compliant. ADA testing tools like JAWS do not recognize the Tab Headers. But this could be fixed by adding buttons or hyperlinks to the TABS.

Here is the example of making the TABS readable by JAWS:

Add  hyperlink and css to remove the link


Example:



You can also add additional css properties to make the selected tab look bold.

Here rf-tab-* are Rich Faces CSS classes.

/*increase font size for selected tab*/
.rf-tab-hdr-act>.rf-tab-lbl{
font-size:14px;
}
.rf-tab-hdr-act>span>a {
font-size:14px;
}
.rf-tab-hdr-act>span{
font-size:14px;
}






No comments:

Post a Comment