Accessibility Findings

[niceborn]

Hello,

we had an accessibility assessment, because we are using the newest docker version of PlantUML in our company.

There were got some findings, which I would like to address here to probably get solved. Some of the issues are already solved in the alternative editor shown here: https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000

1. An input field cannot be left with the keyboard

Users with motor disabilities navigate within an application using the keyboard. That Multi-line input field of the UML editor cannot be exited with the keyboard, because with the Tab key Tab steps can be inserted within the input field. alternative Key combinations to leave the multi-line input fields are not available or are not documented in the application. As a result, further operation of the application is not possible possible.

Leaving the input fields should be possible with the tab key.

• If it is necessary that in the input fields tabulator distances with the Tab key can be inserted, an access key for exiting the fields should be defined and in the Application and help are documented.
• It is recommended to define the access key CTRL+TAB to leave the input fields, because this is how it is implemented in many applications.

2. Two elements do not have a label

In the application, two input fields do not have a label. Motor impaired users who Using voice control may not be able to interact with these fields and to control them.

• Each input field should have a visible label.
• Caption and form field should be linked in HTML markup. To do this, the forAttribute of the element should match the id of the form field.

3. The contrast distance of some non-text content is insufficient People with low visual acuity need a minimum contrast between foreground and background, to be able to see the content clearly. In the application, however, the contrast between non-text content and background is below the lower limits of 3:1 for some elements. This indicates insufficient perceptibility for visually impaired users. This concerns e.g. the following elements:

• Yellow input field to gray line numbering 1.32:1
• Yellow input field to white background 1.03:1

-There should be a minimum contrast of 3:1 between foreground and background for non-text content be respected.

• As an alternative to adjusting the background colors, borders can also be used for the input fields sufficient contrast can be used.
• Contrast analysis programs such as the are suitable for checking the contrast ratio “Colour Contrast Analyzer”: https://developer.paciellogroup.com/resources/contrastanalyser/

Fixes would be really helpful.

[arnaudroques]

Our main issue here is that there has been a fork between the open source "plantuml-server" hosted here (and used by the docker) and the close-source server hosted at plantuml.com

This open source "plantuml-server" is now just one of the many plugins of the core library plantuml.jar and we focus on the core library . So we are looking for help here and any contribution is welcome :-)

Having said that, the following items are easy to fix:

• About point 3), the background color is just defined at https://github.com/plantuml/plantuml-server/blob/master/src/main/webapp/plantuml.css#L27.

• About point 2), those fields are defined at https://github.com/plantuml/plantuml-server/blob/master/src/main/webapp/index.jsp#L60 and https://github.com/plantuml/plantuml-server/blob/master/src/main/webapp/index.jsp#L68 .

• About point 1), CodeMirror is used at https://github.com/plantuml/plantuml-server/blob/master/src/main/webapp/index.jsp#L38 Setting extraKeys: {Tab: false, "Shift-Tab": false} at explained here may solve the issue.

It would be nice if you could clone the project on your side, do the changes, test it and provide a PR so that we integrate these changes.

Does it sound possible for you?

[niceborn]

Yes, that is possible. Thanks for the hints.

Just as a preview here is the actual status:

We will commit the changes afterwards, to include them in the master branch.

[arnaudroques]

Great, it looks really cleaner. The "Copy to Clipboard" button is a good idea.

What about also a "Paste from Clipboard", and also having the same buttons "Clipboard" on the UML Content Editor? :-)

Many thanks for your work, it really helps!

[The-Lum]

Hello all,

Another good enhancement could be a button:

• Paste from Clipboard on the UML Editor Content part...

Regards.

[niceborn]

Hello,

thanks for all the ideas. I will also add the "Copy Content to Clipboard" functionality. In my opinion pasting content from clipboard into the editor is easier and don't need a button. Also there could be some security concerns about reading the clipboard from a website.

Regards.

[niceborn]

I created a pull request for the changes: https://github.com/plantuml/plantuml-server/pull/250

[arnaudroques]

Sorry to give you some work, but maybe you can update the README.md file with the proper image now. And many thanks for your contribution. I hope that this will push other people to also contribute :-)

[niceborn]

OK, I added a PR to replace the scteenshot https://github.com/plantuml/plantuml-server/pull/251

[niceborn]

Looks good now :-)

[niceborn]

Hi, I'm missing my changes in the newest release

[arnaudroques]

Sorry, I've made a mistake and erased your changes without intention. I'll restore them

[arnaudroques]

So it's restored now. Really sorry about that!

Would you like that we publish a new release so that you can get your changes in the official version?

[niceborn]

Many thanks for the quick restore. No, a new release is not necessary for me, because I will pull the master branch with the included changes.