a11y-examples/css/shared/a11y.css

A repo that contains examples to help devs comply with WCAG 2.0.

/*********************************************************
 * a11y.css - a stylesheet to help create 
 * accessible websites.
 * 
 * by Zoltan Hawryluk (zoltan.dulac@gmail.com)
 * Licensed under the MIT License
 * 
 * https://opensource.org/licenses/MIT
 ********************************************************/
 
 /*
 * Class for elements that are only visible to the screen reader. From
 * https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
 */
.visually-hidden {
	clip: rect(1px 1px 1px 1px); /* IE 6/7 */
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	margin: -1px;
}

/*
 * For `.visually-hidden` elements that should be visible when it gains focus. 
 */
.visible-when-focused:focus {
	clip: auto;
	height: auto;
	overflow: visible;
	position: static;
	white-space: normal;
	width: auto;
	margin: auto;
}

/*
 * Style for "Skip Navigation" type links.  Should have an href linked to 
 * a `.ally-target` element.
 */
.bypass-block-link:focus {
	position: absolute;
	text-decoration: none;
	background: #ffffcc;
	padding: 0.2em;
	z-index: 10;
}

/*
 * We don't want the `.bypass-block-target` to have an outline on *just* focus,
 * since this will look strange if regular users click inside this element,
 * since it will look like it was tabbed into
 */
.bypass-block-target:focus {
	outline: none;
}

/*
 * We do, however, want the `.bypass-block-target` to have an outline when
 * it has focus and it is the target of the document (i.e. the hash tag of the
 * document URL is the same as the "Skip Nav" link).
 * 
 * Note that this style is the same as the focus state on all the tabbable 
 * elements.  It doesn't have to be.  WCAG 2.4.7 – Focus Visible (Level AA) 
 * only requires that the focus state is visible, so you can have, say, the 
 * focus state of a button different than that of a form element. 
 */
.bypass-block-target:focus:target,
a[href]:not([tabindex="-1"]):focus,
area:not([tabindex="-1"]):focus,
[role="button"]:not([tabindex="-1"]):focus,
[role="link"]:not([tabindex="-1"]):focus,
iframe:not([tabindex="-1"]):focus,
[contentEditable=true]:not([tabindex="-1"]):focus,
:enabled:not([tabindex="-1"]):focus,
[tabindex]:not([tabindex="-1"]):focus {
	/* You can replace this with whatever style you want for focus state */
	outline: solid 2px rgba(255, 165, 0, 1);
}

/*
 * The above selector will match focusable elements when they are clicked
 * with a mouse.  If you don't want that to happen, use this rule. 
 */
a[href]:not([tabindex="-1"]):hover:focus,
area:not([tabindex="-1"]):hover:focus,
[role="button"]:not([tabindex="-1"]):hover:focus,
[role="link"]:not([tabindex="-1"]):hover:focus,
iframe:not([tabindex="-1"]):hover:focus,
[contentEditable=true]:not([tabindex="-1"]):hover:focus,
:enabled:not([tabindex="-1"]):hover:focus,
[tabindex]:not([tabindex="-1"]):hover:focus {
	outline: solid 2px rgba(255, 165, 0, 0.5);
}

a[href]:not([tabindex="-1"]):focus:active,
area:not([tabindex="-1"]):focus:active,
[role="button"]:not([tabindex="-1"]):focus:active,
[role="link"]:not([tabindex="-1"]):focus:active,
iframe:not([tabindex="-1"]):focus:active,
[contentEditable=true]:not([tabindex="-1"]):focus:active,
:enabled:not([tabindex="-1"]):focus:active,
[tabindex]:not([tabindex="-1"]):focus:active {
	outline: none;
}

*:focus {
	outline: solid 2px orange ;
}

/*
 * Placeholder text should mmet WCAG requirement 1.4.3: Contrast (Minimum) 
 * Level AA
 * 
 * From https://www.w3.org/WAI/tutorials/forms/instructions/
 */

.placeholder-removed {
	opacity: 0.999;
}

[placeholder] {	
	background-color: #fff;
	border: solid 1px #777;
}

::-webkit-input-placeholder {
	 color: #777;
	 opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
	 color: #777;
	 opacity: 1;
}

::-moz-placeholder {  /* Firefox 19+ */
	 color: #777;
	 opacity: 1;
}

:-ms-input-placeholder {
	 color: #777;
	 opacity: 1;
}