Plugins – computeraxe

Section 508 Standards Improve Site Accessibility

Interested in improving site accessibility for all site visitors? The section 508 standards were written to assure that everybody can see your site, including people with vision and cognitive disabilities. Once you’re familiar with these standards, it’s not too hard to abide them. Why wouldn’t we want to have the broadest audience possible anyway?

What are these 508 standards and why do they exist? The United States Federal government put out an edict – ok it’s a law – that states that any federal website must be created in such a way as to allow everyone to “see” it or otherwise consume the information.

The main idea was to make sure to include folks with disabilities who might use alternative means of navigating the Web and to assure that anyone and everyone has equal access to the government. Every web page created by the federal government is checked against the following standards for compliance before being published.

Here are some suggestions on how to meet the standards (a – p) of Section 508 of the Rehabilitation Act, §1194.22. Be aware that the standards have been paraphrased for the most part and that this is only one interpretation on how to meet these standards.

Section 508 standards and how to meet them

a. Provide a text equivalent for every non-text element.: Use the alt attribute for every image or embedded media to explain what the media is portraying. Complex graphics may require a link to a new page for full explanation. Images that allow for interactivity must have their functionality explained, too. Audio content needs to be captioned or have transcripts provided. Graphics used for decoration, like borders or background color gradients, can have empty alt tags.
b. Multimedia presentations need to have their captions or transcripts synchronized with the presentation.: Videos without audio tracks should have audio descriptions created. Caption synchronizing can be accomplished with any media player using MAGpie, the “original free caption- and audio-description authoring tool for making multimedia accessible to persons with sensory disabilities.” It can also be used to create caption files for YouTube videos.
c. Information that is communicated with color must also be communicated without color.: Color cannot be the only means of communicating information. People who are color blind may not see links if they’re not underlined or highlighted in some other way. Contrast must be high in order for others to see the message.
d. Webpages need to be readable on their own, as if the stylesheet was missing.: Even though most web pages would look very plain without their associated stylesheet, they should be organized so that they’re readable without the stylesheet.
e. Text links should be provided for each active region of server-side image maps.: Use client-side image maps instead of server-side image maps. Each active region should be described in alternative means.
f. Client-side image maps should be used instead of server-side image maps except where the regions cannot be defined with an available geometric shape.: Use client-side image maps instead of server-side image maps. Each active region should be described in accessible text.
g. Data tables need to have row and column headers described.: Use <th> in data tables. Don’t use tables for layout purposes.
h. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.: Use the scope attribute to tell the browser or screen reader that everything under a column heading is associated with that column or that everything to the right of a row header is associated with that row. Complex tables should use ids or headers. Avoid spanned rows and columns and instead present the data in more simple terms.
i. Frames should have text for identification to describe the navigation.: If you can’t avoid the use of frames, make sure they have descriptive titles.
j. Assure that images do not flicker at a frequency greater than 2 Hz and lower than 55 Hz.: Avoid using flickering images.
k. If there is no way to provide accessible or alternative content for your message, a text-only page must be provided.: Keep things simple, but if that’s not possible make available text-only pages. Keep each text-only page up-to-date.
l. When using scripts to display content or create interface elements, assure that the same information is provided via functional text that can be read by assistive technologies.: This is going to require some thought for every instance of jQuery or other javascript components on a page.
m. When a web page requires a plug-in to interpret the page content, an accessible link for downloading each plug-in must be provided.: Download links must be provided for the plug-ins required to read PDFs or to view Java applets, for example.
n. Help people using assistive technologies to fill out your online forms.: Use <label> tags with the for attribute for each element of a form. Use descriptive titles and provide instructions on how to properly fill out the form.
o. A method should be provided that allows users to skip a series of navigation links.: Use skip links to let users pass the navigation menu and go directly to the content. A skip link is a link at the top of the page that plainly states that it ‘skips navigation’ or ‘skips the link list’ and jumps the reader to an anchor at the beginning of the content.
p. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.: Allow the user to have control over the timing of inputs.

So, the bottom line is to keep things simple. Use text to describe things on the page and to identify things that aren’t text. Be careful with scripting actions so that information is accessible to all.

In an effort to improve the status quo I’ll be taking a look at all my web properties with an eye for improving their accessibility. Do you have any hints on how you’ve accomplished the same?

Speed Testing WordPress Sites

Links are plentiful on the ‘Net and these are a few that will help when speed testing your WordPress sites.

Site Loading Speed, Caching and Validation

Pingdom Tools tests the load time of URL, analyzes it and helps to find bottlenecks. Click on down-arrows for each file/path under the waterfall tab to see the headers and again for each recommendation under the Performance Grade tab for specifics.
Yslow, a browser plugin analyzes web pages and suggests ways to improve their performance.
W3 Total Cache is a superior caching plugin for WordPress sites.
Firebug Web Development Tool check Net tab for page element loading times.
Check out your site’s speed with this handy speed test.
Page Speed test online or via browser extensions for Firefox and Chrome. Results include minified HTML, CSS and JS files saved to configurable directory.
Caching Tutorial explains web and proxy caches and http headers.
REDbot checks the server clock and caching for a site, hover over each line of the response for full explanation.
WP Tutorial on Boosting Site Speed excellent step-by-step tutorial showing how to use plugins to improve speed of WordPress sites.
WebPageTest checks page loading speed, can select various browsers with screen shots reported. Advanced settings allow selection of connection speed for DSL, Cable, FIOS or 56K dialup.
W3C HTML Validator finds out if your pages don’t validate, which can make them slow to load.
W3C Link Checker
Test Mobile Readiness of web pages.

