Designing an atmosphere for accessibility

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
October 21, 2013

Designing an atmosphere for accessibility

Accessibility Day 2013. Oslo, Norway, October 24th 2013.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

October 21, 2013
Tweet

Transcript

  1. Designing an atmosphere of accessibility Andrew Clarke @malarkey

  2. None
  3. None
  4. None
  5. None
  6. None
  7. accessifyforum.com

  8. None
  9. I don’t care about accessibility.” veen.com/jeff/archives/000503.html 17 March 2004 “

  10. Jeffrey Veen Don’t care. Not an issue. Hardly ever comes

    up.” “
  11. When you design exclusively and specifically for this medium, so

    many of the things we consider problems just start to fall away.” “ Jeffrey Veen
  12. When web design is practiced as a craft and not

    a consolation, accessibility comes for free.” “ Jeffrey Veen
  13. You suck.” “ Jack Crowther

  14. Designing adaptable pages is designing accessible pages. And perhaps the

    great promise of the web is accessibility, regardless of difficulties, to information.” “ alistapart.com/article/dao April 7, 2000
  15. We should embrace the fact that the web doesn’t have

    the same constraints [as the printed page] and design for this flexibility. But first, we must ‘accept the ebb and flow of things’.” “ alistapart.com/article/dao April 7, 2000
  16. 640x480

  17. None
  18. 800x600

  19. 1024x768

  20. None
  21. None
  22. 320x480 3.5" iPhone

  23. 480x320 3.5" iPhone in landscape orientation

  24. 568x320 4" iPhone in landscape orientation

  25. None
  26. Arguing about 640, 800 or 1024 pixels is like arguing

    about whether Pepsi tastes better than Coke when really, a nice glass of water would be much more refreshing.” “ http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith
  27. The numbers game is a red herring. A big fixed-width

    red herring.” “ http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith
  28. http://www.flickr.com/photos/brad_frost/7387764524

  29. Responsive web design offers us a way forward, finally allowing

    us to ‘design for the ebb and flow of things’.” “ alistapart.com/article/responsive-web-design May 25, 2010
  30. ✎ ⚙  ➡ ➡ ➡ Plan Design Develop Deploy

  31. ✎ ⚙  ✓ ✓ ✓

  32.  ✓ ✓ ✎ ⚙

  33. Worse still are the expectations that static visuals set in

    the minds of clients, particularly when designers use them as a method to get sign-off for a design.” “ stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ June 28, 2009
  34. I often wonder, ‘is the fact that so many web

    pages are fixed- width and centered, a direct result of clients signing off fixed-width design visuals?’” “ stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ June 28, 2009
  35. User experience design Site audit (existing assets) Flows and navigation

    maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
  36. User experience design Site audit (existing assets) Flows and navigation

    maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
  37. ⌘N

  38. None
  39. None
  40. None
  41. Designer Client Developer ⬊ ➡

  42. Percentage-based layouts Media Queries Native form element styling Font rendering

    Flexible leading and measure Visuals can’t communicate
  43. Browsers’ CSS capabilities Pseudo-classes CSS3 ligatures and swashes CSS3 animations

    CSS3 transitions Visuals can’t communicate
  44. Graphic design tools are bringing a knife to a gunfight

  45. Stephen Hay’s workflow Content inventory Design in text (structured content)

    Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://slideshare.net/stephenhay/responsive-design-workflow
  46. Content inventory Design in text (structured content) Linear design Breakpoint

    graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://slideshare.net/stephenhay/responsive-design-workflow Stephen Hay’s workflow
  47. Designers should write markup to communicate the meaning in a

    design
  48. None
  49. None
  50. None
  51. None
  52. design - layout = atmosphere

  53. Typography Typefaces, type treatments and white space Colour Emotion and

    interaction vocabulary Texture Decoration, line-work, patterns and shapes
  54. None
  55. None
  56. None
  57. None
  58. Typography

  59. None
  60. None
  61. 21 a 24 a 36 a 48 a 14 a

    16 a 18 a 12 a 11 a 10 a
  62. 21 24 36 48 14 16 18 12 11 10

    a a a a a a a a a a
  63. 21 24 36 48 14 16 18 12 11 10

    a a a a a a a a a a
  64. Elements Captions Headings Labels Legends Lists Paragraphs Quotations Small Tables

    Classifications Alerts Comments Copyright information Dates and times Form text (error, help) Pull quotes (marks) Intro paragraphs Related article summaries Related article titles
  65. None
  66. None
  67. None
  68. http://goo.gl/o23Vc

  69. Typography decisions for accessibility affect everyone

  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. Contrast

  81. Typography Typographic colour Type on backgrounds Hyperlink text Contrast issues

  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. Colour

  89. None
  90. DPMPVSFYQMPSBUJPO  $SFBUJWF *OOPWBUJWF 'VO 'BTUQBDFE "EBQUJWF 1SBHNBUJD

  91. DPMPVSFYQMPSBUJPO CMPDLTPGDPMPVS

  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. None
  99. Deuteranopia

  100. Protanopia

  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. Texture

  108. Backgrounds Border treatment Iconography Patterns and textures Texture

  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. Web designers will have to look beyond the layout to

    envision how elements will reflow & lockup at various widths while maintaining form & hierarchy.” “ http://trentwalton.com/2011/07/14/content-choreography Trent Walton
  116. Design guides

  117. None
  118. FRV BRAND GUIDELINES ES

  119. 25 MASS: TYPOGRAPHY ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz

    abcdefghijklmnopqrstuvwxyz The Product Name should appear in Futura Std Bold Uppercase. This sans serif font has been chosen for its clarity, legibility and classic appeal. The Front Product Descriptor copy should appear in ITC Century Std Lowercase. This serif font has been chosen for its simple style and clarity even in smaller point sizes. The back of pack copy should appear in Futura Std. This sans serif font has been chosen for its simple style and clarity even in smaller point sizes. All fonts are OpenType from the Adobe Font Folio 11. (www.adobe.com/uk/products/fontfolio)
  120. 17 MASS PANTONE 7489 C PANTONE 7495 C PANTONE 366

    C PANTONE 383 C PANTONE 7406 C PANTONE 121 C PANTONE 1235 C PANTONE 7502 C PANTONE 157 C PANTONE 138 C PANTONE 166 C PANTONE Warm Red C PANTONE 485 C PANTONE 184 C PANTONE 5005 C PANTONE 7431 C PANTONE 673 C PANTONE 701 C PANTONE 529 C PANTONE 7446 C PANTONE 659 C PANTONE 7459 C PANTONE 278 C PANTONE 551 C PANTONE 629 C PANTONE 3105 C PANTONE 3248 C PANTONE 7466 C PANTONE 7536 C PANTONE 7530 C OUTDOOR PANTONE 583 C PANTONE 291 C MASS: COLOUR PALETTE Mass products are made up of a warm colourful palette that is both complementary and contrasting. Colour is a key element of this design, therefore it is important that Pantone colours are used to print the designs rather than CMYK. Pantone colours will provide the maximum amount of consistency across the Product Range. In instances where this is not possible we have created optimised CMYK values that are shown on page 18. In the instance that a suitable colour does not exist for a Mass Food product, please contact your Licensing Manager.
  121. 22 MASS: PHOTOGRAPHY Always use image in monochrome with a

    background colour wash Never use in colour Never use simply as black and white image Never position anywhere other than bottom right Never cover with copy ITALIAN FUSILLI enjoy traditional texture with Durum Wheat Semolina Never force the image into the given space – leave an area of blank space round the image Never position the image around a corner do’s and dont’s
  122. )\PSKPUNH .SVIHS,_WLYPLUJL3HUN\HNL MVY[OL))* .,3:[`SLN\PKL

  123. $ULDO5HJXODU $%&'()*+,-./0123456789:;<= DEFGHIJKLMNOPQRSTUVWXYZ[\] #…A B $ULDO%ROG $%&'()*+,-./0123456789:;<= DEFGHIJKLMNOPQRSTUVWXYZ[\] #…A B

    +MPP7ERW6IKYPEV %&'()*+,-./0123456789:;<=> EFGHIJKLMNOPQRSTUVWXYZ[\]^ $† B  C .,3\ZLZIVSK[`WVNYHWO`[VJYLH[LZ[YVUNLY OPLYHYJOPLZHUKKYHTHHJYVZZ[OLZP[L>L»YLTV]PUN MYVT=LYKHUH[V(YPHSHZ[OL))*»ZKLMH\S[^LIMVU[MVY IV[OOLHKLYZHUKIVK`JVW`  )\PSKPUN)SVJRZ;`WVNYHWO`
  124.  )\PSKPUN)SVJRZ;`WVNYHWO` 3HYNLIVSK[`WLZOV\SKIL\ZLK[VLZ[HISPZO HJSLHYPUMVYTH[PVUOPLYHYJO`;OLZLHYL[OL YLJVTTLUKLK[`WLZPaLZ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[

    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ $ULDO%ROGS[ S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ  $ULDO%ROGS[ $5,$/%2/'&$3,7$/,6('S[ 
  125.  )\PSKPUN)SVJRZ0JVUVNYHWO` >LOH]LKLZPNULKHUL^ZL[VMPJVUZ[V^VYRPU OHYTVU`^P[O[OLUL^]PZ\HSSHUN\HNL;OLKLMH\S[ ZPaLPZW_HUKPJVUZJHUIL\ZLK^P[OVY^P[OV\[ HÅH[I\[[VUJVU[HPULY;OLZLJHUIL\ZLKPUHU` JVSV\Y\USLZZV[OLY^PZLZWLJPÄLK 3UHYLRXV 1H[W 8S

    'RZQ 7R7RS 7R%RWWRP &ORVH5HPRYH 1R'HOHWH 'RZQORDG 8SORDG 6HDUFK 8QORFN <HV +HOS ,QIR&DSWLRQ 3ULQW (PDLO 9RFDE2Q2II 5HIUHVK $ODUP5HPLQGHU 'XUDWLRQ &RXQWGRZQ ([SLUHV 6HWWLQJV 'HJUDGHG &RQWHQW *ULG9LHZ /LVW9LHZ WH[W =RRP,Q +RPH /LVW9LHZ WH[WDQGWKXPE 1HZ1HZLWHPV 4XRWH ([WHUQDO/LQN /RDGLQJ &KDSWHUV /LQNWR7KLV (PEHG -VYTVYLPUMVYTH[PVUVYMVY[OLM\SSZL[VMPJVUZ]PZP[IIJJV\RNLSPJVUVNYHWO`ZO[TS
  126. None
  127. None
  128. None
  129. None
  130. None
  131. The web’s content must be built to travel across networks

    to unknown devices and browsers.” “ Jeffrey Veen Hotwired Style book, 1997
  132. takk følg @malarkey

  133. None
  134. None