A quick overview of web standards and accessibility and some advantages of implementation.

1. Building Webs Better
Building Better Webs and Web
Applications Organically
David Eldridge
Please feel free to use this document however you would like. Attribution is appreciated.

2. Introduction
• Shawnee County Webmaster
– Support ASP.NET developers for specialized apps.
– Maintain www.snco.us with HTML, CSS, JavaScript
and legacy ASP
• A Federal Webmaster (KSARNG/OSS)
– Began learning standards/accessibility
• Fed: Standards or Die!
– Good beginning
– I always use them
[ 2 ]Please feel free to use this document however you would like. Attribution is appreciated.

3. Overview
• Introduction
• Accessibility
• SEO, Semantics, Separation and Standards
• Performance Considerations
• Return on Investment (ROI)
• Questions and Housekeeping
[ 3 ]Please feel free to use this document however you would like. Attribution is appreciated.

4. Inseparability
• SEO, semantics, access/accessibility, etc. are
like yarn on a sweater:
– Carefully interwoven
– Indiscernibly separate
• Separating these topics can be difficult
Don’t do it: they work together well
[ 4 ]Please feel free to use this document however you would like. Attribution is appreciated.

5. Accessibility:
Some Assumptions
• Bad Word.
• Very Expensive.
• Low ROI.
[ 5 ]Please feel free to use this document however you would like. Attribution is appreciated.

6. Access:
Not Just Accessibility
What it’s not
• Protection
(against those with
disabilities)
What it is
• UA-appropriate
• Flexible
• Free
– Like speech
– Like beer
[ 6 ]Please feel free to use this document however you would like. Attribution is appreciated.

7. Access:
for People
• Screen
• Paper
• Screen readers
• Mobile/handheld/phone/PDA
• Non-standard devices
• DOM—etc.
[ 7 ]Please feel free to use this document however you would like. Attribution is appreciated.

8. Access:
for Machines
• Educational/Industrial Data mining
• Search Engines
• [Spam bots, too: sorry ]
• DOM—etc.
[ 8 ]Please feel free to use this document however you would like. Attribution is appreciated.

9. Access:
Document Object Model
• Ad hoc API
– Three simple examples:
• Web Clips—Safari 3+
• Web Slices—IE8 (product site)
– Requires some add’l coding
• “FireClips”—FF3 (video|add-on)
– Other capabilities available and coming
[ 9 ]Please feel free to use this document however you would like. Attribution is appreciated.

10. Access:
DOM—Extensibility
• It can be traversed, styled, destroyed,
created, and appended to dynamically
– JavaScript
– Style: CSS/XSLT
– Server-side code:
• PHP and Ruby (on Rails) among others support this
• In the future in Visual Studio?
Don’t be surprised, but don’t hold your breath.
[ 10 ]Please feel free to use this document however you would like. Attribution is appreciated.

11. Access:
User Interface
• Offer users early access to the whole page:
– e.g. “Go directly to content, or navigation.”
• Hide it from screen and print devices, etc.
• Offer it to mobile, non-standard devices, etc.
• JavaScript is not everywhere. Consider your
audience.
[ 11 ]Please feel free to use this document however you would like. Attribution is appreciated.

12. SEO, Semantics and Standards
• Standards are BAD! Err…?
– Help dumb people (like designers) to excel
– Avoid Hard Knocks University
– Level the playing field
[ 12 ]Please feel free to use this document however you would like. Attribution is appreciated.

13. SEO, Semantics and Standards
Continued
• W3C, WHATWG, Ecma Int’l, WaSP, etc.
– Recognize trends
– Codify standards
– Educate and Inform Educators (mostly WaSP)
– Empower developers
– Guide browser makers…
[ 13 ]Please feel free to use this document however you would like. Attribution is appreciated.

14. SEO, Semantics and Standards
Browser Changes
• FF, Safari implementing Canvas and SVG
• IE8, FF, Safari implementing <audio> and
<video> elements (good and bad):
– IE8/MS: MS formats 
– Safari/Apple: QuickTime formats 
– Firefox/Mozilla: Ogg formats 
[ 14 ]Please feel free to use this document however you would like. Attribution is appreciated.

