Brauche eure Hilfe bei Nav-Menü Anpassung im Firefox bei kleiner Bildschirmbreite

[einsiedler]

Hallo liebe Forumer,

ich benötige dringend eure Hilfe bei der Anpassung eines Menüs.

Also bei Opera und Chrome sieht es soweit gut aus, nur halt im Firefox und Edge gibt es Probleme.

Wenn man also das Bildschirmfenster ganz schmal macht wie hier:

Kurz vor diesem Umbruch-Punkt, also @media screen and (max-width: 28.125em) {... sieht es noch so aus:

Also so wie ich es möchte, und ab diesem Umbruch-Punkt soll eben halt #main-nav {...

smooth schmaler werden bis das Bildschirmfenster nicht mehr schmaler zu machen geht. Der Botton soll in die nächste Zeile wandern und sich mittig anordnen, wenn #main-nav eben zu schmal wird.

Bisher ist es bei mir so das ab dem Punkt @media screen and (max-width: 28.125em) #main-nav eine Breite, mit rechts und links Rand behält, bis zu dem minimalsten Browserfensterpunkt.

Doch soll eben #main-nav ab diesen Breakpunkt (siehe 2te jpg) smooth schmaler werden, der Textlink umgebrochen werden wenn zu lang und der Botton in die nächste Zeile rutschen, wenn zu lang.

Ich habe gesucht, ob #main-nav irgendwo ein verstecktes margin hat, aber dem ist nicht so.

Ich kann mir nicht mehr erklären woran es liegt und Bitte euch um Hilfe, dringend!

Hier der Link zur Website: website

Danke.

der misanthrop

[einsiedler]

Liebe Leute, bitte lasst mich nicht hängen…

Anscheinend verstehe ich das System von Flexbox (flex-grow / flex-shrink / flex-basis) hier in meinem Fall nicht. Ich habe mehrere Kombinationen ausprobiert aber nichts tut sich oder verändert sich. Ich möchte nur wenn @media screen and (max-width: 28.125em) kleiner ist, die gesamte Breite annimmt und beim schmaler werden eben alles ganz normal umbricht. Aber irgendetwas mir unerklärliches erzeugt die Ränder links und rechts, nur, was es ist kann ich mir nicht erklären.

@media screen and (max-width: 62.500em) {
			div.contentspan {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					margin: 0 0.3em; padding: 0;
					border: 3px dotted green;
						/*	flex: 0 0 100%; */
			}
			.fav {
				margin: 0;
				padding: 0;				
			}
			.headingspan {
				align-self: flex-start;				
			}
			header {
					display: block;
					margin: 0;
					padding: 0.55em;
			}
			
			header img {
					height: 110px; 
			}
			
			#main-nav {
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: auto;
				max-width: 21.5em;
				align-self: center;				
					/*	flex: 1 1 100%; */
			}
			
			.main-treeitem>[aria-expanded="false"]+* {display:none !important;}
			.main-treeitem>[aria-expanded="true"]+* {
                margin-left: 0;
				margin-top: 0.8em;
            }
			.treeitem>[aria-expanded="false"]+ * {display:none !important;}
			
		}
		
		@media screen and (max-width: 28.125em) {
			header {
					display: block;
					margin: 0;
					padding: 0.55em;
			}
			nav > ul ul.group,
			nav > ul ul.group > li {margin:0; padding:0; display:block;}
			nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
			nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
			nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
			nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}
			
			
			#main-nav {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: auto;
				max-width: 100%;
				align-self: center;
			}
			
		}

Mensch Leute, bitte helft mir…

Darum gehts: fehlerhafte website

der misanthrop

[marctrix]

Hej einsiedler,

			#main-nav {
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: auto;
				max-width: 21.5em;
				align-self: center;				
					/*	flex: 1 1 100%; */
			}

#main-nav {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: auto;
				max-width: 100%;
				align-self: center;
			}

Wieso sollte die ˋ#main-navˋ eine flex-box sein. Ich sehe nicht, dass du da etwas angegeben hast.

Ich weiß auch nicht, warum du li als flex-box definierst und dann einzeln (erstes Kind, zweites Kind usw) mit display: block;

Außerdem tue ich mich schwer, wenn jemand rückwärts responsive arbeitet, also nicht nach dem mobile first Prinzip.

Marc

[einsiedler]

Warscheinlich es ist richtig was Du sagst, aber es hilft mir jetzt sowas von...

