Transcript Document

Accessibility 101

© 2007 Knowbility, Inc. All rights reserved

Class Objectives

• Accessibility Terms / History • Experience the problem of access barriers • Accessible Design Techniques • Accessible PDFs • Accessibility Testing • Creating an Accessibility Plan © 2007 All rights reserved. Knowbility, Inc 2

Introduce accessibility terms and history

© 2007 All rights reserved. Knowbility, Inc 3

Universal Accessibility

• “Good design is Accessible Design” - Slatin • supports all people • supports all technology • generally makes site better for all • relationship to usability • avoid a separate “text-only” version “Web for Everyone. Web on Everything.” www.w3.org/Consortium/mission © 2007 All rights reserved. Knowbility, Inc 4

What is Accessibility?

• A user experience • The ability of a user with a disability to obtain the same information and perform the same tasks as any other user.

• Generally creating a better user experience for all.

True Test: Can people with disabilities use your web page?

© 2007 All rights reserved. Knowbility, Inc 5

Official Disabilities

• Visual (including blind, low vision, and color blind) • Hearing • Motor/Physical • Speech • Cognitive Learning © 2007 All rights reserved. Knowbility, Inc 6

Quasi-Disabilities

• Slow Internet Connection • Old Browser • Missing Plugins • No Speakers • Small Display (pda, mobile phone) • Eyes busy / Hands busy • Noisy Environment © 2007 All rights reserved. Knowbility, Inc 7

Who is responsible for web accessibility?

‣ ‣ ‣ ‣ ‣ ‣

we can only control how sites & pages are built techniques we use have significant impact on accessibility

Web Content Accessibility Guidelines (WCAG)

others are responsible too

Authoring Tool Accessibility Guidelines (ATAG) ‣ ‣ These are the rules for people who create software like

Dreamweaver

and

FrontPage

and

Content Management Systems

.

User Agent Accessibility Guidelines (UAAG) Rules for people who create user agents, like

browsers

(for example,

Firefox

and

Internet explorer

) and

assistive technology

(screenreaders.and speech recognition software) © 2007 All rights reserved. Knowbility, Inc 8

Why is this important?

• More than 50 million Americans – 750 million worldwide – have disabilities.

• Numbers increasing as population ages.

• $1 trillion in aggregate annual income.

• Emerging best business practices.

• Federal mandates.

© 2007 All rights reserved. Knowbility, Inc 9

Why make things accessible?

• because we can • because the web is about empowering people with information, not building barriers • Google & SEO (search engine optimization) • because it is the law © 2007 All rights reserved. Knowbility, Inc 10

Accessibility in law and policy

• • • •

International

• WCAG – Web Content Accessibility Guideline from W3C

Federal

• Americans with Disability Act • Section 508 of the Rehabilitation Act

State (North Carolina)

• North Carolina state law (N.C. Gen. Stat. § 168A-7) – against discrimination in public service…provide reasonable accomodation • http://www.ncga.state.nc.us/EnactedLegislation/Statutes/HTML/By Section/Chapter_168A/GS_168A-7.html

Organization

• North Carolina State http://www.ncsu.edu/it/access/legal/webreg.php

• University of Texas at Austin Policy www.utexas.edu/web/guidelines/accessibility.html

Organization © 2007 All rights reserved. Knowbility, Inc 11

Accessibility in Charlotte

© 2007 All rights reserved. Knowbility, Inc 12

Target & Accessibility

• Disability class action lawsuit against Target by National Federation of the Blind • Charges: www.target.com

violates • is inaccessible to the blind the Americans with Disabilities Act (ADA) • • the California Unruh Civil Rights Act California Disabled Persons Act. • Target asked court to dismiss action • arguing no law requires Target to make website accessible. • September 6, 2006 Court Ruling – Case Will Be Heard • all services provided by Target, including its Web site, must be accessible to the disabled © 2007 All rights reserved. Knowbility, Inc 13

Accessibility Standards

Two sets of Standards: •

Web Content Accessibility Guidelines, WCAG 1.0 (international)

Section 508 Standards (United States)

© 2007 All rights reserved. Knowbility, Inc 14

Brief Look at WCAG

www.w3.org/wai Developed by consensual process –

Comprehensive:

Includes over 60 checkpoints –

Widely accepted:

European Union, Canada, Australia have adopted WCAG.

Published in May 1999

(old and about to be replaced by 2.0 anticipated soon) Priority 1: Critical Priority 2: Moderately important Priority 3: Useful but not essential © 2007 All rights reserved. Knowbility, Inc 15

Brief Look at Section 508

www.access-board.gov/sec508/guide/1194.22.htm

Legally applies only to federal agencies: –

Shorter:

508 has 16 checkpoints, WCAG over 60 –

Experience:

508 based on WCAG’s most critical accessibility checkpoints.

Measurable:

508 standards developed to be objective and measurable. © 2007 All rights reserved. Knowbility, Inc 16

Assistive Technology

• specialized tools • help us do things we’d normally do • accomodate various temporary or permanent conditions © 2007 All rights reserved. Knowbility, Inc 17

Examples of Computer Assistive Technology • Screen Magnifier - Zoom Text • Screen Reader – JAWS • Voice Recognition DragonSpeak © 2007 All rights reserved. Knowbility, Inc 18

Hands on Exercise Using a Screenreader

