WCAG Issues - Improvements to follow WCAG Standards / accessibility

[GabeGabeT]

There are various WCAG issues that are oustanding even though nextcloud claims to follow the standards. I have included an excel of the outstanding issues.

wcagFixes.xlsx

Including: @szet0018 @RubyDo

[jancborchardt]

@GabeGabeT thanks a lot for your testing and feedback! I will go through the issues directly tomorrow, look into fixes and/or come back with questions for clarification.

cc @nextcloud/accessibility for reference

[jancborchardt]

Thanks again so much for your feedback! I have some questions regarding the review:

1	Info and Relations	Using label elements to associate text labels with form controls	None	1.3.1 H44	There is a download button to download the pdf, the user can then view it in their preferred viewer	Cannot control pdf viewer , it is another third party application within the application. There is a download option available to avoid using the viewer.

Could you provide more details there? I went through the PDF viewer, it is tabable and the buttons have text.

Or is this issue the one you are referring to? WAI-ARIA enhancement for toolbars

Ref @juliushaertl @danxuliu for the PDF viewer.

2	Resize	Zooming and Scaling to be turned on	None	1.4.4	There is a download button to download the pdf, the user can then view it in their preferred viewer	Cannot change the settings of the pdf viewer due to it being a third party application

Same here, I was able to navigate to the zoom keys via keyboard and zoom in and out via the integrated PDF viewer just fine. They are marked up as buttons and have the text "Zoom In" and "Zoom Out".

Ref @juliushaertl @danxuliu for the PDF viewer as well.

3	Keyboard		None	2.1.1 - Keyboard Focus		Keyboard focus flow is not easily programmed, multiple rewrites would be needed. Focus is still there but just not in the expected flow at times.

The flow works the following way:

1. First the skip links which can skip to content or navigation of the current app
2. Then through all items in the header bar
3. Through all items in the navigation of the current app
4. Lastly through the app content

Since you brought up the PDF viewer before, I noticed that when opening a PDF, the viewer app does not receive the focus and tabbing still goes through the file list. This we need to fix of course. Is this what you are referring to?

Ref @juliushaertl @skjnldsv regarding this.

4	Keyboard	Currently keyboard accessible using keyboard shortcuts common in text editors, however there is a WAI-ARIA best practice	None	2.1.1 - Text Editor		Text Editor is not configurable due to it being another third party application

Is the missing role="menubar" on formatting bar as well as the missing role="menuitem" on each of the items what you are referring to? That we should of course fix.

Ref @juliushaertl for the Text editor:

• https://www.w3.org/TR/wai-aria/#menubar
• https://www.w3.org/TR/wai-aria/#menuitem

5	Bypass	Link at the top of each page to skip to main content area	None	2.4.1 - G1	There is a download button to download the pdf, the user can then view it in their preferred viewer	PDF Viewer is not configurable

We do have bypass/skip links at the top of each page. Do you mean that the PDF app should also have a bypass link to skip the navigation and go to the PDF content itself?

6	Focus	Placing the interactive elements in order that follows sequences and relationships within the content	None	2.4.3 - G59		The focus flow is not easily configured, a rewrite of multiple areas would have to be completed. This involves multiple unknowns and rewrites to application we didn’t create

Where specifically does this happen?

7	Focus	Elements should not have tabindex greater then zero	None	2.4.3	There is a download button to download the pdf, the user can then view it in their preferred viewer	PDF Viewer is not configurable

Yes, the PDF viewer seems to overly use the tabindex numbering. @juliushaertl is this something we can fix and upstream? It’s strange as well since most of them are buttons and inputs which could be focused anyway. Possibly just setting tabindex="0" on them works.

8	Parsing	Duplicate ID's	None	4.1.1		Duplicate ID's since it’s a one page soultion, multiple elements need to be called with the same Id. This would require a complete rewrite of the soultion for the id's

This is something we are currently working on. Which duplicate IDs did you come across?

Ref @skjnldsv here

9	Name, Role ,Value	aria expand	None	4.1.2	There is a download button to download the pdf, the user can then view it in their preferred viewer	PDF Viewer is not configurable

I’m a bit confused here, is the "download button to download the pdf" description maybe copied here by accident, or does this indeed relate to the PDF viewer?

10	Error Identification	success notification	None	3.3.1		multiple rewrites will be needed

Is this about the notification showing in the top right? Could you describe what the issue is?

Ref @juliushaertl for the showNotification component.

11	Auto Complete	1.3.5		1.3.1		Cannot fix, will report to dev, this is breaking how the saving and displaying work in nextcloud

Where does this occur?

12	Aria Landmark	Aria Landmark - Aside		1.3.1		Not able to move aside outside of main due to the layered code and how sidebar is configured

Can confirm this. It was both

