Make link to frontend of an app open in new window

subnoodle commented 1 month ago

Hoy, teh frontend link should open in a new window.

martin-helmich commented 1 month ago

@patrickhilker Ist das bei dir richtig?

lmrkavogt commented 1 month ago

Das war doch glaub irgendwas mit Barrierefreiheit 🤔

martin-helmich commented 1 month ago

@lmrkavogt Das stimmt, die dazugehörige WCAG Technique wäre, wenn ich richtig informiert bin, die G200 (G200: Opening new windows and tabs from a link only when necessary); so oder so ist das Verhalten hier inkonsistent, da das Icon ja trotzdem suggeriert, dass der Link in einem neuen Tab geöffnet wird.

LukasFritzeDev commented 1 month ago

Wir haben das Thema auch intern lange und ausführlich diskutiert.

Grundsätzlich sollten Links nicht automatisch in einem neuen Tab geöffnet werden, auch externe Links nicht. Die wichtigste Quelle dazu hat Martin bereits genannt. Gib dem Nutzer die Wahl ob er den Link in nem neuen Tab/Fenster öffnen will oder nicht und bevormunde ihn nicht! Aber die Wahl hat er aber eben nur, wenn man ihm die Option lässt.

Weitere Externe Quellen dazu:

Icon für externe Links:

Tatsächlich empfehlen die meisten Quellen externe Links mit einem kleinen Icon zu markieren, ähnlich wie wir es grade tun. Als Beispiel wird oft Wikipedia genannt, die externe Weblinks eben genau so handhaben: visuell markieren, aber nicht automatisch in einem neuen Tab öffnen. Ein weiteres Beispiel: U.S. Web Design System (USWDS).

Wenn du dich zu dem Thema austauschen möchtest, können wir gerne bei Head in the Cloud ne runde Quatschen ☺️

paul-hph commented 1 month ago

Ist es nur bei mir so oder kann man im kompletten mStudio Backend keinen Link in einem neuen Fenster durch ⌘ + click auf dem Mac (Ctrl + click auf Windows) öffnen?

Das treibt mich täglich ein wenig in den Wahnsinn!

PS: Wenn man davon ausgehen kann, dass der User in der aktuellen Web-Applikation verbleiben will, sollten Links aus der Applikation heraus immer in einem neuen Tab öffnen. (Quelle: GMV = Gesunder Menschen-Verstand) #changeMyMind :-*

paul-hph commented 1 month ago

Hier mal die Meinung des (trainierten) Internet im Gegensatz zu den Meinungen von Mark Root-Wiley (der sich auf die Meinung von Chris Coyier bezieht):

ins0 commented 1 month ago

Ist es nur bei mir so oder kann man im kompletten mStudio Backend keinen Link in einem neuen Fenster durch ⌘ + click auf dem Mac (Ctrl + click auf Windows) öffnen?

Das treibt mich täglich ein wenig in den Wahnsinn!

PS: Wenn man davon ausgehen kann, dass der User in der aktuellen Web-Applikation verbleiben will, sollten Links aus der Applikation heraus immer in einem neuen Tab öffnen. (Quelle: GMV = Gesunder Menschen-Verstand) #changeMyMind :-*

Bis vor ein paar Monaten war diese aussage auch noch korrekt, wir haben aber schon angefangen Teil Komponenten auszutauschen um ein Einheitliches verhalten und Barrierefreiheit bei Links zu erreichen.

TLDR; Wir sind an diesem Thema dran und wird nach und nach weiter umgesetzt/weiter ausgebaut. Die Quellen nach denen wir uns Orientieren haben ja bereits genannt.

LukasFritzeDev commented 1 month ago

Ist es nur bei mir so oder kann man im kompletten mStudio Backend keinen Link in einem neuen Fenster durch ⌘ + click auf dem Mac (Ctrl + click auf Windows) öffnen?

Das treibt mich täglich ein wenig in den Wahnsinn!

Damit hast du tatsächlich leider aktuell noch zu oft Recht – mir (bzw. uns) geht es genauso. Und genau deswegen sind wir, wie @ins0 eben auch geschrieben hat, an dem Thema dran.

PS: Wenn man davon ausgehen kann, dass der User in der aktuellen Web-Applikation verbleiben will, sollten Links aus der Applikation heraus immer in einem neuen Tab öffnen. (Quelle: GMV = Gesunder Menschen-Verstand) #changeMyMind :-*

Die von @martin-helmich genannte Quelle (Opening new windows and tabs from a link only when necessary) nennt eben genau diese Szenarien, in denen Links in neuen Fenstern oder Tabs geöffnet werden sollten: Nämlich wenn Fortschritte verloren gehen und der Nutzer nicht wieder einfach zurück zum Ursprung kommt, ohne z.B. Formulareingaben zu verlieren.

Hier mal die Meinung des (trainierten) Internet

