Enterprise: Barrierefreiheit - Benötigen Sie ein tabbfähiges Profilbild

@tmcconechy sieht aus wie das Beispiel, das wir auf ein Blockgrid verweisen. Unterstützt die Auswahl-API bereits einen Fokusstatus?

Wenn wir also für diese image-sm etc-Klassen denken, fügen wir einen Fokusstatus hinzu und fügen einen Tabindex hinzu und stellen sicher, dass es Alt-Text gibt. Also mehr die anderen beiden Beispiele, da Ihr rechtes Blockraster eine Auswahl- / Fokus-API hat, die wir verwenden könnten.

Beheben Sie also alle drei:
http://master-enterprise.demo.design.infor.com/components/images/example-photos.html -> Fokusstatus und Alt-Tag hinzufügen
http://master-enterprise.demo.design.infor.com/components/images/example-index.html -> Fokusstatus und Alt-Tag hinzufügen
http://master-enterprise.demo.design.infor.com/components/images/example-image-list.html -> verwenden Sie die Bildklassen (die einen Alt-Tag und einen Fokusstatus haben) oder wie Sie sagten damit es mit der Blockraster-API funktioniert?

Nachdem ich ein bisschen gelesen habe, bin ich mir nicht sicher, ob das Ändern unserer Anzeige-CSS-Klassen für Bilder der richtige Weg ist, um das Problem zu beheben. Wir haben die Blockgrid-API für die Liste der Bilder, die Auswahl und Tastaturnavigation verarbeiten können, wenn es eine Liste von Dingen gibt, die ausgewählt werden müssen. Was eigenständige Bilder angeht, denke ich nicht, dass wir sie alle mit der staatlichen Verwaltung fokussierbar machen sollten. Bilder sind standardmäßig keine Formularkomponenten, daher sollten wir diese Standardeinstellungen außer in bestimmten Fällen nicht ändern.

@508it , ist dies nicht etwas, das gelöst werden könnte, indem Sie einfach ein tabindex zu jedem Bild hinzufügen, das Sie fokussierbar machen müssen? Fehlen zusätzliche Funktionen, die Sie erwarten? Wenn nicht, wird durch das Hinzufügen eines tabindex in Ihren HTML-Vorlagen auch ein standardmäßiger Browserauswahlstatus hinzugefügt, der den Fall abdecken sollte.

Auf der Seite in der App ist ein Profilbild. Ich hätte den ganzen Ordner wahrscheinlich nicht verknüpfen sollen, da dies Verwirrung verursacht hat. Was sie wollten, war ein einzelnes Bild, das ein Profilbild ist. Also eine Klasse/ein Stil für den Fokusstatus (wenn sie einen Tabindex hinzufügen). Im Moment fügt das Hinzufügen eines Tabindex keinen Stil hinzu.

Stellen Sie also hauptsächlich sicher, dass http://master-enterprise.demo.design.infor.com/components/images/example-index.html funktioniert, wenn ein Tabindex darauf vorhanden ist. Aber in den anderen Seiten geloopt.

OK, ich verstehe. In diesem Fall ist definitiv nicht viel hinzuzufügen. Ich habe bei keinem dieser Bilder einen fehlenden Fokusstatus gesehen, wenn ich einen Tabindex hinzugefügt habe:

Chrom

Feuerfuchs

Vielleicht ist es einfach der Schlüssel, es auf FF ausgeprägter zu machen.

Richtig oder ich dachte, mach es so, wie es unser Eingabefokus sagt. Und stellen Sie im Allgemeinen sicher, dass die Beispiele alle Alt-Tags haben und gut zugänglich sind.

Wenn wir können, machen Sie ein "Fokus"-Mixin und refaktorieren Sie dann das CSS, um diese Stile überall einzuschließen. Wenn wir also den Fokuszustand an einer Stelle ändern, ändert er ihn überall.

Wir haben tatsächlich eine Sass-Variable dafür https://github.com/infor-design/enterprise/blob/master/src/core/_config.scss#L28 oder zumindest einen Teil davon, aber das könnte bereinigt werden (es ist beides) der Box-Shadow und die Umrandung)

QA fehlgeschlagen. Fokus funktioniert nicht im Browser MacOS Mojave Firefox.

Sehr seltsam...

• Auf meinem Mac (Mojave + Firefox 67) funktioniert das völlig einwandfrei.
• Ein Browser-Stack (Mojave + Firefox 67), in dem ich nichts sehe, kann fokussiert werden.

Ich bin mir nicht sicher, was wir tun können.

Welches Betriebssystem verwendest du in Bs?

Mac (Mojave + Firefox 67) -> also das gleiche Betriebssystem und der gleiche Browser, den ich tatsächlich verwende. Ich habe auch + und minus ein paar Versionen von FF auf Browserstack ausprobiert und es scheint nicht zu funktionieren.

Ich würde Landmark, vielleicht @pwpatton und @508it testen lassen und bestätigen, dass es für sie funktioniert. Wenn dies der Fall ist, werden wir es dem BS-Problem zuschreiben.

