Tænk tilgængelighed og
brugervenlighed ind i
dine sites
Karen Mardahl	

25 May 2014	

#wpdk
Designer eller udvikler?
Dette oplæg er til jer!
Jeres website?	

Det er ikke til dig!
“The power of the Web is in its
universality.Access by everyone
regardless of disability is an
essential aspect.”	

Tim Be...
Hvem er dine brugere?
CC by 2.0 Rosenfeldmedia på Flickr
CC by 2.0 Rosenfeldmedia på Flickr
CC by 2.0 Rosenfeldmedia på Flickr
“A Web for Everyone” - https://rosenfeldmedia.com/books/a-web-for-everyone/
CC by 2.0 Rosenfeldmedia på Flickr
BUSINE$$
http://www.w3.org/WAI/bcase/resources.html
Planlægning
BAD!	

(http://www.w3.org/WAI/demos/bad/)
Gør det kun med
tastatur!
http://webaim.org/techniques/keyboard/
<alt>
http://dev.w3.org/html5/alt-techniques/
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
<title>
http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
<title>
http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
Overskrifter & Struktur
Lister:
<ol>
<ul>
<li>
(+ CSS)
Link tekst
“Klik her”	

“Læs mere”
http://www.mardahl.dk/2010/11/22/i-dont-want-to-read-more-or-click-here/
Link tekst
“Klik her”	

“Læs mere”
http://www.mardahl.dk/2010/11/22/i-dont-want-to-read-more-or-click-here/
• http://bookshop.europa.eu/is-bin/INTERSHOP.enfinity/WFS/EU-
Bookshop-Site/en_GB/-/EUR/ViewPublication-Start?
PublicationK...
TEKST
STØRRELSE
http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg
http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg / Tritanopia.svg
http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg / Tritanopia.svg / Protanopia.svg
http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg / Tritanopia.svg / Protanopia.svg / Gay_flag.svg
Farve & kontrast
http://www.snook.ca/technical/colour_contrast/colour.html
<autoplay=”autoplay”>
<autoplay=”autoplay”>
Undertekster
http://www.slideshare.net/kmardahl/technical-communication-and-inclusion-5347819
Mobile Matters Most
http://www.opera.com/developer/mobile-emulator
Evaluering med

http://wave.webaim.org/
http://www.w3.org/Translations/WCAG20-da/
1. Opfattelig	

2. Anvendelig	

3. Forståelig	

4. Robust
http://make.wordpress.org/
accessibility/
http://www.coolfields.co.uk
and
https://www.joedolson.com
Gode tilgængelighedsressourcer for WordPress
Eksempel af virkelig dårlig CAPTCHA
???	

Karen Mardahl	

@kmdk	

mardahl.dk	

about.me/kmdk
Upcoming SlideShare
Loading in...5
×

Tænk tilgængelighed og brugervenlighed ind i dine sites

443

Published on

(Danish) Slides fra min WordCamp Danmark 2014 præsentation 25/5-2014

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
443
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tænk tilgængelighed og brugervenlighed ind i dine sites

  1. 1. Tænk tilgængelighed og brugervenlighed ind i dine sites Karen Mardahl 25 May 2014 #wpdk
  2. 2. Designer eller udvikler? Dette oplæg er til jer!
  3. 3. Jeres website? Det er ikke til dig!
  4. 4. “The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee,W3C Director and inventor of the World Wide Web
  5. 5. Hvem er dine brugere?
  6. 6. CC by 2.0 Rosenfeldmedia på Flickr
  7. 7. CC by 2.0 Rosenfeldmedia på Flickr
  8. 8. CC by 2.0 Rosenfeldmedia på Flickr
  9. 9. “A Web for Everyone” - https://rosenfeldmedia.com/books/a-web-for-everyone/ CC by 2.0 Rosenfeldmedia på Flickr
  10. 10. BUSINE$$ http://www.w3.org/WAI/bcase/resources.html
  11. 11. Planlægning
  12. 12. BAD! (http://www.w3.org/WAI/demos/bad/)
  13. 13. Gør det kun med tastatur! http://webaim.org/techniques/keyboard/
  14. 14. <alt> http://dev.w3.org/html5/alt-techniques/
  15. 15. http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
  16. 16. <title> http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
  17. 17. <title> http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
  18. 18. Overskrifter & Struktur
  19. 19. Lister: <ol> <ul> <li> (+ CSS)
  20. 20. Link tekst “Klik her” “Læs mere” http://www.mardahl.dk/2010/11/22/i-dont-want-to-read-more-or-click-here/
  21. 21. Link tekst “Klik her” “Læs mere” http://www.mardahl.dk/2010/11/22/i-dont-want-to-read-more-or-click-here/
  22. 22. • http://bookshop.europa.eu/is-bin/INTERSHOP.enfinity/WFS/EU- Bookshop-Site/en_GB/-/EUR/ViewPublication-Start? PublicationKey=HC3010536 “Skriv klart” x 23 sprog
  23. 23. TEKST STØRRELSE http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
  24. 24. http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg
  25. 25. http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg / Tritanopia.svg
  26. 26. http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg / Tritanopia.svg / Protanopia.svg
  27. 27. http://commons.wikimedia.org/wiki/File:Rainbow_Deuteranopia.svg / Tritanopia.svg / Protanopia.svg / Gay_flag.svg
  28. 28. Farve & kontrast http://www.snook.ca/technical/colour_contrast/colour.html
  29. 29. <autoplay=”autoplay”>
  30. 30. <autoplay=”autoplay”>
  31. 31. Undertekster http://www.slideshare.net/kmardahl/technical-communication-and-inclusion-5347819
  32. 32. Mobile Matters Most http://www.opera.com/developer/mobile-emulator
  33. 33. Evaluering med
 http://wave.webaim.org/
  34. 34. http://www.w3.org/Translations/WCAG20-da/ 1. Opfattelig 2. Anvendelig 3. Forståelig 4. Robust
  35. 35. http://make.wordpress.org/ accessibility/
  36. 36. http://www.coolfields.co.uk and https://www.joedolson.com Gode tilgængelighedsressourcer for WordPress
  37. 37. Eksempel af virkelig dårlig CAPTCHA
  38. 38. ??? Karen Mardahl @kmdk mardahl.dk about.me/kmdk
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×