Die Meinung des „(trainierten) Internet“ fällt etwas anders aus, wenn man ihm keine Suggestivfrage stellt. (interessanter Artikel dazu):

Text als Klartext weiter unten

Wir haben für uns die Punkte User Control und Accessibility stärker priorisiert, da deren Berücksichtigung auch für die anderen Aspekte Vorteile bringt, indem der Nutzer z.B. die Wahl bekommt, ob er den Context behalten, oder wechseln möchte. Wie gesagt, wir sind hier selber noch nicht perfekt, sind aber dran.

Die Antwort des LLM als Text aus Gründen der Barrierefreiheit:

Whether links should open in the same tab or a new tab depends on several factors, including user experience, context, and design philosophy. Here are some considerations for both approaches:

Opening Links in the Same Tab

Pros:

Consistency: Keeps the browsing experience straightforward and predictable.
Resource Management: Uses fewer system resources, which can be beneficial for users with limited computing power or slow internet connections.
User Control: Allows users to decide if they want to open the link in a new tab by right-clicking and selecting "open in new tab" or using a keyboard shortcut.

Cons:

Navigation: Users may lose their place on the original page and have to use the back button to return.
Context Switching: Can disrupt the flow if the user needs to reference both the original and the new page simultaneously.

Opening Links in a New Tab

Pros:

Preservation of Context: Helps maintain the user's place on the original page while exploring additional content.
Parallel Browsing: Facilitates comparison or reference between the original and the new page.
User Expectations: Users often expect external links to open in a new tab, especially if it’s a different website.

Cons:

Tab Overload: Can lead to many open tabs, which might be overwhelming and harder to manage.
Resource Intensive: Opening multiple tabs can consume more system resources.
Lack of Control: Takes away the user's ability to decide whether they want the link in a new tab, which can be seen as intrusive.

Best Practices

User Experience (UX) Guidelines: Follow UX design principles, which often suggest consistency and user control as key factors.
Contextual Decisions: Internal links (within the same website) typically open in the same tab, while external links (leading to different websites) often open in a new tab.
Accessibility: Ensure that the approach chosen is accessible and provides a good experience for all users, including those using assistive technologies.
User Feedback: Consider conducting user testing to see what your specific audience prefers.
Clear Indicators: If you decide to open links in a new tab, clearly indicate this to users (e.g., using icons or text like "opens in a new tab").

In conclusion, while there is no one-size-fits-all answer, balancing accessibility, user control, context, and resource management is crucial.

paul-hph commented 1 month ago

Generell möchte ich vorausschicken, dass ich es grundsätzlich gut finde, dass ihr euch um Barrierefreiheit Gedanken macht.. Und gut zu höheren, dass ich das größere Problem mit den Links (die sich nicht im neuen Fenster öffnen lassen) in Angriff genommen wird.

Generell sind wir uns einig, dass Links nicht generell im neuen Tab geöffnet werden sollten, auch keine externen. Es gibt aber definitiv Fälle wie oben https://github.com/mittwald/feature-requests/issues/162#issue-2314704787 beschrieben, wo dies die aus dem Kontext und dem Design heraus eindeutig die User-Erwartung ~ist~ sein kann.

Da ihr euch immer auf WCAG G200 beruft. Die WCAG 2.1 aus 2008, sagt selbst, dass die genannten "Advisory Techniques" keine Vorgaben sind, um WCAG konform zu sein und noch weniger garantieren, dass sich die barrierefreie Nutzung dadurch generell verbessert.

Advisory Techniques Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations. https://www.w3.org/TR/UNDERSTANDING-WCAG20/understanding-techniques.html

In some circumstances they may not be applicable or practical, and may even decrease accessibility for some users while increasing it for others.

Als Anregung könntet ihr auch mal eure Nutzer befragen (auch die, die auf barrierefreie Oberfläche angewiesen sind), was sinnvoll ist.

Und wenn man sich die "Best Practices" aus deiner AI Antwort und die den zweiten Teil der AI Antwort auf meine suggestive (😉 ) Frage ansieht, kommt man doch der Lösung schon sehr nah. Diese Lösung findet auch Erwähnung in dem WCAG 2.2 G201. Sogar mit Code Beispiel

ins0 commented 1 month ago

@subnoodle @paul-hph Please check out the latest mStudio release, we made a few changes to directly improve the overall navigation handling.

It's now possible to right click or use general shortcuts for links to navigate throw the mStudio via links. You now have control whenever a link should open in a new tab.

Please keep in mind that this change may not address every link/action within the mStudio - but it should affect a big portion.

paul-hph commented 1 month ago

Läuft! Danke.

patrickhilker commented 1 month ago

Vielen Dank für die angeregte Diskussion - und toll, dass wir so schnell eine funktionierende Lösung gefunden haben! Ich würde dieses Issue erstmal schließen. Falls es noch weitere Gedanken gibt, lasst sie uns gerne wissen.

mittwald / feature-requests