• Experiencing accessibility issues first hand • Individually or in pairs, with headsets • Discuss • • • what worked?

what didn’t work?

how could it be improved?

© 2007 All rights reserved. Knowbility, Inc 19

Learn accessible design techniques

© 2007 All rights reserved. Knowbility, Inc 20

Web Development Techniques

‣ ‣ ‣ ‣ ‣

HyperText Markup Language (HTML and XHTML)

Semantic, structural markup (headings, lists, quotes, etc Includes things not in Section 508 (acronyms, abbreviations, language changes, validation) Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4

Cascading Style Sheets (CSS) JavaScript (JS)

© 2007 All rights reserved. Knowbility, Inc 21

How is XHTML different than HTML?

• • •

well-formed

• all elements must either have closing tags •

or
• all the elements must nest properly •

Help!

lower case

• lower case for all HTML element and attribute names

quotes

• attribute values must be quoted © 2007 All rights reserved. Knowbility, Inc 22

Mandatory XHTML Elements

► ► ►

Recommended DOCTYPE is XHTML 1.0 Transitional Tutorial on XHTML http://www.w3schools.com/xhtml/ Validate your XHTML at http://validator.w3.org/

© 2007 All rights reserved. Knowbility, Inc 23

Section 508

a) Alt Text b) Synchronized alternatives for multimedia

c) Color d) Use CSS e) Server-side image maps f) Client-side image maps g) Simple tables h) Complex tables

i) Frames

j) Flickering k) Text only version l) Scripting

m) Applets n) Forms

o) Skip Navigation p) Timed Response © 2007 All rights reserved. Knowbility, Inc 24

508 a) Alt Text

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

• • The Issue: Think about listening to your web page That is why text equivalents must be provided for images and animations Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1.

© 2007 All rights reserved. Knowbility, Inc 25

• • • • •

Alt-text for Images

Every

image must have a valid alt attribute. Images which are not active and which do not convey information should have alt=“” .

Image links must have a non-empty alt attribute.

Each INPUT of TYPE=“IMAGE” must have alt-text specifying the purpose of the button Each AREA of a MAP must have a valid alt attribute (more later) © 2007 All rights reserved. Knowbility, Inc 26

Alt-text Examples

alt=“United Nations Flag”

width=… >

alt=“Aeronautics”

width=…> Maybe

title=“Visit the Aeronautics Home Page”

alt=“”

width=“1” height=“1”> © 2007 All rights reserved. Knowbility, Inc 27

• • • •

Alt-text No No’s

Long: “Image of the United Nations Flag (Blue background with white olive branches surrounding map of world) about one and a quarter inches by one inch.” Reference to link: “link to aeronautics home page” – we know it’s a link.

File information: “spacer.gif 236 bytes” Meaningless out of context: “Click here” © 2007 All rights reserved. Knowbility, Inc 28

Alt-text - Judgment

Is it purely Visual? Use

alt=“”

.

• NLS uses

alt=“Image of NLS Users”

© 2007 All rights reserved. Knowbility, Inc 29

Long Descriptions (not widely supported)

• • The issue: Sometimes short alt text does not convey the information in an image.

This is obviously true for charts and graphs.

Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 3.

Glenda’s recommendation. Don’t use longdesc. Put longer descriptions right directly onto the page as a caption. Or create a second page with additional details. Don’t limit the longdesc to Assistive Technology! © 2007 All rights reserved. Knowbility, Inc 30

• •

Long Descriptions

Use the long description attribute ( longdesc ) on the IMG element to provide text equivalents for images like charts or graphs. Instead, such images may be described in the text of the page or with a caption. © 2007 All rights reserved. Knowbility, Inc 31

Long Descriptions - Examples

Some images need “long descriptions”like charts and graphs < IMG src="traffic.jpg" ...

longdesc="traffic.htm"

alt="traffic density graph“ > traffic.htm :

This graph shows traffic density on Main and Center streets measured in … © 2007 All rights reserved. Knowbility, Inc 32

Long Descriptions - Examples

© 2007 All rights reserved. Knowbility, Inc 33

508 b) Synchronized Alternatives for Multimedia (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

• • The issue is: Audio files and the audio part of multimedia content need to be made accessible to people who are deaf. Information in the video part of multimedia content needs to be accessible to people who are blind. Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.

© 2007 All rights reserved. Knowbility, Inc 34

• • •

Multimedia

Include a text

transcript

for each informational audio file. Provide synchronized text equivalents (

captions

) for the audio content of a multimedia presentation. Provide synchronized

audio descriptions

of significant video information in multimedia presentations.

© 2007 All rights reserved. Knowbility, Inc 35

Multimedia - Examples

Check out MAGPie at • http://ncam.wgbh.org/webaccess/magpie Sample video with captions and audio descriptions: • NCAM Rich Media Project © 2007 All rights reserved. Knowbility, Inc 36

508 c) Color and Contrast

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

• • The Issue: information conveyed by color is lost for people who are color blind Whenever color carries information, make sure that other parts of the page convey the same information. Be sure there is adequate contrast between text and background. Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.

© 2007 All rights reserved. Knowbility, Inc 37

© 2007 All rights reserved. Knowbility, Inc 38

© 2007 All rights reserved. Knowbility, Inc 39

Color: What not to do

