General Techniques - Creating an accessible news slider

Submitter's Name: Devarshi Pant
Submitter's Email: devarshipant@gmail.com

Technique ID: UNKNOWN
Short Name: Creating an accessible news slider
Technique Category: General Techniques
Success Criterion Reference: UNKNOWN

Applicability:
Applicable to sliders, carousels, and news updates that display as slideshows

UA Issues:
None

Description:
The objective of this technique is to allow keyboard only, screen reader, and screen magnification users operate news sliders that are increasingly rendering on webpages. The technique works when the news slider is paused by default and the first control to the receive focus inside the slider is the pause button.  A disabled user often can find a playing news slider (with changing slides) difficult to operate due to the changing visual context. 
Once the focus is on the forward button, and the user activates it, the focus alternates between the forward button and the active image (or slide).  In order to get to the previous button, users shift tab once. If needed, off screen instructions, like, “By default the player is paused. Tab to next button and press enter to play. Shift tab to go to the previous button and escape to skip the slider,” etc., can help screen reader users.
A disabled user opens an online newspaper and goes to the slider section. The slider has six active images that will rotate once the user activates the play button. In the steps that follow, a user does not activate the play button. The user accesses the various slides in the following way:
1.	By default, the news slider is paused. 
2.	The first tab stop inside the slider is on the pause button. 
3.	The user does not activate it, but tabs.
4.	The focus shifts to the active image.
5.	The user either activates the image or tabs again. On activating, the target opens. If tabbing, refer to step 6.
6.	On tabbing (from step 5), the focus shifts to the forward or the next button.
7.	The user activates the forward button (from step 6) and the focus shifts to the active image. 
8.	Repeat step 5.
9.	To get to other controls, the user presses shift tab once, which places the focus on the previous button.
10.	In addition, pressing escape directs the focus outside and after the slider.


Example 1 Head: None
Example 1 Description:
None

Example 2 Head: None
Example 2 Description:
None

Resource 1 Title: None
Resource 1 URI: None

Resource 2 Title: None
Resource 2 URI: None

Related Techniques:
G57

Test Procedure:
1.	Check, if the new slider is paused by default.
2.	Check, if tabbing once places the focus on the next button.
3.	Check, if tabbing again places the focus on the slide.
4.	Check, if tabbing again places the focus on the next button.
5.	Check, if a shift tab places the focus on the previous button.
6.	Check, if escape key places the focus outside and after the news slider.


Expected Result:
Checks #1, #2, #3, #4, and #5 above are true.


No guidelines reference was submitted!
No test file 1 was submitted!
No test file 1 pass/fail was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!
No additional notes were submitted!


------------------------------------------------

<technique id="UNKNOWN">
<short-name>Creating an accessible news slider</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
Applicable to sliders, carousels, and news updates that display as slideshows
</applicability>
<ua_issues>
None
</ua_issues>
<description>
The objective of this technique is to allow keyboard only, screen reader, and screen magnification users operate news sliders that are increasingly rendering on webpages. The technique works when the news slider is paused by default and the first control to the receive focus inside the slider is the pause button.  A disabled user often can find a playing news slider (with changing slides) difficult to operate due to the changing visual context. 
Once the focus is on the forward button, and the user activates it, the focus alternates between the forward button and the active image (or slide).  In order to get to the previous button, users shift tab once. If needed, off screen instructions, like, “By default the player is paused. Tab to next button and press enter to play. Shift tab to go to the previous button and escape to skip the slider,” etc., can help screen reader users.
A disabled user opens an online newspaper and goes to the slider section. The slider has six active images that will rotate once the user activates the play button. In the steps that follow, a user does not activate the play button. The user accesses the various slides in the following way:
1.	By default, the news slider is paused. 
2.	The first tab stop inside the slider is on the pause button. 
3.	The user does not activate it, but tabs.
4.	The focus shifts to the active image.
5.	The user either activates the image or tabs again. On activating, the target opens. If tabbing, refer to step 6.
6.	On tabbing (from step 5), the focus shifts to the forward or the next button.
7.	The user activates the forward button (from step 6) and the focus shifts to the active image. 
8.	Repeat step 5.
9.	To get to other controls, the user presses shift tab once, which places the focus on the previous button.
10.	In addition, pressing escape directs the focus outside and after the slider.

</description>

<examples>
<ex_head_1>
None
</ex_head_1>
<ex_desc_1>
None
</ex_desc_1>
<ex_head_2>
None
</ex_head_2>
<ex_desc_2>
None
</ex_desc_2>
</examples>

<resources>
<resources_title1>
None
</resources_title1>
<resource_uri1>
None
</resource_uri1>
<resources_title2>
None
</resources_title2>
<resource_uri2>
None
</resource_uri2>
</resources>

<related_techniques>
<related_technique>
G57
</related_technique>
</related_techniques>

<tests>
<procedure>
1.	Check, if the new slider is paused by default.
2.	Check, if tabbing once places the focus on the next button.
3.	Check, if tabbing again places the focus on the slide.
4.	Check, if tabbing again places the focus on the next button.
5.	Check, if a shift tab places the focus on the previous button.
6.	Check, if escape key places the focus outside and after the news slider.

</procedure>
<expected_result>
Checks #1, #2, #3, #4, and #5 above are true.
</expected_result>
<test_file_1>

</test_file_1>
<pass_fail_1>

</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:

Received on Tuesday, 5 July 2011 14:00:19 UTC