Accessiblity and html validation fixes
--- a/common-template.inc.php
+++ b/common-template.inc.php
@@ -3,8 +3,9 @@
{
echo '
<!DOCTYPE html>
-<html>
- <head>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
<title>' . $pageTitle . '</title>';
if ($datepicker) echo '<link rel="stylesheet" href="css/jquery.ui.datepicker.mobile.css" />';
if (isDebugServer()) echo '<link rel="stylesheet" href="css/jquery-mobile-1.0a3.css" />
@@ -44,6 +45,27 @@
body {
background-color: #F0F0F0;
}
+ #jqm-homeheader {
+ text-align: center;
+ }
+
+ // source http://webaim.org/techniques/skipnav/
+ #skip a, #skip a:hover, #skip a:visited
+{
+position:absolute;
+left:0px;
+top:-500px;
+width:1px;
+height:1px;
+overflow:hidden;
+}
+
+#skip a:active, #skip a:focus
+{
+position:static;
+width:auto;
+height:auto;
+}
</style>';
if (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'iPod')) {
echo '<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -77,6 +99,9 @@
}
echo '</head>
<body>
+ <div id="skip">
+ <a href="#maincontent">Skip to content</a>
+ </div>
';
if ($opendiv) {
echo '<div data-role="page">
@@ -89,6 +114,7 @@
<div data-role="header">
<h1>' . $pageTitle . '</h1>
</div><!-- /header -->
+ <a name="maincontent" id="maincontent"></a>
<div data-role="content"> ';
}
}
@@ -117,21 +143,21 @@
}
echo '<div data-role="collapsible" data-collapsed="' . !$geoerror . '">
<h3>Change Time/Place (' . (isset($_SESSION['time']) ? $_SESSION['time'] : "Current Time,") . ' ' . ucwords(service_period()) . ')...</h3>
- <form action="" method="post">
+ <form action="'.basename($_SERVER['PHP_SELF']).'" method="post">
<div class="ui-body">
<div data-role="fieldcontain">
<label for="geolocate"> Current Location: </label>
- <input type="text" id="geolocate" name="geolocate" value="' . (isset($_SESSION['lat']) && isset($_SESSION['lon']) ? $_SESSION['lat'] . "," . $_SESSION['lon'] : "Enter co-ordinates or address here") . '"/> <a href="#" style="display:none" name="here" id="here"/>Here?</a>
+ <input type="text" id="geolocate" name="geolocate" value="' . (isset($_SESSION['lat']) && isset($_SESSION['lon']) ? $_SESSION['lat'] . "," . $_SESSION['lon'] : "Enter co-ordinates or address here") . '"/> <a href="#" style="display:none" name="here" id="here">Here?</a>
</div>
<div data-role="fieldcontain">
<label for="time"> Time: </label>
- <input type="time" name="time" id="time" value="' . (isset($_SESSION['time']) ? $_SESSION['time'] : date("H:i")) . '"/> <a href="#" name="currentTime" id="currentTime"/>Current Time?</a>
+ <input type="time" name="time" id="time" value="' . (isset($_SESSION['time']) ? $_SESSION['time'] : date("H:i")) . '"/> <a href="#" name="currentTime" id="currentTime">Current Time?</a>
</div>
<div data-role="fieldcontain">
<label for="service_period"> Service Period: </label>
- <select name="service_period">';
+ <select name="service_period" id="service_period">';
foreach ($service_periods as $service_period) {
- echo "<option value=\"$service_period\"" . (service_period() === $service_period ? "SELECTED" : "") . '>' . ucwords($service_period) . '</option>';
+ echo "<option value=\"$service_period\"" . (service_period() === $service_period ? " SELECTED" : "") . '>' . ucwords($service_period) . '</option>';
}
echo '</select>
<a href="#" style="display:none" name="currentPeriod" id="currentPeriod"/>Current Period?</a>
--- a/index.php
+++ b/index.php
@@ -5,9 +5,10 @@
<div data-role="page">
<div data-role="content">
<div id="jqm-homeheader">
- <center><h3>busness time</h3><br><small>Canberra Bus Timetables and Trip Planner</small></center>
+ <h1>busness time</h1><br><small>Canberra Bus Timetables and Trip Planner</small>
</div>
- <a href="tripPlanner.php" data-role="button" data-icon="navigation">Launch Trip Planner...</a>
+ <a name="maincontent" id="maincontent"></a>
+ <a href="tripPlanner.php" data-role="button" data-icon="navigation">Launch Trip Planner...</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Timetables - Stops</li>
<li><a href="stopList.php">Major (Timing Point) Stops</a></li>
--- a/stop.php
+++ b/stop.php
@@ -48,7 +48,7 @@
}
include_header($stop[1], "stop");
timePlaceSettings();
-echo '<div data-role="content" class="ui-content" role="main">';
+echo '<div data-role="content" class="ui-content" role="main"> <a name="maincontent" id="maincontent"></a>';
echo $stopLinks;
if (sizeof($stops) > 0) {
echo '<p>' . staticmap($stopPositions) . '</p>';