1 / 100

Building Web Pages for All Students

Building Web Pages for All Students. Marsha Allen, Web Manager Center for Assistive Technology & Environmental Access (CATEA) Southeast Disability & Business Technical Assistance Center Georgia Institute of Technology. But, first a word from our sponsors ….

colm
Download Presentation

Building Web Pages for All Students

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Web Pages for All Students Marsha Allen, Web Manager Center for Assistive Technology & Environmental Access (CATEA) Southeast Disability & Business Technical Assistance Center Georgia Institute of Technology

  2. But, first a word from our sponsors … (CATEA) Georgia Tech Center for Assistive Technology and Environmental Access • Training, research, information, and technical assistance on disability-related issues and design. • National public AT website: assistivetech.net • Mobility Rehabilitation Engineering Research Center • Workplace Rehabilitation Engineering Research Center www.catea.org

  3. (GRADE) Georgia Tech Research on Accessible Distance Education • Fact sheets & technical assistance • Accessible course models • Guidelines for accessible online materials • Accesselearning.net: 10 module online tutorial on making distance ed accessible www.catea.org/grade/

  4. Southeast Disability and Business Technical Assistance Center • 1 of 10 regional ADA & IT Centers funded to: • Facilitate voluntary compliance with Americans with Disabilities Act (ADA). • Promote accessible education-based electronic & information technology (IT). 800-949-4232 (v/tty/Spanish) www.sedbtac.org sedbtacproject@coa.gatech.edu

  5. States Served by Southeast DBTAC • Alabama • Florida • Georgia • Kentucky • Mississippi • North Carolina • South Carolina • Tennessee

  6. What will this workshop cover? • Applying elements to structure a web page. • Building a basic web page template. • Creating and using style sheet for web page. • Ideas for incorporating accessibility in other classroom subjects to promote diversity and computer literacy.

  7. How Is the Web Accessed?

  8. Power of the Web “ … is in its universality. Access by everyone, regardless of disability, technology, or environment is an essential, integral aspect of life.” “… is in its universality. Access by everyone, regardless of disability, technology, or environment is an essential, integral aspect of life.” Source: Tim Berners-Lee, W3C Director, Inventor of Web

  9. What is the User Experience? • Aoccdrnig to a rscheearchr at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a tatol mses and you can sitll raed it wouthit porbeslm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Amzanig huh!

  10. How are these seats different? • … In the mark-up. • Same applies to UNIVERSAL DESIGN of web sites

  11. Behind the Scenes of a Web Page • Foundation on which design is built. • HyperText Markup Language (HTML) • Develop in text editor (i.e. NotePad), Word, web authoring tool, “cut-n-paste”. • HTML Kit www.chami.com/html-kit/ • Many tools create “bad” or “junky” code. • i.e. Frontpage, “Save As Webpage”. • Elements create framework and structure content. • All elements have a start tag <keyword> • Most, but not all elements have end tag </keyword>

  12. HTML Elements for Framework of Web Page <html> <head> <title>Page Title</title> </head> <body> Content goes here </body> </html> Source: CommonHTML.doc

  13. Source: html_kit_interface.doc HTML Kit Interface

  14. Start Your Web Page • Open your preferred web authoring software (i.e. HTML Kit). • Open or create an HTML file. (i.e. File > Open File, browse to TemplateCode2Practice.htm) • Web pages should always have a <title>. • Find the <title> start tag. • Change “Page Title” to “Federal Court Concepts”.

  15. Writing for Web • Different than paper; each page independent. • Concise, “quick-to-read” chunks. • Hierarchical content organization. • Use standard fonts and sans-serif vs. serifs. • i.e.Arial, Verdana,Tahoma • Provide alternate formats. - Large print: minimum 18 pt.; preferred 22 pt.

  16. K.I.S.S. Principle • Use the clearest and simplest language appropriate for a site's content. • Keep it simple and standard.

  17. Common HTML Elements to Structure Web Content <p>paragraph</p> <br> = break <ul>unordered list</ul> <ol>ordered list</ol> <li>list item</li> <img src=“” alt=“”> = image <strong>bold</strong> <em>italics</em> <a href=“”>web link</a> <a href=“mailto:”>email link</a>

  18. Common HTML Elements to Structure Web Content • Headings (big small) <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6>

  19. Define acronyms and abbreviations • Helps text-to-speech technology, cognitive disabilities plus different language and learning styles. • Consider providing a “glossary”. • i.e. www.catea.org/grade/legal/glossary.html • Spell out first instance in text. • Way Too Much Information (WTMI) • Use <acronym> and <abbr> tags. <acronym title=“Also Known As”>AKA</acronym> <abbr title=“Street”>St.</abbr>

  20. Identify Language • Enables proper reading by text-to-speech and screenreader technology. • Use “lang” attribute: • Use with <html> tag to apply to whole document <html lang=“en”> • Use with any tag to identify language changes <p lang=“es”>Hola! Mi amigos!</p> • Use with <span> tag to apply to an instance <p>Spanish for hello: <span lang=“es”>Hola!</span></p>

  21. Use Valid Markup (Code) • Common error… deprecated code: • Change <b> to <strong> for BOLD • Change <i> to <em> for italics. • Remove <font> and bgcolor • Handle in style sheet (css). • Check using tools: • W3C Markup Validator http://validator.w3.org/ • WAVE tool • Online > W3C icon in HTML Kit

  22. Structure the Content • Open your preferred web authoring software (HTML Kit). • Open the file: TemplateCode2Practice.htm. • Identify the languague of the file. • Find the <html> starting tag. • Within <html> tag, add lang=“en”. • Make the First Level Heading <h1> of the Page. • Find “Name of Page” and highlight. • Go to Tools > 2nd icon (HTML Wizard), select “h1”. • Dialog box opens, change text to “Objectives” and select OK. • Structure the content in the file to be a paragraph followed by a list with three items. Code: <p>After completing this module, students should be able to:</p> <ul> <li>Understand the differences and similarities between the various types of federal courts.</li> <li>Identify the levels of the federal court system.</li> <li>Grasp the basic principles of legal research.</li> </ul>

  23. Structure the Content • Find the text starting “After completing …” and ending with “legal research” and structure it to be a paragraph followed by a list with three items. Code: <p>After completing this module, students should be able to:</p> <ul> <li>Understand the differences and similarities between the various types of federal courts.</li> <li>Identify the levels of the federal court system.</li> <li>Grasp the basic principles of legal research.</li> </ul>

  24. Links are Web's #1 interaction ... • “Violating common expectations for how links work is a sure way to confuse and delay users, and prevent them from being able to use your site.” • Life is too short to click on an unknown. Tell people where they're going and what they'll find at the other end of the link. Source: Jakob Nielsen (2005).

  25. Listening vs. Seeing the Web • Screenreaders • Get • Information • One • Word • At • A • Time

  26. -- And By Viewing Links Or Headings In A Page. Click here Click here Click here Document Here Download More

  27. Links • Inform user if opening new window. • Identify file type and size for non-web links and provide link to download software. • i.e. My File ( , 35 KB) • Separate adjacent links with printable characters surrounded by space to improve readability, target area. • Provide distinct link text that makes sense if read out of context (list of links).

  28. Testing Links: WAVE tool i.e. click here    *Link uninformative* 

  29. Testing Links: AIS Web Accessibility toolbar:Doc Info > Meta Info > List Links

  30. Testing Links: AIS Web Accessibility toolbar “ List Links”

  31. Link What You Mean • Open your preferred web authoring software (i.e. HTML Kit). • Open or create an HTML file. (i.e. TemplateCode2Practice.htm) • Find and make these links informative. • Click here for Previous Section. • Link to sponsor/funding source.

  32. Images Images Federal Court Concepts • Alternative-text (alt-text) for images #1 solution • Provide same information by context Select the best “alt-text” for sample image: • Mailbox • Letter entering mailbox • Mail Mailbox P.O. Box 123 Anywhere, State 98765 Letter entering mailbox Mailing Address

  33. Without alt-text, the filename of image or embedded type is displayed (i.e. kwajex.gif and inline, inline, inline, link, inline) No alt-text = no understanding kwajex.gif (45k)

  34. Code for alt-text of Images <img src=“logo.gif” border=“0” height=“150” width=“200” alt=“Federal Court Concepts”> Federal Court Concepts

  35. Null/Empty/Blank alt-text • Describing decorative, spacer, or bullet images, and repeating surrounding text annoys and confuses users. Bad: no alt-text alt=“right green corner” alt=“Arrow On” alt=“Bullet” alt=“Information” Information • Set alt so voice-enabled technology ignores and does not display in text browsers. Good: alt=“” alt = “” Information

  36. Length of alt-text • Holds 255 characters but maximum of 150 characters allowed by some browsers. • But, what if highly detailed like logo?

  37. Long Description • Use “longdesc” attribute of IMAGE (img) tag for detailed images or graphs; goes to webpage describing the image. <img src=“structure.gif” border=“0” height=“150” width=“200” alt=“Federal Court Concepts” longdesc=“logodescription.htm”>

  38. Additonal Ways For Long Description • Inconsistent (but better) support for “longdesc”. • Benefits users with cognitive disabilities, different learning styles or language. • Use a “d-link”. • Federal Court Concepts catea.org/grade/legal/index.html • Link around image to another web page with description • assistivetech.net assistivetech.net

  39. Caption below image for “long description” Source: catea.org/grade/lifespan/Segment2/slide3.htm

  40. Describe mathematical equations by case and position. Source: catea.org/grade/mecheng/mod2/mod2.html#slide2

  41. Testing Images: • Use validation tool: • WAVEhttp://wave.webaim.org/ no alt-text alt-text null alt-text

  42. Testing Images: AIS web accessibility toolbarImages > Toggle Alt, Image List, Show Images

  43. Testing Images: AIS web accessibility toolbar Text-version: Tools > Other Tools > Lynx Viewer

  44. Adding Images • Open web authoring software (HTML Kit). • Open web page file (i.e.TemplateCode2Practice.htm) • Add an image to the file (i.e. header2.gif ) • Find “ header2.gif” and highlight. • Object > 2nd icon (Images) to open dialog box. • Select “Add”, browse to images folder. • Select header2.gif. • Set "alt" attribute in <img> = “Federal Court Concepts." • Find “arrowleft.gif” and add alt=“”. • Find “arrowup.gif” and change alt=“”.

  45. Interface Design • Consistent, logical from page to page. • Use “expected” conventions. • Larger buttons and icons. • Avoid excessive use of graphics. • Last resort make a text-only page.

  46. Use high contrast between text and background High Contrast High Contrast LowContrast Very Low Contrast

  47. Navigation Design • Avoid JavaScript or Flash for menus. • Give reasonable time and alert if timed. • Offer consistent, logical, ready-placement. • Offer site map and contact / help information. • Provide search feature. • Describe accessibility features and site design.

  48. Skip-Navigation Link • Permits users to skip repetitive navigation links and directly access the content. • Benefits keyboard-only access, small screen devices. • Specifically required by Section 508. • Examples: • How skip-nav works: www.catea.org/grade/legal/ • Skip-nav link display using css: www.adagame.org/

  49. Code for Skip-Navigation Link • Create link as first element in web page <body>. <a href=“#main”>Skip to Page Content</a> • Put “anchor” just before content to be accessed. <a name=“#main”></a><h1>Page Title</h1>

  50. Making a Skip-Navigation Link • Open web authoring software (HTML Kit). • Open web page file (i.e.TemplateCode2Practice.htm) • Find “uncomment to reveal skip-nav”. Remove this text and the <!-- -- > surrounding some <a> code. • Find your <h1> tag. Just before that remove the <!--  surrounding some <a> code.

More Related