[marctrix]

Hej einsiedler,

Warscheinlich es ist richtig was Du sagst, aber es hilft mir jetzt sowas von...

Schade, ich dachte, das würde helfen. Mir schien, du wärest fälschlicherweise der Meinung, #mein-nav seine eine flex-box und du suchst da nach dem Fehler (du schriebst, dass das von dir unerwartete Verhalten womöglich an einem mangelnden Flex-Box Verständnis zeigen könnte. Das hilft halt nicht, wenn es keine Flex-Box ist.

Oder habe ich das falsch verstanden?

Marc

[Gunnar Bittersmann]

@@marctrix

#main-nav {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: auto;
				max-width: 100%;
				align-self: center;
			}

Wieso sollte die ˋ#main-navˋ eine flex-box sein.

Soll doch gar nicht. flex-grow, flex-shrink, flex-basis, align-self sind Eigenschaften von Flex-Items. Die Flexbox ist .contentspan.

Ich weiß auch nicht, warum du li als flex-box definierst und dann einzeln (erstes Kind, zweites Kind usw) mit display: block;

Fallback für Browser, die Flexbox nicht unterstützen?

LLAP 🖖

[Gunnar Bittersmann]

@@einsiedler

Also bei Opera und Chrome sieht es soweit gut aus, nur halt im Firefox und Edge gibt es Probleme.

Die du inzwischen gelöst hast? Was war’s denn?

Aber sag mal, was soll das denn?

<ul class="tree" role="tree" aria-labelledby="main-nav">
	<li class="main-treeitem" role="main-treeitem">
		<button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button>
		<ul class="group" role="group">

			<li class="treeitem" role="tree-item">

Wozu die ganzen Klassen als Dopplung der role-Attribute? Die machen überhaupt keinen Sinn. Als Selektor kannst du statt .tree – was dasselbe ist wie [class~="tree"] – auch [role="tree"] verwenden.

Apropos tree: Das in „Wie man ein verschachteltes Pull-down-Menü implementiert“ vorgestellte Navigation Treeview Example hatte ich so verstanden, dass man das so für eine Seitennavigation verwenden sollte. Die Expertenmeinung aber ist: Nicht machen! Das ist tauglich für ein Menü für Funktionen innerhalb von etwas, was eher als App daherkommt; nicht aber für eine Navigation auf Webseiten. Dort sollte man doch mit Tab-Taste durchs Navigationsmenü gehen, nicht mit Pfeiltasten.

LLAP 🖖

[einsiedler]

Mit der freundlichen Bitte auf Korrektur!

Stimmt es so?

	`<div class="contentspan">
			<a class="anzume" href="#main-nav">zum Hauptmenü</a>
			<nav id="main-nav">
				<ul role="tree" aria-labelledby="main-nav">
					<li role="treeitem">
						<button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button>
						<ul>
							<li role="treeitem">
								<a class="a-link" href="http://foo.de/aktuell.html" role="treeitem">Aktuelles</a>
								<button aria-expanded="true"><span class="visually-hidden">SubNavigation Item 1</span></button>
									<ul class="nav-group" role=group">
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/ausstellungen.html" role="treeitem">aktuelle Ausstellungen</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/ausstellungen.html" role="treeitem">Blog</a>
										</li>
									</ul>
							</li>

							<li class="treeitem" role="tree-item">
								<a class="a-link" href="http://foo.de/arbeiten.html" role="treeitem">Arbeiten</a>
								<button aria-expanded="true"><span class="visually-hidden">SubNavigation Item 2</span></button>
									<ul class="nav-group" role="group">
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit01.html" role="treeitem">Drifters, 2012</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit02.html" role="treeitem">Waldfrieden, 2006</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit03.html" role="treeitem">Eremitage für Paris, 2006</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit04.html" role="treeitem">Der Bau, 2007</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit05.html" role="treeitem">Utopia Planetia, 2006</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit06.html" role="treeitem">Kellerräume, 2012-15</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit07.html" role="treeitem">Bunker / Maquetten, 2012-16</a>
										</li>
										<li role="none">
											<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit08.html" role="treeitem">Take Shelter, 2015</a>
										</li>
									</ul>
							</li>`

[ ... ]

Komisch, es funktioniert aber auch über die Tab-Taste...

der misantrop

[marctrix]

Hej einsiedler,

<div class="contentspan">
	<a class="anzume" href="#main-nav">zum Hauptmenü</a>

