120 likes | 217 Views
Web Accessibility Initative (WAI). Flere akronymer. Web Content Accessibility Guidelines (WCAG). Et sett med prinsipper og krav for tilgjengelighet på nett. WCAG 1.0: HTML-spesifik Guidelines => Checkpoints => Techniques WCAG 2.0: Working draft Teknologiuavhengig
E N D
Web Accessibility Initative (WAI) Flere akronymer.
Web Content Accessibility Guidelines (WCAG) • Et sett med prinsipper og krav for tilgjengelighet på nett. • WCAG 1.0: • HTML-spesifik • Guidelines => Checkpoints => Techniques • WCAG 2.0: • Working draft • Teknologiuavhengig • Level 1-3 conformance criteria • Principles => Guidelines => Criteria => Techniques
WCAG 1.0 • Provide equivalent alternatives to auditory and visual content. • Don't rely on color alone. • Use markup and style sheets and do so properly. • Clarify natural language usage • Create tables that transform gracefully. • Ensure that pages featuring new technologies transform gracefully. • Ensure user control of time-sensitive content changes. • Ensure direct accessibility of embedded user interfaces. • Design for device-independence. • Use interim solutions. • Use W3C technologies and guidelines. • Provide context and orientation information. • Provide clear navigation mechanisms. • Ensure that documents are clear and simple.
WCAG 2.0 Working Draft: Fire prinsipper • Content must be perceivable • Innholdet skal presenteres slik at det kan bli oppfattet av alle brukere. • Interface elements in the content must be operable. • Grensesnittelementene skal kunne anvendes av alle brukere • Content and controls must be understandable. • Det skal være lett å forstå innhold og grensesnittelementer (controls) • Content must be robust enough to work with current and future technologies. • Innholdet skal fungere bra med dagens og fremtidlige teknologier.
Hvorfor WAI? Fra W3C: • Someone who cannot hear well will want a visual representation of information presented via sound. • Someone who cannot see well will want to hear or feel (via braille or tactile graphics) an equivalent of the visual information. • Someone who does not have the strength to move quickly or easily will want to use as little movement as possible and have as much time as they need when operating Web interfaces. • Someone who does not read well may want to hear the information read aloud.
Prinsipp 1: Percievable • Provide text alternatives for all non-text content. • Alternate text, labels • Provide synchronized alternatives for multimedia. • Alternativer til animasjoner, og lignende • Ensure that information, functionality and structure can be separated from presentation. • Bruk HTML og CSS riktig. • Make it easy to distinguish foreground information from background images or sounds. • Gode kontraster
Prinsipp 2. Operable • Make all functionality operable via a keyboard interface. • Tastaturnavigasjon: accesskey, tabindex. • Allow users to control time limits on their reading or interaction. • Unngå automatisk scrolling. • Allow users to avoid content that could cause seizures due to photosensitivity. • Unngå <blink> og syke animasjoner. • Provide mechanisms to help users find content, orient themselves within it, and navigate through it. • Navigasjonsstruktur, labels • Help users avoid mistakes and make it easy to correct them. • Site-design og flyt. Validering av form-verdier.
Prinsipp 3: Understandable • Make text content readable and understandable. • Språkangivelse, forklaringer av akronymer, link-titler og tekst. • Make the placement and functionality of content predictable. • Konsistens i layout og navigasjonsstruktur.
Prinsipp 4: Robust • Use technologies according to specification. • Valider sidene. • Ensure that user interfaces are accessible or provide an accessible alternative(s). • The way out…
Tips i HTML • Bruk id’attributtet sammen med div for å gruppere og identifisere viktige komponenter i siden: <div id=”header”> <ul id=”mainMenu”> <li>…</li> </ul> </div> • Bruk title-attributtet på linker. • Bruk lang-attributtet på diverse elementer. • Bruk label-elementer og id’er i forms. <p> <label for=”namefield”>Navn:</label> <input id=”nameField” type=”text” name=”name”/> </p> • Bruk fieldset og legend i forms til å gruppere kontroller. • Bruk accesskey (også for linker) og tabindex til å definere tastaturnavigasjon. • Lag god navigasjonsstruktur. Les pensumboka.
Ressurser • WAI • http://www.w3.org/WAI/ • WCAG 2.0 Working draft • http://www.w3.org/TR/WCAG20/ • WCAG 1.0 Recommendation • http://www.w3.org/TR/WCAG10/ • HTML-forms: • http://www.w3.org/TR/html4/interact/forms.html • WebXACT validation service • http://webxact.watchfire.com/
Ukas kulturelle innslag [Mai, mai, mai Delaila WAI, WAI, WAI, Delaila.] *ler litt nervøst. *går og skammer seg.