Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to Web Accessibility: Koombea TechTalks

371 views

Published on

This deck was presented as part of a company initiative, #TechTalks, aimed to provide a space for the sharing and exploration of topics of interest in the industry.

Presented by: Fabian Altahona, Front-End Developer.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Intro to Web Accessibility: Koombea TechTalks

  1. 1. Introduction to Web Accessibility “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee By Fabian Altahona
  2. 2. Web Usability ● Specific Users ● Specific Goals ● Specific Context ● Effectively, efficiently and with satisfaction
  3. 3. Web accessibility ● Flexibility ● User benefits ● Assistive technologies ● Is often required by law ● Equal access and equal opportunity
  4. 4. Accessibility is not black and white
  5. 5. Accessible documents with HTML5 Use HTML5 semantic elements like <header>, <section>, <nav>, <article>, <aside> and heading tags.
  6. 6. ● Make sure parts of controls are grouped together. ex. dropdown menu right next to the button to open it. ● Label controls and Images. ● Use css for layout (not tables). ● Use ARIA attributes when no other tag is suitable for the job. Accesible documents with HTML5
  7. 7. For keyboard only users ● Make sure you can reach all interactive controls by tabbing. ● Make sure you can [enter] or [space] to activate UI controls. ● Manage focus proactively.
  8. 8. Web Accessibility Initiative (WAI)
  9. 9. Web Accessibility Initiative (WAI) ARIA Techniques for WCAG (Web Content Accessibility Guidelines) ARIA (Accessible Rich Internet Applications)
  10. 10. ARIA ● Is meant to replace the semantics of a tag. It’s like !important ● It allows sending information about the interface behaviour and structure to the accessibility APIs
  11. 11. ARIA properties There are 2 kinds of properties: ● ARIA roles ● ARIA states and properties
  12. 12. ARIA roles ● Landmark roles ● Using role as specified ● Avoid HTML tags without ARIA roles ● Add "aria-label" or "aria-labelledby" to differentiate zones with the same role
  13. 13. ARIA roles (a call of warning) role=”application” The application role gives us complete control, but remember: complete control can also lead to complete chaos. Screen readers may announce the 'application'. This also tells the screen reader that the application will take over the expected keyboard shortcuts and navigation functionality.
  14. 14. ARIA states Add dynamic information about the current state of an element.
  15. 15. Web accessibility - Scenarios Software accessibility: Properly Structured HTML Mobile accessibility: Responsive Web Design Accessibility for people with physical disabilities: Accessibility is the right thing to do Accessibility leads to good practice Accessibility helps to avoid legal concerns
  16. 16. Accessibility Testing Tools Accessibility/Web Standards Validators CSS/HTML Validators, FireBug, wave.webaim.org, Web Developer for Firefox, Accessibility Toolbar for IE, Luminosity Contrast Ratio Analyser Browser test : Graphical browser Listening with screen readers Authoring tool accessibility features Enterprise Accessibility Reports Define URL & Spider Profile, Select testing Criteria, Reports of progress Over Time

×