ChromaTherapyLight

Guidelines for guest Editors - Color and Light Education

TAB key is used for keyboard navigation.
For WCAG Usability Checklist view this PDF.

WCAG 2.0 Checklist
 
Perceivable
Web content is made available to the senses - sight, hearing, and/or touch
 
Guideline 1.1
Text Alternatives: Provide text alternatives for any non-text content
Success
Criteria Recommendations
1.1.1 Nontext
Content
(Level A)
 All images, form image buttons, and image map hot spots have appropriate, equivalent
alternative text.  
 Images that do not convey content, are decorative, or with content that is already conveyed in
text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images
have descriptive alternative text.  
 Equivalent alternatives to complex images are provided in context or on a separate (linked
and/or referenced via longdesc) page.  
 Form buttons have a descriptive value.  
 Form inputs have associated text labels.  
 Embedded multimedia is identified via accessible text.  
 Frames are appropriately titled.  
 
Guideline 1.2
Time-based Media: Provide alternatives for time-based media
NOTE: If the audio or video is designated as an alternative to web content (e.g., an audio or sign language version of
a web page, for example), then the web content itself serves as the alternative.
Success Criteria Recommendations
1.2.1 Prerecorded Audioonly
and Video-only
(Level A)
 A descriptive text transcript (including all relevant visual and auditory
clues and indicators) is provided for non-live, web-based audio (audio
podcasts, MP3 files, etc.).  
 A text or audio description is provided for non-live, web-based video-only
(e.g., video that has no audio track).  
1.2.2 Captions (Prerecorded)
(Level A)
 Synchronized captions are provided for non-live, web-based video
(YouTube videos, etc.)  
1.2.3 Audio Description or
Media Alternative
(Prerecorded)
(Level A)
 A descriptive text transcript OR audio description audio track is provided
for non-live, web-based video  
1.2.4 Captions (Live)
(Level AA)
 Synchronized captions are provided for all live multimedia that contains
audio (audio-only broadcasts, web casts, video conferences, Flash
animations, etc.)  
1.2.5 Audio Description
(Prerecorded)
(Level AA)
 Audio descriptions are provided for all video content
NOTE: Only required if the video conveys content visually that is not
available in the default audio track.  
1.2.6 Sign Language
(Prerecorded)
(Level AAA)
 A sign language video is provided for all media content that contains
audio.  
1.2.7 Extended Audio
Description (Prerecorded)
(Level AAA)
 When an audio description track cannot be added to video due to audio
timing (e.g., no pauses in the audio), an alternative version of the video
with pauses that allow audio descriptions is provided. 

Please submit your copy following these guidelines.

• ChromaTherapyLight will upload your topic pages into the website.
• All formatting will match the existing website.
• Photos size and descriptive Alt Text should follow these guidelines.
  

Learning Objectives - on each topic page

Place three or four learning objectives at the top of each topic page.

• State the question -  encourage reading further, do not provide the answer
• Use bullets instead of enumerated list.
• Match language in Topic Headers
• Include Photo Descriptions in the  'Alt Text'

---

Page length

• Maximum two pages.
• If you need more space, create another topic.

---

Add Embedded links

• When the topic is too long, or needs more detail, click through to more specific topic page.
• "Open new tab" with click through on embedded text when leaving ChromaTherapyLight.com
• Do not click 'Open in new window' to links in LEARN MORE at the bottom of the page.
  

---

Divider lines

Decide where subject breaks occur and use 'divider line.'

---

Square Topic Labels

Size 700 x 700 + Image Size 700 x 500 (Example Above)
Background for topic titles

• cccccc 204-204-204 = Grey 80
• http://www.color-hex.com/color/cccccc

Font -

• 60 pt Ariel topic
• 30 pt Ariel Description
• Save as 'Click topic name'

---

---

Photos for ChromaTherapyLight

Picture Size and Background Color

Photo size

• Horizontal 700 x 500 (preferred formatting)
  
• Vertical 500 x 700 (only if necessary)
  

Photo description is the Alt Text

• Alt text is required for the visually impaired, those who cannot see the image, technology is available that will read the 'alt text' to the visitor.  In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.  Although not required on this website, it is standard practice for good web design.
• Search engines will use 'alt text' for photo identification.
• Pinterest will use 'alt text' for the description
• include in the 'alt text'  - Page Title + Description of photo + www.ChromaTherapyLight.com at the end
  

Web Accessibility - Developing with Empathy

TAB key is used for keyboard navigation.
For WCAG Usability Checklist view this PDF.

For a detailed lesson on accessibility, visit Udacity free courses including this one: Web Accessibility
Developing with Empathy
Making a page work properly with screen readers, and managing input focus ... enable navigating the interface with a range of assistive devices. Finally, you’ll learn styling techniques that help users with partial vision navigate your pages easily and reliably.
Some statistics on disability for the US:

• Around 2% of the population has some kind of vision disability (i.e. are blind or have significant difficulty seeing even with glasses)
• Around 50% of the population has some kind of clinically significant refractive error (a visual impairment which may be corrected with glasses if mild enough)
• Around 8% of males and 0.5% of females have some form of color vision deficiency
• Around 2% of adults have a hearing disability
• Over 4% have a cognitive disability (difficulty remembering, concentrating, or making decisions) [3]

https://www.udacity.com/course/web-accessibility--ud891

---

Footnotes

1. Footnotes on this website are shown as a number following the text surrounded brackets, like this [1]
2. Link to each quoted source should be listed on each page - in this footnote section at the bottom.
   
3. https://www.udacity.com/course/web-accessibility--ud891
   

Photo Credits

1. All Photos should be credited with links to photographer when available.
   

---

Learn More

Contact, Social Media