Das steht auf der echten Seite aber nciht direkt vor der Navi, oder? — Würde ja keinen Sinn machen…

<nav id="main-nav"> <ul role="tree" aria-labelledby="main-nav"> <li role="treeitem"> <button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button>

„HauptNavigation“ ist komisch geschrieben — Absicht?

Meiner Meinung gehört das in eine Überschrift vor der ul.

Dass role="tree" für eine Navigation wenigstens unüblich ist, hat @Gunnar Bittersmann bereits erwähnt. Würde ich auch nicht machen.

Allerdings bin ich eh sparsam mit aria-Anreicherungen…

  								</li>
  								<li role="none">
  									<a class="a-sublink" href="http://foo.bplaced.net/foo/arbeit08.html" role="treeitem">Take Shelter, 2015</a>
  								</li>

Komisch, es funktioniert aber auch über die Tab-Taste...

Klar, soll es ja auch. Hast du gelesen, was es tut und wozu es da ist, bevor du tree eingesetzt hast?

Ich bin mir noch nicht sicher, ob man das für Navigationen verwenden sollte. MDN liefert immerhin ein ((noch?) nicht verlinktes) Beispiel für ein Menü (Email-Postfach-Übersicht)

Kennst du auch die Probleme mit role="tree"?

Marc

[einsiedler]

Hi marctrix,

zu a)

<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> Das steht auf der echten Seite aber nciht direkt vor der Navi, oder? — Würde ja keinen Sinn machen…

Doch, es ist dort, aber Du hast keine komplette Übersicht/Eindruck über den gesamten Quelltext. Im normalen verlauf, wenn javascript aktiv ist ist dies natürlich unerheblich und "unsichtbar"

ABER:

EI GUGGE MAL DOOOA…

wenn javascript deaktiviert ist und ich möchte das zuerst mein "Content" angezeigt wird und ich ganz oben ein Link zur Navi setze , dann passt alles zusammen.

Naja, das mal am Rande angemerkt…

„HauptNavigation“ ist komisch geschrieben — Absicht?

Joa, meine volle Absicht... ist doch eigentlich egal, weil "unsichtbar" für den User

c) Wie würdest Du es denn machen? Mal freundlich gefragt von jem. der dazulernen und es endlich auch mal beherrschen möchte.

d)

Klar, soll es ja auch. Hast du gelesen, was es tut und wozu es da ist, bevor du tree eingesetzt hast?

Jau, hab ich gelesen und mich damit auseinandergesetzt.

e)

Ich bin mir noch nicht sicher, ob man das für Navigationen verwenden sollte. MDN liefert immerhin ein ((noch?) nicht verlinktes) Beispiel für ein Menü (Email-Postfach-Übersicht)

e-1) Wie bitte, mal ganz lieb gefragt macht man soetwas denn richtig, hier werden mir nur immer wieder irgendwelche "Bröckchen" vorgeworfen die man bearbeitet, dann (kommt der nächste) der wieder etwas anderes sagt... #grumpf* *grummel×

Kennst du auch die Probleme mit role="tree"?

e-2) Nö, kenne ich nicht!

Lieben Gruß der misanthrop

[marctrix]

Hej einsiedler,

zu a)

<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> Das steht auf der echten Seite aber nciht direkt vor der Navi, oder? — Würde ja keinen Sinn machen…

Doch, es ist dort, aber Du hast keine komplette Übersicht/Eindruck über den gesamten Quelltext. Im normalen verlauf, wenn javascript aktiv ist ist dies natürlich unerheblich und "unsichtbar"

ABER:

EI GUGGE MAL DOOOA…

wenn javascript deaktiviert ist und ich möchte das zuerst mein "Content" angezeigt wird und ich ganz oben ein Link zur Navi setze , dann passt alles zusammen.

Also: die Sprunglinks sind dafür da, größere Inhaltsblöcke zu überspringen und schnell zu wichtigen, oft besuchten stellen zu kommen. Mehr als „zur Navi“, „zur Suche“ und „zum Inhalt“ braucht man praktisch nie.

Wenn direkt am Seitenanfang oder nach nur einem Bild die hauptnavi kommt, würde ich dafür keinen Link setzen. Den muss man ja auch erst mal über sich „ergehen“ lassen. Dauert in etwa genau so lange, wie den alt-Text anzuhören.