15. SEO, Semantics and Standards
Standards ‘Decouple’ Documents
• Encourage document-level separation of
– Markup/Content ([X]HTML)
– Style (CSS/XSLT)
– Behavior (JavaScript)
[ 15 ]Please feel free to use this document however you would like. Attribution is appreciated.

16. SEO, Semantics and Standards
• Standards save work
– <video>/<audio> v. non-standard <embed>
– border-radius v. rounded corner JS/CSS/HTML
mess
– :hover v. old bloated hover image effect
– CSS font declarations v. non-semantic <font> tag
[ 16 ]Please feel free to use this document however you would like. Attribution is appreciated.

17. SEO, Semantics and Standards
• Standards add previously unrealized
functionality
– Microsoft’s XHR (XML HTTP Request):
Now Ajax (or AJAX if you insist)
– Microsoft’s JPEG XR (HD Photo, previously
Windows Media Photo): Better compression for
even larger image files, both lossy and lossless
[ 17 ]Please feel free to use this document however you would like. Attribution is appreciated.

18. Organic SEO
How Standards and SEO Relate
• Semantic tagging informs content
– Good: head>title, h1, span.phone-number
– Poor: font, small, big, b, i, blink
• Metadata fills in the gaps with keywords,
authorship, date and other information
– Dublin Core metadata is a good framework
[ 18 ]Please feel free to use this document however you would like. Attribution is appreciated.

19. Organic SEO
Continued
• Consider:
– <title>Banking Security • BankTwo</title>
…
<h1>Security Procedures</h1>
• Or:
– <title>BankTwo</title>
…
<span style="font-size:16px;color:#333333;font-
family:georgia;display:block;">Security</span>
[ 19 ]Please feel free to use this document however you would like. Attribution is appreciated.

20. Semantics
Informing Data
• Framework for categorization and the DOM:
– h1-h6, dl, dt, dd, ol, ul, li, dfn, abbr, p, address
• Classes (and IDs) further augment good semantics
– abbr.acronym, ol.contents, span.phone-work-
voice, span.name-last, ul.ingredients,
ol.instructions, div#content, div#footer-
legal
[ 20 ]Please feel free to use this document however you would like. Attribution is appreciated.

21. Semantics
Informing Data
• Semantics help us and machines cull data:
– Widgets: clips, slices etc.
– Microformats like hCard, hCalendar, hAtom and hReview
• Google now uses RDFa/hReview and hCard
– You don’t need to pioneer these technologies
• Google took years to jump on microformats
• Firefox didn’t get over 20% market in a day
• But folks are using these now
• All 3 big browsers use Web Slices/Clips
[ 21 ]Please feel free to use this document however you would like. Attribution is appreciated.

22. Brass Tacks:
Get out of Line: Use the DOM
• Standards make using JavaScript, DOM
scripting and Ajax easier and better
– It eases maintenance
• Less inline code
– It keeps code legible…
• Again, less incline code
[ 22 ]Please feel free to use this document however you would like. Attribution is appreciated.

23. Brass Tacks:
Get out of Line: Use the DOM
– It extends easily
• Classes, ID’s and the DOM make good hooks for JS
and style
• At best, they require a script tag
• More often they will also need more classes, ids
and/or elements.
– It fails well
• Users don’t miss it when it’s gone
(Everything still works)
[ 23 ]Please feel free to use this document however you would like. Attribution is appreciated.

24. Brass Tacks:
JavaScript and Accessibility
• Some users and UAs don’t see JavaScript fire:
– Screen readers
• Audibly indicating DOM-scripting and Ajax changes
through screen readers is a booger.
• Some UAs neglect it; others handle it poorly.
– Those behind corporate firewalls
– Some mobile UAs
– Others with JS disabled (purposefully or not)
[ 24 ]Please feel free to use this document however you would like. Attribution is appreciated.

25. Semantics
Cost and Value
• Building sloppy code is cheap
• Maintaining it isn’t: I know.
• Inline style (and event handlers) create larger
files, and make clean-up tedious
• Semantics offer ad hoc documentation
[ 25 ]Please feel free to use this document however you would like. Attribution is appreciated.

