diff --git a/site-classic/templates/styles/main.css b/site-classic/templates/styles/main.css index 50830236..947c15fd 100644 --- a/site-classic/templates/styles/main.css +++ b/site-classic/templates/styles/main.css @@ -502,3 +502,45 @@ body, input, textarea, table { z-index: 9999; } +/********************************************************************* + * 6. Accessibility helpers + * + */ + +/* Hide visually, but remain approachable for screenreader */ + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + white-space: nowrap; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + border: 0; +} + +/* Show bypass link on hover */ + +.element-focusable:focus { + clip: auto; + overflow: visible; + height: auto; +} + +/* Sample styling for bypass link */ + +.bypass-to-main:focus { + top: 0; + left: 0; + z-index: 10; + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + background: #333; + color: #fff; +} + + diff --git a/site-default/templates/_main.php b/site-default/templates/_main.php index dcc52606..f24e7f72 100644 --- a/site-default/templates/_main.php +++ b/site-default/templates/_main.php @@ -41,12 +41,14 @@ "> + + -
    and($homepage->children) as $item) { if($item->id == $page->rootParent->id) { - echo "
  • "; + echo "
  • "; } else { echo "
  • "; } @@ -59,12 +61,13 @@
    url; ?>' method='get'> - ' /> - + + ' /> +
    -
    parents() as $item) { echo "$item->title "; @@ -83,9 +86,9 @@ - +
    diff --git a/site-default/templates/styles/main.css b/site-default/templates/styles/main.css index 366ed5eb..2cb2f3ec 100644 --- a/site-default/templates/styles/main.css +++ b/site-default/templates/styles/main.css @@ -6,6 +6,7 @@ * 3. Main content and sidebar * 4. Footer * 5. Media queries for responsive layout + * 6. Accessibility helpers * */ @@ -124,9 +125,6 @@ form.search { border: 1px solid #ccc; width: 100%; } - form.search button { - display: none; - } .breadcrumbs { clear: both; @@ -297,3 +295,42 @@ figure figcaption { font-size: 115%; } } +/********************************************************************* + * 6. Accessibility helpers + * + */ + +/* Hide visually, but remain approachable for screenreader */ + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + white-space: nowrap; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + border: 0; +} + +/* Show bypass link on hover */ + +.element-focusable:focus { + clip: auto; + overflow: visible; + height: auto; +} + +/* Sample styling for bypass link */ + +.bypass-to-main:focus { + top: 0; + left: 0; + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + background: #333; + color: #fff; +} diff --git a/site-languages/templates/_main.php b/site-languages/templates/_main.php index fee4b889..d8376e42 100644 --- a/site-languages/templates/_main.php +++ b/site-languages/templates/_main.php @@ -60,8 +60,10 @@ "> + + -
      viewable($language)) continue; // is page viewable in this language? if($language->id == $user->language->id) { @@ -76,11 +78,11 @@ ?>
    -
      and($homepage->children) as $item) { if($item->id == $page->rootParent->id) { - echo "
    • "; + echo "
    • "; } else { echo "
    • "; } @@ -92,7 +94,7 @@ ?>
    -
    '>parents() as $item) { echo "$item->title "; @@ -103,12 +105,13 @@
    url; ?>' method='get'> - ' /> - + + ' /> +
    -
    +
    @@ -121,15 +124,15 @@ - + -
    +