Improve accessibility for the visually impaired

[neosonic2]

I am a completely blind individual using the VoiceOver screen reading program on macOS to navigate around the Internet, including working inside Freescout.

While the Web app is pretty accessible out of the box, there are many areas of the interface that could use some improvement in terms of how they are read by and made interactible with screen readers.

What plans do the Freescout team have for improving the accessibility of this app for those who use screen readers and other assistive technologies?

I am a Web developer experienced in PHP and the Laravel framework (versions 7 and 8 though, not version 5) as well as Web accessibility standards like ARIA. I would be happy to help contribute to this effort, especially since I already know, based on my usage of Freescout as a blind individual, what elements should be made more accessible and how their accessibility can be improved, without sacrificing their functionality or visual appearance. If you would like me to assist in this endeavor please let me know how I can get started.

Thank you!

[freescout-helpdesk]

You can create a simple custom module (Improved Accessibility, for example) and we will add it to https://github.com/freescout-helpdesk/freescout/wiki/Community-Modules. When activated the module will adjust the CSS of the FreeScout. You can create a GitHub repo for the module, so that other can also contribute.

Here is the info on developing modules: https://github.com/freescout-helpdesk/freescout/wiki/Modules-Development

[neosonic2]

Thanks for your reply. However, the accessibility changes/improvements that are needed would require modifying the HTML of the core Freescout application, i.e. to add or improve ARIA roles and other attributes. Could this be done by creating a custom module as you suggest? I'm not going to be changing anything visually so I probably wouldn't be editing any CSS; I would mostly just be making HTML changes.

[freescout-helpdesk]

Yes. Just use Actions and Filters.

[neosonic2]

After some further investigation, it looks like a lot of the accessibility changes I need to make can be done to the HTML within the resources/views folder. For example, there are unlabeled buttons that change the conversation type from e-mail to phone and are located in resources/views/conversations/create.blade.php that could be edited. Once these changes are made, can I create a pull request here to merge my accessibility enhancements into the core project?

[freescout-helpdesk]

Yes.

[fulldecent]

@neosonic2 Could you please provide one example of a thing we can change. Let's start with that and then make a process to fix more

[neosonic2]

Certainly. One thing that, as of right now, is completely inaccessible in the Freescout user interface are the buttons for sending a reply, adding a note, and performing related actions while viewing a specific conversation. The buttons nearby, i.e. for setting the status of a conversation and assigning it to a different user, and even the dropdown menu that allows a conversation to be forwarded and etc., are accessible, but the aforementioned actions are not. Something else that could be made more accessible are certain buttons throughout the application that do not have ARIA labels on them that identifies them to screen reader users even when the button is just an icon (and thus contains no text). Examples of these are found in the HTML editor used when writing conversations, or in the buttons to switch a new conversation from an e-mail to a note, or even in the assignment, status, and other buttons mentioned previously when viewing a specific conversation.

…

On Jun 22, 2021, at 12:39 PM, William Entriken ***@***.***> wrote: @neosonic2 <https://github.com/neosonic2> Could you please provide one example of a thing we can change. Let's start with that and then make a process to fix more — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1150 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACJDEDDRGC24Q6WN6PM3XYLTUC4DTANCNFSM42WBJFHQ>.

[fulldecent]

@neosonic2 Awesome, thank you.

And are you able to run a copy of FreeScout using a specific git branch in order to evaluate if a PR fixes the problem?

[neosonic2]

Yes. I have a local development environment on my Mac that can be used to run specific branches of software as required. I also have experience in developing for accessibility, in making Websites and Web applications accessible, etc. As a visually impaired individual, accessibility was something I learned about from the start when learning to develop for the Web, so I am willing to assist in getting these issues fixed, and in testing potential fixes, wherever necessary. I am also willing to provide any additional information as required, and test using multiple screen reading programs on multiple operating systems (I currently have macOS and Windows available).

…

On Jun 22, 2021, at 5:48 PM, William Entriken ***@***.***> wrote: @neosonic2 <https://github.com/neosonic2> Awesome, thank you. And are you able to run a copy of FreeScout using a specific git branch in order to evaluate if a PR fixes the problem? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1150 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACJDEDBLG4B2LRTJINU6IATTUEALNANCNFSM42WBJFHQ>.

[fulldecent]

Here is a shot to fix just the action buttons.

#1285

The drop down is not as straightforward.

Does this fix the reply/note/delete buttons for you?

[neosonic2]

Thanks for putting this together. I haven’t had a chance to look at it yet but will do so later today and let you know if the buttons are fixed. Just wanted to acknowledge I saw your reply. Also off hand without looking at the code for the dropdown, adding the “aria-label” attribute to the dropdown element (the clickable element that opens the menu) should be enough to make those accessible, as the only issue with them is that they are simply missing labels.

…

On Jun 24, 2021, at 12:29 AM, William Entriken ***@***.***> wrote: Here is a shot to fix just the action buttons. #1285 <#1285> The drop down is not as straightforward. Does this fix the reply/note/delete buttons for you? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1150 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACJDEDD6ESKD5R4IPGCADN3TUKYA3ANCNFSM42WBJFHQ>.

[fulldecent]

Currently they do have a title, which I think DOES get picked up. So I just added the role. But only testing can be sure...

[neosonic2]

Just had a second to grab the pull request and test locally. Adding role=“button” to the three conversation action buttons did the trick - they are now completely accessible. It may be helpful to wrap them inside a “Conversation actions” region (i.e. an invisible div with a role of region and an aria-label attribute of “Conversation actions”) so that when navigating by landmarked regions on the page, the actions can easily be found. However, this isn’t as high priority really unless we also want to wrap other key parts of their page in their own landmarks for easier discovery by screen readers.

…

On Jun 24, 2021, at 2:16 PM, William Entriken ***@***.***> wrote: Currently they do have a title, which I think DOES get picked up. So I just added the role. But only testing can be sure... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1150 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACJDEDDD7FBNXUYGZDUSE43TUNZBVANCNFSM42WBJFHQ>.