Hugo performance test

content/en/section1/_index.md → content/en/accessibility/_index.md

@@ -1,5 +1,5 @@
 ---
-title: "Section1"
+title: "Accessibility"
 layout: landing
 hero: true
 breadcrumb: true

content/en/accessibility/alternativeversions.md

@@ -0,0 +1,11 @@
+---
+title: Alternative versions
+description: 'How we deal with Alternative Versions'
+old_permalink: /alternative-versions/
+page_title: Alternative versions
+layout: post
+sidenav: docs
+---
+Alternate versions of web pages should only be used when the main page can't be made accessible. There are very few instances where they would be necessary. Live dynamic mapping applications are one example.
+
+In a situation where an alternate version is provided, it must provide the same information and provide similar functions.

content/en/accessibility/assets/css/styles.scss

@@ -0,0 +1,17 @@
+---
+---
+
+tbody th {
+  background: #ffffff;
+  color: #000000;
+  text-align: left;
+  font-weight: normal;
+}
+
+.highlight .m {
+  color: #007B7D;
+}
+
+.highlight .nb {
+  color: #0077A1;
+}

content/en/accessibility/assets/js/flashing.js

@@ -0,0 +1,31 @@
+window.addEventListener('DOMContentLoaded', function () {
+  console.log('foo')
+  var blinking = false,
+    interval,
+    blinkEl = document.getElementsByClassName('blink')[0],
+    blinkBtn = document.getElementById('blinkbutton');
+
+  function toggleBlinking(el) {
+    var display = el.style.display;
+    if (display === 'inline') {
+      el.style.display = 'none';
+    } else {
+      el.style.display = 'inline';
+    }
+  }
+
+  blinkBtn.addEventListener('click', function () {
+    if (!blinking) {
+      blinkBtn.innerText = 'Click to stop blinking'
+      interval = setInterval(function () {
+        toggleBlinking(blinkEl)
+      }, 200);
+      blinking = true;
+    } else {
+      clearInterval(interval);
+      blinkBtn.innerText = 'Click to see non-compliant flashing';
+      blinkEl.style.display = 'none';
+      blinking = false;
+    }
+  })
+});

content/en/accessibility/assets/js/keyboard-access.js

@@ -0,0 +1,20 @@
+window.addEventListener('DOMContentLoaded', function() {
+  var moveFocusLinks = document.getElementsByClassName('moveFocus');
+  var keyboardTrapLinks = document.getElementsByClassName('keyboardTrap');
+
+  function handleFocus() {
+    keyboardTrapLinks[0].focus();
+  }
+
+  Array.from(moveFocusLinks).map(function(el) {
+    el.addEventListener('focus', handleFocus);
+  });
+
+  Array.from(keyboardTrapLinks).map(function(el) {
+    el.addEventListener('click', function() {
+      Array.from(moveFocusLinks).map(function(el) {
+        el.removeEventListener('focus', handleFocus);
+      });
+    });
+  });
+});

content/en/accessibility/assets/js/time-outs.js

@@ -0,0 +1,22 @@
+window.addEventListener('DOMContentLoaded', function () {
+  var timer,
+    pForm = document.getElementById('pForm');
+
+  Array.from(pForm.getElementsByTagName('input')).map(function (el) {
+    el.addEventListener('input', function () {
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      timer = setTimeout(function () {
+        var c = confirm('Would you like more time to complete the form?'),
+          timer
+        if (c == true) {
+          clearTimeout(timer);
+        } else {
+          pForm.reset();
+        }
+      }, 2000);
+    })
+  });
+});

content/en/accessibility/checklist.md

