Basic Accessible Design Techniques

Introduction to Web Accessibility

Copyright © 2005 Knowbility, Inc .

2005.12.19

Accessible Web Design Techniques 1

Introductions & Pretest

►

Who you are?

►

Why Are You Here?

►

Accessibility Knowledge Level

► ► ► 0 – don’t know a thing 1 – Accessibility Novice 3 – solid accessibility knowledge ► 5 - Expert Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 2

Course Objectives

Learn the Basics of How to Make Web Elements Accessible

‣ ‣ ‣ Alternatives: images, maps, multimedia, color, quality link text Stylesheets, Tables, Frames, Scripting, Forms, Navigation Things to Avoid: Pop-ups, Timed Processes, Flicker ‣ Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 3

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) Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 4

How-General 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)

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 5

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 Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 6

► ► ►

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/

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 7

Making Simple Elements Accessible

► Alternatives for    Images Maps Multimedia ► Considerations in using color and contrast ► Quality link text Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 8

Providing Alternatives

► people that are blind or have low-vision can/may not see images ► they need a description of the purpose of the image Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 9

Alternative Text Examples

alt=“United Nations Flag”

... />

alt=“Aeronautics”

width=… /> Possibly:

title=“Visit the Aeronautics Home Page”

alt=“”

width=“1” height=“1” /> Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 10

Alternate Text Guidelines

► 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) Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 11

Alternate Text Problems

Too 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.” ► ► Makes reference to link “link to aeronautics home page” ► ► File information “spacer.gif 236 bytes” ► ► Meaningless out of context “button” Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 12

Alternate Text Problems

► A big problem is deciding what is meaningful and what is purely visual ► alt=“” or alt=“people using library services” Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 13

Long Descriptions

► Sometimes short alt text is not enough ► ► an HTML attribute longdesc necessarily the best solution is available but isn’t longdesc points to a URL that has a “long description” of the image "A picture is worth a thousand words... some people need the thousand words... And some people might want and need both” Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 14

longdesc Example

Some images need “long descriptions” like charts and graphs

longdesc=“traffic.htm”

alt=“traffic density graph” />

traffic.htm:

This graph shows traffic density on Main and Center streets measured in … Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 15

longdesc “Alternative”

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 16

Alternate Text Guidelines

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content) Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1. What is the accessibility problem?

What is the solution?

Does anyone else benefit from this guideline?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 17

Image Maps

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 18

Image Maps

alt=“Calendar”

>

alt=“Messenger”

>

alt=“Check Email”

>

alt=“What’s New”

>

alt=“Personalize My Yahoo”

>

alt=“Help”

> Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 19

Image Maps

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 20

Image Map Guidelines

