screen reader improvements

[fichtner]

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

https://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/

• Buttons need better labeling in the MVC parts
• Full help toggle state is invisible
• Select/add widgets does not work
• IDS rules table may be empty

Similar things have been proposed here #367, but the use of a screen reader is probably the better approach as opposed to adding a screen-reader-like theme.

[fichtner]

Note: aria-label property is probably the best one for <button/>

https://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/

[tapper82]

Hi I signed up just to say thanks for thinking about a11y. I have found a grate video about Accessibility Testing with the NVDA Screenreader. http://www.deque.com/blog/accessibility-testing-nvda-screenreader/

[tapper82]

I just came across this witch mite help to.

Automated tool to find Accessibility defects on your web site by using the aXe Firefox extension. Drop the aXe on your accessibility defects! https://addons.mozilla.org/en-us/firefox/addon/axe-devtools/

[fichtner]

@tapper82 Thanks for all your help and input. This will be an official roadmap item for 17.1 if you are willing to help review changes and pages with me? :)

Cheers, Franco

[tapper82]

Hi thanks for the update and yes i will help out were i can. Just let me no and i will log on to the VM you have up and give feed back here or on twitter.

[fichtner]

perfect, thanks :)

[tapper82]

Hi OK lets start on the home page or the landing page what ever it's called I am going to copy and paste the text from the page as it reads to my screen reader so you can see how you can make it make more sense to a screen reader. Pleas bear in mind that when I read down the page with a screen reader which is NVDA, I read line by line and can use short cut keys to jump a round the page from link to link or heading to heading. This only works if the page has the rite lables and markup.So here goes. Starte of the page.

logo tapper82@OPNsense.localdomain

Lobby Dashboard License Password Logout Reporting System Interfaces Firewall VPN Services Power Help Lobby: Dashboard Add widget 2 columns  2 columns

System Information ✏ −

Name OPNsense.localdomain Versions OPNsense 16.7-amd64 FreeBSD 10.3-RELEASE-p5 LibreSSL 2.3.6 Updates Click to check for updates CPU Type Virtual CPU e7da7129d3ee (1 cores) CPU usage 01000100 Load average 0.15, 0.31, 0.24 Uptime 00:10:18 Current date/time Thu Jul 28 10:54:44 CEST 2016 Last config change Thu Jul 28 10:42:12 CEST 2016 State table size 0 % ( 2/73000 ) MBUF Usage 1% 1 % ( 510/45720 ) Memory usage 22% 22 % ( 163/734 MB ) Disk usage 9% 9% / ufs Interface List ✏ −

  WAN

10Gbase-T 108.61.175.156 2001:19f0:7400:8542:5400:ff:fe0b:a9ba OPNsense (c) 2014-2016 Deciso B.V.

End of page.

[tapper82]

So starting from the top. The logo needs a label to let people no what the link does like HOME or Back to dashboard.

Then on line 2 as i read down the page it says "tapper82@OPNsense.localdomain" underneath that i think there is a search field I think but it does not show up to my screen reader for about 75% of the time. If it's not a search field then somthing is making NVDA say search on line 3 about 25% of the time. When it does not say search it says that line 3 is a landmark for a password link..

Then we get to a list of links which are: Lobby Dashboard License Password Logout Reporting System Interfaces Firewall VPN Services Power Help

My first thing is that some times NVDA will not read the first link Lobby it skips strate to Dashboard. One thing that wood be really helpful to me is if the first link in the list had a heading tag because then i could use the h key on my keyboard to jump straight to the first link in the list. You could all so lable them as a list then i could use the L key on my keyboard to jump to the first link in the list.

Then after the Help link it says to me "Banner list with 2 items Lobby: Dashboard" Which I don't know what that meens.

Then we have the button to Add widget, which has the rite lable but from then on non of the buttons have lables. Can you make the widgets have heading tags so i can jump from one to the other with my h key?

Thanks for reading through my big txt walls :) I hope this helps. I have never dun this be for so is this the info you want? Does it help? Does it make sense to you?

[tapper82]

Don't know if this is any use to you in the improvement of the ui for people usint screenreaders but hope it helps.

