CECS 470 – Review
Style sheets
o Selectors, class (.), id (#)
o Completely separate from HTML
o Box model (content, padding, border, margin); nested containers
o Use of and -- bridge between HTML and CSS
o Units of measure (pt, px, em, %)
Page layout
o Based on site structure
o Fixed, liquid (%), elastic (ems)
o Text enlargement – CSS vs. tables
Visual principles
o PARC: proximity, alignment, repetition, contrast (R. Williams)
o White space, focal point (TJ)
Section 508
o U.S. law
o All government agencies, many states (CA), federal funding recipients
o Specific guidelines (a)-(p); some technically outdated
WCAG 1.0
o First international guidelines; now somewhat outdated
WCAG 2.0
o Principles: POUR: perceivable, operable, understandable, robust
o Tree structure: principles -> guidelines -> success criteria -> techniques
o Techniques can be updated over time
Color
o Models: light, HSB(HSL), RGB (no more “web safe”), CMYK (print)
o RGB in hex: #000000=black; #ffffff=white; know mixtures
o Luminance: determines color contrast for accessibility
o No information conveyed by color alone
Forms
o
o Control (input) name -> variable name on server side
o All elements must have
o Group controls with , identify fieldset with
o Make sure tab order matches visual/conceptual order to fill in controls
o Use CSS to align controls and labels
Form validation
o Client side vs. server side (good/bad of each): do both
o Include instructions (required, etc.) in
o Don’t over-validate (example: phone numbers)
o Explain error and how to fix; no popups; set focus if possible
o Never make form submission dependent on JavaScript
Tables
o Simple tables (one heading level):
o Complex tables (multi-level headings):
o Always use for table; use summary=”...” with restraint.
o Never use or on layout tables.
o Visual appearance: no heavy or double borders; always use padding
Images
o use exact pixel
dimensions of image
o Alt-text techniques: short description; short + long description in text;
short + long description with link to it.
o Decorative images: alt=””
XML
o Defines semantics; platform-independent for data transfer
o Elements + attributes; based on DTD (pre-defined or your own)
o Tree structure; must have single root element
o Well-structured vs. valid
o Transform with XSL; traverse with XPath; query with XQuery
JavaScript
o JS is an enhancement (unobtrusive), not a reliable functionality
o Keep JS in a separate file
o No browser-specific code: use DOM; if (document.getElementById) {...}
o Check availability before using an object: if (o) {...}
o Keep effects mouse-independent
o Beware of old code libraries on line; should not be required
CSU Accessible Technology Initiative (ATI)
o All 23 campuses: web, instructional materials, and procurement
accessible by 2012
o State law and Chancellor’s directive: comply with Section 508 (above) and
Section 504 (equally effective access)
o Web portion: automated checking plus manual evaluation; most sites
easier to replace than repair
Smart analysis
o Human intelligence based method; quickly catches barriers that
automated programs can’t find
o Simple tools: Illinois Web Accessibility Extensions for Firefox
o Most important: headings, links, text alternatives, remove styles
Designed-in accessibility (reminder)
o Four layers: content, structure, presentation, behavior
o Separately maintainable; working together