(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. 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.

What is the accessibility problem?

What is the solution?

Does anyone else benefit from this guideline?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 21

Multimedia Strategy

► Include a text transcript for 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.

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 22

Multimedia Solutions

► MAGPie - free software that helps you caption ► http://ncam.wgbh.org/webaccess/magpie ► Sample video with captions and audio descriptions: ► NCAM Rich Media Project Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 23

Multimedia Guidelines

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.

What is the accessibility problem?

What is the solution?

Does anyone else benefit from this guideline?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 24

Exercise – Issues with Color

► What happens when we use color in our design to convey information?

► What else do we need to consider when using color in our design?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 25

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 26

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 27

Exercise – Issues with Color

► How can we overcome the problems with color blindness or lack of color in the previous example?

► How might we do the same on a web page?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 28

Color: What not to do

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 29

Color: How to fix it

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 30

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

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 31

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_lincoln Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 32

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 33

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 34

Color Guidelines

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.

What is the accessibility problem?

What is the solution?

Does anyone else benefit from this guideline?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 35

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 course program course program course program course… Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 36

Link examples Which goes with which?

To go where?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 37

Quality Link Text

Will link text make sense out of context, in a list of links? ► Descriptive link text lets users know where the link goes.

► ► ► ► Links to the same place should have the same text; Links to different pages should be different.

Test the links out of context.

Raw links (where the link is the http://url) may be hard for those using a screen reader to interpret. The screen reader just reads the whole long URL but doesn't convey information.

Avoid duplicate adjacent links ► Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 38

Quality Link Guidelines

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.

What is the accessibility problem?

What is the solution?

Does anyone else benefit from this guideline?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 39

Making Complex Elements Accessible

► Cascading Style Sheets ► Data Tables ► Frames ► Scripts ► Forms ► Navigation Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 40

Cascading Style Sheets

► Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. ► CSS is an effective way to separate content from presentation Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 41

Issues with Stylesheets

► When using a hybrid approach to web design, some people use CSS for simple things like text properties but still use tables for layout.

► This presents a possible problem if CSS is off/broken or not supported.

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 42

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; ► } Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 43

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 Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 44

CSS Guidelines

(d) Documents shall be organized so they are readable without requiring an associated style sheet. Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.

What is the accessibility problem?

What is the solution?

Does anyone else benefit from this guideline?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 45

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

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 46

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 Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 47

Working with Data Tables

► Visually we can map column and row headings to find the data in their intersection points, and find the appropriate headings from the intersection points in a data cell ► We need to provide the same type of functionality to those that need the assistance of a screen reader.

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 48

Simple Data Tables

...

Performance

	scope=“col” >1998	1999	2000
scope=“row” >Fund	17.7

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 49

Complex DataTables

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 50

Complex Data Table Code

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 51

Effective Data Tables

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

► Use the TH element for all heading cells.

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

► For complex tables: Assign an id to each heading cell and string of id’s as the header attribute for each data cell to say which are heading cells for that data cell. ► Use the summary attribute and/or CAPTION element. Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 52

Table Guidelines

(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. Related Guidelines: 508 §1194.22(g, h); WCAG 5.1, 5.2; IBM 10. What is the accessibility problem?

What is the solution?

Does anyone else benefit from this guideline?

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 53

Working with Frames

Copyright © 2005 Knowbility, Inc .

Accessible Web Design Techniques 54

Frameset Code

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” /

> ...</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 55</p> <a id="p56" href="#"></a> <h3>Frames example</h3> <p>As seen with Lynx: FRAME: frame 70890 FRAME: frame 70888 Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 56</p> <a id="p57" href="#"></a> <h3>Frames Guideline</h3> <p>(i) Frames shall be titled with text that facilitates frame identification and navigation. Related Guidelines: 508 §1194.22(i); WCAG 12.1; IBM 9.</p> <p>What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 57</p> <a id="p58" href="#"></a> <h3>Alternate/Text-only Version</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 Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 58</p> <a id="p59" href="#"></a> <h3>Text-only Guidelines</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. Related Guidelines: 508 §1194.22(k); WCAG 11.4.</p> <p>What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 59</p> <a id="p60" href="#"></a> <h3>Scripting and Interactivity</h3> <p>► Some user agents don’t support all or any JavaScript ► To be interoperable we need to ensure that our pages work with scripting on or off ► Scripting traditionally involves the mouse, but what about people that can’t/don’t use a mouse?</p> <p>► Avoid using JavaScript that breaks the way that things are expected to work Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 60</p> <a id="p61" href="#"></a> <h3>Scripting Guidelines</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. Related Guidelines: 508 §1194.22(l); WCAG 6.3, 6.4, 8.1, 9.3; IBM 5. What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 61</p> <a id="p62" href="#"></a> <h2>Applets and Plugins</h2> <p>► ► ► ► When you click on a link to a PDF in your web browser, what happens to the PDF?</p> <p>When you go to a web site that is Flash based, where does the Flash movie run?</p> <p>If you go to a site that uses a Java Applet, it runs in the browser, embedded in the HTML page itself.</p> <p>What issues do all of these cause for someone who doesn’t have those plugins? what about for Sam, who is using a screen reader?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 62</p> <a id="p63" href="#"></a> <h3>Applet/Plugin Guidelines</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). Related Guidelines: 508 §1194.22(m); WCAG 6.3, 6.4, 8.1; IBM 6.</p> <p>What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 63</p> <a id="p64" href="#"></a> <h3>Accessible Forms</h3> <p>Text prompt Input control Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 64</p> <a id="p65" href="#"></a> <h3>Accessible Forms</h3> <p>1.</p> <p>Position text prompts immediately adjacent to input controls 2.</p> <p>3.</p> <p>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 Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 65</p> <a id="p66" 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>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 66</p> <a id="p67" href="#"></a> <h3>Accessible Forms: Title</h3> <p>► Some times there is no text to use with Label: ► <INPUT type=“radio” ... title=“disagree 3”> Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 67</p> <a id="p68" href="#"></a> <h2>Forms Guidelines</h2> <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 .</p> <p>Related Guidelines: 508 §1194.22(n); WCAG 10.2, 12.4, 9,3; IBM 7 What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 68</p> <a id="p69" href="#"></a> <h2>Exercise</h2> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 69</p> <a id="p70" href="#"></a> <h3>Skip Navigation</h3> <p>► Generally, 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. ► ► the most common phrase is “skip to main content” can be used in other places as well to skip “blocks” Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 70</p> <a id="p71" href="#"></a> <h2>A Skip Navigation Solution</h2> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 71</p> <a id="p72" href="#"></a> <h3>Skip Navigation Example</h3> <p><a href=“#ContentArea”> <img src= … </p> <p><b>alt=“Skip to main content”</b></p> <p>...</p> <p><a name=“ContentArea”></a> … Updated: 12:03 … Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 72</p> <a id="p73" 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} Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 73</p> <a id="p74" href="#"></a> <h3>Skip Navigation Guidelines</h3> <p>(o) A method shall be provided that permits users to skip repetitive navigation links. Related Guidelines: 508 §1194.22(o); WCAG 13.5, 13.6; IBM 8 What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 74</p> <a id="p75" href="#"></a> <h2>Things to Avoid</h2> <p>► Pop Ups ► Timed Responses ► Flickering Content Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 75</p> <a id="p76" href="#"></a> <h3>Popup Windows</h3> <p>► bad reputation as ad delivery mechanism ► popup blockers integrated into browsers.</p> <p>► disorienting when not expected and loses browser history ► unaware that new window(s) opened Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 76</p> <a id="p77" href="#"></a> <h3>Popup Windows</h3> <p>‣ do not launch them automatically ‣ ‣ ‣ inform the user in text before the link, or in text as part of the link provide a simple way to close the popup allow the window to be resized to accomodate variations in text size</p> <p><b>Related guidelines: WCAG 10.1.</b></p> <p>‣ Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 77</p> <a id="p78" href="#"></a> <h2>Exercise – Read this important </h2> <p>►</p> <h2>information</h2> <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>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 78</p> <a id="p79" href="#"></a> <h2>Exercise – Read this important </h2> <p>►</p> <h2>information</h2> <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>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 79</p> <a id="p80" href="#"></a> <h2>Exercise – Read this important information</h2> <p>► Fundamentally transforming well designed actionable information whose semantic content is virtually null. Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 80</p> <a id="p81" href="#"></a> <h2>Exercise – Read this important information</h2> <p>► To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue.</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 81</p> <a id="p82" href="#"></a> <h2>Exercise – Read this important information</h2> <p>► 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>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 82</p> <a id="p83" href="#"></a> <h3>Timing is Everything</h3> <p>► In the last example, the slide switched every 3 seconds. Were you able to read it all?</p> <p>► What would it be like to read changing content if the content was in a language you were learning?</p> <p>► What if you had reading difficulties?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 83</p> <a id="p84" href="#"></a> <h2>Timed Response</h2> <p>► What if you could only type one letter every three seconds while filling out a form?</p> <p>► What impact does this have on someone that is filling out larger forms?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 84</p> <a id="p85" href="#"></a> <h3>Timed Response: Options?</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>► Let people know ahead of time how long the process will take, and inform them if they will need certain documentation so they can collect it Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 85</p> <a id="p86" href="#"></a> <h3>Timed Response Guidelines</h3> <p>(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. Related Guidelines: 508 §1194.22(p) What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 86</p> <a id="p87" href="#"></a> <h3>Flicker – Don’t Do It!</h3> <p>► Did you know that flickering images on the screen can cause some people to have seizures?</p> <p>► ► Anyone here have photosensitive epilepsy? If No – then go to ► ncam.wgbh.org/richmedia/media/flicker_demo.html</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 87</p> <a id="p88" href="#"></a> <h3>Flicker Guidelines</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. Related guidelines: 508 §1194.22(j); WCAG 7.1; IBM 13.</p> <p>What is the accessibility problem?</p> <p>What is the solution?</p> <p>Does anyone else benefit from this guideline?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 88</p> <a id="p89" href="#"></a> <p>►</p> <h2>Accomplishments & Next Steps</h2> <p><b>What have you learned today?</b></p> <p>► ►</p> <p><b>Next Steps</b></p> <p>What accessibility actions do you plan to take next?</p> <p>► What do you need now?</p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques</p> <a id="p90" href="#"></a> <h2>Thanks!</h2> <p><b>…for your time, your interest and your commitment to accessibility …join us online on the Accessibility SIG http://knowbility.org/mailman/listinfo/accessibility_sig_knowbility.org</b></p> <p>Copyright © 2005 Knowbility, Inc .</p> <p>Accessible Web Design Techniques 90</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

	Meals	Hotels	transport	subtotals
San Jose
25-Aug-97	headers=“meals sanjose 25aug” >37.74	112.00	45.00