Daher würde ich den dort weg lassen. „Zum Inhalt“ aber setzen - allerdings ganz an den Seitenanfang, noch vor die Überschrift— den seitentitel (ganz wichtig!) hat man dann ja Ashton gehört…

„HauptNavigation“ ist komisch geschrieben — Absicht?

Joa, meine volle Absicht… ist doch eigentlich egal, weil "unsichtbar" für den User

Welchen? Die Überschrift ist wichtig, wenn sie ausgegeben wird, also wenn css fehlt, wenn man blind ist… — sonst müsste man sie ja gar nicht erst notieren. 😉

c) Wie würdest Du es denn machen? Mal freundlich gefragt von jem. der dazulernen und es endlich auch mal beherrschen möchte.

Worauf bezieht sich die Frage?

Die Navi? Es ist schon verführerisch das so zu machen. Noch scheint es aber einige Probleme bei der Unterstützung durch Browser und Screenreader zu geben.

Bei neuen Techniken hängt es auch immer davon ab, ob sich so etwas verbreitet. Dann bessern die Hersteller nach und man kann bei den Nutzern voraussetzen, dass die Funktionsweise bekannt ist.

e)

Ich bin mir noch nicht sicher, ob man das für Navigationen verwenden sollte. MDN liefert immerhin ein ((noch?) nicht verlinktes) Beispiel für ein Menü (Email-Postfach-Übersicht)

e-1) Wie bitte, mal ganz lieb gefragt macht man soetwas denn richtig, hier werden mir nur immer wieder irgendwelche "Bröckchen" vorgeworfen die man bearbeitet, dann (kommt der nächste) der wieder etwas anderes sagt... #grumpf* *grummel×

Das glaube ich nicht. Gunnar hat schon mal dasselbe gesagt wie ich, ich war nur etwas ausführlicher.

Also ich nehme für eine aufklapp-navi fertige Skripte. Leis Dir die Beschreibungen durch und probiere sie aus. Am besten nach accessible navigation suchen.

Persönlich bin ich kein großer Fan von aufklapp-navis und sehe mit großer Freude, dass auf immer mehr Seiten wieder eine erste Ebene im kopfbereich zu sehen ist (manchmal klappt die zweite eben noch auf, aber keine weiteren). Auf den Folgeseiten findet man dann statische, geöffnete Navigationen, die mehr Orientierung erlauben: wo bin ich, wie bin ich hierher gekommen, was gibt es neben der geöffneten Seite noch interessantes, gibt es unter der Seite noch mehr Infos (ist die aktuelle Seite also ein überpunkt für detailliertere Informationen?) usw.

Das ist besonders für Leute wichtig, die deine Seite über eine Suchmaschine finden. Die landen ja in der Regel nicht auf der Startseite und haben dann einen prima überblick.

Ist aber eher was für große Seiten.

Es gibt da auch nicht die eine optimale Lösung. Letztendlich ist die benutzerführung ein Konzept, das du dir ausdenkst, das in sich stimmig sein muss und zu deiner Seite passen muss.

Kennst du auch die Probleme mit role="tree"? e-2) Nö, kenne ich nicht!

Ich weiß, der verlinkte text ist lang, aber mein Tipp ist: überflieg ihn wenigstens mal, damit du abschätzen kannst, ob du damit leben magst und ob das für deine Nutzer gut ist.

Marc

[einsiedler]

P.S. Ich habe auf Empfehlung hin (https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html) alles exakt so angewendet, deshalb war ich bei "mit meinen aria-Anreicherungen" nicht so sparsam...

MFG der misanthrop

[marctrix]

Hej einsiedler,

P.S. Ich habe auf Empfehlung hin (https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html) alles exakt so angewendet, deshalb war ich bei "mit meinen aria-Anreicherungen" nicht so sparsam...

Mit sparsam meinte ich, auf den treeview ganz zu verzichten — wenn du treeview verwenden willst, dann ist das so schön richtig. Und es gibt sicher wesentlich schlechtere Lösungen. Ich habe imho nicht geschrieben, dass das falsch ist. Es hat halt ein paar Haken und Ösen, verhält sich unerwartet und ungewohnt. Vielleicht bist du deiner Zeit nur voraus… 😉

Marc

[Gunnar Bittersmann]

@@einsiedler

Komisch, es funktioniert aber auch über die Tab-Taste...

Das sollte es aber bei einem tree view widget nicht, sondern mit Pfeiltasten; siehe WAI-ARIA Authoring Practices 1.1, §3.25 Tree View unter Keyboard Interaction.

