Accessibility - improvements for screen readers

[vojtapolasek]

Hello,
I am a blind user of this app. I really love it and I use it for many years. But this latest update of the GUI did not make me happy.
In the previous version, each article title was rendered as HTML heading. This is quite important for me because my screen reading software allows my to skip from heading to heading, quickly moving among articles.
Unfortunately, this is not working now as there are actrually no headings at all in my view. I tried enabled / disabled compact view and also extended compact view. No change.
There are probably few ways how to do that. I understand the GUI was changed, but could you please somehow mark the article title so that I can use it as a orientation point?
It could be heading or possibly a link or some anchor tag.
Feel free to ask for more details.
Thank you.

[SMillerDev]

Can you give some examples of other nextcloud apps that do this well so we can check how they have this implemented?

[wofferl]

It could be heading or possibly a link or some anchor tag.

This should be no problem to set this here for a fast solution in the next version.
Are you using the list only for the navigation to open the original articles or are you reading the articles also in the news app?
Which screenreader are you using?

But to get this right, I think, we need to read some documentation about accessibility.

[vojtapolasek]

Thank you for quick responses. The most important thing is now to get some orientation points so that I can move among articles.
In the past, articles were nicely rendered within the news app (I think this is that option "display full article"). I used it to do some quick article overview. If you could restore also this, it would be cool. But having some kind of landmark so that I can skip among articles is more important for me.
Honestly, a good example of usability was the News app version before the UI rewamp.

[wofferl]

@vojtapolasek
I changed it back so that the title has again the h1 tag and this seems the correct way for accessibility as I read.
Unfortunately the old endless scroll with full articles wasn't recreated and I don't know if someone can bring it back.

Currently there are three modes. The compact mode where you can switch between the list and the selected article
and the vertical split mode (default) or the horizontal split mode (expanded compact mode), where the selected article is in an extra pane right or below the list.
I don't know yet how exactly the screen readers work, but I think in split mode you need to change the focus between the article and the list.
For a quick solution I think adding a hotkey to the compact mode to open the article view (e.g. enter) and close it (e.g. escape), could help here.
Another solution that comes to my mind, is a "single item" mode where the items in the scrollable item list are using 100% of the visible list height, so we have a static item size for the scroll, but can show the full article. The only problem here could be that long articles have an extra scroll.

[vojtapolasek]

Thank you very much.
I will be happy to test if headings work. When can I expect an update in my Nextcloud please?
Regarding viewing articles in NC directly... The cool think would be if some keypress would bring me from the list to the opened article view and some keypress would bring me back to the list to the place I finished at. I would be happy to test it. I think I can install some snapshot versions if you tell me how to do that.

[Grotax]

New version (25.0.2) with the fixes done by @wofferl was released some minutes ago. Can take some time until your Nextcloud instance will see the option to update.

[vojtapolasek]

Hello, I tested it and it is inded much better. Thank you so much!
I have two more additions.

1. Do you think it could be done so that the heading is also a link? It would improve my productivity, because I could skip on the heading and open the article (the original site) without any other navigation to the link "open website". Not sure if it wouldn't break something visually.
2. I noticed that in the list of feeds the TAB key is not working as expected. When I press TAB, it seems I can't move through links. But when I use shift+TAB, (moving backwards), it seems it works.

Regarding reading the whole article within the News app... I think it is not a priority for me as of now. I can already read part of the article and this is enough for me to decide if I should open the original site or not.

[wofferl]

Hello, I tested it and it is inded much better. Thank you so much! I have two more additions.

1. Do you think it could be done so that the heading is also a link? It would improve my productivity, because I could skip on the heading and open the article (the original site) without any other navigation to the link "open website". Not sure if it wouldn't break something visually.

I will have a look how we can do this.

2. I noticed that in the list of feeds the TAB key is not working as expected. When I press TAB, it seems I can't move through links. But when I use shift+TAB, (moving backwards), it seems it works.

Unfortunately this is a bug in the library #2882, I reported to nextcloud, where it throws an error when tabbing to the action menu at feeds or folders. I have tried to workaround this, but unfortunately without success.
I will ask them what the state about this is.

Regarding reading the whole article within the News app... I think it is not a priority for me as of now. I can already read part of the article and this is enough for me to decide if I should open the original site or not.

I have already added the shortcuts 'enter' and 'esc' to switch between the list and the article view in compact mode. The next version will also contain some missing titles for the icons in the article list and view to toggle star and read, etc., so the screen reader can show these properly.

[vojtapolasek]

Cool, thank you. I subscribed to issues you linked.

[wofferl]

@vojtapolasek I tried yesterday the kde screen reader with orca to better understand how they work and was surprised that it tooks complete control over the keys, so that I can't use the shortcuts defined by the news app.
Is this always the case?
Does your screen reader also work that way?
Can this be configured to pass through the shortcuts from the news app?

[vojtapolasek]