26. Semantics
Why Not?
• Learning curve?
– Yes.
• Code Bloat?
– No…
Consider another simple example.
[ 26 ]Please feel free to use this document however you would like. Attribution is appreciated.

27. Semantics
Why Not?
• HTML3 and earlier
– <table style="color:#555;background-
color:#eee;border:1px #333;vertical-
align:bottom; "…>…<tr><td
style="text-align:right;font-
family:consolas,'andale
mono',mono;">785.555.1212</td></tr></
table>
[ 27 ]Please feel free to use this document however you would like. Attribution is appreciated.

28. Semantics
Why Not?
• HTML4, HTML5, XTHML
– <table class="phone-chart"…>…<tr><td
class="phone-work-
fax">785.555.1212</td></tr></table>
[ 28 ]Please feel free to use this document however you would like. Attribution is appreciated.

29. Brass Tacks
• Some practical implementation examples
and ideas.
[ 29 ]Please feel free to use this document however you would like. Attribution is appreciated.

30. Brass Tacks:
Character Encoding
• Right after the head, even before <title>:
– make sure the title and all after are properly
encoded
• It’s important for good data and security…
– For display
• You don’t want to see that.
– For good capture and security:
• especially with intérñatiönal users
[ 31 ]Please feel free to use this document however you would like. Attribution is appreciated.

31. Brass Tacks:
Character Encoding
• Unless you have particular needs use UTF-8
– <!DOCTYPE HTML…>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Hello, World</title>
[ 32 ]Please feel free to use this document however you would like. Attribution is appreciated.

32. Brass Tacks:
JavaScript Bottlenecks
• HTTP/1.1 allows multiple persistent connections.
• Modern browsers load multiple resources (text,
image, audio, etc.) at once:
– Without manipulation, UAs don’t allow over two scripts
to pull in at once.
• When able, load scripts last (i.e. before </body>),
or use the onload event handler (or similar device)
to build your script request dynamically at full load.
[ 33 ]Please feel free to use this document however you would like. Attribution is appreciated.

33. Brass Tacks:
CSS Bottlenecks
• Make CSS external (usu. automatic in VS)
– But if not, avoid using the @import command in
<style> tags, as it causes problems with
concurrent downloading in some browsers
• Place it as soon after the title as possible:
– <!doctype…>…
<title>I am a title</title>
<link rel="stylesheet"/>
[ 34 ]Please feel free to use this document however you would like. Attribution is appreciated.

34. Brass Tacks:
More JS Considerations
• Be aware of VS controls that generate non-
standard mark-up:
– e.g. ListBox, DropDownList, AdRotator and more.
• As our DBA always reminds us, never trust
the client (device).
[ 35 ]Please feel free to use this document however you would like. Attribution is appreciated.

35. Brass Tacks:
More JS Considerations
• The JS pseudo-protocol is not a protocol…
• If you use it or inline event handlers with
href="#", the event will not fire in some
cases, leaving users bewildered.
[ 36 ]Please feel free to use this document however you would like. Attribution is appreciated.

36. Conclusion:
ROI
• Ease of extension
• Value of data: content is more informed
• Natural/Accidental/Organic SEO
• Faster page loads/decreased server load
• Greater user access/cullability
[ 37 ]Please feel free to use this document however you would like. Attribution is appreciated.

37. Conclusion:
Last Things
• I won’t be there to blame when your app fails
– And, they’ll laugh at you for listening to a designer
• Standards are usually optimal: but not always
• Standards change: so don’t follow blindly
• If they don’t help now, they may help later
• Make your boss happy: the food will follow
[ 38 ]Please feel free to use this document however you would like. Attribution is appreciated.

38. Questions?
• No?
• Good.
[ 39 ]Please feel free to use this document however you would like. Attribution is appreciated.

39. Questions?
[ 40 ]Please feel free to use this document however you would like. Attribution is appreciated.

40. Contact
• Please send any more questions to
– david@wd2.us
– 785.783.4755
– Google+ j.mp/rgum
• For this presentation visit goo.gl/PmoDw
[ 42 ]Please feel free to use this document however you would like. Attribution is appreciated.

41. [ 43 ]Please feel free to use this document however you would like. Attribution is appreciated.