Dennis Lembree weboverhauls

Perceivable

Text Alternatives

Non-text Content

Time-based Media

Audio-only and Video-only (Prerecorded)
Captions (Prerecorded)

Improved .sr-only

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

MySQL

Getting started

Fixing your skip links.

Read Damon Muma on this. He proposes the following jQuery solution (inspired by Thompson, fixed by me):

// Apply focus properly when accessing internal links with keyboard in WebKit browsers.
$("a[href^='#']").not("a[href='#']").click(function() {
   $("#"+$(this).attr("href").slice(1)+"").focus();
});

	<nav class="breadcrumb" aria-label="breadcrumb">
	<ol>
	<li>
	<a href="/">Index</a>
	</li>
	<li>
	<a href="#">Sub Page</a>
	</li>
	<li>
	<a href="#" aria-current="page">Current Sub Page</a>

	<p class="tweetthis">
	<a href="http://twitter.com/share?url=<?php urlencode(the_permalink());?>&text=<?php echo ( get_the_title());?>&via=codepo8"
	target="blank">
	<svg class="svg-icon" viewBox="0 0 20 20">
	<path fill="none" d="M14.467,6.707c-0.34,0.198-0.715,0.342-1.115,0.419c-0.318-0.335-0.775-0.545-1.279-0.545c-0.969,0-1.754,0.773-1.754,1.727c0,0.135,0.015,0.267,0.045,0.394C8.905,8.628,7.612,7.94,6.747,6.896C6.596,7.151,6.509,7.448,6.509,7.764c0,0.599,0.31,1.128,0.78,1.438C7.002,9.192,6.732,9.115,6.495,8.985c0,0.007,0,0.014,0,0.021c0,0.837,0.605,1.535,1.408,1.694c-0.147,0.04-0.302,0.06-0.462,0.06c-0.113,0-0.223-0.011-0.33-0.031c0.223,0.687,0.871,1.186,1.638,1.199c-0.6,0.464-1.356,0.739-2.179,0.739c-0.142,0-0.281-0.007-0.418-0.023c0.777,0.489,1.699,0.775,2.689,0.775c3.228,0,4.991-2.63,4.991-4.913c0-0.075-0.002-0.149-0.004-0.223c0.342-0.244,0.639-0.547,0.875-0.894c-0.316,0.137-0.652,0.23-1.008,0.272C14.057,7.448,14.336,7.11,14.467,6.707 M10,0.594c-5.195,0-9.406,4.211-9.406,9.406c0,5.195

	var tabbableElements = 'a[href], area[href], input:not([disabled]),' +
	'select:not([disabled]), textarea:not([disabled]),' +
	'button:not([disabled]), iframe, object, embed, *[tabindex],' +
	'*[contenteditable]';

	var keepFocus = function (context) {
	var allTabbableElements = context.querySelectorAll(tabbableElements);
	var firstTabbableElement = allTabbableElements[0];
	var lastTabbableElement = allTabbableElements[allTabbableElements.length - 1];

	CULTURE SPEC.CULTURE ENGLISH NAME
	--------------------------------------------------------------
	Invariant Language (Invariant Country)
	af af-ZA Afrikaans
	af-ZA af-ZA Afrikaans (South Africa)
	ar ar-SA Arabic
	ar-AE ar-AE Arabic (U.A.E.)
	ar-BH ar-BH Arabic (Bahrain)
	ar-DZ ar-DZ Arabic (Algeria)
	ar-EG ar-EG Arabic (Egypt)