Accessibility: Self assessment of Status Quo, November

[marcus-herrmann]

(This is a "living issue", meaning it will be frequently updated. Also my plan is to use this GitHub issue as an overview, will list every finding that relates to a WCAG/BITV success criterion here. Remediation information on these findings will be in separate GitHub issues)

Date: 11.11.2020 – 18.11.2020

Methodology

https://testen.bitv-test.de/selbstbewertung/test.php, since it is the closest to the final BITV test

1 Scope

Every audit/self assessment needs a scope of pages or app states the audit is limited to. For this self assessment, I'm planning to inspect the following situations regarding accessibility, since I'm considering them the core functionality of OCIS.

• 1.1 Login Page, URL: https://ocis-a11y.owncloud.works/
• 1.2 General Overview when logged in, URL: https://ocis-a11y.owncloud.works/#/files/list
• 1.3 Userflow: Upload a single file, URL: Process starting at https://ocis-a11y.owncloud.works/#/files/list
• 1.4 Userflow: Download a single file, URL: Process starting at https://ocis-a11y.owncloud.works/#/files/list
• 1.5 Userflow: Share a single file, URL: Process starting at https://ocis-a11y.owncloud.works/#/files/list

Login Page (Scope 1.1)

BITV test step	Result	Issue	Prio Advice
1.1.1a	not applicable
1.1.1b	not applicable
1.1.1c	not applicable
1.1.1d	not applicable
1.2.1a	not applicable
1.2.2a	not applicable
1.2.3a	not applicable
1.2.4a	not applicable
1.2.5a	not applicable
1.3.1a	not applicable
1.3.1b	not applicable
1.3.1c	not applicable
1.3.1d	not applicable
1.3.1e	not applicable
1.3.1f	not applicable
1.3.1g	not applicable
1.3.1h	Fail 🔴 Inputs have no label, placeholder is not enough	See #4319	++
1.3.2a	Pass ✅
1.3.3a	Pass ✅
1.3.4a	Pass ✅
1.3.5a	Pass ✅
1.4.1a	Pass ✅
1.4.2a	not applicable
1.4.3a	Fail 🔴 Contrast of text placeholder is below 4.5:1	See #4320	++
1.4.4a	Pass ✅
1.4.5a	Pass ✅
1.4.10a	Pass ✅
1.4.11a	Fail 🔴 Color Contrast of text inputs' outline not 3:1 to adjecant color AND background of text input not 3:1 to page background	See #4321	++
1.4.12a	not applicable
1.4.13a	not applicable
2.1.1a	Pass ✅
2.1.2a	Pass ✅
2.1.4a	Pass ✅
2.2.1a	Pass ✅
2.2.2a	Pass ✅
2.3.1a	Pass ✅
2.4.1a	not applicable
2.4.2a	Pass ✅
2.4.3a	Pass ✅
2.4.4a	not applicable
2.4.5a	not applicable
2.4.6a	Fail 🔴 No labels for text inputs	See #4319	++
2.4.7a	Fail 🔴 No focus style on text inputs.	See #4322	++
2.5.1a	not applicable
2.5.2a	Pass ✅
2.5.3a	Pass ✅
2.5.4a	not applicable
3.1.1a	Pass ✅ (Login page is in english, but changes to german after login)
3.1.2a	not applicable
3.2.1a	Pass ✅
3.2.2a	Pass ✅
3.2.3a	Pass ✅
3.2.4a	Pass ✅
3.3.1a	Fail 🔴 Error message exists, but is not programmatically connected to invalid text input	See #4323	+++
3.3.2a	Fail 🔴 Placeholder attribute is not valid as text input label	See #4319	+++
3.3.3a	Pass ✅
3.3.4a	not applicable
4.1.1a	Pass ✅
4.1.2a	Pass ✅
4.1.3a	not applicable

[marcus-herrmann]

General Overview when logged in (Scope 1.2)

