Using the ARIA Form Landmark

ARIA landmarks allow developers to associate structural significance to web page elements. Common landmarks define navigation, header, the main content, and the page’s footer. It’s also possible to define more specific subelements, such as a search form. This page will test the use of role="form" to define multiple forms on a single page. While this may seem uncommon, it could be seen on a page that has a search, sign up, and login form.

Markup

The role attribute is placed on the form tag. In general, you do not want to put a landmark above a similar semantic object, so <form role="form">, <nav role="navigation">. Add aria-label to let the user know what the form will include. This is especially helpful when navigating by landmarks.
Continue Reading Using the ARIA Form Landmark

Using aria-describedby to replicate fieldset and legend

Complex forms should use a fieldset and legend to group similar inputs. The legend is announced along with label text for each input. This is especially helpful when form inputs are repetitive, such as mailing, billing, and work address information.

This example fixes a form that included a form within a table. It uses the aria-describedby attribute to connect the individual form inputs with a header cell. It was inspired by DeQue’s recent article for using ARIA to replace fieldset/legend in a set of radio buttons: ARIA-Group: a viable alternative for Fieldset / Legend?.
Continue Reading Using aria-describedby to replicate fieldset and legend

Neutered Links: A.K.A removing the href attribute

There’s an old programming saying: Garbage in, Garbage out. This helps people explain why all sorts of things don’t work. Concentrate on using the best content possible if you want a successful product, web page, mobile app, or chocolate covered cream puff. I’ve seen a new inaccessibility pattern appear with links that are not keyboard accessible. This article will explain the problem, solution, and provides a helpful bookmarklet for finding these neutered links on your page.

The Basics

HTML, at its most basic, is a markup language that allows linking; within a document and to an external document. These links use the <a> tag. The early HTML standards defined two functions for this tag.

Placing an href attribute into the tag converts it to a link, which can take the user to new content. This also places the link into the normal tab flow and makes it clickable.

Continue Reading Neutered Links: A.K.A removing the href attribute

Debugging aria-label on elements

Sat, Sun, Mon - Forecast iconsI recently helped do some testing on the new version Yahoo! Mail for iPads and was stumped by an aria-label not working as expected. It was one of those gotcha moments, when you realize a confusion with a fundamental process. Are you wondering why your aria-label is not being announced?

It’s tempting to use the aria-label attribute in situations where the visible text is not adequate. For instance, you may use a background image to represent a value and you’d like the user to know that value via an aria-label on the parent.

This basic test page will walk through the simple assumption and show how the aria-label is meant to be used.

Continue Reading Debugging aria-label on elements

Add Pagination to your Yahoo! BOSS search engine

Search pagination exampleYahoo’s BOSS search API makes it easy for you to create a customized search engine. Yahoo! also has a Design Pattern lLibrary to save time designing your pages. They’ve put a lot of effort into creating the best user experience for search pagination.

Pagination guidelines

Here’s a sample of the Design Library’s ideas for search pagination.

  • Display the navigation controls as a row of links.
  • Present links in the following order: ‘Prev’, page links, ‘Next’.
  • Display a left arrow after the label ‘Prev’.
  • Display a right arrow before the label ‘Next’.
  • Make the arrow(s) clickable.
  • The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.
  • When on pages 1-6, the page links should always start at ‘1’.

Search Pagination

The rationale for these rules is also interesting:

  • Displaying arrow graphics helps differentiate the links and provides larger click targets.
  • Disabled controls add little value in this context since
    • These links often appear blow the fold.
    • The first page of results makes up the vast majority of pageviews. Displaying a disabled “previous” control on all of these is of little added value.
    • Although a “First” link has value, it competes with the functionality presented in the random-access links.
    • The “Last” link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.

Add this pagination style to your search engine

See the final result on V3GGIE.com: Vegetarian Enchiladas Recipes

Most PHP pagination tutorials assume you are pulling content from a database. Ascanio Colonna created a good tutorial on building pagination with PHP that is agnostic to the data source. I’ve taken his code and modified it to match the Yahoo Design Pattern. I’ve also added the suggested YUI Module markup to stay consistent with the YUI Grids and any future YUI javascript.

The pagination.php file includes a function that creates the module. You’ll need to call this function from your results page with a series of parameters. These are easy to populate from the BOSS interface. It’s worth noting that I am ignoring the BOSS next/last page nodes in the web service and prefer to build my own urls.

The Pagination Code

Lets’ start by looking at the code inside your results.php file. This will call the pagination function and pass the desired parameters.