• Not possible to navigate into the contents of the "Sharing tab" for unknown reasons
• Not possible to navigate back out of the sidebar because the action menu icon blocking Shift-Tab back up. → This will be fixed via https://github.com/nextcloud/nextcloud-vue/pull/1126

Ref @skjnldsv @juliushaertl on the sidebar component.

[jancborchardt]

@GabeGabeT can you confirm that point 10 is about the notifications in the top right needing aria-live="assertive"?

Ref https://github.com/nextcloud/nextcloud-dialogs/blob/master/lib/toast.ts → cc @juliushaertl @ChristophWurst

[szet0018]

@jancborchardt I will clarify the issues below.

Regarding:

Item 1: Using label elements to associate text labels with form controls, on PDF viewer The page number input field at #pdframe #pageNumber

• Missing label, only title is used to generate label The zoom select at #pdframe and #scaleSelect
• Missing label, only title is used to generate label

Item 2: Zooming and Scaling to be turned on, on PDF viewer The meta viewport

• The maximum-scale parameter is less than 2 This issue was reported by the axe accessibility checker. It does look like the page and viewer zooms well. I don't know quite as much technically about this issue, but it is at the very least a poor practice to have the max scale less than 2.

Item 3: Keyboard, on the app The tabs in the right panel in aside

• While testing with screen readers there are issues navigating the tabs in the tabpanel and the panels e.g. JAWS 2020/NVDA on Chrome, cannot use ARROW keys or TAB keys to enter the Sharing tabpanel Keyboard interaction should follow the WAI-ARIA tab and tabpanel pattern at https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
• TAB brings user to the tabs, then use ARROW keys to navigate tabs, SPACEBAR selects it, once selected, TAB brings user into the tabpanel

Item 4: Keyboard, text editor toolbar on app Text editor toolbar buttons

• User must first use mouse to click on a text editor toolbar button first before they can use the keyboard to navigate through the buttons, buttons are not keyboard accessible

Item 5: Bypass, on PDF viewer PDF viewer

• Currently keyboard user must TAB through all of the PDF viewer buttons before reaching the PDF content area, and unlike screen reader users, they cannot jump directly to different areas on the page via landmarks or headings

Item 6: Focus, on the app User Scenario

• Screen reader user creates a new folder and Submits and the focus then goes back to the top of the page Issue
• After Submit, the focus should go to the h2 in the newly opened right side panel in
  for a screen reader user to get the same experience as a sighted user
• Currently a screen reader user does not know that the right side panel in aside opens until they navigate through the page all the way through

Item 7: Tabindex, on PDF viewer PDF viewer uses tabindex values greater than zero

• Will cause issues with focus order if new elements are added to the viewer
• Should only use tabindex="0" or tabindex="-1" with JavaScript to control the focus order

Item 8: Duplicate IDs, on the app Duplicate ID's reported by the axe accessibility checker, list may not be exhaustive Multiple duplicate id's

id="notification"

• notification-container > div

• app-content-recent > div:nth-child(1)

• app-content-favorites > div:nth-child(1)

• app-content-sharingout > div:nth-child(1)

• app-content-sharingin > div:nth-child(1)

• app-content-sharinglinks > div:nth-child(1)

• app-content-deletedshares > div:nth-child(1)

• app-content-pendingshares > div:nth-child(1)

• app-content-shareoverview > div:nth-child(1)

• app-content-extstoragemounts > div:nth-child(2)

• app-content-trashbin > div:nth-child(2)

id="controls"

• app-content-files > div:nth-child(1)

• app-content-systemtagsfilter > div:nth-child(1)

• app-content-extstoragemounts > div:nth-child(1)

• app-content-trashbin > div:nth-child(1)

id="file_action_panel"

• div[activeaction="false"]

• app-content-extstoragemounts > div:nth-child(1) > div

• app-content-trashbin > div:nth-child(1) > div

id="editor"

• editor-wrapper > div[data-v-379a0678=""]

• app-content-files > div:nth-child(10)

id="emptycontent"

• app-content-files > .hidden:nth-child(3)

• app-content-recent > .hidden:nth-child(2)

• app-content-favorites > .hidden:nth-child(2)

• app-content-sharingout > .hidden:nth-child(2)

• app-content-sharingin > .hidden:nth-child(2)

• app-content-sharinglinks > .hidden:nth-child(2)

• app-content-deletedshares > .hidden:nth-child(2)

• app-content-pendingshares > .hidden:nth-child(2)

• app-content-shareoverview > .hidden:nth-child(2)

• app-content-systemtagsfilter > .hidden:nth-child(2)

• app-content-extstoragemounts > .hidden

• app-content-trashbin > .hidden:nth-child(3)

Check for the following: id="filestable" id="headerSelection" id="headerName" id="headerName-container" id="selectedActionsList" id="headerSize" id="headerDate" id="modified" id="fileList" id="dir"

