jquery cycle with focus accessibility

out wcag accessibility.html

<script type="text/javascript" src="/includes/jquery.cycle.lite.1.0.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			var controls = $("#controls"), sliderContainer = $("#mainFocus");
			$("#slides").cycle({
			    fx      : "fade",
			    speed   : "slow",
			    timeout : 12000,
			    next    : "#next",
			    prev    : "#prev",
			    pause   : 1
			});
			sliderContainer.hover(
		        function() { controls.stop(true, true).fadeTo("normal", 1); }, // mouseover
		        function() { controls.stop(true, true).fadeTo("normal", 0); }  // mouseout
	    	)
	    	.focusin(function(){ 
	    		controls.stop(true, true).fadeTo("normal", 1); 
	    	})
	    	.focusout( function() { 
	    		controls.stop(true, true).fadeTo("normal", 0); 
	    	});
		});
	</script>

<div id="mainFocus">
  <div id="controls"><a id="prev" href="#"><img src="/images/slideshowleft.png" alt="slideshow left arrow" width="80" height="34" /></a> <a id="next" href="#"><img src="/images/slideshowright.png" alt="slideshow right arrow" width="80" height="34" /></a></div>
			<div id="slides">				
				<xsl:for-each select="bannerImages/item">
					<div class="slide">
						<img src="{URL}" alt="image" width="960" height="370" />
						<div class="testimonial">
							<p>lorem ipsum</p>
						</div>
					</div>
				</xsl:for-each>			
			</div>
		</div>