DougCrossDesign

Web Accessibility - Accordions
------------------------------

An example of web accessible HTML accordions using Aria attributes aria-controls and aria-expanded and the panel id to allow javascript to handle the active and inactive accordion panels.

A [Pen](https://codepen.io/DougCrossDesign/pen/dVxMaj) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).

[License](https://codepen.io/DougCrossDesign/pen/dVxMaj/license).

DougCrossDesign

Web Accessibility - Tabs
------------------------
An example of how to use tabbed organizational elements in HTML for web accessibility. Using Aria attributes such as controls, roles, labels, labelledby and sellected to identify states process by Javascript. Including keyboard triggers for helping native navigation using arrow keys.

A [Pen](https://codepen.io/DougCrossDesign/pen/GMVWdv) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).

[License](https://codepen.io/DougCrossDesign/pen/GMVWdv/license).

DougCrossDesign

Javascript Concrete Calculator
-------------------
Javascript built form based calculator for estimating the needed material for contractors to purchase and lay concrete at a project site.
Created for client site intended as a conversation starter for potential customers to the business and educational for budgeting purposes.

A [Pen](https://codepen.io/DougCrossDesign/pen/LkoJpR) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).

[License](https://codepen.io/DougCrossDesign/pen/LkoJpR/license).

DougCrossDesign

Web Accessibility - Form Structure
------------------------
An example of a proper web accessible form structure using necessary HTML form elements such as role attrtibutes, Aria labels field sets, legends, labels, inputs, radio buttons and checkboxes and submits. As well as javascript handles error messages and required elements. 

A [Pen](https://codepen.io/DougCrossDesign/pen/gXYMZp) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).

[License](https://codepen.io/DougCrossDesign/pen/gXYMZp/license).

DougCrossDesign

Web Accessibility - Skip Links
------------------------------
Example of how to use Skip Links for Web Accessibility using focused and non-focused state on text links at top of the page to direct users into areas of a HTML structure section quickly without having to navigation through other confused content.

A [Pen](https://codepen.io/DougCrossDesign/pen/xPKEeG) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).

[License](https://codepen.io/DougCrossDesign/pen/xPKEeG/license).

DougCrossDesign

Accessibility Panel - JS Controls
---------------------------------
Converted Wordpress Plugin Example of an Accessibility Panel made with Javascript to control visual design of a HTML / CSS for users with visual disabilities to explore the content. This example is scalable for any layout based on which targets are bing using for the containers, text and link variables.

A [Pen](https://codepen.io/DougCrossDesign/pen/RjyaYZ) by [Doug Cross](https://codepen.io/DougCrossDesign) on [CodePen](https://codepen.io).

[License](https://codepen.io/DougCrossDesign/pen/RjyaYZ/license).