if(!empty($searchQuery))
  {
	require '/include/pagination.php';
  if(isset($_REQUEST['page'])) {
	$page = $_REQUEST['page'];
	} else  {
	$page = '1';
	}
	$limit = $count;
	$targetpage = 'results.php';
	$pagestring = '?page=';
	$summary_name = 'articles';
	$placement = 'summary';
	// start pagination
	  echo getPaginationString($page, $totalhits, $limit,  $targetpage, $pagestring, $summary_name, $placement);
 }

Here’s what you are working with:

require ‘/include/pagination.php’
Where does the pagination file sit on your server
$page logic
First look to see if there is page=x in the url. If so, $page = x, if not, you are on page 1.
$limit
How many results will appear on the page
$targetpage
what is the name of your results page? index.php, results.php?
$pagestring
I tried to minimize this to ?p= but couldn’t track down why it didn’t work. I’ve left it at the default ?page=…
$summary_name
This is what appears in the text “xxx (summary_name) results. This is not used in the Yahoo Design Library
$placement
You’ll probably want to use summary. This function also allows “footer” for a simplified output
echo getPaginationString(…)
Send the information to the function and display the results in the page.

Important Update!

The original code I posted had a serious security flaw. You should never output user’s input directly into your page. I had something like this href=”?query=$_REQUEST[‘query’]”. This allows all sorts of Cross Site Scripting attacks. You must urlencode any text that comes from a user. This is safe: urlencode($_REQUEST[‘query’]).

I apologize if anyone has used this code, as I wrote it on their site. They should immediately update the logic. -Ted


The pagination function

I have streamlined the original code from Asconio, as he was tying into pre-existing facebook styles. This code is for your unique web site. It’s also worth noting I use rewrite rules to make my search result page urls more friendly, i.e. /corn.html instead of /result.php?q=corn

$string_results_page

"; if($lastpage > 1) // Paginator page selection is drawn only if more than 1 pages are there { $pagination .= '
    '; // First page selector if ($page > 2) // Previous page selector if ($page > 1) $pagination .= "
  • $string_next
  • "; // Page selectors if ($page < 4) //not enough pages to bother { for ($counter = 1; $counter <= min(5, $lastpage); $counter++) { if ($counter == $page) $pagination .= "
  • $counter
  • "; else $pagination .= "
  • $counter
  • "; } } elseif ($page > $lastpage - 3) { for($counter = $lastpage - min(5, $lastpage); $counter <= $lastpage; $counter++) { if ($counter == $page) $pagination .= "
  • $counter
  • "; else $pagination .= "
  • $counter
  • "; } } else { for($counter = $page - 2; $counter <= $page + 2; $counter++) { if ($counter == $page) $pagination .= "
  • $counter
  • "; else $pagination .= "
  • $counter
  • "; } } //next button if ($page < $lastpage) $pagination .= "
  • $string_next
  • "; //last button if ($page < $lastpage - 1) $pagination .= '
'; } $pagination = ""; return $pagination; } ?> $string_try_inx"; } $trydiff=''; switch ($tid){ case "rc": $trydiff = "
  • $string_try_diff_type $string_local_tab or $string_buzz_tab"; break; case "lo": $trydiff = "
  • $string_try_diff_type $string_recipes_tab or $string_buzz_tab"; break; default: $trydiff = "
  • $string_try_diff_type $string_recipes_tab or $string_local_tab"; } ?>

    I’ve added a few classes to the final output. The previous and next links have class”nextlink” or class=”prevlink”. The current page has the number within a strong tag with class=”current”. Finally, the parent module has class=”pagelinks mod”. This makes it pretty simple to style

    Pagination CSS

    I’m using the YUI Sam Skin sprite for the tabbed search box. I’ve added a couple arrows to this sprite for my search pagination.

    .pagelinks {
    text-align:center;
    border:1px solid #ccc;
    padding:5px 0 0 0;
    }
    .pagelinks ul li {
    display:inline;
    }
    .pagelinks ul a, .pagelinks ul strong {
    display;block; padding:3px 5px;
    }
    .pagelinks ul strong {
    background-color:green; color:#fff;
    }
    .pagelinks li.nextlink a,.pagelinks li.prevlink a  {
    padding-right:15px; font-size:120%; font-wieght:bold; background:url(/images/sprite.png) no-repeat 100% -1943px;
    }
    .pagelinks li.prevlink a {
    padding-right:0px; padding-left:15px; background-position:0 -1973px;
    }
    

    I am also not a PHP expert and welcome suggestions on improving the code.

    Download files

    Related articles by Zemanta