© 2007 All rights reserved. Knowbility, Inc 40

Color: How to fix it

© 2007 All rights reserved. Knowbility, Inc 41

Color Contrast

‣ ‣ ‣ ‣ ‣ Can you read me?

Can you read me now?

Can you read me now?

Can you read me now?

Can you read me now?

Use the color contrast analyzer:

http://juicystudio.com/services/colourcontrast.php

© 2007 All rights reserved. Knowbility, Inc 42

Exercise - Color & Links

• Do you underline your links?

• Or are your links obvious by color alone?

• Example • • Imagine you are colorblind Tell me how many links are in the second paragraph of information: en.wikipedia.org/wiki/Abraham_linco ln © 2007 All rights reserved. Knowbility, Inc 43

© 2007 All rights reserved. Knowbility, Inc 44

© 2007 All rights reserved. Knowbility, Inc 45

© 2007 All rights reserved. Knowbility, Inc 46

Quality Link Text

• The issue: Will link text make sense out of context, in a list of links?

Related Guidelines: WCAG 13.1

. Note: this is

NOT

part of the 508 guideline. It will be part of WCAG 2.0.

© 2007 All rights reserved. Knowbility, Inc 47

Exercise – Link Lists

• Imagine you are visually impaired and listening to the list of links for the a university’s course catalogues.

You hear:

program courses program courses program courses program courses… © 2007 All rights reserved. Knowbility, Inc 48

• •

Links

Use descriptive link text that lets the user know where the link goes. Links to the same place should have the same text; links to different pages should be different. © 2007 All rights reserved. Knowbility, Inc 49

Links - Examples

Which goes with which?

To go where?

© 2007 All rights reserved. Knowbility, Inc 50

508 d) Use CSS

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

• • The issue: Style sheets are an asset to accessibility but they are ignored by assistive technology so it is important not to convey information with style sheets Sometimes individuals use local style sheets for enhanced font size and color Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.

© 2007 All rights reserved. Knowbility, Inc 51

Issues with Stylesheets

• Users have the ability to override stylesheets and create their own. They might, for example, create a light text on dark background stylesheet.

• CSS colors should be declared in pairs so that if they are overridden, they are overridden together.

• • • • } #header { color: #000; background-color: #ccc; © 2007 All rights reserved. Knowbility, Inc 52

Issues with Stylesheets

• Most modern browsers support stylesheets, but we can’t always guarantee that they are used and/or delivered.

• We need to ensure that pages are readable without stylesheets as well.

• This includes checking for positioning/content order, color issues, and generated content © 2007 All rights reserved. Knowbility, Inc 53

Other CSS Issues

• Use relative units to allow pages to “resize” based on user need • Use percentages to specify the width of tables. This refers to the percentage of the screen that the table will fill • Use percent (%), em, or the terms larger, smaller, etc. for the font-size property. This sets font-size relative to the defaults specified by the user, and allows him or her to change font sizes as needed using the browser • Related guidelines: WCAG 3.4

© 2007 All rights reserved. Knowbility, Inc 54

The Power of CSS

• Designing with CSS • • Separate content from presentation Make maintaining a site more effective and efficient • See CSS in Action at www.csszengarden.com

*note – sites at csszengarden are not necessarily accessible © 2007 All rights reserved. Knowbility, Inc 55

508 (e, f) Image Maps