@@ -0,0 +1,59 @@
+---
+title: Checklist
+description: 'A simple checklist for determining if your site is accessible'
+old_permalink: /checklist/
+page_title: checklist
+layout: post
+sidenav: docs
+---
+This checklist helps developers identify potential accessibility issues affecting their websites or applications. It's broken down into three sections of decreasing importance: A, B and C. Please check and address these issues in the order in which they appear.
+
+For more detail on accessibility standards, please see [WCAG2.0 AA](https://www.w3.org/TR/WCAG20/)
+
+ * A - Critical issues that will cause serious problems and/or stop most users of assistive technology from using the site
+ * B - Issues that may cause problems or increased frustration for certain users
+ * C - Minor issues that will cause problems or frustration for a small number of users
+
+It is important to note, while B and C are noted as less critical, they are still required to be truly 508 compliant. This checklist should be used as a reference for development and is not a substitute for compliance checks by a section 508 coordinator.
+
+##  A - Critical
+
+1. <a href='../keyboard/'>Site is keyboard accessible</a>
+ * All interactions can be accessed with a keyboard
+2. <a href='../keyboard/#keyboard-trap'>Site is free of keyboard traps</a>
+ * The keyboard focus is never trapped in a loop
+4. <a href='../forms/'>All `form` inputs have explicit labels</a>
+6. <a href='../images/'>All relevant images use an `img` tag</a>
+5. <a href='../images/'>All images have `alt` attributes</a>
+6. <a href='../multimedia/'>Multimedia is tagged</a>
+ * All multimedia has appropriate captioning and audio description
+7. <a href='../color/'>Text has sufficient color contrast</a>
+ * All text has a contrast ratio of 4.5:1 with the background
+
+## B - Less Critical
+
+1. <a href='../keyboard/'>Site never loses focus</a>
+ * Focus is always visible when moving through the page with the keyboard
+2. <a href='../keyboard/'>Tab order is logical</a>
+3. <a href='../forms/'>Form instructions are associated with inputs</a>
+4. <a href='../timeouts/'>Site doesn't timeout unexpectedly</a>
+ * Identify elements that may "timeout" and verify that the user can request more time
+5. <a href='../tables/'>Tables are coded properly</a>
+ * Tables have proper headers and column attributes
+6. <a href='../headings/'>Headings are nested properly</a>
+ * Heading elements are nested in a logical way
+
+## C - Minor
+1. <a href='../iframes/'>Frames are named</a>
+ * All frames have a name element
+2. <a href='../flashing/'>Flashing elements are compliant</a>
+ * Elements that flash on screen do so at a rate of less than 3 Hz
+3. <a href='../language/'>Language is set</a>
+ * The language for the page is set
+ * The language for sections on the page that differ from the site language are set
+4. <a href='../css/'>CSS is not required to use the page</a>
+ * The page makes sense with or without CSS
+5. <a href='../links/'>Links are unique and contextual</a>
+ * All links can be understood taken alone, e.g., 'Read more - about 508'
+6. <a href='../page-titles/'>Page titles are descriptive</a>
+7. <a href='../plugins/'>Required plugins are linked on the page</a>

content/en/accessibility/color.md

@@ -0,0 +1,84 @@
+---
+title: Color and contrast
+description: 'How we work with color and contrast'
+old_permalink: /color/
+page_title: Color and contrast
+layout: post
+sidenav: docs
+---
+There are two main accessibility concerns for color, contrast and color dependence. Color contrast is the ratio of the foreground color(text) and the background color. Text should have a ratio of 4.5:1 or greater with the background.
+
+Color dependence is the need to see color to understand the information. An example of this would be `The required fields are red.` Some users may not be able to distinguish red from other colors and would lack information to fill out this form.
+
+Links that only rely on color also fail this requirement. Links must be distinguished by more than just color (hue). Links can be distinguished by underlines, symbols, context (in a menu for example), or lightness. If the contrast between the surrounding text and a link is greater than 3:1 it is acceptable. Also note, the link text itself still needs to have a contrast ratio of 4.5:1 or greater with the background. [More information about link color dependence.](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73)
+
+## Testing
+
+### Color contrast
+
+1. Using a [color contrast checker](https://www.tpgi.com/color-contrast-checker//), compare the color of the text with the color of the background.
+2. In situations where the color is a gradient or cannot be determined programmatically, compare the lightest part of the text with the lightest part of the background using the color picker. Then compare the darkest part of the text with the darkest part of the background.
+3. Check that the ratios are greater than [4.5:1][https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#contrast-minimum] (ex 5.3:1 would pass).
+
+**Note:** Run this test for all states of the text (hover, visited, focused). This test should also be performed on images of text.
+
+**Note:** Logos, disabled form fields, and disabled buttons are **exempt** from this test and don't need to be tested for contrast.
+
+### Color dependence
+
+1. Identify sections which use color to convey information.
+2. Check to see if the information is conveyed in another way visually and programmatically.
+3. If links are only distinguished by color surrounded by normal text
+  1. Check if the link has a contrast ratio of 3:1 with the surrounding text
+
+## Examples
+
+### Failures
+
+<span style = "color:#58AA02" class="exampleFailure">This text fails. </span>
+
+> This text fails because it's too light. The contrast ratio is (2.93 : 1).
+
+<span style = "color:#FFFFFF; background:#8D8E90" class="exampleFailure">This text fails.</span>
+
+> This text fails because the background isn't dark enough. The contrast ratio is (3.28 : 1).
+
+<span style="color:#AA0000;">Red text indicates a required field</span>
+
+<label for="name">First Name&nbsp;</label><input type="text" id="name">
+
+<label for="lname" style="color:#AA0000">Last Name&nbsp;</label><input type="text" id="lname">
+
+> This is a failure because the only indication of which fields are required is the color of the text label.
+
+<span><a href="#" style="color:#006061; text-decoration:none; border-bottom-style: none;">I'm a link.</a> I'm just normal text  </span>
+
+> This fails because the contrast ratio between the link and surrounding text is less than 3:1.
+
+### Passes
+
+<span style = "color:#458503">This text passes. </span>
+
+> This text passes. The contrast ratio is (4.56 : 1).
+
+<span style = "color:#FFFFFF; background:#757679">This text passes.</span>
+
+> This text passes. The contrast ratio is (4.54 : 1).
+
+<span style="color:#AA0000;">* indicates a required field</span>
+
+<label for="name-2">First Name&nbsp;</label><input type="text" id="name-2">
+
+<label for="lname-2" style="color:#AA0000">* Last Name&nbsp;</label><input type="text" id="lname-2">
+
+> This example passes because the * and the red text indicates the required field.
+
+<span><a href="#" style="color:#006465; text-decoration:none; border-bottom-style: none;">I'm a link.</a> I'm just normal text  </span>
+
+> This passes because the link and the black text have a contrast(lightness) ratio of 3:1, but we would recommend a greater contrast ratio for links without other visual indicators
+
+<span><a href="#" style="color:#000000; text-decoration:none; border-bottom-style: none;">I'm a link.</a> I'm just normal text  </span>
+
+> This passes because all users see the link as normal text.
+
+[WCAG 2.0 AA]: https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-contrast