P.S. Ich habe auf Empfehlung hin (https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html) alles exakt so angewendet

Offenbar nicht das für das Widget zwingend notwendige JavaScript, was die Steuerung per Pfeiltasten regelt und die Umschaltung von tabindex zwischen "-1" und "0" (für die Oberpunkte des jeweils aktuellen Untermenüs) vornimmt.

deshalb war ich bei "mit meinen aria-Anreicherungen" nicht so sparsam...

Für die (Nicht-)Verwendung von ARIA gibt es zwei Grundregeln:

1. Verwende nicht ARIA, wenn es entsprechende HTML-Elemente für den Zweck gibt

2. Verwende nicht ARIA, wenn du nicht genau weißt, was du da tust.

Aber wie ich schon sagte, sollte man für die Navigation auf einer Webseite wohl doch gar kein tree view widget verwenden, sondern die gewohnte Bedienung mit Tab-Taste beibehalten. Siehe Diskussion mit Eric Eggert: “That doesn’t mean one should use it in practice.”

Ich muss da bei Gelegenheit nochmal nachfragen.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

weil es gerade ein Thema ist, mit dem ich mich auch beschäftige,

… tree view widget

wäre es denn etwas für die Legende über der Karte? In der aktuellen Version kann man sich durchtabben, was mir aber nicht wirklich gefällt. In der Testversion ist das Tabben etwas gewöhnungsbedürftig, eben Testversion.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

… tree view widget

wäre es denn etwas für die Legende über der Karte?

Das wäre wohl, was Eric ein „application menu“ nennt.

LLAP 🖖

[marctrix]

Hej Gunnar,

Ich muss da bei Gelegenheit nochmal nachfragen.

Ich werde wohl wenigstens einen Teil der Zeit daran teilnehmen, so wie es derzeit aussieht… 😉

Marc

[Gunnar Bittersmann]

@@marctrix

Ich muss da bei Gelegenheit nochmal nachfragen.

Ich werde wohl wenigstens einen Teil der Zeit daran teilnehmen, so wie es derzeit aussieht… 😉

Ich muss gestehen, dass ich den zeitgleich stattfindenden Workshop OAuth 2.0 auch nicht uninteressant finde.

LLAP 🖖

[marctrix]

Hej Gunnar,

Ich muss da bei Gelegenheit nochmal nachfragen.

Ich werde wohl wenigstens einen Teil der Zeit daran teilnehmen, so wie es derzeit aussieht… 😉

Ich muss gestehen, dass ich den zeitgleich stattfindenden Workshop OAuth 2.0 auch nicht uninteressant finde.

So many choices, so little time. 😉

Da ich mir nie die Syntax für anderssprachige Texte merken kann — wäre es noch möglich in Version 5 des Forums einen Button dafür zu bekommen, @Christian Kruse?

Ist irgendwie die am häufigsten benötigte Funktion, die ich einfach nicht in meinen Kopf bekomme... 😟

Marc

[Christian Kruse]

Hallo marctrix,

Da ich mir nie die Syntax für anderssprachige Texte merken kann — wäre es noch möglich in Version 5 des Forums einen Button dafür zu bekommen, @Christian Kruse?

In V4: nein. Aber du kannst dich gerne in die Entwicklung von V5 einbringen ;P

LG,
CK

[marctrix]

Hej Christian,

Aber du kannst dich gerne in die Entwicklung von V5 einbringen ;P

Wie?

Marc

[Christian Kruse]

Hallo marctrix,

Aber du kannst dich gerne in die Entwicklung von V5 einbringen ;P

Wie?

Das wichtigste ist gerade testen und Feedback geben. Ich schmore da ziemlich im eigenen Saft gerade. Ansonsten: Ideen einbringen, Kritik üben, schönere Lösungen aufzeigen.

LG,
CK

[marctrix]

Hej Christian,

Hallo marctrix,

Aber du kannst dich gerne in die Entwicklung von V5 einbringen ;P

Wie?

Das wichtigste ist gerade testen und Feedback geben. Ich schmore da ziemlich im eigenen Saft gerade. Ansonsten: Ideen einbringen, Kritik üben, schönere Lösungen aufzeigen.

Verstehe, ich bin im Moment vollkommen ausgebucht, werde am Wochenende mal versuchen, mir ein bisschen Zeit zu nehmen.

Marc

