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. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 8.
  7. 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
  8. 12.

    When web design is practiced as a craft and not

    a consolation, accessibility comes for free.” “ Jeffrey Veen
  9. 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
  10. 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
  11. 16.
  12. 17.
  13. 18.
  14. 19.
  15. 20.
  16. 21.
  17. 25.
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 37.
  26. 38.
  27. 39.
  28. 40.
  29. 42.

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

    Flexible leading and measure Visuals can’t communicate
  30. 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
  31. 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
  32. 48.
  33. 49.
  34. 50.
  35. 51.
  36. 53.

    Typography Typefaces, type treatments and white space Colour Emotion and

    interaction vocabulary Texture Decoration, line-work, patterns and shapes
  37. 54.
  38. 55.
  39. 56.
  40. 57.
  41. 59.
  42. 60.
  43. 61.

    21 a 24 a 36 a 48 a 14 a

    16 a 18 a 12 a 11 a 10 a
  44. 62.

    21 24 36 48 14 16 18 12 11 10

    a a a a a a a a a a
  45. 63.

    21 24 36 48 14 16 18 12 11 10

    a a a a a a a a a a
  46. 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
  47. 65.
  48. 66.
  49. 67.
  50. 70.
  51. 71.
  52. 72.
  53. 73.
  54. 74.
  55. 75.
  56. 76.
  57. 77.
  58. 78.
  59. 79.
  60. 80.
  61. 82.
  62. 83.
  63. 84.
  64. 85.
  65. 86.
  66. 87.
  67. 88.
  68. 89.
  69. 92.
  70. 93.
  71. 94.
  72. 95.
  73. 96.
  74. 97.
  75. 98.
  76. 100.
  77. 101.
  78. 102.
  79. 103.
  80. 104.
  81. 105.
  82. 106.
  83. 107.
  84. 109.
  85. 110.
  86. 111.
  87. 112.
  88. 113.
  89. 114.
  90. 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
  91. 117.
  92. 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)
  93. 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.
  94. 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
  95. 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`
  96. 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[ 
  97. 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
  98. 126.
  99. 127.
  100. 128.
  101. 129.
  102. 130.
  103. 131.

    The web’s content must be built to travel across networks

    to unknown devices and browsers.” “ Jeffrey Veen Hotwired Style book, 1997
  104. 133.
  105. 134.