[A11Y] Improving the accessibility of the Galley buttons

[israelcefrin]

Issue Description

The galley buttons are currently showing two kinds of label:

1. Visual: File extension , e.g. PDF
2. aria-labelled-by: which uses the submission title

It is not clear what happens when an user clicks on each button. Does it open a viewer for both? Can the user download the files?

How to reproduce / Current behavior

This issue is related to any theme since this component is the same for every OJS theme.

1. Access an OJS installation
2. Click on a published submission
3. Check the galley buttons

What application are you using?

OJS 3.4

Stack used

• Device: Laptop
• OS: MacOS
• Browser: Chrome / Safari /Firefox

Testing method

• Method: Manual; Keyboard

Action

We could improve the accessibility of this component, both visually and for assistive technology users, by adding a bit more information about what happens when it is focused and by adding extra information to the button label, e.g., "Read PDF."
On that note, we could add a button to download the PDF since we have this feature and users may need download the file instead of reading it on the built-in previewer.

OJS provides an HTML and a PDF built-in previewer that could be integrated to the core of the system. It is common to enable these plugins on fresh installation and keep it enabled.

Additional information

See an example of how this component could add more info to the label:

It is also recommended to include descriptive link text to each button/link to inform users about the file type and its purpose. Also, including the file type and size (if applicable) in the link text could help users decide whether to download it.

Example:

• Download the article in PDF format - 1.2 MB
• Read the article in PDF format
• Read the article in HTML format
• Read the article in HTML format - simplified