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

Web Accessibility and its Importance in Web Development

Web Accessibility and its Importance in Web Development

Introduction to web accessibility, its benefits, guidlines, tips on how to make a webpage or app accessible,demo and reference for further reading...

7b530c1b4ea621bc241defdcf4d002e8?s=128

Judith Oiku

April 27, 2019
Tweet

Transcript

  1. WEB ACCESSIBILITY AND ITS IMPORTANACE IN WEB DEVELOPEMENT OIKU JUDITH

    @ojosaro WEB DEVELOPER & CONTENT STRATEGIST #WomenTechmakers
  2. Image source: google.com

  3. WEB & ACCESSIBILITY The web was created for all people

    irrespective of their hardware , software, language or ability. So when the web meets this criteria, we can say it is accessible to all with a diverse range of hearing , movement , sight and cognitive ability. #WomenTechmakers #IWD19
  4. WHAT IS WEB ACCESSIBILITY According to W3C- Web Accessibility Initiative(WAI),

    Web accessibility means that websites, tools and technologies are designed and developed so that people with disabilities can use them. The disabilities that affect access to the web , include: • Auditory • Cognitive and intellectual • Neurological • Physical • visual #WomenTechmakers #IWD19
  5. #WomenTechmakers #IWD19

  6. BENEFITS • People using mobile phones, smart watches and other

    devices with small screen • Older people with changing due to ageing • People with temporary disabilities such as broken arm or lost glasses • People with “situational limitations” such as in a noisy environment • Aid search optimization #WomenTechmakers #IWD19
  7. W3C GUIDELINES FOR WEB ACCESIBILITY • Web Content Accessibility Guidelines

    (WCAG) perceivable operable understandable robust • Agent Tool Accessibility Guidelines (ATAG) - CMS, code editors and other software • User Agent Accessibility Guideline (UAAG) -web browsers & media players #WomenTechmakers #IWD19
  8. #WomenTechmakers #IWD19

  9. HOW CAN WE MAKE HOW WEBSITE ACCESSIBLE 1. Proper HTML

    semantics to structure content correctly 2. Use proper colors 3. Add Alt Text to Images 4. Make the site keyboard-friendly 5. Use relative size (rem & em) 6. Links named meaningfully 7. Specifying the page language using the lang attribute in the HTML Tag 8. Do not use tables for layout 9. Using label , tabindex on forms 10. Use a CMS that supports accessibility #WomenTechmakers #IWD19
  10. #WomenTechmakers #IWD19

  11. #WomenTechmakers #IWD19

  12. #WomenTechmakers #IWD19 Image source: google.com

  13. #WomenTechmakers #IWD19

  14. WEB ACCESSIBILITY TOOLS 1. Chrome lighthouse 2. A11y.css 3. Achecker

    4. Contrast checker 5. AMP (Accessibility Management Platform) #WomenTechmakers #IWD19
  15. REFERENCE 1. https://www.w3.org/WAI/fundamentals/accessibility-intro/ 2. https://www.dreamhost.com/blog/make-your-website-accessible/ 3. https://en.m.Wikipedia.org/wiki/Web_accessibility 4. https://developers.google.com/web/fundamentals/accessibility/ 5.

    YouTube - Introduction to Web Accessibility and W3C Standards #WomenTechmakers #IWD19
  16. THANK YOU!!! #WomenTechmakers #IWD19