Cameron Cundiff ckundo

Short answer: Use skip nav links in conjunction with coherent heading outline and ARIA Landmarks, and be aware of browser support.

It can be frustrating and fatiguing for folks with limited mobility to have to have to repeatedly tab through navigation links to get to the main content of a page. People who use screen readers face similar frustration with repetitive content on poorly structured pages. In order to address this issue, WCAG 2.0 has specified a guideline for bypassing blocks of content that are repeated across multiple pages.

A classic approach to fulfilling this requirement has been to include a [skip navigation link][1] at the beginning of the page, that changes focus to the first element after the repeated content.

<body>
  <a href="#main">Skip to main content</a>
  <nav role='navigation'>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd"
	>
	<html>
	<head>
	<title>ETZY!</title>
	</head>
	<body>
	<center><b>Welcome to ETZY!</b><br> A super amazing and heretofore unheard of website for selling artwork online.
	</center>

	class Coned
	BOROS = ["Bronx" "Brooklyn", "Manhattan", "Queens", "Staten Island", "Westchester"]

	def initialize
	@response = HTTParty.get(coned_url_with_directory, :format => :json).parsed_response
	@report = Report.new
	end

	def populate_worksheet
	@report.update_worksheet(worksheet_data)

	var imgs = document.getElementsByClassName('img');
	var jewelz = document.getElementsByClassName('jewelCount');
	var speekz = ['1337', '404', '9001'];

	for(var i = 0; i < imgs.length; i++) {
	imgs[i].src = document.getElementsByClassName('fbxWelcomeBoxImg')[0].src
	}

	for(var i = 0; i < jewelz.length; i++) {
	var jewl = jewelz[i];

	$ corn
	.-'"`/\
	// /' /\`\
	('//.-'/`-.;
	\ \ / /-.
	__.__.___..__._.___.\\ \\----,_
	.:{@&#,&#@&,@&#&&,#&@#&@&\\` \-. .-'-.
	.:{@#@,#@&#,@#&&#,@&#&@&,&@#&&\\, -._,"- \
	.{#@#&@#@#&#&@&#@#@&#,@#@#&@&&#@#\ \// = \`=\__
	`{#@,@#&@&,@&#@,#@&#@#&@#&@,&#@,#/\/ =`-. -_=__

	// <a href="#" id="skip-nav">Skip Navigation</a>
	// <div role='main'>
	// <a href="#">This receives focus on clicking skip nav</a>
	// </div>

	$('#skip-nav').click(function(e) { $("[role='main'] a:first").focus(); e.preventDefault(); })

	(function($) {

	// cache some values
	var cache = {
	idx_expanded : -1, // the index of the current expanded slice
	sliceH : 0, // the default slice's height
	current : 0, // controls the current slider position
	totalSlices : 0 // total number of slices
	},
	aux = {

	<body>
	<a href="#main">Skip to main content</a>
	<nav role='navigation'>
	<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/blog">Blog</a></li>
	</ul>
	</nav>
	<div id="main" role="main">

	task :default do
	Coned.new.populate_worksheet
	end