In der dieswöchigen Zusammenfassung ist die Zeichenkettenlänge von zwei Emojis nicht immer gleich, etwas, das man bei der Erstellung von abgerundeten Schaltflächen berücksichtigen sollte, und wir haben möglicherweise einen neuen Weg, Web-Apps zwischen Geräten zu teilen, selbst wenn sie offline sind.
Die JavaScript-Zeichenkettenlänge von Emoji-Zeichen
Ein einzelnes gerendertes Emoji kann eine JavaScript-Zeichenkettenlänge von bis zu 7 haben, wenn es zusätzliche Unicode-Skalarwerte enthält, die einen Hauttonmodifikator, eine Geschlechtsspezifikation und eine Mehrfarbenwiedergabe darstellen.
Sind abgerundete Schaltflächen tatsächlich ein Barrierefreiheitsproblem?
Ich verstehe, dass man einige klickbare Pixel verliert, aber wir sprechen hier nicht über viel Fläche in den Beispielen. Ich kann mir nicht vorstellen, dass jemand mit so feiner Berührung tippt, dass es hier wichtig wäre.
Wenn die Schaltfläche quadratisch ist (z. B. eine Icon-Schaltfläche), gehen durch die Umwandlung in einen Kreis mittels border-radius über 20 % ihres interaktiven Bereichs verloren. Das ist nicht vernachlässigbar. Wenn der Benutzer Handzittern hat, schlechte Sicht hat oder einfach nur große Finger, kann er diese Kanten treffen, die nicht interaktiv sind.
Es gibt auch die Richtlinie, dass Touch-Ziele mindestens 44 x 44 Pixel groß sein sollten. Eine Schaltfläche, die diese Regel erfüllt, tut dies möglicherweise nicht mehr, sobald ihre Ecken abgerundet sind. Nehmen Sie zum Beispiel die schwebende Aktionsschaltfläche von Twitter. Sie ist auf Mobilgeräten 55 x 55 Pixel groß, aber da sie ein Kreis ist, ragt das 44 x 44 Quadrat heraus. Glücklicherweise hat Twitter dafür gesorgt, dass das gesamte Quadrat interaktiv ist und nicht nur die sichtbare Schaltfläche, und das ist auch mein Rat.
Ich stimme zu, ich glaube nicht, dass abgerundete Ecken ein Barrierefreiheitsproblem darstellen. Solange die Elementbreite und -höhe ausreichend groß sind (WCAG 2.1 hat 44×44 CSS-Pixel für die Zielgröße festgelegt), spielen die Ecken keine Rolle.
Ich denke, die Schaffung eines unsichtbaren klickbaren Bereichs ist an sich ein Problem; Wenn ich außerhalb des sichtbaren Schaltflächenbereichs klicke, erwarte ich, dass nichts passiert. Ich glaube nicht, dass es ein Problem mit der Tastatur- oder Touch-Interaktion ist, aber es kann mit einem Cursor sein. Die Verwendung von Hover, um den „wahren“ Schaltflächenbereich anzuzeigen, könnte dies beheben.
Denken Sie darüber so nach: Wenn auf einem Touchscreen-Gerät jemand in die Ecke einer Schaltfläche tippt, die durch den abgerundeten Rand ausgeschnitten ist, wollte er dann auf die Schaltfläche tippen? Ich glaube ja. Wollte er zufällig ein anderes interaktives Element antippen? Ich glaube, das ist unwahrscheinlich. Es ist einfach zu nah an der Schaltfläche.
Indem wir den interaktiven Bereich einer abgerundeten Schaltfläche zu einem richtigen Rechteck machen, stellen wir also nur sicher, dass es niemals vorkommt, dass die Schaltfläche nicht aktiviert wird, nur weil die Person zu nah an ihre Ecke getippt hat.
Ich habe es immer gehasst, wenn man eine Schaltfläche bedienen konnte, obwohl man sich nicht im Bereich der Schaltfläche befindet. Ich glaube nicht, dass es eine gute Idee ist, diesen archaischen Schaltflächenstil wieder einzuführen. Wenn ich die Schaltfläche antippen möchte, tippe ich einfach auf die Schaltfläche, nicht auf etwas anderes. Wenn es Bedenken wegen der Barrierefreiheit gibt, machen Sie die Schaltfläche einfach größer – einfach :)
Das hat nichts mit dem wöchentlichen Roundup zu tun, wollte aber nur sagen, dass diese Seite das schönste Blog-Design aller Blogs hat, die ich je gesehen habe. So einzigartig und sauber, auch mit dem dunklen Hintergrund. Wenn es ein kostenpflichtiges Theme wäre, würde ich es sofort kaufen! (Daumen drücken)
Nehmen Sie eine Schaltfläche, die 44px im Quadrat ist, aber border-radius: 50% hat, sodass sie zu einem Kreis mit 44 Pixel Durchmesser wird. Die Ecken des Quadrats wären 31 Pixel vom Mittelpunkt entfernt und der Rand des Kreises 22 Pixel vom Mittelpunkt entfernt, ein Unterschied von 9 Pixel. Eine Fingerspitze ist 8-10 mm breit und bei Verwendung vieler Apple-Mobilbildschirme (2x Retina) als repräsentativ gibt es 6,4 CSS-Pixel/mm, also von der Mitte bis zum Rand einer Fingerspitze sind es 25,6-32 Pixel. Wenn eine Ecke des Schaltflächenquadrats unter der Mitte der Fingerspitze lag, würde die Spitze immer noch leicht den Kreis berühren und die Schaltfläche aktivieren. Wenn die Ecke auf halbem Weg zwischen der Mitte und dem Rand der Fingerspitze lag, würde sie immer noch den Kreis berühren. Die Kreis-Schaltfläche müsste etwa 130 Pixel breit sein, damit eine Fingerspitze, die auf die Ecke zentriert ist, sie nicht aktiviert; das ist ein großes Ziel, das man verfehlen kann.
Sie schlagen vor, dass, wenn jemand in die unsichtbare Ecke des Ziels klickt, dies daran liegt, dass er das visuelle Element, zu dem es gehört, aktivieren wollte. Aber das muss nicht so sein, besonders wenn die Schaltfläche über etwas Interaktivem liegt. Stellen Sie sich vor: Sie kaufen Hosen, es gibt ein Bild der Hosen mit vier runden Farbfeld-Schaltflächen (schwarz, marineblau, braun, khakifarben) über dem Bild; Sie tippen auf eine Farbe, um die Farbe zu ändern, und denken dann, Sie hätten auf das Bild getippt, um es zu vergrößern, aber da Sie Ihren Finger kaum bewegt haben, trifft der Rand der Spitze die unsichtbare Ecke und aktiviert eine Farbänderung.
Im Allgemeinen sollte die Form des interaktiven Ziels mit seiner visuellen Form übereinstimmen. Ich habe ein Problem erlebt, als sie nicht übereinstimmten: Es gab eine Chevron-Breadcrumb-Navigation und ich klickte auf den Link, der visuell der richtige war, aber da der Cursor unter der Spitze des Punkts für den linken Link lag, wurde der linke Link aktiviert.
Ich habe es in Safari auf dem iPhone getestet. Wenn die Schaltfläche ein 44px Quadrat ist, ist es immer noch möglich, die Ecke des Quadrats *außerhalb* des Kreises zu treffen. Probieren Sie es in meiner Demo aus auf Ihrem Mobilgerät. Sie können auf die schwarzen Ausschnitte tippen (darunter steht "square").
Das ist das Problem. Jemand verfehlt die abgerundete Schaltfläche und trifft stattdessen den Ausschnitt. Wie ich bereits sagte, glaube ich, dass man davon ausgehen kann, dass der Benutzer, wenn er auf den Ausschnitt tippt, die abgerundete Schaltfläche antippen wollte.
Zu Ihrem Szenario, dass die Schaltfläche über einem anderen interaktiven Element liegt, halte ich das für ein weiteres (noch größeres) Barrierefreiheitsproblem. Es ist wahrscheinlich eine gute Idee, genügend Platz zwischen interaktiven Elementen zu lassen und sie nicht übereinander zu stapeln.
Sind abgerundete Schaltflächen tatsächlich ein Barrierefreiheitsproblem?
Ich verstehe, dass man einige klickbare Pixel verliert, aber wir sprechen hier nicht über viel Fläche in den Beispielen. Ich kann mir nicht vorstellen, dass jemand mit so feiner Berührung tippt, dass es hier wichtig wäre.
Wenn die Schaltfläche quadratisch ist (z. B. eine Icon-Schaltfläche), gehen durch die Umwandlung in einen Kreis mittels
border-radiusüber 20 % ihres interaktiven Bereichs verloren. Das ist nicht vernachlässigbar. Wenn der Benutzer Handzittern hat, schlechte Sicht hat oder einfach nur große Finger, kann er diese Kanten treffen, die nicht interaktiv sind.Es gibt auch die Richtlinie, dass Touch-Ziele mindestens 44 x 44 Pixel groß sein sollten. Eine Schaltfläche, die diese Regel erfüllt, tut dies möglicherweise nicht mehr, sobald ihre Ecken abgerundet sind. Nehmen Sie zum Beispiel die schwebende Aktionsschaltfläche von Twitter. Sie ist auf Mobilgeräten 55 x 55 Pixel groß, aber da sie ein Kreis ist, ragt das 44 x 44 Quadrat heraus. Glücklicherweise hat Twitter dafür gesorgt, dass das gesamte Quadrat interaktiv ist und nicht nur die sichtbare Schaltfläche, und das ist auch mein Rat.
Ich stimme zu, ich glaube nicht, dass abgerundete Ecken ein Barrierefreiheitsproblem darstellen. Solange die Elementbreite und -höhe ausreichend groß sind (WCAG 2.1 hat 44×44 CSS-Pixel für die Zielgröße festgelegt), spielen die Ecken keine Rolle.
Ich denke, die Schaffung eines unsichtbaren klickbaren Bereichs ist an sich ein Problem; Wenn ich außerhalb des sichtbaren Schaltflächenbereichs klicke, erwarte ich, dass nichts passiert. Ich glaube nicht, dass es ein Problem mit der Tastatur- oder Touch-Interaktion ist, aber es kann mit einem Cursor sein. Die Verwendung von Hover, um den „wahren“ Schaltflächenbereich anzuzeigen, könnte dies beheben.
Denken Sie darüber so nach: Wenn auf einem Touchscreen-Gerät jemand in die Ecke einer Schaltfläche tippt, die durch den abgerundeten Rand ausgeschnitten ist, wollte er dann auf die Schaltfläche tippen? Ich glaube ja. Wollte er zufällig ein anderes interaktives Element antippen? Ich glaube, das ist unwahrscheinlich. Es ist einfach zu nah an der Schaltfläche.
Indem wir den interaktiven Bereich einer abgerundeten Schaltfläche zu einem richtigen Rechteck machen, stellen wir also nur sicher, dass es niemals vorkommt, dass die Schaltfläche nicht aktiviert wird, nur weil die Person zu nah an ihre Ecke getippt hat.
Ich habe es immer gehasst, wenn man eine Schaltfläche bedienen konnte, obwohl man sich nicht im Bereich der Schaltfläche befindet. Ich glaube nicht, dass es eine gute Idee ist, diesen archaischen Schaltflächenstil wieder einzuführen. Wenn ich die Schaltfläche antippen möchte, tippe ich einfach auf die Schaltfläche, nicht auf etwas anderes. Wenn es Bedenken wegen der Barrierefreiheit gibt, machen Sie die Schaltfläche einfach größer – einfach :)
Das hat nichts mit dem wöchentlichen Roundup zu tun, wollte aber nur sagen, dass diese Seite das schönste Blog-Design aller Blogs hat, die ich je gesehen habe. So einzigartig und sauber, auch mit dem dunklen Hintergrund. Wenn es ein kostenpflichtiges Theme wäre, würde ich es sofort kaufen! (Daumen drücken)
Nehmen Sie eine Schaltfläche, die 44px im Quadrat ist, aber border-radius: 50% hat, sodass sie zu einem Kreis mit 44 Pixel Durchmesser wird. Die Ecken des Quadrats wären 31 Pixel vom Mittelpunkt entfernt und der Rand des Kreises 22 Pixel vom Mittelpunkt entfernt, ein Unterschied von 9 Pixel. Eine Fingerspitze ist 8-10 mm breit und bei Verwendung vieler Apple-Mobilbildschirme (2x Retina) als repräsentativ gibt es 6,4 CSS-Pixel/mm, also von der Mitte bis zum Rand einer Fingerspitze sind es 25,6-32 Pixel. Wenn eine Ecke des Schaltflächenquadrats unter der Mitte der Fingerspitze lag, würde die Spitze immer noch leicht den Kreis berühren und die Schaltfläche aktivieren. Wenn die Ecke auf halbem Weg zwischen der Mitte und dem Rand der Fingerspitze lag, würde sie immer noch den Kreis berühren. Die Kreis-Schaltfläche müsste etwa 130 Pixel breit sein, damit eine Fingerspitze, die auf die Ecke zentriert ist, sie nicht aktiviert; das ist ein großes Ziel, das man verfehlen kann.
Sie schlagen vor, dass, wenn jemand in die unsichtbare Ecke des Ziels klickt, dies daran liegt, dass er das visuelle Element, zu dem es gehört, aktivieren wollte. Aber das muss nicht so sein, besonders wenn die Schaltfläche über etwas Interaktivem liegt. Stellen Sie sich vor: Sie kaufen Hosen, es gibt ein Bild der Hosen mit vier runden Farbfeld-Schaltflächen (schwarz, marineblau, braun, khakifarben) über dem Bild; Sie tippen auf eine Farbe, um die Farbe zu ändern, und denken dann, Sie hätten auf das Bild getippt, um es zu vergrößern, aber da Sie Ihren Finger kaum bewegt haben, trifft der Rand der Spitze die unsichtbare Ecke und aktiviert eine Farbänderung.
Im Allgemeinen sollte die Form des interaktiven Ziels mit seiner visuellen Form übereinstimmen. Ich habe ein Problem erlebt, als sie nicht übereinstimmten: Es gab eine Chevron-Breadcrumb-Navigation und ich klickte auf den Link, der visuell der richtige war, aber da der Cursor unter der Spitze des Punkts für den linken Link lag, wurde der linke Link aktiviert.
Ich habe es in Safari auf dem iPhone getestet. Wenn die Schaltfläche ein
44pxQuadrat ist, ist es immer noch möglich, die Ecke des Quadrats *außerhalb* des Kreises zu treffen. Probieren Sie es in meiner Demo aus auf Ihrem Mobilgerät. Sie können auf die schwarzen Ausschnitte tippen (darunter steht "square").Das ist das Problem. Jemand verfehlt die abgerundete Schaltfläche und trifft stattdessen den Ausschnitt. Wie ich bereits sagte, glaube ich, dass man davon ausgehen kann, dass der Benutzer, wenn er auf den Ausschnitt tippt, die abgerundete Schaltfläche antippen wollte.
Zu Ihrem Szenario, dass die Schaltfläche über einem anderen interaktiven Element liegt, halte ich das für ein weiteres (noch größeres) Barrierefreiheitsproblem. Es ist wahrscheinlich eine gute Idee, genügend Platz zwischen interaktiven Elementen zu lassen und sie nicht übereinander zu stapeln.
Verwandt: Handzittern und das Riesenschaltflächenproblem