carries tabindex="-1" purely as the skip-link target; focusing it programmatically must not ring the whole page. */ main#primary:focus, main#primary:focus-visible { outline: 0; box-shadow: none; } /* ========================================================================== 2.4.1 Bypass Blocks No page had a skip link. Every page opens with the site title and a seven-item nav, so keyboard users hit eight stops before the content. The link is the first child of . ========================================================================== */ #skipnav { position: absolute; left: -9999px; top: 0; z-index: 10000; } #skipnav:focus { left: 0; width: auto; height: auto; padding: .5em 1em; background-color: #ffffff; color: #1b1715; /* 17.80:1 */ text-decoration: underline; outline: 3px solid #ffe000; box-shadow: 0 0 0 6px #1c1c1c; } /* Used by the skip link's own text and by the map page's heading. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 1.4.3 Contrast -- the header over the background photograph #home and body carry themes/.../images/FoggyWoods_sepia.jpg, and the site title and the whole navigation sit directly on it: `.tinted-image`, the class the theme puts on the title's column, has no CSS anywhere in the archive, so nothing was ever tinted. Measured in a browser at 1280px, sampling the actual pixels behind the text with the text hidden, the darkest tree trunk under the nav strip is rgb(193,179,166): resting nav link #a10010 4.07:1 FAIL (19.2px, so normal text) nav link hover #7a6d6d 2.42:1 FAIL site title #484c66 4.10:1 passes only as large text (72px) A colour tweak cannot fix the hover case -- #7a6d6d does not reach 4.5:1 against that photo even under an 80%-white scrim -- so two things happen here. app.css's own `.top-bar li a:hover { color: #49030B }` is restored (the theme's blanket `a:hover ... !important` was overriding it), which takes hover to 6.65:1 or better on any pixel of the photo; and a white scrim goes behind the header block, which takes the resting link to 6.40:1 and the title to 6.46:1 and, unlike a colour tweak, keeps holding if the photo is ever re-cropped or replaced. 0.6 alpha is the lightest scrim that clears 4.5:1 for the resting link with margin; the commented-out `rgba(64,79,60,.5)` at the top of app.css shows the theme's author had considered the same idea. ========================================================================== */ .tinted-image, #ap_trail_navigation { background-color: rgba(255, 255, 255, 0.6); } /* Beats app.css's `a:hover { color: #7a6d6d !important }` for nav links only; body copy on white keeps the theme's hover colour, which passes there (4.96:1). :focus is included so the keyboard sees what the mouse sees. */ .top-bar li a:hover, .top-bar li a:focus { color: #49030B !important; /* >= 6.65:1 on any pixel of the photo */ } /* app.css sets `#secondary-nav { color: #ffffff }`. Every child is a link with its own colour today, so nothing visible fails -- but white on the white #primary panel is a trap for any text added later. */ #secondary-nav { color: inherit; } /* ========================================================================== 1.4.3 Contrast -- inside headings foundation.css:1312-1317 sets `h1 small ... { color: #cacaca }`, which is 1.63:1 on the white content panel. It is the item count every browse page prints -- `

Browse Items (76 items total)

` -- so this failed on all 74 of them. At 38.4px it is large text and needs 3:1; #58443f is the colour app.css already uses for h4/h5. ========================================================================== */ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: #58443f; /* 9.08:1 */ } /* ========================================================================== 1.4.1 Use of Color -- links inside prose Foundation removes link underlines, and app.css colours links #9c4d23. That is 6.00:1 against the white panel, so 1.4.3 passes -- but only 2.96:1 against the #1b1715 body text around them, under the 3:1 that 1.4.1 requires when colour is the only thing distinguishing a link. With no underline either, every in-text link on the About page, the exhibits and the breadcrumbs failed. Underlining is restored where links sit in running text. Lists of links -- the nav, the pagination, the tag cloud -- are exempt: nothing surrounds them to be confused with, and underlining them would change the design for no accessibility gain. The exemptions come last and carry a class so they out- specify the rules above. ========================================================================== */ #primary p a, #primary li a, #primary td a, #primary dd a, #primary blockquote a, #primary .tags a, #primary .element-text a, #primary #simple-pages-breadcrumbs a { text-decoration: underline; } #primary nav a, #primary .hTagcloud a, #primary .pagination a, #primary .item-thumbnail, #primary .download-file, #primary .exhibit-page-nav a, #primary .exhibit-nav-level-1 a, #primary .exhibit-nav-level-2 a { text-decoration: none; } /* ========================================================================== 2.5.8 Target Size (Minimum) Pagination numbers, the item prev/next links and the tag cloud were plain inline text: 19-22px tall with no padding and, in the tag cloud, wrapping lines that touch. 24x24 CSS pixels is the AA minimum. ========================================================================== */ .pagination a, .pagination button, .pagination .current span { display: inline-block; min-width: 24px; min-height: 24px; padding: 4px 8px; line-height: 1.4; } .item-pagination a { display: inline-block; min-height: 24px; padding: 4px 8px; } .hTagcloud ul.popularity li { display: inline-block; margin: 0 6px 6px 0; } .hTagcloud ul.popularity li a { display: inline-block; min-height: 24px; padding: 4px 6px; } /* ========================================================================== 1.4.10 Reflow No page may scroll horizontally at 320px. Three sources. The interactive map was embedded as a fixed