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

Judith Oiku

April 27, 2019
Tweet

More Decks by Judith Oiku

Other Decks in Technology

Transcript

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

    @ojosaro WEB DEVELOPER & CONTENT STRATEGIST #WomenTechmakers
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. WEB ACCESSIBILITY TOOLS 1. Chrome lighthouse 2. A11y.css 3. Achecker

    4. Contrast checker 5. AMP (Accessibility Management Platform) #WomenTechmakers #IWD19