[einsiedler]

Solangsam werd ich welk…

Jetzt habe ich hier: https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions#Example_1:_Using_a_button_to_collapse_and_expand_a_region

unter Example 2 etwas neues zum Thema gefunden… Bitte Leute, was denn nu? Ist das DAS, was ich benutzen muss/soll?

Mit der freundlichen Bitte um Antwort

der misanthrop

[Rolf B]

Hallo einsiedler,

Solangsam werd ich welk…

plätscher, gieß

Wo ist das Problem, aria-expanded verwendest Du doch?

Die Verwendung von aria-hidden ist so eine Sache. Damit kann man Dinge vor Screenreadern verstecken, die nur für einen sehenden Menschen gedacht sind. Dieses Attribut soll man mit Vorsicht verwenden.

Rolf

[einsiedler]

Ja aber wäre das: https://forum.selfhtml.org/self/2019/mar/28/brauche-eure-hilfe-bei-nav-menue-anpassung-im-firefox-bei-kleiner-bildschirmbreite/1745844#m1745844 dann soweit richtig?

[marctrix]

Hej einsiedler,

Solangsam werd ich welk…

Nicht nötig. Alle Lösungen haben ihre Vorteile und Nachteile. Die Kombination der angebotenen Navigationsangebote macht den Unterschied, ob Besucher sich wohl fühlen oder nicht.

Jetzt habe ich hier: https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions#Example_1:_Using_a_button_to_collapse_and_expand_a_region

unter Example 2 etwas neues zum Thema gefunden… Bitte Leute, was denn nu? Ist das DAS, was ich benutzen muss/soll?

Ich habe das noch nicht verwendet, kann mich da jetzt auch nicht reinarbeiten, da ich zu viel um die Ohren habe. Aber das ist ja eigentlich auch deine eigene Aufgabe.

Was ich damit meine: beschäftige dich mit den Vorteilen und Nachteilen mehrerer navigationskonzepte. Überlege, welche am besten zu deinem webauftritt passen und die mit deiner inhaltlichen Struktur am wenigsten Nachteile haben.

Dann überlege, was sich anbietet als Ergänzung, um die Nachteile abzufangen. Und am Ende hast du ein stimmiges Konzept. Wenn dann hier jemand wie Gunnar oder ich mit Kritik kommt, kannst du dann dein Konzept selbstbewusst erklären. Selbst wenn wir doch noch ein Problem finden und erklären, das du selber nicht gesehen hast, dann ist deswegen ja nicht alles Mist, was du gemacht hast und man geht dann noch ein oder zwei Punkte an und raus kommt eine richtig runde Sache.

Das Problem (für mich) ist, dass ich dir nicht so recht helfen kann. Mir scheint, du probierst Lösungen aus, weil du denkst, die sind „richtig“. So allgemein und pauschal gilt das aber eigentlich nie. Genauso wie du auf den Seiten des w3c nichts falsches finden wirst. Aber unter Umständen etwas nicht passendes.

Ich weiß noch nicht so recht, was für ein Navigationskonzept du dir überlegt hast, auf welchem Weg ich dich also begleiten soll.

Marc

[einsiedler]

Gut, Okay, dann gehe ich mal darauf ein: Ich muss mir (morgen) Deine Posts nochmal mehrmals durchlesen, Schritt für Schritt (was Du damit meinst)

Okay, ich werde dies:

<ul id="tree1" class="tree root-level" role="tree" aria-labelledby="label_1">
   <li id="fruits" class="tree-parent" role="treeitem" tabindex="0" aria-expanded="true">
      <span>Fruits</span>
      <ul id="fruit-grp" role="group">
         <li id="oranges" role="treeitem" tabindex="-1">Oranges</li>
         <li id="pinapples" role="treeitem" tabindex="-1">Pineapples</li>
         <li id="apples" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="false">
            <span>Apples</span>
            <ul id="apple-grp" role="group">
               <li id="macintosh" role="treeitem" tabindex="-1">Macintosh</li>
               <li id="granny_smith" class="tree-parent" role="treeitem" tabindex="-1"
                      aria-expanded="false">
                  <span>Granny Smith</span>
                  <ul id="granny-grp" role="group">
                     <li id="Washington" role="treeitem" tabindex="-1">Washington State</li>
                     <li id="Michigan" role="treeitem" tabindex="-1">Michigan</li>
                     <li id="New_York" role="treeitem" tabindex="-1">New York</li>
                  </ul>
               </li>
               <li id="fuji" role="treeitem" tabindex="-1">Fuji</li>
            </ul>
         </li>
         <li id="bananas" role="treeitem" tabindex="-1">Bananas</li>    
         <li id="pears" role="treeitem" tabindex="-1">Pears</li>    
      </ul>
   </li>
