WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessibility with Angular SPAs

for

Number of posts in this thread: 4 (In chronological order)

From: Vaibhav Saraf
Date: Wed, Aug 19 2020 10:55AM
Subject: Accessibility with Angular SPAs
No previous message | Next message →

Hi Everyone,

I was studying a couple of webapps built using Angular recently. I realised
that some of the accessibility techniques differ slightly for single page
applications than the regular ones like handling page title
programmatically, more considerations around focus management, etc.

Is there some good training around which I can go through to understand the
topic in a better way?

Thanks,
Vaibhav

From: Farough, David (CFP/PSC)
Date: Wed, Aug 19 2020 11:07AM
Subject: Re: Accessibility with Angular SPAs
← Previous message | Next message →

Check out the following article for more information.
https://www.deque.com/blog/accessibility-tips-in-single-page-applications/


From: Farough, David (CFP/PSC)
Date: Wed, Aug 19 2020 11:32AM
Subject: Re: Accessibility with Angular SPAs
← Previous message | Next message →

I provided the following information to some of our developers who have been developing a single page application.

They have done a great job and the app they developed is much more performant than the app it replaces.

Here is the article that outlines steps that were taken to improve accessibility for the Gatsby application. Much of this will apply to the react based application that you are developing.
https://www.gatsbyjs.org/blog/2020-02-10-accessible-client-side-routing-improvements/
included in this post is a GitHub issue that goes into more detail as to problems encountered.

The following YouTube presentation occurred last October as part of Inclusive Design 24. It outlines what steps were taken to improve accessibility for the application and explains why steps were taken and the various accessibility situations that benefitted as a result.
https://www.youtube.com/watch?v=Tr21FqQQv-U

The following link is to the testing organization that provided the testers who evaluated the application.
This might also be a useful approach for testing as they can Taylor the testing to people with disabilities that you want to target.
https://www.makeitfable.com/

From: Lynch, Sarah
Date: Wed, Aug 19 2020 12:18PM
Subject: Re: Accessibility with Angular SPAs
← Previous message | No next message

Hi Vaibhav,

I don't have much experience with Angular (I mostly use React), but I did a talk recently (yesterday) on how to make a single page app accessible:
https://www.youtube.com/watch?v=lXZAQHnub7M&list=PL2WxAQWHwnC8KUKvhSVcC-uVn1s475pNR&index=35&t=0s

Hope it helps!

Best,
Sarah

_____
Sarah Lynch, CPWA (she/her/hers)
Accessibility Engineer
Yale University, Information Technology Services
25 Science Park, 527V | 203-432-2041
accessibility.yale.edu