BITV test step	Result	Issue	Prio Advice
1.1.1a	partial fail 🟨: Home icon in bread crumb has no text	See #4329 and #4763	+++
1.1.1b	Possible violation 🟨	See #4763	++
1.1.1b	Pass ✅
1.1.1c	not applicable
1.1.1d	not applicable
1.2.1a	not applicable
1.2.2a	not applicable
1.2.3a	not applicable
1.2.4a	not applicable
1.2.5a	not applicable
1.3.1a	Possible violation 🟨	See #4764	+
1.3.1b	Pass ✅
1.3.1c	not applicable
1.3.1d	not applicable
1.3.1e	Fail 🔴 List of files and folders is no data table, should be.	See #4330	++
1.3.1f	not applicable, because of 1.3.1e fail
1.3.1g	not applicable
1.3.1h	Pass ✅
1.3.2a	Pass ✅
1.3.3a	Pass ✅
1.3.4a	Pass ✅
1.3.5a	not applicable
1.4.1a	Pass ✅
1.4.2a	not applicable
1.4.3a	Pass ✅
1.4.4a	Fail 🔴: Text zoom to 200% causes visual regressions	See #4765	++
1.4.5a	Pass ✅
1.4.10a	Pass ✅
1.4.11a	partial fail 🟨: Main layout column on desktop has no explicit background color	See #4331	++
1.4.12a	Pass ✅
1.4.13a	Fail 🔴 Custom tooltips are not dismissable and not persistent	See #4332	++
2.1.1a	Fail 🔴 Files and folders, Rolle dropdown options are not reachable via keyboard only. Mobile: Breadcrumb drop not reachable via keyboard	See #4333	++++
2.1.2a	partial fail 🟨: No keyboard trap - which is good, but also no focus management for mobile menu	See #4334	+++
2.1.4a	not applicable
2.2.1a	Fail 🔴 Page redirect/refresh happens periodically due to Oauth2 (?)	See #4336	++++
2.2.2a	Pass ✅
2.3.1a	Pass ✅
2.4.1a	Fail 🔴 Nav landmarks disappears on mobile	See #4766
2.4.2a	Fail 🔴 Document title stays "ownCloud" no matter what you do and where you are	See #4338	++
2.4.3a	partial fail 🟨: No route transition focus management, see "General issues" below		+++
2.4.4a	Pass ✅
2.4.5a	not applicable
2.4.6a	Pass ✅
2.4.7a	partial fail 🟨: Checkboxes have no focus style. Buttons in files-list-row-actions-dropdown have no focus style	See #4339
2.5.1a	not applicable
2.5.2a	partial fail 🟨: Click on Files and Folders is fired on down event, but has to do with not using a or button (2.1.1a)	See #4333
2.5.3a	Fail 🔴 Visual labels of buttons and their accessible names differ in wording and human language	See #4340
2.5.4a	not applicable
3.1.1a	Fail 🔴 lang attribute on HTML is set to English but interface is German	See #4342	++++
3.1.2a	partial fail 🟨: There are English terms in the German interface (Settings, Language, New draw.io document, Files, Account) that are not marked up as English terms. I assume this language mix is not intentional, though.	See #4343	++
3.2.1a	Pass ✅
3.2.2a	partial fail 🟨: Setting checkboxes to active does not cause a change of context, but change of content ABOVE the causing checkbox in the DOM	See #4344
3.2.3a	Pass ✅
3.2.4a	Pass ✅
3.3.1a	Fail 🔴 Text inputs' error state can't be detected programmatically	See #4768	++++
3.3.2a	Fail 🔴 Add People -> Links: "Ablaufdatum" label and "Ablaufdatum" input not connected	See #4769	++++
3.3.3a	not applicable
3.3.4a	not applicable
4.1.1a	Fail 🔴 Ids are not unique (files-quick-action-public-link, files-quick-action-collaborators, files-list-row-checkbox, files-quick-action-public-link), wrong nesting (h3 in span, h1 in span, div in button, style in button)	See #4345	++
4.1.2a	partial fail 🟨: Home icon in bread crumb has no accessible name (1.1.1a). , disclosure possibly needs aria-controls, "Personen hinzufügen" label points to div	See #4329	+
4.1.3a	partial fail 🟨: Route changes cause neither focus change nor live region messages (BITV is not mentioning route changes, but I consider it crucial). Fail 🔴: Input errors cause no live region annoucement (see #4768). Fail 🔴: after checking checkbox, user doesn't get informed of existence of bulk actions on files (see #4786)	See #4346 See #4786 See #4768	++

[marcus-herrmann]

The userflows in Scopes 1.3, 1.4, 1.5 have Scope 1.2 as a starting point and aren't "proper" pages. So please consider the following listing of scopes including 1.2 errors respectively:

Userflow: Upload a single file (1.3)

• WCAG 4.1.2 - "Neu" button and its drop follow the disclosure widget pattern ✅
• WCAG 1.3.1, best practice: All the links in the drop under "Neu"/"New" should be buttons, since they open the native file dialog or open modals, but are not linking to a state with its own URL.
• WCAG 4.1.3: Status message upload complete ✅

Userflow: Download a single file (1.4)

• 2.1.1 of Scope 1.2
  • in case of a direct dowload, e.g. .svg file: Should be a link (<a>) with download attribute.
  • in case of an interstitial screen, e.g. .png file: Clickable spans should be buttons or links (depending on their function). Download control should be a <a> with download attribute. All controls in this construct (see screenshot) must have at least accessible names, ideally visually dicernable text (Sidenode: Click events seem broken in Firefox 82). See Audit #1 – Download a single file – Semantics and interactivity of interstitial file screen (when downloading) #4347

Userflow: Share a single file (1.5)

• Custom select "Rolle" not fully keyboard accessible. See Audit #1 – Share a single file – Custom select "Rolle" not fully keyboard accessible #4407
• Accordions (Personen, Links) have no visual focus indicators. See Audit #1 – Share a single file – Accordions have no visible focus #4408
• See table below

[marcus-herrmann]

2 General findings

• Visible labels of buttons sometimes don't match accessible names, given with aria-label
• aria-label often/always still English
• aria-label applied on <span>, they won't work there. Only an element with an role can get an accessible name. <span> and <div> have implicit role="none", thus, are "role-less"
• When a modal opens, keyboard focus can still reach "behind the modal". The content considered inactive when a modal is open should get inert (with polyfill) and aria-hidden="true" in the state where the modal is open OR a focus trap (ex. https://github.com/posva/focus-trap-vue) should be applied on the modal that the focus can't leave it.

Update Dec 2nd, 2020:

• After I talked with a colleague about this, I revoke my initial assessment of 2.4.3a of scope 1.2: That no focus management is happening after route change could mean that 2.4.3a of BITV gets no "pass". Up until that conversation I considered focus management on route change only a best practice, but not a BITV violation. But aforementioned colleague is a cetified BITV tester, so I follow his verdict here: After successful route change, focus position should change. See Audit #1 – General Findings – screen reader and keyboard users get no hekp on SPA route change #4409

[marcus-herrmann]

3 Disclaimer / Disclosure

• It is normally not considered ideal that a consultant who worked/consultant on a site/page does the audit (but someone more neutral). Not possible due to timing, and more importantly: this is only the starting audit, not even "Entwicklungsbegleitender Test", nor "Abschließender Test". But I wanted to mention it
• Both WCAG Evaluation Method's / BITV Test Guidance's authors had static pages but not single page apps in mind when writing their documentation. Therefore – and without the opportunity of having a collegue to bounce ideas and decisions off while auditing – I took some educated guesses concerning a few success criteria. There's a good reason that two auditors do the "Abschließender Test" and sync afterwards to find a harmonized verdict
• I'm no certified BITV Tester as of now, can legally speaking offer no reliable advice. But still certified IAAP Web Accessibility Specialist, which is based on WCAG (and BITV 2.0 is also based on WCAG, so the closest I can imagine)
• I have no overview of BITV certified testers and their knowledge regarding the web app niche phoenix is in (client side, SPA). Did my best to "translate criteria/test steps" into "web app land", but this is in some regards uncharted land.

[marcus-herrmann]

Userflow: Share a single file (Scope 1.5)

Note: flow starts with activation of button "Add people"

BITV test step	Result	Issue	Prio Advice
1.1.1a	not applicable
1.1.1b	File or folder icon, accordion icon, user avatar has no alternative text	See #4787	+++
1.1.1c	not applicable
1.1.1d	not applicable
1.2.1a	not applicable
1.2.2a	not applicable
1.2.3a	not applicable
1.2.4a	not applicable
1.2.5a	not applicable
1.3.1a	not applicable
1.3.1b	List of "Ausgewählte Personen" in share dialog should be ul, List of "Öffentlicher Link" should be ul	See #4788	++
1.3.1c	not applicable
1.3.1d	not applicable
1.3.1e	Datepicker Ablaufdatum: tabular data, but no table	See #4789	++
1.3.1f	not applicable
1.3.1g	not applicable
1.3.1h	not applicable
1.3.2a	not applicable
1.3.3a	not applicable
1.3.4a	not applicable
1.3.5a	not applicable
1.4.1a	not applicable
1.4.2a	not applicable
1.4.3a	not applicable
1.4.4a	not applicable
1.4.5a	not applicable
1.4.10a	not applicable
1.4.11a	not applicable
1.4.12a	not applicable
1.4.13a	not applicable
2.1.1a	Options in "Rolle" dropdown not keyboard accessible. Ablaufdatum Datepicker: not reachable via keyboard	See #4790	++++
2.1.2a	not applicable
2.1.4a	not applicable
2.2.1a	not applicable
2.2.2a	not applicable
2.3.1a	not applicable
2.4.1a	not applicable
2.4.2a	not applicable
2.4.3a	Ablaufdatum Datepicker: No focus management	See #4790	++++
2.4.4a	not applicable
2.4.5a	not applicable
2.4.6a	not applicable
2.4.7a	Accordion Focus not visible.	See #4791	+++
2.5.1a	not applicable
2.5.2a	not applicable
2.5.3a	not applicable
2.5.4a	not applicable
3.1.1a	not applicable
3.1.2a	Close button has English aria-label text, although interface language is German	Not worth writing an issue. Translations needed	+++
3.2.1a	not applicable
3.2.2a	not applicable
3.2.3a	not applicable
3.2.4a	not applicable
3.3.1a	not applicable
3.3.2a	not applicable
3.3.3a	not applicable
3.3.4a	not applicable
4.1.1a	not applicable
4.1.2a	Accordion: Div part has aria-labelledby. Icons: wrapping span has aria-label. Datepicker in Ablaufdatum uses Divs as buttons	Not worth writing an issue. aria-label(ledby) only works on elements with a role. divs and spans are role-less	++++
4.1.3a	not applicable

[marcus-herrmann]

Finding in 1.5, that I feel I need to emphasize: The Datepicker (context: sharing Links) is really broken. And as I wrote for ownCloud before, the situation regarding Datepicker accessibility is really grim

[marcus-herrmann]

Regarding BITV-Test Update from March, 2021 and test step: 11.7 (https://webtest.bitv-test.de/index.php?a=di&iid=297&s=n). Altough hints for the practice of testing this are still missing in the linked document, I follow the suggestions there and the site performed well. But hesitant to give a final verdict here.

[marcus-herrmann]

Not strictly part of Audit #1, but worth a look (and fix), imo: #4867

[pascalwengerter]

Closing this since #5018 is merged and we're waiting for feedback (and will open new tickets with the requested changes from the a11y audit)