/* * home-wcag.css * Accessibility (WCAG 2.2 AA) drop-in for the Tiki-Toki home page (home.html and home-logged-in.html). * Pairs with home-wcag.js. Load AFTER standard-page.css: * * * Same browser target as the JS: no custom properties, no :focus-visible. * Colours are the nearest that pass 4.5:1; each rule says what it fixes. * The first part (SHARED PART) is the same in all three CSS files. * * TO REMOVE: delete the tag above. */ /* ===================================================================== * SHARED PART (the same in home-wcag.css, account-wcag.css and * faqs-wcag.css) * =================================================================== */ /* Text only screen readers hear. */ .tsw-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Skip link (2.4.1): off screen until it gets focus. */ .tsw-skip { position: absolute; left: -10000px; top: 10px; z-index: 100000; padding: 10px 15px; background: #ffbf47; color: #0b0c0c !important; font-size: 16px; font-weight: bold; text-decoration: underline; } .tsw-skip:focus { left: 10px; } /* Focus (2.4.7): a bright amber ring around a thin near-black one, so it shows on the dark page, the white pop-downs and the grey buttons alike. Keyboard users only ("tsw-keyboard" on once Tab is pressed). */ .tsw-keyboard a:focus, .tsw-keyboard button:focus, .tsw-keyboard input:focus, .tsw-keyboard select:focus, .tsw-keyboard textarea:focus, .tsw-keyboard iframe:focus, .tsw-keyboard [tabindex]:focus, .tsw-keyboard [role="button"]:focus, .tsw-keyboard [role="checkbox"]:focus { outline: 3px solid #ffbf47 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #0b0c0c !important; } /* Headings and panels focus is moved to (so the reader starts there) are not controls; they get no ring. */ .tsw-keyboard .tsw-script-focus:focus, .tsw-script-focus:focus, #tsw-main:focus { outline: none !important; box-shadow: none !important; } /* Grey text (1.4.3): #818181 on the page's #1a1a1a was 4.46:1, now #8e8e8e at 5.3:1 (4.9:1 on the #212121 rows). Same look, a shade lighter. "body" makes these win over the page's own rules. */ body .tlsp-hp-content-block .tlsp-hpc-intro, body .tlsp-hp-content-block .tlsp-hpc-intro a, body .tlsp-hpc-text-points li p, body .tlsp-hpc-extra-info, body .tlsp-admin-content-block .tlsp-field label, body .tlsp-admin-content-block .rt-mp-checkbox, body .tlsp-admin-content-block .rt-mp-checkbox a, body .tlsp-admin-content-block .tlsp-acb-account-details, body .tlsp-terms-and-conditions-content p, body .tlsp-bc-text p, body .tlsp-bc-text h2.tlsp-bc-standfirst, body .tlsp-b-content-secondary .tlsp-bc-text p, body .tlsp-cb-title, body .tlsp-cb-content p, body .tlsp-admin-list-item .tlsp-ali-title, body .tlsp-admin-list-item .tlsp-ali-controls { color: #8e8e8e; } /* Hints inside labels ("If you have been given a class code"): #595959 was 3:1 on black. */ body .tlsp-admin-content-block .tlsp-field label span, body label[for="tlsp-class-code"] span { color: #8e8e8e; } /* Footer (1.4.3): #595959 on #1a1a1a was 2.5:1, now 6.1:1. */ .tlsp-footer .tlsp-copyright, .tlsp-footer .tlsp-copyright a, .tlsp-footer ul li, .tlsp-footer ul a { color: #999; } .tlsp-footer .tlsp-copyright a:hover, .tlsp-footer ul a:hover { color: #ddd; } /* Field errors (3.3.1): shown under the field they belong to, and kept until the field is changed. */ .tsw-field-error { display: block; clear: both; padding: 4px 0 0 5px; color: #f395bf; font-size: 14px; line-height: 18px; text-align: left; } .ajk-pop-down-panel .tsw-field-error { color: #b0004c; font-size: 12px; line-height: 15px; padding: 3px 0 0 0; } /* The form's single message line repeated the first error and covered the help text; with errors shown at each field it's hidden. */ .tsw-has-error .ajk-verifier-tooltip-displayer { display: none !important; } /* Field help under the forms: #595959 was 2.5:1. */ .verification-messages p.ajk-verifier-tooltip-displayer, .tlsp-admin-content-block .verification-messages p.ajk-verifier-tooltip-displayer { color: #999; } /* Log in pop-down close: 9x8 -> 24x24 (2.5.8). A transparent border grows the hit area; the icon stays where it was. */ .ajk-pop-down-panel .content a.close { border: solid transparent; border-width: 8px 7px 8px 8px; -webkit-background-clip: padding-box; background-clip: padding-box; top: -3px; right: 2px; } .ajk-pop-down-panel .fp-block a.close { right: -7px !important; } /* Links inside text (1.4.1): underlined, not only lighter. */ .tlsp-cb-content p a, .tl-promotions-panel .tl-pp-message a, .tl-promotions-panel .tl-pp-message-sub a { text-decoration: underline; } /* Upgrade lightbox: the email link was white bold in white text (1.4.1). */ .tlsp-upgrade-lightbox .tlsp-u-alternatives a { text-decoration: underline; } /* "I agree" box: with the keyboard on it, it shows the lighter cross the mouse gets on hover; once ticked it keeps the white cross. */ .tsw-keyboard .tlsp-admin-content-block .rt-mp-checkbox span:focus { background-position: 0 -25px; } .tsw-keyboard .tlsp-admin-content-block .rt-mp-checkbox span.checkbox-selected:focus { background-position: 0 -50px; } /* ===================================================================== * HOME PAGE PART * =================================================================== */ /* Contrast: see the shared part. */ /* Links inside text (1.4.1): "Sign up for free" and the like were only a shade lighter than the text around them. */ body .tlsp-bc-text p a, body .tlsp-b-content-secondary .tlsp-bc-text p a, body .tlsp-hpc-intro a { text-decoration: underline; } /* Focus (2.4.7): the big timeline pictures are links around a block image, so the link itself had no box for the ring to go round. */ .tlsp-bc-image > a[embedUrl], .tlsp-bc-image > a:first-child { display: block; }