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 Berners-Lee, W3C Director and inventor of

the World Wide Web

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?PublicationKey=HC3010536

“Skriv klart” x 23 sprog

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

Underteksterhttp://www.slideshare.net/kmardahl/technical-communication-and-inclusion-5347819

Mobile Matters Most

http://www.opera.com/developer/mobile-emulator

Evaluering medhttp://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