</ul>

das Example 2 von

https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions#Example_1:_Using_a_button_to_collapse_and_expand_a_region

auch mal ausprobieren. Das mit dem tabindex finde ich auch richtig, irgendwie!

ABER NUN, wie merke ich ob etwas richtig funktioniert, wie merke ich die Unterschiede?

Ich kann höchstens mal mit der tab-Taste durchgehen , mal mit return bestätigen, also mit der tab-Taste "durchscrollen" (wie auch imemr) und wenn es für mich rund läuft dann ist es DAS dann?

Puuuh... Ganz schön anspruchsvoll euer Job, soetwas korrekt zu konstruieren für eure Kunden.

Nunja... gute n8 erstmal

der misanthrop

[marctrix]

Hej einsiedler,

ABER NUN, wie merke ich ob etwas richtig funktioniert, wie merke ich die Unterschiede?

In verschiedenen Browsern und unterschiedlichen Endgeräten testen, es gibt auch Webdienste die so etwas (gegen Gebühr) ermöglichen.

Es sollte aber genügen, wenn du auf einem aktuellen Windows IE11, den aktuellen Edge und die freien Browser testest, insbesondere Firefox, weil der im Gegensatz zu den anderen noch eine eigene Rendering Engine hat. Die anderen haben sich alle dem Teufel Google Alphabet verschrieben.

Ich kann höchstens mal mit der tab-Taste durchgehen , mal mit return bestätigen, also mit der tab-Taste "durchscrollen" (wie auch imemr) und wenn es für mich rund läuft dann ist es DAS dann?

Smartphone auf keinen Fall vergessen und nicht nur probieren, ob du mit Eingewöhnungsphase irgendwie damit zurecht kommst, sondern ob es sich intuitiv, wie erwartet und flüssig bedienen lässt.

Wenn es geht natürlich ein Androide und ein iPhone, idealerweise jeweils eins mit ziemlich kleinem und sehr großem Bildschirm. Wichtiger ist aber der kleine Bildschirm, da es da erfahrungsgemäß mehr Probleme gibt.

Das musst die nciht alles selber haben: wenn deine Test-Umgebung vom Web aus erreichbar ist, kannst du mal jemanden bitten, die Adresse kurz aufzurufen und auszuprobieren. Sicher kennst du Leute mit Androiden und welche mit iPhones 😉

Wenn du kannst, lass das auch mal den Besitzer ausprobieren, ob er mit Deiner Seite klar kommt und biete vielleicht auch noch einen Vergleich an. Du probierst ja eh gerade verschiedene Lösungsansätze aus. Dann lass die einfach mal nebeneinander stehen…

Und zu guter letzt einfach mal im Web recherchieren (das geht auch ohne Google prima). Da findet man Artikel zu Problemen und Chancen für Webtechniken. Hier im Thread habe ich ja bereits ein paar Texte zu diesem Thema verlinkt. Da schaut man sich dann einfach mal an, was so alles geht.

Übrigens meine erste Anlaufstelle ist immer caniuse — im speziellen Fall ist das aber wenig hilfreich, da man dort sinnvoll nciht nach Attributwerten suchen kann, sondern nach Attributen - und role wird praktisch kontinuierlich um weitere Werte ergänzt, so dass kein Browser alles wie standardisiert unterstützt, aber viele Werte funktionieren dort, wo sie sollen und insofern können die eingesetzt werden.

Aber gerade in solchen Fällen sind eigene Tests und eine ausführliche Webrecherche natürlich Pflicht!

Puuuh... Ganz schön anspruchsvoll euer Job, soetwas korrekt zu konstruieren für eure Kunden.

Na ja, mit der Zeit hat man ja seine Lösungen, die funktionieren.

Wenn man dann Zeit hat, sich mit etwas neues zu beschäftigen, probiert und tests man mal so einen Ansatz. Wenn ich könnte, würde ich das jetzt mit treeview machen, aber gerade jetzt bin ich halt dicht. Ist aber auf meiner Liste, hatte das noch gar nicht so auf dem Schirm.

Marc