nicht angemeldet
Henry
at
Matthias Apsel
at
Matthias Apsel
at
marctrix
Hi there, wenn ich verline in der Art http://www.........de/Seite5.shtml#akt,
so wird in der Seite an die Stelle verzweigt, die mit (z.B.) mit
Gunnar Bittersmann
MudGuard<div id="war"></div>
gekennzeichnet ist.
Wenn diese Stelle nicht sichtbar ist, da auf anderer Seite oder auf der aktuellen Seite außerhalb des sichtbaren Fensters, so erscheint die referierte Stelle oben am Fenster (sofern noch genügend Inhalt anschließend kommt.
Ist die Stelle bereits im sichtbaren Fenster, ist die Stelle nicht besonders erkennbar. Gibt es eine Möglichkeit, das Sprungziel besonders zu markieren (fett oder farbig,...)?
Wenn diese Stelle nun irgendwo auf der ersten Seite steht,
hallo
Gibt es eine Möglichkeit, das Sprungziel besonders zu markieren (fett oder farbig,...)?
:target{outline:2px solid orange;}
Hallo beatovich, Dank für die schnelle Antwort!
Hallo beatovich,
:target{outline:2px solid orange;}
Guter Tipp. Habe selbst kaum mal was damit gemacht und deshalb mal ein wenig nachgeschaut. Dieses Beispiel inspiriert mich sehr zu neuen Ideen, doch bevor ich nun meiner Experimentierlaune folge, mal die Frage, wie sieht's mit der Barrierefreiheit für diese Pseudoklasse bzw. ähnlichen Beispielen aus?
Gruss
Henry
hallo
:target{outline:2px solid orange;}
Guter Tipp. Habe selbst kaum mal was damit gemacht und habe deshalb mal ein wenig nachgeschaut. Dieses Beispiel inspiriert mich sehr zu neuen Ideen, doch bevor ich nun meiner Experimentierlaune folge, mal die Frage, wie sieht's mit der Barrierefreiheit für diese Pseudoklasse bzw. ähnlichen Beispielen aus?
Das kannst du dir ja selber beantworten. Das Schliessen einer Box davon abhängig zu machen, dass ich den url hash ändere, ist nicht gerade toll.
Hallo beatovich.
Das kannst du dir ja selber beantworten.
Er sich vielleicht, ich mir nicht.
Das Schliessen einer Box davon abhängig zu machen, dass ich den url hash ändere, ist nicht gerade toll.
Magst du das ein wenig ausführen?
MfG, at
hallo
Hallo beatovich.
Das kannst du dir ja selber beantworten.
Er sich vielleicht, ich mir nicht.
Das Schliessen einer Box davon abhängig zu machen, dass ich den url hash ändere, ist nicht gerade toll.
Magst du das ein wenig ausführen?
Ja.
Es kann nur eine Instanz in einem Dokument geben, auf die :target zutrifft. Will ich wirklich diesen Zustand aufheben nur dadurch, dass ich einen anderes :target erzeuge (einen internen Link mit id aufrufe)?
Der Inhalt einer mit :target geöffneten Box kann also bestenfalls einen Link enthalten, der als close-Link dient (oder ein Link, der unload erzeugt.)
Das Beispiel im Wiki zeigt übrigens, wie unausgegoren sich das ganze darstellt.
Nur weil auf ein Element :target zutrifft, heisst noch lange nicht, dass es den Fokus hat.
Wenn ich nun :focus/:focus-within mit :target vergleiche, realisiere ich mehr an Freiheiten bei :focus.
Aber selbstverständlich, zuverlässiges Verhalten gibt es in Zeiten mit aria-attributen nur mit Javascript. Und wenn man das durchführt, verliert :target jede Rolle im Konzept.
Hallo beatovich,
Es kann nur eine Instanz in einem Dokument geben, auf die :target zutrifft.
Das kann genau das sein, was man möchte.
Der Inhalt einer mit :target geöffneten Box kann also bestenfalls einen Link enthalten, der als close-Link dient (oder ein Link, der unload erzeugt.)
Oder nichts dergleichen, wenn die Box offen bleiben soll.
Nur weil auf ein Element :target zutrifft, heisst noch lange nicht, dass es den Fokus hat.
Wozu auch?
Wenn ich nun :focus/:focus-within mit :target vergleiche, realisiere ich mehr an Freiheiten bei :focus.
Nicht den, eine spezifische Information oder einen spezifischen Zustand in eine URL integrieren zu können.
Aber selbstverständlich, zuverlässiges Verhalten gibt es in Zeiten mit aria-attributen nur mit Javascript. Und wenn man das durchführt, verliert :target jede Rolle im Konzept.
Klar kann man das Konzept des Fragment-Identifier und ´:target´ auch mittels Javascript nachbauen, aber es funktioniert ja auch ohne.
MfG, at
hallo
Klar kann man das Konzept des Fragment-Identifier und ´:target´ auch mittels Javascript nachbauen, aber es funktioniert ja auch ohne.
Also wenns ums funzen geht, verlasse ich mich lieber auf etwas flexibles: https://beat-stoecklin.ch/klapperlogic.html
Ansonsten empfehle ich für einfach Sachen mit details/summary zu arbeiten.
Im internen Doument mit #id's rumzusurfen braucht heute als Argument, dass die Bewegung auch ein Bookmarkziel sein soll.
Hallo beatovich,
Im internen Doument mit #id's rumzusurfen braucht heute als Argument, dass die Bewegung auch ein Bookmarkziel sein soll.
Yep, so hatte ich das gemeint.
MfG, at
Hallo Henry.
Dieses Beispiel inspiriert mich sehr zu neuen Ideen, doch bevor ich nun meiner Experimentierlaune folge, mal die Frage, wie sieht's mit der Barrierefreiheit für diese Pseudoklasse bzw. ähnlichen Beispielen aus?
Mit der Pseusoklasse als solcher hat das wenig zu tun. Wichtig ist eben, die Inhalte nicht wie hier geschehen mittels der display-Eigenschaft auch vor assistiven Systemen zu verbergen.
Leider kann ich die Änderung nicht selbst im Wiki vornehmen, da es sich um ein Frickl handelt.
MfG, at
Hallo at,
Leider kann ich die Änderung nicht selbst im Wiki vornehmen, da es sich um ein Frickl handelt.
Jetzt kannst du.
Bis demnächst
Matthias
Hallo Matthias,
vielen Dank – auch dafür, dass diesen Hinweis überhaupt gefunden hast.
Leider kann ich die Änderung nicht selbst im Wiki vornehmen, da es sich um ein Frickl handelt.
Jetzt kannst du.
Jetzt habe ich zumindest die Berechtigung. Aber wie oder wo kann ich ein Frickl bearbeiten?
MfG, at
Hallo at,
Jetzt habe ich zumindest die Berechtigung. Aber wie oder wo kann ich ein Frickl bearbeiten?
Bei den Beispielen (Kopfzeile) solltest du jetzt neben „ansehen …“ einen Link „bearbeiten …“ haben.
Bis demnächst
Matthias
Hallo Matthias,
Bei den Beispielen (Kopfzeile) solltest du jetzt neben „ansehen …“ einen Link „bearbeiten …“ haben.
Und wo finde ich die Beispiele? Bestandteil der Seite, auf der sie vorkommen, sind sie nicht, eine Übersicht habe ich nicht gefunden und den Dateinamen an die Domain anzuhängen, führt nicht zur Beispielseite.
MfG, at
Hallo at,
Und wo finde ich die Beispiele? Bestandteil der Seite, auf der sie vorkommen, sind sie nicht, eine Übersicht habe ich nicht gefunden und den Dateinamen an die Domain anzuhängen, führt nicht zur Beispielseite.
auf der Seite, auf der sie vorkommen.
etwa https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target
Bis demnächst
Matthias
Hallo Matthias,
vielen Dank!
MfG, at
Hallo at,
opacity:0 vs. display:none
wie unterscheidet sich das Verhalten der Screenreader?
Screenreader lesen das vor, was auf dem Bildschirm zu sehen ist?
Nutzer von Screenreadern bekommen immer alle details vorgelesen, erst alle 4 Listenelemente, danach alle 4 details-div?
Bis demnächst
Matthias
Hallo Matthias,
Nutzer von Screenreadern bekommen immer alle details vorgelesen, erst alle 4 Listenelemente, danach alle 4 details-div?
Meines Wissen nicht. Es hat im konkreten Kontext aber andere Nachteile, so dass ich es vielleicht noch gegen eine ganz andere Technik austauschen werde.
MfG, at
@@Matthias Apsel
opacity:0vs.display:nonewie unterscheidet sich das Verhalten der Screenreader?
Screenreader lesen nicht vor, was durch display: none oder visibility: hidden nicht auf dem Bildschirm zu sehen ist.
Screenreader lesen vor, was durch opacity: 0 nicht auf dem Bildschirm zu sehen ist.
LLAP 🖖
Hallo Gunnar,
Screenreader lesen nicht vor, was durch
display: noneodervisibility: hiddennicht auf dem Bildschirm zu sehen ist.
War das aber bisher nicht(glaube auch von dir?) der allgemeingültige Tenor(Empfehlung) hier, man solle visibility nutzen, anstatt display, eben wegen Screenreader? Sicherheitshalber(optional) zwar mit Aria. Wie sicher ist denn das Wissen hier, was Screenreader wirklich machen, bzw. gibt's hier jemand der einen nutzt?
Gruss
Henry
hallo
haben wir sowas im Wiki?
(Bitte die Liste kommentieren/korrigieren)
<table id="table1">
<thead>
</thead>
<tbody>
<tr>
<th>CSS:property</th>
<th>display:none</th>
<th>visibility:hidden</th>
<th>opacity:0</th>
<th>position:absolute; left:-200vw;</th>
</tr>
<tr>
<th>Screenreader</th>
<td>inaccessible</td>
<td>inaccessible</td>
<td>is read</td>
<td>is read</td>
</tr>
<tr>
<th>TAB / focus()</th>
<td>inaccessible</td>
<td>gets Focus</td>
<td>gets Focus</td>
<td>gets Focus</td>
</tr>
<tr>
<th>Mouseover</th>
<td>inaccessible</td>
<td>can be hovered</td>
<td>can be hovered</td>
<td>inaccessible</td>
</tr>
<tr>
<th>Eye-View</th>
<td>inaccessible</td>
<td>invisible</td>
<td>invisible</td>
<td>invisible</td>
</tr>
</tbody>
</table>
Hallo beatovich.
haben wir sowas im Wiki?
Meines Wissen nicht, sehr gute Idee!
MfG, at
Hej at,
haben wir sowas im Wiki?
Meines Wissen nicht, sehr gute Idee!
Das finde ich auch, würde da aber nur empfehlenswerte Techniken aufführen, wie in dem Link von gunnar beschrieben: How-to: hide content
Marc
hallo
Meines Wissen nicht, sehr gute Idee!
Das finde ich auch, würde da aber nur empfehlenswerte Techniken aufführen, wie in dem Link von gunnar beschrieben: How-to: hide content
Ich bin für Aufklärung, nicht für Bevormundung.
Hej beatovich,
Meines Wissen nicht, sehr gute Idee!
Das finde ich auch, würde da aber nur empfehlenswerte Techniken aufführen, wie in dem Link von gunnar beschrieben: How-to: hide content
Ich bin für Aufklärung, nicht für Bevormundung.
Ich würde als Hilfesuchender lieber nur sinnvolle Techniken durchackern müssen, statt alle Lösungen, die mit der gesamten Phantasie aller Forumsteilnehmer nur denkbar sind. Sonst schlage ich gleich die Einbindung von Flash-Videos vor 😉
Marc
hallo
Das finde ich auch, würde da aber nur empfehlenswerte Techniken aufführen, wie in dem Link von gunnar beschrieben: How-to: hide content
Ich bin für Aufklärung, nicht für Bevormundung.
Ich würde als Hilfesuchender lieber nur sinnvolle Techniken durchackern müssen, statt alle Lösungen, die mit der gesamten Phantasie aller Forumsteilnehmer nur denkbar sind. Sonst schlage ich gleich die Einbindung von Flash-Videos vor 😉
In meiner Tabelle gehts nicht um Lösungen sondern um schlichte Feststellungen.
Beste Praktiken darfst du dann immer noch unabhängig davon formulieren, in der Annahme, dass du den gesuchten Anwendungszweck auch kennst.
Also ist die Tabelle OK oder sie ist eben scheisse.
Hallo beatovich,
Das finde ich auch, würde da aber nur empfehlenswerte Techniken aufführen, wie in dem Link von gunnar beschrieben: How-to: hide content
Ich bin für Aufklärung, nicht für Bevormundung.
Yep. Vor allem zeigt man so, dass man nicht bestimmte Techniken, die anderswo empfohlen werden, vergessen hat, sondern dass bestimmte Gründe gegen sie sprechen.
MfG, at
@@beatovich
position:absolute; left:-200vw;
Das sollte in der Tabelle nicht auftauchen, weil die Technik nicht empfehlenswert ist. Oder deutlich als nicht empfehlenswert gebranntmarkt werden. Gründe bei Zeldman.
LLAP 🖖
hallo
position:absolute; left:-200vw;Das sollte in der Tabelle nicht auftauchen, weil die Technik nicht empfehlenswert ist. Oder deutlich als nicht empfehlenswert gebranntmarkt werden. Gründe bei Zeldman.
Doch, das sollte darin auftauchen. Aber man muss eben beschreiben was passiert.
Ich kann natürlich mehrer alternative Methoden aufführen. In dem Sinne darfst du da ja eine Spalte ergänzen.
hallo
Habe die Tabelle mal erweitert
<table id="table1">
<thead>
<tr>
<th>Property</th>
<th>HTML hidden</th>
<th>HTML<br>aria-hidden</th>
<th>CSS<br>display:none</th>
<th>CSS<br>visibility:hidden</th>
<th>CSS<br>opacity:0</th>
<th>CSS<br>position:absolute;<br>left:-200vw;</th>
<th>CSS<br>Box-Masse minimieren</th>
</tr>
</thead>
<tbody>
<tr>
<th>Screenreader</th>
<td>inaccessible</td>
<td>inaccessible</td>
<td>inaccessible</td>
<td>inaccessible</td>
<td>is read</td>
<td>is read</td>
<td>is read</td>
</tr>
<tr>
<th>TAB / focus() / :focus</th>
<td>inaccessible</td>
<td>gets Focus</td>
<td>inaccessible</td>
<td>gets Focus</td>
<td>gets Focus</td>
<td>gets Focus</td>
<td>gets Focus</td>
</tr>
<tr>
<th>Mouse/Pointer</th>
<td>inaccessible</td>
<td>can be hovered</td>
<td>inaccessible</td>
<td>can be hovered</td>
<td>can be hovered</td>
<td>unreachable</td>
<td>unreachable</td>
</tr>
<tr>
<th>:target</th>
<td>inaccessible</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<th>Eye-View</th>
<td>inaccessible</td>
<td>visible</td>
<td>inaccessible</td>
<td>invisible</td>
<td>invisible</td>
<td>invisible</td>
<td>invisible</td>
</tr>
<tr>
<th>Layout-Change</th>
<td>yes</td>
<td>no</td>
<td>yes</td>
<td>no</td>
<td>no</td>
<td>yes</td>
<td>depends</td>
</tr>
<tr>
<th>Browser Permormance</th>
<td>cheap</td>
<td>cheap</td>
<td>cheap</td>
<td>cheap</td>
<td>cheap</td>
<td>can be expensive</td>
<td>cheap</td>
</tr>
</tbody>
</table>
@@Henry
Screenreader lesen nicht vor, was durch
display: noneodervisibility: hiddennicht auf dem Bildschirm zu sehen ist.War das aber bisher nicht(glaube auch von dir?) der allgemeingültige Tenor(Empfehlung) hier, man solle visibility nutzen, anstatt display, eben wegen Screenreader?
Ich hoffe nicht. Ich sagte immer, man solle visually-hidden nutzen. Das hält keinen Platz für den visuell versteckten Inhalt frei. Im Gegensatz dazu wird der Platz bei opacity: 0 natürlich nicht freigegeben (analog wie bei display: none vs. visibility: hidden).
Wie sicher ist denn das Wissen hier, was Screenreader wirklich machen,
Es steht auf wackligen Füßen. Ich hoffe jetzt mal, dass da nicht irgendein Screenreader ausschert und auch Zeug mit opacity: 0 nicht vorliest, so dass man sowas wie opacity: 0.01 angeben müsste. Vielleich weiß der @marctrix da Genaueres?
bzw. gibt's hier jemand der einen nutzt?
Das wäre schön. Ich weiß aber gar nicht, ob das Forum überhaupt mit Screenreader vernünftig zu bedienen ist. Im September haben wir die Chance, es rausfinden.
LLAP 🖖
Hej Gunnar,
Wie sicher ist denn das Wissen hier, was Screenreader wirklich machen,
Ich hoffe jetzt mal, dass da nicht irgendein Screenreader ausschert und auch Zeug mit
opacity: 0nicht vorliest, so dass man sowas wieopacity: 0.01angeben müsste. Vielleich weiß der @marctrix da Genaueres?
Die Empfehlung von Dir ist ja aus einer zuverlässigen Quelle. Ich muss aber zugeben, dass ich das genauso seit Jahren einfach einsetze, das jetzt speziell nicht bewusst getestet zu haben, heißt jetzt aber nicht, dass ich das nie gemacht hätte.
Aber alle Browser-SR-Kombinationen auf den unterschiedlichen OS kenne ich nciht. Zum Testen benutze ich VoiceOver unter MacOS X oder Jaws unter Windows.
Auf dem Mac habe ich es jetzt noch mal ganz bewusst ausprobiert. Es funktioniert sowohl mit, als auch ohne focusable, der für Sehende Tastaturnutzer wichtig ist:
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
overflow: visible;
position: static;
display: block;
margin: 5em auto;
padding: 1em;
background: pink;
min-width: 50%;
max-width: 100%;
white-space: inherit;
text-align: center;
}
bzw. gibt's hier jemand der einen nutzt?
Das kann ich mir nciht vorstellen,. Bisher haben sich auf solche und ähnliche Fragen jedenfalls nie Menschen gemeldet.
Das wäre schön. Ich weiß aber gar nicht, ob das Forum überhaupt mit Screenreader vernünftig zu bedienen ist. Im September haben wir die Chance, es rausfinden.
Ich kann die Frage jetzt schon beantworten. Es ist ein unheimliches Erlebnis — und leider nicht unheimlich gut.
Wir haben zwar vor einer Weile viele Kleinigkeiten verbessert, aber die Testerin, die ich gebeten habe, sich das Forum mal anzuhören, kam damit nicht zurecht…
Marc
Hej Matthias,
wie unterscheidet sich das Verhalten der Screenreader?
opacity:0vs.display:none
Durchsichtigkeiten können Screenreader nicht - wozu auch? sollten sie ausgeben, dass eine Box halb transparent ist? - Macht keinen Sinn.
displaydagegen ändert die Darstellung. Darstellungsformen sind beispielsweise block, inline oder none, also keine Darstellung. Gar keine. Weder in einer Zeile, noch als Block-element, noch sonst irgendwie. weder als Bild noch als Ton ;-)
Marc
Hi,
Durchsichtigkeiten können Screenreader nicht - wozu auch? sollten sie ausgeben, dass eine Box halb transparent ist? - Macht keinen Sinn.
Opak = volle Lautstärke, Transparent = reduzierte Lautstärke, 50% opak/transparent dann ein Lautstärke dazwischen… wäre eine Möglichkeit für den Screenreader (ob's sinnvoll ist, ist nochmal ne andere Frage).
cu,
Andreas a/k/a MudGuard
Hej MudGuard,
Durchsichtigkeiten können Screenreader nicht - wozu auch? sollten sie ausgeben, dass eine Box halb transparent ist? - Macht keinen Sinn.
Opak = volle Lautstärke, Transparent = reduzierte Lautstärke, 50% opak/transparent dann ein Lautstärke dazwischen… wäre eine Möglichkeit für den Screenreader (ob's sinnvoll ist, ist nochmal ne andere Frage).
Sicher nicht. Oft werden die möglichst leise eingestellt.
Außerdem: warum sollte man einen Effekt, der optisch gewünscht wird, Screenreadern vermitteln? Dadurch würde ja nichts "hübscher".
Die information sollte im HTML stecken, nicht im CSS. Ein nicht zu bearbeitendes Feld könnte mittels transparenz "ausgegraut" werden, was Sehende mit "kann ich nis mit anfange" assoziieren. Diese Assoziation wäre bei leiser Stimme vermutlich nicht gegeben. Was der Screenreader dagegen tut: er wertet das disabled-Attribut aus und gibt es lokalisiert aus. Sicher die Methode, die weniger gedankliche Leistung beansprucht und besser beim z.B. Ausfülen von Formularen unterstützt. Insbesondere wenn im HTML auf eventuell nötige Maßnahmen hingewiesen wird, damit das Feld befüllbar wird (machen Sie erst eine Angabe in Feld xyz). Die dann wieder mittels visuallyhidden verborgen werden (was auch wieder eine vom Screenreader ignorierte optische Auszeichnung ist: verschiebe eine Box nach irgendwo und mach sie so und so groß sind nun wirklich nicht die Dinge, die einen Hörer interessieren…)
Leider ist visuallyhidden ein Hack und presentational markup. ich hätte gerne analog zu aria-hidden, bzw role=presentation ein aria-only…
Marc
Hej Henry,
:target{outline:2px solid orange;}
Guter Tipp. Habe selbst kaum mal was damit gemacht und deshalb mal ein wenig nachgeschaut. Dieses Beispiel inspiriert mich sehr zu neuen Ideen, doch bevor ich nun meiner Experimentierlaune folge, mal die Frage, wie sieht's mit der Barrierefreiheit für diese Pseudoklasse bzw. ähnlichen Beispielen aus?
Das ist meiner Meinung nach eher ein Hack, als eine Empfehlung. Man muss das ja Tastaturbedienbar halten. Bei Popups darf der Fokus das Popup nicht verlassen, sonst ist man womöglich mit dem Fokus unter dem Popup, also in einem nciht mehr sichtbaren Bereich. Für Blinde mit Screenreader kein Problem, aber für Sehende.
Außerdem muss der Fokus sichtbar sein, wenn er sich auf dem schließen-Button befindet.
aria-Attribute sind vermutlich cniht nötig, weil ja nichts auf display none gesetzt wrd und somit alles jederzeit erreichbar bleibt für Screenreader.
Ohne JavaScript kommt man hier nicht weit…
Ich nutze :targetwirklich nur um anzuzeigen, wo ein Link hinführt. Besonders wenn es sich um Boxen am Rand des Bildschirmes handelt, ist sonst für Sehende oft nicht klar, was man angesprungen hat. Auch hier sind Blinde wieder im Vorteil, weil sie sich das Linkziel vorlesen lassen können.
Für so was nehme ich am liebsten animierte Skalierungen, ich lasse also beispielsweise ein Fragezeichen-Symbol in einer Box wie ein Herz drei mal deutlich "pumpen" o.ä.
Marc