Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for Accessibility

Laura Kalbag
November 11, 2014

Designing for Accessibility

From a talk given at dsgndayl in November, 2014

Laura Kalbag

November 11, 2014
Tweet

More Decks by Laura Kalbag

Other Decks in Design

Transcript

  1. = =

  2. T

  3. The problem with creating products to suit our own needs

    is that the tech industry is not diverse
  4. the more diverse a team, the more likely their product

    is to solve and serve the problems of a diverse audience
  5. 1. Make text content easy to read. 2. Ensure sensible

    font sizes. 3. Don’t prevent the user from resizing  the fonts themselves in the browser.
  6. 1. Good copy is a part of good accessibility. Keep

    your text simple and your meaning clear.
  7. 1. Use colour contrast tools to ensure your text is

    high-contrast enough. 2. Beware of super-high contrast too.
  8. This is a top-level heading This is a paragraph. It

    has some text in it. It’s a few sentences long. A lot of paragraphs look like this. This is a second level heading. This is a paragraph which has some links to other content and a button that allows you to take action.
  9. This is a top-level heading This is a paragraph. It

    has some text in it. It’s a few sentences long. A lot of paragraphs look like this. This is a second level heading. This is a paragraph which has some links to other content and a button that allows you to take action
  10. 1. Make the content structure clear and consistent. 2. Use

    semantic headings, labels, lists and other relevant elements for your HTML or native controls.
  11. Sometimes the links are the same colour and style as

    the rest of the text and you only find out it’s a link when you hover over it.
  12. Sometimes the links are the same colour and style as

    the rest of the text and you only find out it’s a link when you hover over it.
  13. 1. Make buttons and interactive elements easyily distinguishable from non-interactive

    elements. 2. Make links easy to recognise by using an underline.
  14. 1. Use link text that makes sense out of context.

    Don’t use “click here”. 2. Remember that not all your users are clicking.
  15. 1. Provide text alternatives for images that helps a user

    understand the context of the image.
  16. No, I don’t want to listen to your podcast or

    watch your video tutorial. Give me text!
  17. 1. Use JavaScript with care and load it in a

    sensible place. 2. If your web site or app needs JavaScript, ensure you use WAI ARIA to guide assistive technologies.
  18. 1. Give users enough time to read and use content

    2. Try not to distract users from their goals with unstoppable animations
  19. Consider accessibility at every point of planning. It is functionality,

    content hierarchy, copy, visual design and code.