JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Web standards and Vue.js: accessibility and web components

Submitted by Mayank Singhal (@msinghal-sape) on May 14, 2019

Section: Crisp talk (20 mins) Technical level: Intermediate Status: Rejected

Abstract

The web has drastically changed the way we access, understand and use information. But what about people who have difficulties accessing web content?

For differently-abled people, the internet is still kind of a nightmare. The way internet grants easy access to services, products and information that, due to impairments in mobility, vision, hearing or cognition, would otherwise be inaccessible.
The internet is still far from being fully accessible. People with disabilities continue to be frustrated by barriers in web accessibility. These issues, either due to ignorance or apathy, are often overlooked by website owners or developers.

So it has become essential that the web is accessible to all and provides equal opportunities to people with disabilities.

Outline

Introduction
Why is accessibility important?
How/what can we do in vue.js to make our component accessible?
Using Aria
Accessing the focus target
Keyboard/Tabbing Order
List view
Combo box
Tooltip
Auto complete
Dynamic Page Titles in Vue
Bootstrap-Vue
How to audit vue.js component for accessibility
Vue a11y

Requirements

Basic knoweldge of accessibility.

Speaker bio

Mayank Singhal is associated with Publicis.Sapient as Senior Manager eXperience Technology. He holds 17+ years of eXperience and having expertise in different frontend technologies like vue.js, angular.js, react.js and so on.

He is one of the SMEs in compliance of web accessibility for different clients.

Slides

https://docs.google.com/presentation/d/1fPZcglHxhs7VtvI-4ASGBuv-UNjq1tbxDPTkXAREuD4/edit?usp=sharing

Preview video

https://www.youtube.com/watch?v=n1ieMU0S2oY

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}