Red Hound



Validators, Tools, and Reference Links:

Web Worker

MDN article
HTML5 Rocks article
The Blob Scratch Site
Need to check the headers! Where is the REDIRECT coming from?

Layout and Stylesheets

GSS Scratch Site
Apple Auto Layout Guide
HTML layout
Scratch scratch scratch site

Authentication Resources

WordPress OAuth2

JAWS Cheat sheet





Example from JAWS training pages

Link to training page

TV Listings with Both Column and Row Headers

8:00 PM 8:30 PM 9:00 PM 9:30 PM 10:00 PM 10:30 PM
ABC Greys Anatomy Scandal How to Get Away with Murder
CBS The Big Bang Theory Mom Two and a Half Men The McCarthys Elementary
FOX Bones Gracepoint Local Programming
NBC The Biggest Loser Bad Judge A to Z Parenthood

References for Publish Button

Under Construction

Stack Exchange Article

Link to Stack Exchange Article




Canvas Accessibility

Your browser does not support the HTML5 canvas tag.

HTML5 Video Testing

Link to YouTube Test Video One (.avi)

Ordinary Embedded Video

Does the link to the accessibility page work?

كفيف# RTL Search Term Blind

Latest on #a11y

Tutorials from WCAG: Practice Area One

Background information on Labeling Controls
Associating Labels Implicitly (From the article)
Note the structure: the name is inside the input type, not the label itself.
Excerpt from the article follows: Associating labels implicitly
The most basic way to associate labels with form controls is to provide both the label and the form control within the same label element. In the following example, the input element of type text allows users to provide their first name. This input field is embedded inside a labe> element with the text "First name:", to indicate the purpose of the input field to the user:

Tutorials from WCAG: Practice Area Two

Background information on Labeling Controls
Associating Labels Explicitly (From the article)
Note: From a UI perspective, this layout may be better for mobile.
Excerpt from the article follows:
Use the for attribute of the label element to explicitly associate labels with their form controls. The value of the for attribute must exactly match the value of the id attribute for the referenced form element.

Tutorials from WCAG: Continued

Background information on Labeling Controls
Associating Labels Explicitly (Continued)
Excerpt from article on labeling explicitly continues:
This approach is more robust because it explicitly associates the labels with the form elements within the code. It allows the labels and form controls to be displayed separately, for example on a mobile device when only one of the controls can be displayed at a time. It is also independent of the HTML code structure, which is particularly useful when the label text and form element are not included within the same parent element in the HTML code – for example, when the form is designed to look like a table.

Tutorials from WCAG: Continued

Background information on Labeling Controls
Associating Labels Explicitly (Continued)
Excerpt from article on labeling explicitly continues:
Important section on tables.
Code snippet: CSS
#expl_label_form {display:table;}
#expl_label_form>div {display:table-row;}
#expl_label_form>div>div {display:table-cell;}

Bootstrap V.2 Labels

Note 5 January 2015: Bootstrap has been updated. New testing needed.
Default Label Primary Label Success Label Info Label Warning Label Danger Label

Modified Bootstrap Labels

Default Label Class btn-red
Note: All the above buttons color schemes failed color contrast testing in the older version of Bootstrap. Bootstrap takes special note of color contrast as it applies to accessibility in version 3.3.1

Example of layout for Bootstrap V.2

Example of page set up with old bootstrap css

Bootstrap Progress Bar

Source: Bootstrap Progress Bars

40% Complete

Bootstrap Screen-reader only class

Content only available via screenreaders

Fieldset Test
  • Make sure there is a logical, predictable tabbing order that matches the visual order.
  • Focusable elements (links and form controls) need to have obvious visual feedback so users can see where keyboard focus is. Do not use outline:0 in your CSS unless you add an adequate replacement. It’s incredibly frustrating when you get no visual feedback whatsoever.
  • Do not use JavaScript to trap keyboard focus, like in an input field. If you can get in, make sure you can get out.
  • Make sure all functionality and information is accessible without using a mouse. If you open a dialog or lightbox, put keyboard focus in it. If you show information on hover, also display it on focus. If you add click events to random elements that aren’t natively focusable, make them focusable by giving them a tabindex attribute (via scripting).

Boostrap V. 2 Image Handling

a href="#" removed as it did not conform to RFC 1630 which defines the proper construction of URIs. Need to add focus state Head of a pointer dog mix against a slightly dappled gray background.

Test Heading ARIA Level Two

Red Hound Main Page Testing

Test Heading ARIA Level Two