When building interfaces, it is important to also consider those who can only use a keyboard to use your products. This is a basic accessibility need, and in most cases it isn’t hard to allow for a basic keyboard access. It means first and foremost using keyboard accessible elements for interaction: ◾ anchors with a valid href attribute if you want the user to go somewhere ◾ buttons when you want to execute your own code and stay in the document You can make almost everything keyboard accessible using the roving tab index technique, but why bother when there are HTML elements that can do the same? MAKING IT VISUAL Using the right elements isn’t quite enough though; you also need to make it obvious where a keyboard user is in a collection of elements. Browsers do this by putting an outline around active elements. Whilst dead useful this has always been a thorn in the side of people who want to control the whole visual display of any interaction. You can remove this visual aid by setting the CSS outline property to none, which is a big accessibility issue unless you also provide an alternative. By using the most obvious HTML elements for the job and some CSS to ensure that not only hover but also focus states are defined we can make it easy for our users to navigate a list of items by tabbing through them. Shift-Tab allows you to go backwards. You can try it here and the HTML is pretty straight forward. https://www.christianheilmann.com/2016/08/15/better-keyboard-navigation-with-progressive-enhancement/

[tapper82]

Know update for a wile now! Just came across this: Single page applications, Angular.js and accessibility http://simplyaccessible.com/article/spangular-accessibility/

[tapper82]

https://developer.mozilla.org/en-US/docs/Learn/Accessibility

[fichtner]

sorry, we had to move this up due to the workload required for this release

[tapper82]

The longer you leave this the harder it will get to put the fixes in place!

[fichtner]

I'm closing this now due to ongoing time constraints, see our policy on contributor missing for feature: https://github.com/opnsense/core/blob/master/CONTRIBUTING.md

[tapper82]

Have you even asked for any help? I haven't seen you post about it on Twitter or the Forums. Other projects don't drag there feet so mutch when it comes to A11y.

[AdSchellevis]

https://github.com/opnsense/core/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22

[tapper82]

@AdSchellevis how would that get you help? Onley people who look through your git would even know that is there. When we started up this convo I thought that we could fix the complete lack of a11y in the webinterface, but I see after all this time you were just trying to get me to shut up! If you lot would like your firewall to be used in more work places then you had better think about a11y because if there is a work place where a blind person works then it would never get used. If OpenWrt and Gargoyle can do it then so can you.

[AdSchellevis]

@tapper82 I don't think anyone is trying to "shut you up", the reality is that (at least at the moment) there are no people willing or able to work on your request.

@fichtner spend some time on this, but his time is limited as well. Already two years ago he communicated about the workload and marked the issue with "help wanted"...

Eventually things can only progress if there are enough people motivated to do the actual work needed, which in this case unfortunately just doesn't seem to happen.

If someone is willing to work on this at some point in time, we can always consider reopening the issue, so-far nobody offered help.

Keeping the issue open for another two years just isn't very useful, which is one of the reasons for us to have a contributing policy (https://github.com/opnsense/core/blob/master/CONTRIBUTING.md).

Please remember, your request is one of many.

[tapper82]

Hi again. Has any one asked for help with this? A forum post? A blog post? Twitter? No thought not!

[CamdenBopp]

Have there been any updates? I’m an inexperienced web dev and am legally blind, so this would be beneficial to me as well.

[tapper82]

I haven't used the latest webinterface so cant say sorry. What I can say is that if OpenWrt would be OK for your use case then the a11y is fantastic. The 2 bugs I did find have both bin fixed and the devs are verry nice.

[jfayre]

Hello, I'm a totally blind user of Opnsense, and I use a screen reader. I would be willing to fix at least some of the major accessibility issues that are making Opensense difficult to use for a screen reader user. The biggest of these is unlabelled buttons and dialogs using the aria-hidden="true" attribute, which makes them invisible to a screen reader. I see this issue is very old. If I submit a PR, should I use this old issue or create a new one?

[tapper82]

Hi if you do make a new one could you pleas post a link here? I dont check the git mutch. I gave up on ever running this a long time ago. A11y with Openwrt is as good as you could ever ask for, but they are different Systems.