Let’s Make Our Single Page Application Accessible

Rate this content
Bookmark
The video discusses making single-page applications (SPAs) accessible, focusing on dynamic content, page refreshing, and custom components. It highlights the importance of web accessibility, mentioning that banks, shopping, and tax returns are increasingly online. The use of LiveRegion in Vue.js is explained to help screen reader users understand dynamic content changes. The video also covers the implementation of skip links to improve navigation for keyboard and screen reader users. Additionally, it suggests using accessible component libraries and tools like axe-core for checking accessibility issues during development. The speaker emphasizes the need for accessibility in noisy environments and for non-native speakers.

From Author:

This talk is going to provide recommendations to make a single page application accessible. The talk is not going to cover the basic of accessibility, like adding ALT text or using correct HTML elements, but it is going to cover major shortfalls existing in our SPA.

In no particular order, this talk is going to cover the following topics:

  • - Provide a list of resources (blog, book and people to follow)
  • - Introduce the issue with SPA with a live example
  • - Describe and solve issues with Routing issue in SPA
  • - Describe and solve issues with dynamic changes in a Vue app
  • - A quick intro to correct HTML element (and how to leverage Vue for this)
  • - Describe and fix Browser history

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

The speaker is Simone Cuomo, a software architect at Distal Labs.

You can reach Simone Cuomo on Twitter at @zelyk880 or visit his website at zelyk880.com. He is also active on Discord.

The main topic of the talk is making single-page applications (SPAs) accessible, particularly focusing on dynamic content, page refreshing, and custom components.

Accessibility is important because the Internet is essential for many daily tasks such as banking, shopping, and tax returns. Making web applications accessible ensures that everyone, including people with disabilities, can use them effectively.

Common accessibility issues with SPAs include handling dynamic content, ensuring proper page refreshing, and managing custom components that may not be accessible by default.

A LiveRegion is a part of a webpage that is read out by screen readers whenever its content changes. It helps inform users of dynamic changes on the page. In Vue.js, the 'ViewAnnouncer' plugin can be used to implement LiveRegions.

A skip link is a hidden link that allows users to bypass repetitive content and directly navigate to the main content of the page. It is crucial for enhancing accessibility, especially for keyboard and screen reader users.

Developers should use existing component libraries that are known to be accessible, check the basic requirements for accessibility on sites like W3 or Mozilla, and include accessibility checks in their development workflow using tools like 'axe-core' and 'view-axe'.

Tools like 'axe-core' and 'view-axe' can be integrated into the development environment to automatically check for accessibility issues and provide suggestions for improvements.

The slides and repository for the talk will be shared by Simone Cuomo after the presentation.

Simone Cuomo
Simone Cuomo
25 min
15 May, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to Vue.js Accessibility

Short description:

Hello, everyone! Today, I'll be discussing how to make our single page application accessible. I'm Simone Cuomo, a software architect at Distal Labs. Reach me on Twitter at zelyk880 or visit my website zelyk880.com. Let's dive in!

Hello, everyone, and welcome. It is a great pleasure to talk about Vue.js. And today's topic is going to be let's make our single page application accessible. But before we start, let me introduce myself. My name is Simone Cuomo, and I'm a software architect at Distal Labs. And you can reach me on Twitter at zelyk880, or read any of my articles on my website at zelyk880.com. Also wanted to let you know that I'm going to be very active on Discord and Twitter. So feel free to reach out if you've got any questions or you would like to have a chat regarding any topics Vue.js related.

Today's agenda is going to be extremely busy. We have 20 minutes, but we have 20 minutes full of content. This talk is not going to be the very basic accessibility talk where we talk about all tags and headings and so on and so forth. It's going to focus on single page application issues. I also want to let you know that I'm going to share the slides and I'm going to share the repository and everything that we're discussing during this talk later. There's no reason for you to actually get notes.

2. Why Accessibility Matters

Short description:

The Internet is not optional. Banks are closing down, forcing users to use the app, shopping is online, even the tax return is happening online. It is our duty to make the web more accessible. Accessibility is not only for people with disabilities, but also for those who may have temporary limitations or different circumstances. For example, a person holding a child may need to navigate with the keyboard, someone with dyslexia may struggle with long text, and a non-native speaker may rely on a screen reader. Accessible websites are essential in noisy environments or situations with excessive screen glare.

Where should we start? Well, first and foremost, what should we care about accessibility? That's the first question to answer. Well, the Internet is not optional. What do I mean by this? A few years ago, accessibility talks were all about giving disabled people the chance to access the Internet just for accessing the free Internet. Truth today is that they have to access the Internet. Banks are closing down, forcing users to use the app, shopping is online, even the tax return is happening online. So if we don't make our application accessible, how are these people going to do the day-to-day operation? How are they going to book flights? How are they going to do that? So it is our duty to actually make the web more accessible. There's a few stats down there that are big stats. 11 million people are disabled users accessing the Internet in 2022. That's 20% of the UK population, quite a bit. And the last point is, accessibility is not only for people with disability. What does that mean? People have the perception that we write accessibility code just for people that are disabled, but that may not be the case. A dad that is holding a child, sleeping on his hand, it happened to me when my child was younger, he may not be able to use the mouse and may have to navigate the site with the keyboard. The same if you have a cast. Then a person with dyslexia who may struggle to understand long text and a non-native speaker that is actually going to switch on the screen reader to be able to read the caption of it. So there is a lot of these things that are not really accessibility for the sake of disabled people, for the sake of disabled people, but accessibility to allow everybody in every circumstances to actually access the Internet. The last two examples there, very noisy environments, somebody has to switch on caption, or a very sunny day where there's so much glare on your screen that you cannot actually see colors. They may require an accessible website to actually see it all.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.