Item 9: Submenu expanded/collapsed states, on the PDF viewer and the app On the app, the "+" button for adding files and folders

• Missing state information e.g. expanded or collapsed with aria-expanded="true" or aria-expanded="false" On the PDF viewer, Tools button on the PDF viewer at #secondaryToolbarToggle
• Does not announce whether it is expanded or collapsed to screen readers Check for other occurrences

Item 10: Success notification, on app Issue is partially fixed by @GabeGabeT on their app, there was no success notifications for completed actions announced for screen readers e.g. Folder Created, File Deleted

• Currently fixed on Gabe's end, success notifications added and are announced by screen readers, however there is a bug where the reader says "Heavy multiplication X" for each notification

Item 11: Autocomplete, on the app Autocomplete attribute at

tabSharingDivInput > .multiselect__input[name=""][autocomplete="nope"] and

input[placeholder="Add\ to\ a\ project"]

• Not used correctly
• Does not use value from a pre-defined list input name="" type="text" autocomplete="nope" placeholder="Name, federated cloud ID or email address …" tabindex="0" class="multiselect__input" style="width: 0px; position: absolute; padding: 0px;"

Suggested Solution

• Choose an autocomplete attribute value from the list at: https://www.w3.org/TR/WCAG21/#input-purposes

Item 12: Landmark, on app aside

• Should not be contained in another landmark
• aside should be a top level element

[GabeGabeT]

Here are a few more we found that we found/couldn't address: Text Editor - Not Keyboard Accessible

• User must first click to then be allowed to use the text editor

The action link in the filelist is not coded to allow aria-expanded to detect whether or not its expanded to let the user know. The PDF viewer also fails in this.

The next issue being aria-attributes : "Partially fixed - Invalid values referenced were fixed, but the problem is that the code behind generates new aria-control values after each new folder or file and it always shows up as an invalid value in AXE accessibility checker ARIA attributes must conform to valid values

Invalid ARIA attribute value: aria-controls=""menu-kvknk"" at a[aria-controls=""menu-kvknk""] Invalid ARIA attribute value: aria-labelledby=""Sharing"" at #tab-sharing Invalid ARIA attribute value: aria-controls=""menu-wtukz"" at a[aria-controls=""menu-wtukz""] Invalid ARIA attribute value: aria-controls=""menu-ghhpr"" at a[aria-controls=""menu-ghhpr""] Invalid ARIA attribute value: aria-labelledby=""Activity"" at #tab-activity Invalid ARIA attribute value: aria-labelledby=""Comments"" at #tab-comments Invalid ARIA attribute value: aria-labelledby=""Versions"" at #tab-versions Invalid ARIA attribute value: aria-controls=""menu-nylhx"" at a[aria-controls=""menu-nylhx""] Invalid ARIA attribute value: aria-controls=""menu-cnlil"" at a[aria-controls=""menu-cnlil""] Invalid ARIA attribute value: aria-controls=""menu-pdetg"" at a[aria-controls=""menu-pdetg""] Invalid ARIA attribute value: aria-controls=""menu-tmohy"" at a[text=""Menu\ Toggle""] Invalid ARIA attribute value: aria-controls=""menu-abdzj"" at .action-item__menutoggle etc.

• Check that the aria-controls and aria-labelledby values are correct [10] Note: It looks like each newly uploaded file or created folder generates a new aria-controls value e.g. aria-controls=""menu-xxxxx"", which always comes up as an invalid ARIA attribute value in the AXE accessibility checker. So the solution is not to fix each aria-controls value individually, but to fix the code behind that generates it. Note2: Looks like at least the aria-labelledby values are not newly generated each time

Suggested Solution

• Ensure that the aria-controls attribute value matches the id of the element it controls
• Check that the aria-labelledy is referencing the correct id
• Check for other occurences (Use axe automated accessibility checker)

[szet0018]

There are a few more issues to report:

File and folder names under table column header "Name" are not coded as th

• This issue is on the table with the files and folders

The iframe containing the PDF viewer is missing landmarks like main, nav, etc.

• This issue is on the PDF viewer

List under "Internal link" at .sharing-entry__internal

• Has li without a parent ul <li data-v-11d8ee66="" data-v-363f2816="" data-v-6c172dd3="" class="sharing-entry sharing-entry__internal" data-v-02f177dc="">

Headings skip levels (go from h2 to h5)

• Goes from h2 Heading for the side panel to h5 for the Share link
• Suggest removing the h5 headings because these links should not be headings

The focus jumps unexpectedly from the Comments Tab to the Comments input field

Focus indicators around the PDF buttons on the PDF viewer are very difficult to see

[szaimen]

Hi, please update to 24.0.8 or better 25.0.2 and report back if it fixes the issue. Thank you!

[ChristophWurst]

I'm pretty sure this is still not done if you look at the references above.

[szaimen]

All right.