Jump to content
Ultraleicht Trekking

sja

Members
  • Gesamte Inhalte

    117
  • Benutzer seit

  • Letzter Besuch

  • Tagessiege

    3

sja hat zuletzt am 4. August gewonnen

sja hat die beliebtesten Inhalte erstellt!

Über sja

  • Rang
    Fliegengewicht

Letzte Besucher des Profils

Der "Letzte Profil-Besucher"-Block ist deaktiviert und wird anderen Benutzern nicht angezeit.

  1. sja

    Alternative zu lighterpack

    Ja habs fast befürchtet... Das mit den barrierefreien Widgets ist aber auch nicht so einfach... Meld dich gerne.
  2. sja

    Alternative zu lighterpack

    Also erste Lösung versteh ich, das wäre statt des normalen Inputs so ein Auto Suggest Die zweite Lösung ist mir nicht ganz klar. Was meinst du mit "erscheinnen in der bubble (wie oben)"? Das wäre dann wie bei LighterPack? Da is ja derzeit drag and drop - D.h. man müsste erst in der Listbox auswählen und dann bräuchte man ja nochmal ein Select um das Item der Kategorie hinzuzufügen. Von daher tendiere ich zu Ansatz 1.
  3. sja

    Alternative zu lighterpack

    @zeank Hab grad gesehen, dass du eine tastaturbedienbare Lösung bereits eingebaut hast. Ist einfach und praktikabel. SR-Nutzer müssen sich etwas orientieren, wie und wo sie dann sind, aber well.. müsste man klarkommen. Zu drag and drop gibts schon Ansätze, aber nicht so einfach, bissl Gefrickel (zumindest wenn man es Screenreadertauglich will, Tastaturnuzter geht wohl eher noch. Die müssen aber wissen, was sie tun müssen). Bin auf einen Artikel im Smashing Magazine gestoßen. Mit verlinktemm Github Beispiel. Das erste Demobeispiel gefiel mir ganz gut, außer: dass im Hilfe-Text ( der auch off-screen sein könnte und der über aria-live ausgegeben wird) mitgeteilt wird: "Ensure screen reader is in focus mode." Das sollte er eigentlich automatisch sein, wenn es fokussiert wird. (Der Screenreader kann in unterschiedlichen Modi sein, wo er unterschiedlich funktioniert). Hier hätte ich evtl. Ideen wie man das löst (role="application" müsste man aber sehen, wo das hinkommt und testen. Mit role=application soll man sehr vorsichtig sein) bei dem Navigieren von Item zu Item wird dem SR ein langer Hilfe-Text (aria-live) vorgelesen, was wohl nervt. Könnte man vielleicht auch eleganter lösen oder kürzen. Und bei drag müsste eingentlich ENTER und Space gehen (hier im FF nur ENTER, obwohl Space wohl auch implementiert ist. Für sehende Tastaturnutzer funktioniert es aber ganz gut glaube ich. Die oben beschriebenen Problemchen sind "nur" bei SR-Nutzung. Hier noch ne andere Umsetzung und der dazughörige Artikel mit ARIA drag and drop Attributen... Aber die Umsetzung insgesamt passt nicht so ganz, weil das als Listbox (-Widget) umgesetzt ist. Wobei auch das obere Beispiel passt nicht 100%ig, da das eigentlich auch ne Liste ist. Wobei man das so wie du es jetzt hast auch machen könnte und mit aria-labelledby einfach auf die "Names" verweisen könnte (also damit die Buttons bezeichnet sind und man als Blinder weiß, was man verschiebt. title-Attribut ist nicht die beste Lösung, weil...). Hm, wahrscheinlich alles bissl zu kompliziert, aber wenn dich der Ehrgzeit irgendwann packt... Die jetzige Lösung finde ich aber auch schön einfach und praktikabel. Aber... ich habe heut wieder was gelernt und euch vielleicht etwas vollgeblubbert... sorry, wenn es so sein sollte !!
  4. sja

    Alternative zu lighterpack

    Ja, sehr gut. Kann hier gern mal recherchieren. Hab schon was gesehen, will aber nochmal schauen, was am besten funktioniert...
  5. sja

    Alternative zu lighterpack

    Hab s mir grad mal mit dem Screenreader angehört: Bei den Listen-links wird jetzt vorgelesen: "New List Delete list" beim nächsten TAB wird dann das Icon focussiert und nochmal: "Delete list" (das eigentlich verlinkte Icon) vorgelesen. Das ist natürlich verwirrend. Liegt wohl daran, dass das verlinkte Icon im Textlink verschachtelt liegt, dachte erst, das würde nichso viel machen, aber da wirkt sich das ungut aus. Besser innerhalb eines li die Links hintereinander positionieren?! Weight: Nur zum Verständnis: soll es ein Drehschalter sein oder ein normales input? Mit dem Screenreader wird Drehschalter ausgegeben.. Semantisch wahrscheinlich ok?! Schloß-Icon: Besserer Fokushervorhebung bei Tastaturbedienung? Die aktuell ausgewählte Liste: blau kontrastiert wieder etwas zu wenig (IST 3,8:1 SOLL 4,5:1) kleines bissl mehr?
  6. sja

    Alternative zu lighterpack

    Also das "-" ist jetzt prima rot (der Kasten drumrum etwas schäps ist bei "x" schöner. Bzgl. der Links... vielleicht erstmal noch zurückstellen. Eigentlich sieht man es jetzt schon ganz gut mit dem Kasten, ist vielleicht auch die Frage, wie es später in der mobilen Ansicht aussieht. Dann kann man gestalterisch immer noch überlegen. Und klar, wenn man da für die Tastaturnutzer rangeht, könnte man auch für die Mausnutzer... Aber vielleicht noch ein Farbwechsel bei "+" (Add new List)? Finde übrigens ein normales Input für die "g" auch besser . Macht bei "Qty" mehr Sinn.
  7. sja

    Alternative zu lighterpack

    Ja, ok, verstehe so kann man es auch sehen.
  8. Du meinst aber nicht die Rota Vicentina? Die bin ich schon mal 1 Woche gelaufen. Für eine Woche im Frühjahr fand ich die sehr schön. Da hab ich keine Gewächshäuser gesehen. Die Dünenvegetation fand ich sehr schön und vielfältig. Für eine Woche fand ich das nicht langweilig, länger hätte es an der Küste aber auch nicht sein müssen. Ich war im März da, da ist kaum jemand unterwegs gewesen. Hatte T-Shirt-Wetter aber auch Sturm.
  9. sja

    Alternative zu lighterpack

    Ui, so war das gar nicht gemeint. Das ist "einfach" was, was man ins HTML schreibt und Leute, die sich mit ner Sprachausgabe die Seite vorlesen lassen, weil sie nicht so gut gucken können, bekommen dann quasi angesagt, dass sie Inhalt eingeblendet haben. Aber schon sehr speziell
  10. sja

    Alternative zu lighterpack

    Nochwas zur Tasgtaturbedienung/Fokushervorhebung: Items: Das "x" zum Löschen taucht nur bei mouse:over auf? Kann das immer sichtbar sein? Oder zumindest, wenn man es mit der Tastatur fokussiert, eingeblendet werden? Wobei es nutzerfreundlicher wäre, wenn es immer sichtbar wäre, oder? Icons (+, -, x): Hier bekommen Mausnutzer einen Farbwechsel, Tastaturnutzer nur den Pixelkranz des Browsers - funktioniert. Hübscher wäre, wenn das bei Tastaturnutzung auch zusätzlich den Farbwechsel bekämen (vergl. jetzt "Add new Item") LISTS (wenn hier mehrere Links sind): Evtl. auch noch ne zusätzliche Unterstreichung für Tastaturnutzer (also nur den Listennamen)? Link smrtpck (alpha): Ist das tatsächlich ein Link, d.h. führt der später irgendwo hin? Wenn ja, könnte der bei Tastaturbedienung auch eine Hervorhebung bekommen? Wenn nein (was ich eher vermute), Link entfernen? --- und dann eine h1 draus machen, vielleicht sogar mit einer Ergänzung? Z.B. smrtpck - Gear Lists Ultralight (oder whatever - hm keine Ahnung, also nur, wenn einem da was vernünftiges einfällt Gedanke ist nur, wenn h1, dann besser für SEO und wenn die dann noch etwas aussagekräftiger, dann auch für SEO besser? Wobei ich mir nicht sicheer bin, ob letzteres schon ne Auswirkung hat), aber mit h1 auszuzeichnen schadet ja nix. LISTS könnte dann h2 sein (statt h6). So nun noch was Schwierigeres In der mobilen Ansicht gibt es diese Listen-Navi noch nicht? Seh ich das richtig? Was die Barrierefreiheit betrifft, bekommt man die mobile Ansicht, wenn man nicht so ein großes Fenster hat und z.B. auf 200% über den Browser zoomt. Aber ich meine auch auf meinem Iphone ist die Listen-Navi weg? Könnte in der mobilen Ansicht ein Hamburger-Icon-Button (Textalternative, mit Hilfe von aria-label="navigation" im a-Element) da sein (Standard-Ansicht versteckt), wenn man draufklickt wird die sidebar eingeblendet? Nich so ganz einfach dies barrierfrei hinzukriegen, wenn man das noch nie gemacht hat? Aber vielleicht hilft dieses kurze Tutorial (6min), evtl. sogar das erwähnte polyfill. Das Problem mit dem offscreen-Focus hast du derzeit nicht, weil die sidebar ganz weg ist...?!). https://www.youtube.com/watch?v=fGLp_gfMMGU&t=0s&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=30 (Bei zdf.de ist das übrigens auch gut umgesetzt, wenn du da das Browserfenster klein ziehst, und dann mal durch die Navi tabbst, siehst, du, dass das ganz gut funktioniert. Fokus immer sichtbar, wenn du durch bist, schließt das Ding automatisch. Ein aria-expanded="true" bzw. mit dem Wert "false" auf dem Toggle-Element sagt dem Screenreadernutzer, je nach Zustand, ob das Ding aus- oder eingeklappt ist.... ("true" ausgeklappt, "false" eingeklappt) - aber das nur so am Rande ).
  11. sja

    Alternative zu lighterpack

    Sieht gut aus! Finde ja. Ah, ok jetzt verstehe ich es. Es ist so gedacht, dass ich unterschiedliche Items theoretisch in unterschiedlichen Gewichts-Einheiten eingeben kann (oder eben zumindest in g) und das Ergebnis immer in kg umgerechnet und angezeigt wird? Dann macht das Sinn. Hatte über den Drehschalter dreimal 0,1 eingegeben und mich gewundert dass 0,0 rauskam . Außerdem hatte ich irgendwie gedacht, dass 0,x ja kg wären (und nicht g), aber ich kann ja auch 200 direkt eingeben...., dann klappts (war zu sehr auf den Drehschalter fixiert, sorry mein Fehler). Wäre es nicht konsistenter hier auch ein "x" zu verwenden (wie bei "delete item"?)
  12. sja

    Alternative zu lighterpack

    Hm, würde ich von abraten. Würde mich an das zu erwartende Verhalten gemäß HTML-Standard halten, sonst können Nutzer irritiert sein. Dass der Fokus irgendwohin springt, würde ich auch ganz vorsichtig einsetzen, also nur wenn es wirklich Sinn macht. Bei "Add new Item" wird z.B. oberhalb des auslösenden Elements etwas eingefügt.
  13. sja

    Alternative zu lighterpack

    Wow, toll, das mit dem "Muss" höre ich nicht jeden Tag . Das freut mich. Frag mich gerne, gebe gerne mein Wissen weiter. Ich schau mir das Tool die Tage nochmal an (sitze grad im Zug mit schlechtem WLAN).
  14. sja

    Alternative zu lighterpack

    @zeank, tolle Arbeit! Cool. Ich komme aus der Accessibility-Ecke (bin Prüferin und berate...). Wage es mal (nicht jeder ist dem Thema offen gestimmt...) und gebe den Hinweis zu dem ein oder anderen Punkt, ohne in die Tiefe zu gehen... . Nichts muss... Kontraste: Grüne Schaltflächen: IST 2,5:1 SOLL laut WCAG-Guidelines 4,5:1 (gemessen mit dem Color Contrast Analyser), gute Kontraste auch bei mobiler Nutzung hilfreich. Textalternativen: Ohne jetzt in die Tiefen der Screenreadernutzung einzugehen..., wenn die SVG-Icons eine Textalternative bekämen ("+" und "x"-Icons, dann wäre dieses sehr wichtige Element auch mit assistiven Technologien nutzbar. D.h. Textalternative über title-Element (Kind von svg siehe https://www.sitepoint.com/tips-accessible-svg/) "-" für Löschen (Liste löschen) ist keine Grafik, der Text wird aber nicht ausgegeben, hier würde ein aria-label="delete" oder "löschen" je nach Sprachversion im ensprechenden a-Element helfen. Das aria-label ersetzt dann für SR-Nutzer den Textlink. Sturktur: tfoot ist eignetlich für Zusammenfassungen von Tabelleninhalten da? D.h. die Links evtl. außerhalb der Tabelle positionieren? Bzw. hier finde ich ungünstig, dass die Summe von "Weight" ja quasi in derselben Zeile steht wie "Add new Item" (würde auch dafür sprechen "Add new Item und "Delete Category" außerhalb der Tabelle zu positionieren? D.h. tfoot wie bei "Category" mit th "Total" o.ä. umsetzen (konsistenter?). In diesem Zusammenhang noch ein Usability-Aspekt: Wenn bei "Weight" im Select "g" ausgewählt ist, sollt die Summe dann nicht auch "g" sein? Spaltenüberschrit für das Select "regular" einbauen? Tastaturbedienung/Fokusmanagement: Bzgl. "Add new Item" super. Wenn man hier aktiviert ist anschließend der Fokus im entsprechenden Formularfeld. Könnte man das auch für "Add new Category" umsetzen? (hier muss man wieder komplett durch die Seite tabben). Tastaturbedienung/Tastaturfokus: Für sehende Tastaturnutzer (eingeschränkte Handmotorik oder Neards) wäre ein immer gut sichtbarer Tastaturfokus prima. Hier auf den Formularfeldern gut (mit FF getestet), ansonsten nur Browsersystemkranz vorhanden - nicht superdeutlich, aber nutzbar, bzgl den grünen Links zusätzlich Tastaturfokus stylen wie bei Mausnutzung? Hoffe, ich hab mich nicht zu weit aus dem Fenster gehängt, schau was du damit machen willst. Wie gesagt, wenn nicht, auch kein Problem Danke, für deine Arbeit...
  15. sja

    Wandern in Europa oder der Hype um den E1

    Danke @zeank Kann dir absolut zustimmen. Finde es zudem höchst unfair jemandem gegenüber, der sich die Mühe macht, seine Erfahrungen zu schildern. Ich kann nur hoffen, dass bei solchen Äußerungen GT hoffentlich nicht die Lust vergeht, das in Zukunft wieder zu tun.
×

Wichtige Information

Wir haben Cookies auf Ihrem Gerät platziert, um die Bedinung dieser Website zu verbessern. Sie können Ihre Cookie-Einstellungen anpassen, andernfalls gehen wir davon aus, dass Sie damit einverstanden sind. Lies bitte auch unsere Datenschutzerklärung, sowie unsere Nutzungsbedingungen und die Netiquette.