diff --git a/site-classic/templates/styles/main.css b/site-classic/templates/styles/main.css index 50830236..827af5a1 100644 --- a/site-classic/templates/styles/main.css +++ b/site-classic/templates/styles/main.css @@ -502,3 +502,43 @@ body, input, textarea, table { z-index: 9999; } +/** + * Accessibility helpers + * + */ + +/* Hide visually, but remain approachable for screenreader */ + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + 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: 20; + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + background: #DD0074; + color: #fff; +} + diff --git a/site-default/templates/_main.php b/site-default/templates/_main.php index dcc52606..c156e5de 100644 --- a/site-default/templates/_main.php +++ b/site-default/templates/_main.php @@ -41,8 +41,10 @@ "> + Skip to content + -
    and($homepage->children) as $item) { if($item->id == $page->rootParent->id) { @@ -59,12 +61,13 @@ - -
    +
    @@ -83,12 +86,12 @@ - + -
    +