• [x] Genehmigt von @pwpatton
• [ ] Genehmigt von @508it

Es scheint mit der einen Seite zu tun zu haben. http://master-enterprise.demo.design.infor.com/components/images/example-index.html weil http://master-enterprise.demo.design.infor.com/components/button/example-index. html funktioniert.

Warte ich weiß was es ist. Es ist eine Mac-Einstellung http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/

Sie können dies also nicht auf Mac BS einstellen. BS funktioniert also nicht, aber ich denke, das ist völlig in Ordnung, da dies der Konfigurations-Mac verwendet - also außerhalb unserer Kontrolle.

Zurück zum erneuten Testen oder Bestätigen als erledigt - leider möchten Sie dies auf dem Mac auf dem Browserstack testen können

Wir haben mit den Standardeinstellungen auf einem Mac und der oben aufgeführten Option "Alle Steuerelemente" getestet und dies schlägt immer noch fehl. Das Problem ist, dass es eine Option zum Durchsuchen/Löschen des Bildes gibt, die mit einer Maus ausgewählt werden kann, aber nicht mit einer Tastatur.

Hat es einen Tab-Index im DOM @508it ? Mein Vorschlag wäre, dass Landmark dies noch nicht implementiert hat. Aber Sie können auf Seiten auf http://master-enterprise.demo.design.infor.com/components/images testen

@tmcconechy Das tut es nicht. Der von Ihnen angegebene Link funktioniert und er wird übergeben.

http://localhost :4000/components/images
QA in allen Browsern bestanden. Zuerst funktioniert der Tab-Fokus auf meinem Mojave Firefox 67 nicht, selbst nachdem alle Steuerelemente in den Systemeinstellungen angewendet wurden, aber der about:config- Trick hat bei mir funktioniert, https://stackoverflow.com/questions/11704828/how-to-allow- Tastatur-Fokus-von-Links-in-Firefox

Benötigen wir die Genehmigung von

Was vermissen wir genau in Landmark?

Zur Info :

@pwpatton stelle einfach sicher, dass image-sm oder image-md und füge ein tabindex="0" . Dann haben Sie einen Fokuszustand und das Bild ist fokussierbar.

@brianjuan ist gerade fertig geworden

Das Ändern des Codes in einen tabindex=0 behebt tatsächlich den Orientierungspunkt.

Der Tab-Index funktioniert, aber wir haben keinen fokussierbaren Stil für Bilder mit benutzerdefinierter Größe. In Landmark skalieren wir Bilder selbst basierend auf den LPL-Definitionen.
Nach einer einfachen image-auto Klasse fragen, die auf dem img Element platziert wird, um den fokussierbaren Stil zu erreichen, der in diesem Beispiel gefunden wird http://master-enterprise.demo.design.infor.com/components /images/example-index.html

Nur um klarzustellen.

1. füge eine image-auto Klasse ohne Höhe und Breite hinzu und hat den Fokuscode. Dies wird die Größe des Bildes verwenden
2. fügen Sie es der Beispielseite hinzu http://localhost :4000/components/images/example-index.html
3. Ich bin mir auch nicht sicher, warum wir dies bei einem übergeordneten Div gemacht haben. es sollte direkt auf dem Image-Tag funktionieren.

<div class="image-lg">
   <img src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">
</div>

<~--Instead of-->

<img class="image-lg"src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">

Verschieben dieses Tickets zu QA fehlgeschlagen. Der Fokus ist nicht sichtbar auf den Platzhalterbildern.

-MAC FF

• URL: http://master-enterprise.demo.design.infor.com/components/images/example-index.html?theme=soho&variant=light&colors=2578a9
• Tab auf der ganzen Seite. Der Fokus ist nur auf den grauen Bildern sichtbar.
• Siehe Screenshot im Anhang.
  

Ich denke, die Frage hier lautet: "Sollte ein Platzhalterbild tabbierbar/fokussierbar sein?"

Ich denke, @davidcarlsonberg ist auch ein "Bild". Der Anwendungsfall ist, dass das Bild fehlt, sodass sie stattdessen diesen Platzhalter verwenden können. Es könnte jedoch einen Fall geben, in dem ein Menü angehängt ist oder etwas, das eine Fokussierung erfordert.

Dies ist sowohl ein type: bug type: demo-app bug (Fokusstatusproblem) als auch ein

http://localhost :4000/components/images/example-index.html
Platzhalter sind jetzt tabb-/fokussierbar. Mir ist gerade aufgefallen, dass in Mac Firefox Bilder nicht anklickbar sind, aber mit der Tabulatortaste fokussiert werden können, auch nachdem die Systemeinstellungen und about:config festgelegt wurden.

Leider bezweifle ich, dass wir etwas gegen das abweichende Verhalten von Firefox tun können. Daher schlage ich vor, dass wir dies vorerst ignorieren.

Verstanden @tmcconechy , verschiebt dies jetzt in Fertig und