Pause and Play Buttons for jQuery Slideshow

Continuing our slideshow journey with jQuery Cycle plugin, we’d like to improve our slider by adding two more buttons. Last time we looked at creating a slideshow with previous and next buttons, but now we’d like to add buttons for pause and resume. It would be nice to allow site visitors to stop a slideshow with a pause button and resume the slideshow with a play button whenever they’re ready to continue.

If we keep the overall design the same, we just need to do two things to modify the slider. First, we need to upload the images for the pause and resume buttons and add a couple of lines to the HTML markup for positioning the buttons. We’ll fit the pause and play buttons in between the previous and next buttons. Each button will use an anchor tag, an id for CSS and script targeting, and a title for a user-friendly tooltip.

HTML Markup for Slideshow Controls:

[plain]

[/plain]

Second, we need to add a couple of lines to the script to manage the action when someone clicks either button. Here, we’re assigning Cycle’s pause or resume option to the click function of the selected id, in this case #slide_aft. Adding a ‘return false’ line assures that the site visitor won’t be taken to another page when the buttons are clicked.

jQuery script portion for pause and resume buttons:

[crayon]

$(‘#pauseButton’).click(function() {
$(‘#slide_aft’).cycle(‘pause’);
return false;
});
$(‘#resumeButton’).click(function() {
$(‘#slide_aft’).cycle(‘resume’);
return false;
});

[/crayon]

The above script portion was placed in the document.ready function($) so that the buttons are able to be used as soon as practical.

Here’s the full slideshow example with button controls for pause, resume or play, previous slide, and next slide.

Now, that looks a little better. This slideshow looks more complete having the pause and play or resume buttons, as well as the prev and next buttons.

Previous and Next Buttons in a jQuery Cycle Slideshow

A site visitor to computeraxe wanted to know how to incorporate previous and next buttons in their slideshow using jQuery Cycle plugin. It’s easy! Let’s see an example, ok?

If you haven’t checked out the simplicity of the jQuery Cycle plugin, you should because there’s a whole lot you can do with it. It’s a very versatile plugin and quite popular, which speaks to its usefulness — and cool factor, too. Previous posts here covered the basics about the Cycle Plugin, how to make slides look like Polaroids, using image captions with Cycle, and discussions about a transition effects problem with certain fx.

Let’s get into the example for making previous and next buttons for a slider in jQuery using the Cycle plugin.

Before writing any code it would be a good idea to sketch out the design for the slideshow. The photos or slides will be held in a container div that can be targeted for CSS styling and javascript. Captions and their container paragraph would also be placed inside the container div. In this example we’ll do away with the captions for simplicity and place the previous and next buttons inside the container div.

It turns out that Cycle has two options for creating the functionality for going to the next photo or the previous slide in a sequence. These options are appropriately named ‘next’ and ‘prev’. The values to give for each are the locations of the next and previous buttons. To specify each location, create an id.

Here, we’re using #next2 for the next button and #prev2 for the previous button. Since we’re having only one next/previous button set for this slideshow, an id for each makes sense. If you have more than one slider on a page, a class would be more appropriate. When somebody wants to see the previous slide they’ll click on the ‘previous button’, so the best HTML tag for the slideshow controls is an anchor with a href of ‘#’. We don’t want to leave the page when clicking the previous button, we just want to see the previous slide in the show.

HTML Markup:

[plain]

Slideshow example using jQuery Cycle plugin with previous and next buttons.

[/plain]

We’ll use a couple of small images to accommodate the previous and next slide functionality. One could use the words ‘prev’ and ‘next’ instead of images, if desired. In case a site visitor needs help, we’ve included a tooltip for each button by the way of a title for each anchor.

We want to hide all the images except the first image whenever the document is ready. Else, we’ll use the window load function for the slider action.

jQuery:

[crayon]

// jQuery Cycle options for slideshow with next/previous buttons

$(window).load(function() {
$(‘#slide_afta’).cycle({
fx: ‘fadeZoom’,
timeout: 2000,
next: ‘#next2’,
prev: ‘#prev2’,
slideExpr: ‘img’
});
});

// hide all but the first image when document is ready

jQuery(document).ready(function($) {
$(‘#slide_afta img:gt(0)’).hide();
});

[/crayon]

Of course, there are many different ways to style your slideshow. Here’s our example Cycle slider with next and previous buttons.

Slideshow example using jQuery Cycle plugin with previous and next buttons.

What if you want two sliders on the same page?

The first thing to recognize is that more than one id with the same name won’t work on the same page, so parts of the document for the second slider with an id will have to be changed over to a class or a different id name. CSS will have to be updated to reflect the changes, as will the javascript.

However, using the same class names for the next and previous controls for two sliders on the same page will result in both sliders being controlled by the same set of control buttons. That’s probably not what you’d want, nor what your site visitors would expect. Rename the action buttons (prev, next) and the container for the slides to different class names in order to be able to control the second slideshow. Of course, a second Cycle script would be needed to target the new container for the second slideshow.