Yes, Orca can be instructed to pass through keyboard shortcuts.
In web browsers, in general the "focus mode" is used. Here is more information about this feature:
https://emmabuntus.org/first-steps-with-the-orca-screen-reader/#Toggling_navigation_and_focus_modes
Basically when you activate the focus mode, keyboard shortcuts should go directly to the browser. But I am not sure how it will work with the "Enter" key.Is this already present in the version where you added headings so that I can try it out?

[wofferl]

Is this already present in the version where you added headings so that I can try it out?

This will come with the next version. I think we wait if the nextcloud developers give an answer today about fixing the tab problem to see if we get this also in the next version.

[wofferl]

I tried using a link for the heading, unfortunately had some issues to implement it.

Since clicking the whole row will select the item a link would overwrite this behavior and I didn't manage to make it accessible only for the screen reader. Maybe I can think of something else here.

The approach to use a link for the heading to select the item and show the article details has worked, but when closing the details the screen reader starts from the beginning when using heading navigation. Let me know if you see a way here that works for you, than I will add this.

If you can use the shortcuts from the news app itself I have now added 'e' and 'enter' to show the article details for the next version and you can open the website with 'o', but the item must be selected for this.

[vojtapolasek]

Hello,
firstly, kudos for trying the accessibility with a screen reader, this is not seen often and it is highly appreciated.
I think I already found a way to quickly open the original article; I move to the heading (with the h key) and pres shift+tab to get to the link "Open website" and activate with enter.
Please could you explain to me how the selection of articles actually works? How does the app determine what article is selected when screen reader is used?
Thank you.

[wofferl]

Currently the selection is done by either clicking the row (this is a div container with a click event), which I think can not be clicked by the screen reader, the other way to select items is using the news app shortcut keys 'h', 'j', 'right' for next article and 'p', 'k', 'left' for previous article.
Here I could easily add a link to the heading that also invoke the select event as clicking the whole row. This would bring you to the details of the article in compact view. After closing it you can jump than to the next article with the shortcut keys.
Because the header list is hidden when showing the article, here seems the problem, that the screen reader starts over after closing it.
So maybe the other modes could be better, but than we need a way that you can target the article on the right pane.

Regarding the "Open website" link, actual all have the same name, should this for clearness also include the title or maybe url?

[vojtapolasek]

hm. I think I have regression with scrolling. In the previous versions (before the rewrite), I could skip by headings and the feed was scrolling.
Now, it does not work like that, headings stop to repeat for me in some point.
I tried to use keyboard shortcuts you mentioned in the previous post, but unfortunately I don't receive any screen reader feedback.
Unfortunately, I am not sure how to help you to accomplish this.
What could work and do proper scrolling is using tab to go through the links. Curently, the link says only "open the site". That is fine as I understand its purpose. Do you think you could add some accessible text (which would not be visible and therefore not disturbing sighted users) with the title of the article? In this way I could skip by links and not by headings.
But I am open to any proposals which are feasible for you.

[wofferl]

Unfortunately the scrolling in news 25 is not working properly with orca and maybe other screen readers which still needs to be fixed (#2939).

For the list itself I did some changes like using the full article per item as it was in news 24. This will than be an extra mode for screen readers (#2950).

[vojtapolasek]

Hello,
the screen reader mode looks great! Thank you!
There is one problem though, not sure what is the cause: What I usually do (and I am sorry that I forgot to mention this) is to jump specifically by level 1 headings (by pressing the key 1). I do this because some articles can contain embedded headings and I want really to skip by articles, no not through their internal headings.
When I do that now in the latest news app, I get the word "article" announced before each heading. Did you put articles into some special containers / ARIA tags? It is a little bit distracting and it slows me down.
I confirm that scrolling is still not working unfortunately, that is a big issue and I have to use the app from my Android device.
Any idea when the scrolling issue is going to be solved?

[wofferl]

The change to make this a list of articles results from the official recommendations for a dynamic list as described here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/feed_role

This was in the hope that the structural navigation would work. If this is rather annoying it can also be undone.

I have forwarded the scrolling problem to the orca developers, hopefully they can solve the problem (https://gitlab.gnome.org/GNOME/orca/-/issues/555)

In the meantime, I am working on an alternative or workaround in which the in-app control can be used. In addition, I will add the PageDown and PageUp buttons to the navigation, which do not conflict with the screen reader.

This is working so far, but I still have two problems to solve.

The first is more of a flaw, that the title is read out twice. Once when you reach the article and then again when you navigate within the article.

The second is a somewhat more difficult problem that when you navigate through the article, e.g. with Tab or Down/Up and jump at the end to the next article with it, the selected article is out of sync with your position. When you are now use the in-app keys, you have to go through the articles again until you reach the right one.
I still need to find a way to either keep the navigation in the article or automatically select the article on focus change.

[vojtapolasek]

Wow, I like it now. I use page up and page down to go through articles and it works nicely. Thank you, I consider my requirements fullfilled.