Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Bedre tilgjengelighet med HTML og CSS

  • 1,775 views
Uploaded on

Christian Johansens foredrag om tilgjengelighet med HTML og CSS på NOKIOS 2007

Christian Johansens foredrag om tilgjengelighet med HTML og CSS på NOKIOS 2007

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,775
On Slideshare
1,726
From Embeds
49
Number of Embeds
2

Actions

Shares
Downloads
47
Comments
0
Likes
0

Embeds 49

http://www.kuttisme.no 48
http://www.netvibes.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. NOKIOS 2007 Bedre tilgjengelighet med XHTML og CSS Christian Johansen
  • 2. Dagens agenda Webstandarder Teknisk tilgjengelighet Semantisk HTML Tilgjengelige teknikker
  • 3. Webstandarder W3C www.w3.org (X)HTML CSS WCAG +++
  • 4. Standarder i hverdagen
  • 5. Standarder på web
  • 6. Teknisk tilgjengelighet Sidene må være maskinlesbare Tekst må lagres som tekst Teknologi benyttes i henhold til standarder
  • 7. Semantisk HTML Praksis, ikke standard Elementer brukes for betydning/semantikk, ikke standardutseende <h1>, <h2>, , <h6> ikke <p><b> <em> og <strong>, ikke <b> og <i> <ul>, <ol> og <dl> til lister <abbr>, <blockquote> og mange fler
  • 8. Kildekode mot visning Kildekoden (HTML) trenger ikke å ha samme struktur som visningen Løft sidens kjerneinnhold høyt opp i kildekoden Plasser sideelementer med CSS
  • 9. Utilgjengelighet #1
  • 10. Utilgjengelighet #2
  • 11. Utilgjengelighet #3
  • 12. Utilgjengelighet #4
  • 13. Utilgjengelighet #5
  • 14. Tilgjengelige teknikker Aktuelle både for HTML og XHTML Utgangspunkt i semantisk HTML Vurder alltid to teknikker mot hverandre når de har samme visuelle effekt
  • 15. Overskrifter <h1>, <h2>, , <h6> Bruk hierarkisk Korte, beskrivende titler
  • 16. Nytte: Semantic extractor http://www.w3.org/2003/12/semantic-extractor.html
  • 17. Kode: Overskrifter
  • 18. Kode: Overskrifter
  • 19. Labler for skjemaelementer <label> Kan knyttes til et inputfelt Lager strukturell kobling lik den visuelle
  • 20. Ledetekster for valg Radioknapper og avkrysningsbokser Klikkbare ledetekster CSS: label { cursor: pointer; }
  • 21. Nytte: Synlig klikkbare labler
  • 22. Kode: Klikkbare labler
  • 23. Feil: Synlig klikkbare labler
  • 24. Bak kulissene
  • 25. Hopp til innhold En enkel lenke, lenker til et anker
  • 26. Nytte: Hoppe over navigasjon
  • 27. Nytte: Hoppe over navigasjon
  • 28. Kode: Hopp til innhold
  • 29. Naken HTML Er dokumentet lesbart uten CSS? og uten Javascript?
  • 30. Nytte: Maskinlesbart
  • 31. Store klikkbare flater CSS: a { display: block } Alfabet-menyer Fane-menyer
  • 32. Nytte: Enkle lenker
  • 33. I en ideell verden Den mest riktige løsningen er ikke alltid den beste Nettleserbegrensninger legger fortsatt føringer på implementasjon Manglende fremdrift i nye standarder
  • 34. Bonus: Unngå nettleserlås
  • 35. Bonus: Søkemotoroptimalisering Ranger høyt med riktig implementasjon Unngå dyr teknisk optimalisering i etterkant
  • 36. Takk for meg Christian Johansen Grensesnittsutvikler .IXD christian@ixd.no - Mob. 934 17 480 www.ixd.no - www.kuttisme.no www.cjohansen.no Lysbilder kan lastes ned fra www.kuttisme.no