WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: How Screen Reader should read Single Page Application?

for

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

From: pratik roy
Date: Sat, Jul 28 2018 9:05AM
Subject: How Screen Reader should read Single Page Application?
No previous message | Next message →

Hi Everyone,

As we know, in a Single Page Application, when a user clicks on a link, we
often see instead of loading the entire webpage only a portion of the web
page is getting refreshed (say only main content is changing not the header
or footer).In this kind of scenario how SR should read the new content?

As the normal browser load is not happening, screen reader will not start
reading the page content automatically but yes, I can use ARIA to make it
read but here comes my actual question. From where SR should start reading-

1) Start from the title of the page and then the remaining content. OR
2) Only the changed content in main content section (skip header).

Please let me know your thoughts on this.

Thanks & Regards
PRATIK ROY

From: Jared Smith
Date: Sat, Jul 28 2018 9:29AM
Subject: Re: How Screen Reader should read Single Page Application?
← Previous message | Next message →

pratik wrote:

> As the normal browser load is not happening, screen reader will not start
> reading the page content automatically but yes, I can use ARIA to make it
> read but here comes my actual question. From where SR should start reading-

Using an ARIA alert or live region would not be optimal. While it
would cause the text content to be read, it would be read as a stream
of information devoid of semantics and structure. The user would not
be able to pause/play of further explore the content, or interact with
elements within it - unless they manually go find where that content
is on the page.

It would be best to set focus to the new content area so the screen
reader will begin reading and navigating there. You indicated that the
user is clicking on a link, so the best solution is to treat this as a
link - essentially a same-page link.

Thanks,

Jared

From: glen walker
Date: Sun, Jul 29 2018 10:46AM
Subject: Re: How Screen Reader should read Single Page Application?
← Previous message | No next message

Hi Pratik,

Whether someone uses a screen reader or not, there are certain behaviors
that will be expected when clicking on a link.

1. I'll be taken to a new page
2. I'll be taken to another location on the current page
3. I'll be taken to the next step in a "wizard", which could be a new page
or could be content updated on the same page (single page app)
4. If the link looks or sounds like a tab, I'll expect just different
content on the same page (and hopefully my focus does not move - ie, my
focus should still be on the "tab")

In your example, if "contact us" were just an in-page link that took you to
a section of the page that had email, phone, address info, or a form for
submitting a question, I wouldn't expect page title and the rest of the
page to be read. It depends what kind of link it is. For a sighted user,
if they see "contact us" as the link text and they don't look at the
browser's status bar to see where the link points to, then they won't know
whether to expect a new page load or to be scrolled to a different part of
the current page. It really doesn't matter. As long as the browser's
"back" button takes them back to where they were before.

If a screen reader says "contact us, link", then I still don't know if I'm
going to a new page or somewhere on the current page, but again I will
expect the browser's "back" button to work.

If I'm going through a wizard or single page app and I hear "next, link", I
would also expect the "back" button to work. If I hear "next, button",
then I'd expect something to happen on the current page and the browser's
"back" button doesn't come into play.

My point is that you were concerned that the user might not know the link
is an in-page link. Most users, whether sighted or not, do not know if a
link is an in-page link. If they see or hear a page load, then they know
they went to a new page. If they see or hear new content elsewhere on the
page, then they know they just scrolled. With a single page app, neither
of those behaviors really happen. A sighted user's visual focus stays
right where it was but part of the page updated. As Jared said, that same
expectation should be conveyed to a screen reader too. Keep the "eye
focus" where it was but put the "screen reader focus" on the new content.

Why "fake" the user into hearing a page title read again (even if the title
changed) when all you're doing is updating part of the page? If you do
that, mimicking a page load, then I would expect the browser's "back"
button to take me to the previous step.

If you still have concerns, you can create some prototypes that do
different behaviors and test them with real users.


On Sun, Jul 29, 2018 at 12:43 AM, pratik roy < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi Jared,
>
> Thanks for your reply.
>
> I understand your point, treating those links as same page link and moving
> the focus to start of changed content would solve my problem to some extent
> but my doubt is, what if screen reader can't recognize the link as same
> page link. In that case, when user click on a link, for example, 'Contact
> us' link, don't you think, they would expect a page load and other screen
> reader behavior associated with a that, like start reading 'Contact Us'
> page title and the rest of page content?
> That is the reason, I am still little bit reluctant to move the focus to
> start of the changed content. Accordingly to me, if we move the focus to
> the beginning to the page and also make the page title read automatically
> then that would give better user experience. Obviously this would not give
> the essence of single page application but they will get the experience as
> per the expectation. This is my thoughts. Kindly let me know your thoughts
> on this.
>
> Thanks & Regards
> PRATIK ROY
>
> >
> > ---------- Forwarded message ----------
> > From: Jared Smith < = EMAIL ADDRESS REMOVED = >
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Cc:
> > Bcc:
> > Date: Sat, 28 Jul 2018 09:29:59 -0600
> > Subject: Re: [WebAIM] How Screen Reader should read Single Page
> > Application?
> > pratik wrote:
> >
> > > As the normal browser load is not happening, screen reader will not
> start
> > > reading the page content automatically but yes, I can use ARIA to make
> it
> > > read but here comes my actual question. From where SR should start
> > reading-
> >
> > Using an ARIA alert or live region would not be optimal. While it
> > would cause the text content to be read, it would be read as a stream
> > of information devoid of semantics and structure. The user would not
> > be able to pause/play of further explore the content, or interact with
> > elements within it - unless they manually go find where that content
> > is on the page.
> >
> > It would be best to set focus to the new content area so the screen
> > reader will begin reading and navigating there. You indicated that the
> > user is clicking on a link, so the best solution is to treat this as a
> > link - essentially a same-page link.
> >
> > Thanks,
> >
> > Jared
>