(e) Redundant text links shall be provided for each active region of a server-side image map. (f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. • The issue: Server side maps require the use of a mouse. Many disabled users cannot use a mouse.

Related Guidelines: 508 §1194.22(e, f), WCAG 1.2, 9.1; IBM 2.

© 2007 All rights reserved. Knowbility, Inc 56

• • • •

Image Maps

Do not use server-side image maps. Use client-side image maps.

Include alt-text on every AREA of the MAP specifying the purpose of each hot spot. Include alt-text on the actual image © 2007 All rights reserved. Knowbility, Inc 57

Image Maps - Examples

© 2007 All rights reserved. Knowbility, Inc 58

Image Maps - Examples

alt=“My Yahoo!”

>

alt=“Finance”

>

alt=“Travel”

>

alt=“Email”

>

alt=“Messenger”

>

alt=“Help”

> © 2007 All rights reserved. Knowbility, Inc 59

Image Maps - Examples

shape=poly

coords="173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12, 250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48, 254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77, 262,78,260,78,259,80,258,82,257,84,256,86,254,87,243,87,243,88, 229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45, 172,30,172,7,174,8" href=" ... "

alt="North Dakota, Minnesota, South Dakota, Nebraska, Iowa"

> © 2007 All rights reserved. Knowbility, Inc 60

508 (g & h) Tables

(g) Row and column headers shall be identified for data tables. (h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

• • The issue: Data tables are designed for viewing; column and row headers can be discerned while reading data. Accommodation is needed so that screen readers will announce headings as the user navigates a table.

Related Guidelines: 508 §1194.22(g, h); WCAG 5.1, 5.2; IBM 10.

© 2007 All rights reserved. Knowbility, Inc 61

• • • • •

Data Tables

Place column headings in the first row and place row headings in the first column.

Use the scope attribute on all heading cells specifying whether the heading labels a column or a row e.g., scope= “ row ” .

Use the TH element for all heading cells. For

complex tables

: Assign an id and string of id ’s as the header to each heading cell attribute for each data cell to say which are heading cells for that data cell. Use the summary attribute and/or CAPTION element.

© 2007 All rights reserved. Knowbility, Inc 62

Simple Data Tables

width= "10% “ width= "10% width= "10% “ “ scope= “ col ” > 1998 scope= “ col ” > 1999 scope= “ col ” > 2000 ...

Performance
Fund 17.7

> © 2007 All rights reserved. Knowbility, Inc 63

Complex Data Tables

They do exist (http://workshops.fedstats.gov/htmlSamples.htm).

© 2007 All rights reserved. Knowbility, Inc 64

Complex Data Tables - Example

The “usual” Example: © 2007 All rights reserved. Knowbility, Inc 65

Complex Data Tables - Code

id="r2">San Jose

id="r3" >25-Aug-97

© 2007 All rights reserved. Knowbility, Inc 66

508 i) Frames

(i) Frames shall be titled with text that facilitates frame identification and navigation.

• The Issue: Frames are presented to users of assistive technology as lists of pages. This requires that meaningful text be available for those lists.

Related Guidelines: 508 §1194.22(i); WCAG 12.1; IBM 9.

© 2007 All rights reserved. Knowbility, Inc 67

Frames

Provide title attributes for each FRAME element in the FRAMESET that make clear the purpose of the frame.

© 2007 All rights reserved. Knowbility, Inc 68

Frames - Examples

© 2007 All rights reserved. Knowbility, Inc 69

Frames - Examples

name="Title"

frameborder="yes"

title="Title Content"

>

name=“Main_Navigation"

frameborder="yes"

title=“Main Navigation"

>

name="Banner_Ad"

frameborder="yes"

title="Banner Ad"

>

name="Main_Content"

frameborder="yes"

title="Main Content"

>

name=“Local_Navigation"

frameborder="yes"

title=“Local Navigation"

> © 2007 All rights reserved. Knowbility, Inc 70</p> <a id="p71" href="#"></a> <h3>Frames - Examples</h3> <p>As seen with Lynx: FRAME: frame 70890 FRAME: frame 70888 © 2007 All rights reserved. Knowbility, Inc 71</p> <a id="p72" href="#"></a> <h3>508 j) Flickering</h3> <p>(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.</p> <p>• The issue is: Flicker in the range 2Hz to 55Hz may cause seizures in people with photosensitive epilepsy.</p> <p>Related guidelines: 508 §1194.22(j); WCAG 7.1; IBM 13.</p> <p>© 2007 All rights reserved. Knowbility, Inc 72</p> <a id="p73" href="#"></a> <p>•</p> <h3>Flickering</h3> <p>The frequency of flicker (</p> <p><i>image appearing and disappearing</i></p> <p>) in animated GIF’s, Flash or other objects must be less than 2 Hz or greater than 59 Hz.</p> <p>© 2007 All rights reserved. Knowbility, Inc 73</p> <a id="p74" href="#"></a> <p>• •</p> <h3>Flickering- Examples</h3> <p>Warning! Flash Example of Flicker (http://ncam.wgbh.org/richmedia/media/flicker _demo.html) For comparison, the caret blink rate (or cursor blink rate) in Windows 2000 varies from 1/2 Hz at the slowest setting to 3 Hz at the fastest; the middle setting is about 1 Hz.</p> <p>© 2007 All rights reserved. Knowbility, Inc 74</p> <a id="p75" href="#"></a> <h3>508 k) Text-Only Version</h3> <p>(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. LAST RESORT © 2007 All rights reserved. Knowbility, Inc 75</p> <a id="p76" href="#"></a> <h3>Text Only?</h3> <p>• No other way to make content accessible • Text only version is up-to-date with “main” version • Text only version provides equivalent functionality as “main” version © 2007 All rights reserved. Knowbility, Inc 76</p> <a id="p77" href="#"></a> <h3>508 l) Scripts</h3> <p>(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. • The issue: Content created with scripts may be inaccessible, especially to people using screen readers and/or unable to use the mouse. Related Guidelines: 508 §1194.22(l); WCAG 6.3, 6.4, 8.1, 9.3; IBM 5. © 2007 All rights reserved. Knowbility, Inc 77</p> <a id="p78" href="#"></a> <p>• • •</p> <h3>Scripts – Some Cautions</h3> <p>If text is made visible through attribute changes with JavaScript, then the interactions must be keyboard accessible, or the content must be readily available in some other accessible way. Do not use the onChange event on select menus for form submission.</p> <p>For more information on Accessible Javascript see WebAim www.webaim.org/techniques/javascript/ © 2007 All rights reserved. Knowbility, Inc 78</p> <a id="p79" href="#"></a> <h3>508 m) Applets</h3> <p>(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l). • The issue: Software associated with a web page must be accessible.</p> <p>Related Guidelines: 508 §1194.22(m); WCAG 6.3, 6.4, 8.1; IBM 6.</p> <p>© 2007 All rights reserved. Knowbility, Inc 79</p> <a id="p80" href="#"></a> <p>•</p> <h3>Applets and Plugins</h3> <p>Information conveyed and the function provided by applets, plugins or other objects must be available to users of screen readers and other assistive technology • Check that the software is directly accessible (desktop players, for example) or provide accessible alternatives.</p> <p>© 2007 All rights reserved. Knowbility, Inc 80</p> <a id="p81" href="#"></a> <h3>508 n) Forms</h3> <p>(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. • • The issue: “Tell me what this form control is for!” People using screen readers need to be told the purpose of an edit field or check box.</p> <p>Related Guidelines: 508 §1194.22(n); WCAG 10.2, 12.4, 9,3; IBM 7 © 2007 All rights reserved. Knowbility, Inc 81</p> <a id="p82" href="#"></a> <h3>Accessible Forms</h3> <p>Text prompt © 2007 All rights reserved. Knowbility, Inc Input control 82</p> <a id="p83" href="#"></a> <h3>Accessible Forms</h3> <p>1.</p> <p>2.</p> <p>3.</p> <p>Position text prompts immediately adjacent to input controls Associate text prompts corresponding input with the element using the label element with the for attribute Use the title attribute on form controls when text not available for label © 2007 All rights reserved. Knowbility, Inc 83</p> <a id="p84" href="#"></a> <h3>Accessible Forms: Example</h3> <p><label</p> <p><b>for= “lname”</b></p> <p>> Last Name: </label> … <input size= “20” / > … type= “text”</p> <p><b>id= “lname”</b></p> <p>name= “last-name” <input type= “radio”</p> <p><b>id= “old”</b></p> <p>name= “visited” value= “yes” / > <label</p> <p><b>for= “old”</b></p> <p>> I have visited before.</p> <p></label></p> <p><b>…</b></p> <p><input type= “radio”</p> <p><b>id= “new”</b></p> <p>name= “visited” value= “no” / > <label</p> <p><b>for= “new”</b></p> <p>> I am a new user </label></p> <p><b>…</b></p> <p>© 2007 All rights reserved. Knowbility, Inc 84</p> <a id="p85" href="#"></a> <p>• • •</p> <h3>Accessible Forms</h3> <p>Position prompts immediately adjacent to input controls Associate prompts with the corresponding INPUT element using the LABEL element with the for attribute Use the title attribute on form controls when text not available for LABEL © 2007 All rights reserved. Knowbility, Inc 85</p> <a id="p86" href="#"></a> <h3>Accessible Forms - LABEL</h3> <p><LABEL <INPUT</p> <p><b>for= "name"</b></p> <p>> Last Name: </LABEL> … size= "20" type= "text" </p> <p><b>id= "name"</b></p> <p>name= "Name" > … <LABEL <INPUT</p> <p><b>for= "old"</b></p> <p>> I have visited before.</p> <p></LABEL></p> <p><b>…</b></p> <p>type= "radio" checked </p> <p><b>id= "old"</b></p> <p>name= "visited" value= "yes" > © 2007 All rights reserved. Knowbility, Inc 86</p> <a id="p87" href="#"></a> <p>•</p> <h3>Accessible Forms -Title </h3> <p>Some times there is no text to use with Label: <INPUT type="radio" … </p> <p><b>title=“disagree 3</b></p> <p>"> © 2007 All rights reserved. Knowbility, Inc 87</p> <a id="p88" href="#"></a> <h3>508 o) Skip Navigation</h3> <p>(o) A method shall be provided that permits users to skip repetitive navigation links.</p> <p>• The issue: Navigation links often precede the main content on every page. People listening to the page have to listen to those links on every page making the main content difficult to find Related Guidelines: 508 §1194.22(o); WCAG 13.5, 13.6; IBM 8 © 2007 All rights reserved. Knowbility, Inc 88</p> <a id="p89" href="#"></a> <p>•</p> <h3>Skip Navigation</h3> <p>If there are navigation links before the main content of the page, provide a link at the top of the page that jumps over the navigation to the main content. © 2007 All rights reserved. Knowbility, Inc 89</p> <a id="p90" href="#"></a> <h3>Skip Navigation – The Problem</h3> <p>A screen reader user has to listen to everything before the “main content.” © 2007 All rights reserved. Knowbility, Inc 90</p> <a id="p91" href="#"></a> <h3>Skip Navigation – Example</h3> <p>© 2007 All rights reserved. Knowbility, Inc 91</p> <a id="p92" href="#"></a> <h3>Skip Navigation – Example</h3> <p><a href="#ContentArea"> <img src= … </p> <p><b>alt="Click here to skip to main content"</b></p> <p>… <a name="ContentArea"></a> … Updated: 12:03 … © 2007 All rights reserved. Knowbility, Inc 92</p> <a id="p93" href="#"></a> <h3>Skip Navigation</h3> <p>‣ ‣</p> <h3>Far Left Technique</h3> <p>#skiplink { position:absolute; left:-999px; width:990px; } </p> <h3>Do Not Use display:none</h3> <p>#skiplink {display:none} © 2007 All rights reserved. Knowbility, Inc 93</p> <a id="p94" href="#"></a> <h3>Skip Navigation – another technique</h3> <p>‣</p> <h3>Use proper markup</h3> <p>‣ Heading tags allow users of screen readers to navigate through a page.</p> <p>‣ Don’t leave out heading levels © 2007 All rights reserved. Knowbility, Inc 94</p> <a id="p95" href="#"></a> <h3>Exercise – Read this important information</h3> <p>• Perhaps a re-engineering of your current world view will re energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution.</p> <p>© 2007 All rights reserved. Knowbility, Inc 95</p> <a id="p96" href="#"></a> <h3>Exercise – Read this important information</h3> <p>• Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems.</p> <p>© 2007 All rights reserved. Knowbility, Inc 96</p> <a id="p97" href="#"></a> <h3>Exercise – Read this important information</h3> <p>• Fundamentally transforming well designed actionable information whose semantic content is virtually null. © 2007 All rights reserved. Knowbility, Inc 97</p> <a id="p98" href="#"></a> <h3>Exercise – Read this important information</h3> <p>• To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue.</p> <p>© 2007 All rights reserved. Knowbility, Inc 98</p> <a id="p99" href="#"></a> <h3>Exercise – Read this important information</h3> <p>© 2007 All rights reserved. Knowbility, Inc • In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box.</p> <p>99</p> <a id="p100" href="#"></a> <h3>508 (p) Timed Response</h3> <p>(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. The issue: • A person with a disability may not be able to read, move around, or fill in a Web form within the prescribed amount of time. Related Guidelines: 508 §1194.22(p) © 2007 All rights reserved. Knowbility, Inc 100</p> <a id="p101" href="#"></a> <h3>Timed Response</h3> <p>• Do not set a time limit on the users response.</p> <p>• Notify the user if a process is about to time-out • Provide a prompt asking whether additional time is needed.</p> <p>© 2007 All rights reserved. Knowbility, Inc 101</p> <a id="p102" href="#"></a> <h3>Just Do IT!</h3> <p>© 2007 All rights reserved. Knowbility, Inc 102</p> <a id="p103" href="#"></a> <h3>Correct Markup</h3> <p>• • The issue: If you use structural markup for its intended purpose then assistive technology can take advantage of the structure when navigating the page If you use structural markup in the wrong way, a user of assistive technology may be confused when navigating the page Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4</p> <p>Will be part of WCAG 2.0</p> <p>© 2007 All rights reserved. Knowbility, Inc 103</p> <a id="p104" href="#"></a> <p>• • •</p> <h3>Correct Markup</h3> <p>Use structural markup ( H1 , UL , P , …) for their designated purpose; don’t simply change font size and weight for a heading, for example. Don’t use structural markup to replace style changes, e.g., don’t use headings to achieve large font. Use BLOCKQUOTE for quotations, not for indentation © 2007 All rights reserved. Knowbility, Inc 104</p> <a id="p105" href="#"></a> <h3>17. Pop-up Windows</h3> <p>• • The issue: It is extremely disorienting to some people when content opens in a new window. If you cannot see the screen or if your browser is maximized you probably won’t know that a new window has appeared.</p> <p>Related guidelines: WCAG 10.1.</p> <p>© 2007 All rights reserved. Knowbility, Inc 105</p> <a id="p106" href="#"></a> <p>• • •</p> <h3>Pop-up Windows</h3> <p>Do not use spontaneous pop-up windows.</p> <p>If you must display content in a new window, include the fact that a new browser window will be opened in the link text (“product list in a new window”).</p> <p>Provide a simple way to close the pop-up.</p> <p>© 2007 All rights reserved. Knowbility, Inc 106</p> <a id="p107" href="#"></a> <h3>Bonus Points</h3> <p>• Abbreviations expanded • <abbr title="University of Texas">UT</abbr> • Identify primary natural language and changes • lang="en" • Use XHTML 1.0 to create site. With strict DTD • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • • <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> www.webstandards.org/learn/reference/templates/ © 2007 All rights reserved. Knowbility, Inc 107</p> <a id="p108" href="#"></a> <h1>Create Accessible PDFs with Acrobat & MS Word</h1> <p>4/27/2020 © 2007 All rights reserved. Knowbility, Inc 108</p> <a id="p109" href="#"></a> <h3>The PDF File Format: Characteristics That Support Accessibility</h3> <p>• • • •</p> <p><b>Establish Logical Reading Order</b></p> <p>Content makes sense when you listen to it</p> <p><b>Create Alternate Text Descriptions for Non-Text Elements Establish a Logical Tab Order (Forms)</b></p> <p>Navigate PDF forms in a way that makes sense</p> <p><b>Add Short Descriptions to Form Fields</b></p> <p>Audible short descriptions added to form fields for those with visual disabilities 4/27/2020 © 2007 All rights reserved. Knowbility, Inc 109</p> <a id="p110" href="#"></a> <h3>PDF General Do’s and Don’ts </h3> <p>• Do NOT Use Character formatting for Headings • Do Add Alternative Text to Graphics in Source File • Do Use a Table Editor if Available to Create Tables • Do NOT Use Tables for layout • Do Set PDF Output Preferences option to Tagged • Do Check the Results in Adobe Acrobat 7 or 8 • Advanced > Accessibility > Full Check • Do Follow the Suggestions for Repair • Repeat Until No Errors Detected 4/27/2020 © 2007 All rights reserved. Knowbility, Inc 110</p> <a id="p111" href="#"></a> <h3>Microsoft Word: Use Styles</h3> <p>• • Apply Styles • Style Drop Down • Styles and Formatting Task Pane • Formatting Shortcuts • Title = Alt + Ctrl + 0 • • • Heading 1 = Alt + Ctrl + 1 Heading 2 = Alt + Ctrl + 2 Heading 3 = Alt + Ctrl + 3 </p> <p><b>Do NOT use Character Formatting Effects using Fonts, Font Size, Bolding, etc.</b></p> <p>• Creates the Illusion of a Style, but it does not make it a Style 111 4/27/2020 © 2007 All rights reserved. Knowbility, Inc</p> <a id="p112" href="#"></a> <h3>Microsoft Word: Add Alt Text to Graphics</h3> <p>• Reveal the Format Picture Dialog • Select the Graphic and Right Mouse Click to Select “Format Picture...) • Double Click the Graphic • Apply the Alternative Text Description in the Text Box Provided Under the Web Tab 112 4/27/2020 © 2007 All rights reserved. Knowbility, Inc</p> <a id="p113" href="#"></a> <h3>Microsoft Word: Use Table Editor Properly</h3> <p>• Use the Table Editor for Tables • Table > Insert • Do Not Use Spacing and Tabbing to Display Tabular Information • Do Not Use Tables for Creating Multi Column Page Effects • Use the Columns Feature for Formatting Page Columns • Format > Columns 4/27/2020 © 2007 All rights reserved. Knowbility, Inc 113</p> <a id="p114" href="#"></a> <h3>Microsoft Word: PDFMaker</h3> <p>• •</p> <p><b>Acrobat PDFMaker installed in Word when Acrobat is Installed Default settings for PDFMaker are Great!</b></p> <p>• • • • • Adobe PDF > Change Conversion Settings Settings: Verify 'Enable Accessibility and Reflow with tagged Adobe PDF' is Checked Security (Optional) Word: Select Which Word Elements Get Converted to Their PDF Equivalents Convert Word Headings to PDF Bookmarks, Establish Heading Levels 114 4/27/2020 © 2007 All rights reserved. Knowbility, Inc</p> <a id="p115" href="#"></a> <h3>Microsoft Word: Generate a Tagged PDF File with PDFMaker</h3> <p>•</p> <p><b>Do Not Print to Adobe PDF</b></p> <p>• Two Options for Generating Tagged PDF with PDFMaker • Select Adobe PDF > Convert to Adobe PDF • Generate the PDF Using the Acrobat PDF Maker 8.0 Toolbar • Note: If this toolbar is not visible verify that it is active View > Toolbars > Acrobat PDFMaker 8.0</p> <p>4/27/2020 © 2007 All rights reserved. Knowbility, Inc 115</p> <a id="p116" href="#"></a> <h3>PDF Accessibility Check</h3> <p>•</p> <p><b>Run Accessibility Full Check</b></p> <p>• Menu: Advanced > Accessibility > Full Check • •</p> <p><b>Make recommended and appropriate repairs </b></p> <p>• Read the Report</p> <p><b>Repeat process until “No Problems Found”</b></p> <p>4/27/2020 © 2007 All rights reserved. Knowbility, Inc 116</p> <a id="p117" href="#"></a> <h3>Adobe is Accessible</h3> <p>www.adobe.com/accessibility/</p> <p><b>Creating Accessible PDF Documents with Adobe Acrobat 7.0</b></p> <p>© 2007 All rights reserved. Knowbility, Inc 117</p> <a id="p118" href="#"></a> <h3>Accessibility testing</h3> <p>© 2007 All rights reserved. Knowbility, Inc 118</p> <a id="p119" href="#"></a> <h3><b>Accessibility Testing tools</b></h3> <p>• Accessibility Validators – Page by Page • Listening to Your Pages • Screenreaders/Talking Browsers • Accessibility Reports • Practical Testing Plan © 2007 All rights reserved. Knowbility, Inc 119</p> <a id="p120" href="#"></a> <p><b>Accessibility Validators- Page by Page</b></p> <p>• • • • • WebXact The Wave Web Developer for Firefox (extension) Accessibility Toolbar for IE Luminosity Contrast Ratio Analyser</p> <p><b>Accessibility Tools can only automatedly test approximately 27% of the issues.</b></p> <p><b>Accessibility Testing requires human brain power!</b></p> <p>© 2007 All rights reserved. Knowbility, Inc 120</p> <a id="p121" href="#"></a> <p><b>4 Free Accessibility Validators Tool WebXact +</b></p> <p>*New tool from the folks at Watchfire (replaces bobby) *Excellent resource</p> <p><b>-</b></p> <p>•Doesn’t have visual info you used to get from Bobby</p> <p><b>Wave Accessibility Toolbar Web Developer for Firefox </b></p> <p>•Good for seeing “reading order” & alt text •Report not as intuitive •Doesn’t explain how to solve problems •Great tool that combines many accessibility validators and simulations •Beta version (occasional bug) •Only available for PC/IE •Great tool that combines many accessibility validators and simulations •Available for all OS •Only available for Firefox and Mozilla (ver. 1.0 – current) © 2007 All rights reserved. Knowbility, Inc 121</p> <a id="p122" href="#"></a> <p><b>Evaluation of Free Accessibility Testing Tools</b></p> <p>www.webaim.org/techniques/articles/freetools/ Articles has links to all the free accessibility testing tools © 2007 All rights reserved. Knowbility, Inc 122</p> <a id="p123" href="#"></a> <p><b>Testing a Site</b></p> <p>• http://www.charmeck.org/living/home.htm</p> <p>• • • • WebXact Wave Web Developer in Firefox Luminosity Contrast Ratio Analyser © 2007 All rights reserved. Knowbility, Inc 123</p> <a id="p124" href="#"></a> <p><b>Listening to Your Site</b></p> <p>The real test – can users with disabilities actually use your site?</p> <p>Listen to representative pages of your site using JAWS •</p> <p><b>JAWS by Freedom Scientific</b></p> <p>– popular screen reading software. Uses internal speech synthesizer and computer’s sound card to read info from computer screen aloud. www.freedomscientific.com</p> <p>© 2007 All rights reserved. Knowbility, Inc 124</p> <a id="p125" href="#"></a> <p><b>Watchfire WebXM</b></p> <h3>• Tests entire sites for accessibility • Builds accessibility reports</h3> <p>• • • • • • Results by checkpoints Checkpoints expanded Edit Preferences Create Reports Resources – How to fix Previews of pages for debugging © 2007 All rights reserved. Knowbility, Inc 125</p> <a id="p126" href="#"></a> <p>© 2007 All rights reserved. Knowbility, Inc</p> <p><b>Watchfire WebXM</b></p> <p>126</p> <a id="p127" href="#"></a> <p><b>A Practical Testing Plan</b></p> <p>1. Test with your browser • Turn off images • Don’t use the mouse • Increase font size • Change window size 2. Online Accessibility Tests on representative pages • use more than one tool, example: Watchfire & Wave 3. Listen to your pages • JAWS 4. Review WebXM Report 5. Hands on Accessibility Testing © 2007 All rights reserved. Knowbility, Inc 127</p> <a id="p128" href="#"></a> <h3>Creating an Accessibility Plan</h3> <p>1. Gather Baseline Information 2. Gain Top Level Support 3. Organize a Web Accessibility Committee 4. Define a Standard 5. Create an Implementation Plan 6. Provide Training and Technical Support 7. Monitor Conformance 8. Remain Flexible Through the Changes WebAim 8 Step Implementation Model www.webaim.org/articles/implementation © 2007 All rights reserved. Knowbility, Inc 128</p> <a id="p129" href="#"></a> <h3>Next Steps</h3> <p>What accessibility actions do you plan to take next?</p> <p>What resources do you need now?</p> <p>• • www.utexas.edu/learn/accessibility/ www.jimthatcher.com</p> <p>• www.knowbility.org</p> <p>• www.webaim.org</p> <p>• Sharepoint Accessibility msdn2.microsoft.com/en-us/library/ms916821.aspx</p> <p>© 2007 Knowbility, Inc. All rights reserved</p> </div> </section> </div> </div> </div> </main> <footer> <div class="container mt-3"> <div class="row justify-content-between"> <div class="col"> <a href="/"> <img src="/theme/studyslide/static/logo-slideum.png" /> </a> </div> </div> <div class="row mt-3"> <ul class="col-sm-6 list-unstyled"> <li> <h6 class="mb-3">Company</h6> <li> <i class="fa fa-location-arrow"></i> Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040 <li> <i class="fa fa-phone"></i> +357 64-733-402 <li> <i class="fa fa-envelope"></i> info@slideum.com </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Links</h6> <li> <a href="/about">About</a> <li> <a href="/contacts">Contact</a> <li> <a href="/faq">Help / FAQ</a> </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Legal</h6> <li> <a href="/terms">Terms of Service</a> <li> <a href="/privacy">Privacy policy</a> <li> <a href="/page.html?code=public.usefull.cookie">Cookie policy</a> <li> <a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a> </ul> </div> <hr> <p>slideum.com &copy; 2024, Inc. All rights reserved.</p> </div> </footer> <div class="modal directory" id="directory-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Directory</h5> <button class="close" type="button" data-dismiss="modal">&times;</button> </div> <div class="modal-body"></div> </div> </div> </div> <script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script> <script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> var __path_directory = [ ] !function __draw_directory(data, root, uuid) { var ul = $('<ul>', uuid && { id: 'category' + uuid, class: !__path_directory.includes(uuid) ? 'collapse' : null }); for (var item in data) { var li = $('<li>').appendTo(ul); if (item = data[item], item.children) { li.append('<a href=#category' + item.id + ' data-toggle=collapse>') __draw_directory(item.children, li, item.id); } else { li.append('<a href=' + item.url + '>'); } var a = $('> a', li).addClass('item').text(item.name) .append($('<a class="link fa fa-external-link" href=' + item.url + '>')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); }); </script> <script> function scrollToViewport() { $('html, body').stop().animate( { scrollTop: $('.navbar').outerHeight() }, 1000); } setTimeout(scrollToViewport, 1000); $(window).on('orientationchange', scrollToViewport); $('[data-toggle="tooltip"]').tooltip(); </script> <script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter28397281 = new Ya.Metrika({ id:28397281 }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <style> @media screen and (max-width: 768px) { .cc-revoke { display: none; }} </style> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function() { window.cookieconsent.initialise( { content: { href: "https://slideum.com/dmca" }, location: true, palette: { button: { background: "#fff", text: "#237afc" }, popup: { background: "#007bff" }, }, position: "bottom-right", revokable: true, theme: "classic", type: "opt-in" })}); </script> </body> </html>

travel Expense Report

id="c2">Meals

Hotels transport subtotals

headers="c2 r2 r3">37.74

112.00 45.00