Komponente „Einstellungen“ erstellen

Ein grundlegender Überblick über das Erstellen einer Einstellungskomponente mit Schiebereglern und Kästchen.

Adam Argyle

In diesem Beitrag möchte ich Ihnen zeigen, wie Sie eine Komponente für die Einstellungen für die responsiv, unterstützt die Eingabe mehrerer Geräte und funktioniert Browser. Demo ansehen

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Demo

Wenn Sie Videos bevorzugen oder eine UI-/UX-Vorschau der Entwicklung wünschen, finden Sie hier kürzere Schritt-für-Schritt-Anleitung auf YouTube:

Übersicht

Ich habe die Aspekte dieser Komponente in die folgenden Abschnitte unterteilt:

  1. Layouts
  2. Farbe
  3. Benutzerdefinierter Bereich
  4. Eingabe eines benutzerdefinierten Kästchens
  5. Überlegungen zur Barrierefreiheit
  6. JavaScript

Layouts

Dies ist die erste GUI Challenge-Demo, bei der das gesamte CSS-Raster genutzt wird. Hier ist jedes Raster mit den Chrome-Entwicklertools für Grid hervorgehoben:

Bunte Overlays mit Umrissen und Abstandsabständen, mit denen alle Felder des Einstellungslayouts angezeigt werden

Nur für Lücken

Das gängigste Layout:

foo {
  display: grid;
  gap: var(--something);
}

Ich nenne dieses Layout nur für Lücken. da hier ein Raster verwendet wird, um Lücken zwischen den Blöcken zu schließen.

Diese Strategie wird bei fünf Layouts angewendet. Hier werden alle angezeigt:

Vertikale Rasterlayouts, die durch Umrisse hervorgehoben und Lücken ausgefüllt werden

Das fieldset-Element, das alle Eingabegruppen (.fieldset-item) enthält, verwendet gap: 1px, um die Rahmenlinien zwischen den Elementen erstellen. Keine knifflige Grenzlösung!

Gefüllte Lücke
.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}
Grenztrick
.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

Natürliche Gitternetzverpackung

Das komplexeste Layout war das Makro-Layout, das logische Layout zwischen <main> und <form>.

Verpacken von Inhalten zentrieren

Mit der Flexbox und dem Raster können Sie align-items oder align-content und beim Umgang mit Wrapping-Elementen das content-Layout Ausrichtungen verteilen den Abstand unter den untergeordneten Elementen als Gruppe.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

Das Hauptelement ist die Ausrichtung von place-content: center Abkürzung, damit dass die untergeordneten Elemente in ein- und zweispaltigen Layouts vertikal und horizontal zentriert sind.

Sehen Sie sich im Video oben an, bleibt zentriert, obwohl die aufgetreten ist.

Automatische Anpassung für Minimalwert wiederholen

<form> verwendet für jeden Abschnitt ein adaptives Rasterlayout. Dieses Layout wechselt je nach verfügbarem Platz von einer zu zwei Spalten.

form {
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
  align-items: flex-start;
  max-width: 89vw;
}

Dieses Raster hat einen anderen Wert für row-gap (--space-xl) als column-gap (--space-xxl) um dem responsiven Layout eine individuelle Note zu geben. Wenn die Spalten gestapelt sind, eine große Lücke, aber nicht so groß wie bei einem Breitbildbildschirm.

Die Eigenschaft grid-template-columns verwendet drei CSS-Funktionen: repeat(), minmax() und min(). Una Kravets hat einen großartigen Blog mit Layout einen Beitrag dazu posten, RAM:

Es gibt drei besondere Ergänzungen in unserem Layout, wenn Sie es mit Unas vergleichen:

  • Wir übergeben eine zusätzliche min()-Funktion.
  • Wir geben align-items: flex-start an.
  • Es gibt einen max-width: 89vw-Stil.

Die zusätzliche min()-Funktion wird von Evan Minto im Blog in der Post Intrinsically Responsive CSS Grid with minmax() and min() Ich empfehle Ihnen, sich das zu lesen. Die Ausrichtungskorrektur flex-start besteht darin, Standard-Dehnungseffekt entfernen, damit die untergeordneten Elemente dieses Layouts gleich hoch sein müssen, können eine natürliche, unveränderliche Höhe haben. Die Im YouTube-Video wird diese Anpassungserweiterung kurz erläutert.

In diesem Beitrag gibt es einen kleinen Überblick über max-width: 89vw. Ich zeige Ihnen das Layout mit und ohne angewendeten Stil:

Was ist passiert? Wenn max-width angegeben ist, wird Kontext bereitgestellt. explizite Größe oder bestimmte Größen sizing für die auto-fit Layout-Algorithmus, um zu wissen, viele Wiederholungen, die in den Raum passen. Auch wenn es offensichtlich zu sein scheint, Abstand ist "volle Breite". Laut CSS-Rasterspezifikation muss eine bestimmte Größe oder maximale Größe angegeben werden. bereitgestellt werden. Ich habe eine maximale Größe angegeben.

Warum also 89vw? Weil es funktioniert hat für mein Layout. Ich und ein paar andere Chrome-Nutzer untersuchen derzeit, 100vw nicht ausreicht oder es sich tatsächlich um einen Fehler handelt.

Abstand

Ein Großteil der Harmonie dieses Layouts beruht auf einer begrenzten Palette von Abständen, 7 um genau zu sein.

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Einfache Nutzung dieser Abläufe mit Grid-, CSS-@nest- und Level-5-Syntax von @media. Hier ist ein Beispiel, der vollständige <main>-Layoutsatz mit Stilen.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

Ein Raster mit zentriertem Inhalt, der standardmäßig (etwa auf Mobilgeräten) mäßig aufgefüllt ist. Aber Sobald mehr Platz im Darstellungsbereich verfügbar ist, wird er durch eine größere Abstände verteilt. Das Preisvergleichsportal 2021 sieht ziemlich gut aus!

Erinnern Sie sich noch an das frühere Layout „nur für Lücken“? Hier ist eine vollständige Version von wie sie in dieser Komponente aussehen:

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

Farbe

Durch den kontrollierten Einsatz von Farben konnte dieses Design als ausdrucksstark herausstechen. minimal. Ich mache das so:

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

Ich nenne meine Oberflächen- und Textfarben mit Zahlen und nicht mit Namen wie surface-dark und surface-darker, weil ich in einer Medienabfrage und hell und dunkel haben keine Bedeutung.

Ich drehe sie in einer bevorzugten Medienabfrage um:

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

Es ist wichtig, dass Sie sich vor dem Projektstart schauen wir uns die Syntax für Farben genauer an. Aber da ich mir ein wenig voraus bin, möchte ich noch ein bisschen weitermachen.

LCH?

LCH ist eine menschenorientierte Syntax, ohne in die Farbtheorie vorzudringen. die darauf ausgerichtet ist, wie wir Farbe wahrnehmen, und nicht, wie wir Farbe mit Mathematik messen (z. B. 255). Dies verleiht ihr einen entscheidenden Vorteil, da sie von Menschen einfacher geschrieben werden kann. dass die Menschen auf diese Anpassungen abgestimmt sind.

<ph type="x-smartling-placeholder">
</ph> Screenshot der Webseite „pod.link/csspodcast“, auf dem die Folge „Farbe 2: Perception“ eingeblendet ist <ph type="x-smartling-placeholder">
</ph> Weitere Informationen zur Wahrnehmung von Farben (und mehr) finden Sie im CSS Podcast.

Konzentrieren wir uns heute in dieser Demo auf die Syntax und die Werte, um hell und dunkel zu werden. Betrachten wir eine Oberfläche und eine Textfarbe:

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0) bedeutet 10% Helligkeit, 0 Farbton und 0 Farbton: a sehr dunkles, farbloses Grau. In der Medienabfrage für den hellen Modus wird mit --surface1: lch(90 0 0); in 90% umgewandelt. Und das war der Kern des . Ändern Sie zunächst die Helligkeit zwischen den beiden Themen, Kontrastverhältnisse, die das Design erfordert, oder was die Barrierefreiheit aufrechterhalten kann.

Der Vorteil von lch() ist, dass Leichtigkeit auf den Menschen ausgerichtet ist. ist gut, dass die %-Änderung wahrnehmbar und konsistent erfolgt. die sich von % unterscheiden. hsl() ist beispielsweise nicht so zuverlässig.

Es gibt noch mehr mehr über und lch(), wenn Sie interessiert sind. Bald ist es so weit!

CSS kann derzeit überhaupt nicht auf diese Farben zugreifen. Ich möchte noch einmal wiederholen: Wir haben keinen Zugang zu einem Drittel der Farben in den meisten modernen Monitore. Das sind nicht einfach nur Farben, sondern auch angezeigt werden kann. Unsere Websites sind verwaschen, da die Monitor-Hardware weiterentwickelt wurde. als CSS-Spezifikationen und Browser-Implementierungen.

Lea Verou

Adaptive Formularsteuerelemente mit Farbschema

Viele Browser bieten Steuerelemente für das dunkle Design an, derzeit Safari und Chromium. Sie können müssen in CSS oder HTML angeben, dass sie im Design verwendet werden.

Im obigen Beispiel wird die Auswirkung der Eigenschaft im Bedienelement „Styles“ (Stile) von Entwicklertools. In der Demo wird das HTML-Tag verwendet, das meiner Meinung nach im Allgemeinen einen besseren Ort zu finden:

<meta name="color-scheme" content="dark light">

Weitere Informationen findest du in diesem color-scheme Artikel von Thomas Steiner. Es gibt noch viel mehr zu lernen als Eingaben für dunkle Kästchen.

Preisvergleichsportal accent-color

In letzter Zeit gab es Aktivitäten rund um accent-color für Formularelemente, da es sich um einen einzelnen CSS-Stil handelt, der den im Eingabeelement des Browsers verwendete Farbtonfarbe. Weitere Informationen dazu finden Sie hier auf GitHub Ich habe es in meinen Stile für diese Komponente. Da dies von den Browsern unterstützt wird, mit den rosa und lila Farbknöpfen mehr zum Thema.

input[type="checkbox"] {
  accent-color: var(--brand);
}

Screenshot aus Chromium unter Linux mit rosafarbenen Kästchen

Color Pop-Effekt mit festen Farbverläufen und Fokus auf

Farbe kommt am meisten zur Geltung, wenn sie sparsam eingesetzt wird. durch farbenfrohe UI-Interaktionen.

Im obigen Video gibt es viele Ebenen des UI-Feedbacks und der Interaktion, die der Interaktion durch Folgendes eine persönliche Note verleihen:

  • Kontext wird hervorgehoben.
  • UI-Feedback in Bezug auf die Auslastung geben der Wert im Bereich liegt.
  • UI-Feedback geben, dass ein Feld Eingaben akzeptiert

Um Feedback zu geben, wenn mit einem Element interagiert wird, verwendet das Preisvergleichsportal die :focus-within Pseudoklasse verwenden, um das Aussehen verschiedener Elemente zu ändern, lassen Sie uns die .fieldset-item, das ist sehr interessant:

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

Wenn eines der untergeordneten Elemente dieses Elements im Fokus liegt:

  1. Dem Hintergrund „.fieldset-item“ wird eine Oberflächenfarbe mit höherem Kontrast zugewiesen.
  2. Das verschachtelte svg-Element ist für einen höheren Kontrast weiß gefüllt.
  3. Das verschachtelte clip-path-Element von <picture> wird zu einem Vollkreis erweitert und der wird der Hintergrund mit dem hellen, festen Farbverlauf gefüllt.

Benutzerdefinierter Zeitraum

Mit dem folgenden HTML-Eingabeelement zeige ich Ihnen, wie ich Aussehen:

<input type="range">

Dieses Element besteht aus drei Teilen, die angepasst werden müssen:

  1. Bereichselement/-container
  2. Track
  3. Daumen

Bereichselementstile

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

Bei den ersten CSS-Zeilen handelt es sich um die benutzerdefinierten Teile der Stile. deutlich zu kennzeichnen, hilft. Bei den übrigen Stilen handelt es sich meistens um zurückgesetzte Stile, bieten eine einheitliche Grundlage für den Aufbau der schwierigen Teile der Komponente.

Track-Stile

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

Der Trick dabei ist: „Aufdecken“, leuchtenden Füllfarbe. Dies geschieht mithilfe der Farbverlauf des harten Stopps oben. Der Farbverlauf ist bis zum Füllprozentsatz transparent. für die die Oberflächenfarbe der nicht gefüllten Spur verwendet wird. Hinter dieser nicht gefüllten Oberfläche befindet sich und warten, bis die Transparenz sichtbar wird.

Füllung erfassen

Mein Design erfordert JavaScript, um den Füllstil beizubehalten. Es sind reine CSS-Strategien. Das „thumb“-Element muss jedoch die gleiche Höhe haben. und ich konnte keine Harmonie innerhalb dieser Grenzen finden.

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

Ich denke, das ist ein schönes visuelles Upgrade. Der Schieberegler funktioniert gut, wenn JavaScript ist das Attribut --track-fill nicht erforderlich, es hat einfach keinen Wert falls nicht vorhanden. Wenn JavaScript verfügbar ist, füllen Sie das Feld und gleichzeitig alle Nutzeränderungen zu beobachten. Die benutzerdefinierte Eigenschaft wird den Wert.

Hier finden Sie Beitrag zu CSS-Tricks von Ana Tudor, die eine reine Preisvergleichsportal-Lösung für und verfolgen Sie die Füllung. Das habe ich auch gefunden range-Element sehr inspirierend.

Thumbnail-Stile

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

Die meisten dieser Stile bestehen darin, einen schönen Kreis zu erstellen. Auch hier ist wieder der feste Farbverlauf zu sehen, der die dynamische Farben der Thumbnails, Tracks und zugehörigen SVG-Elemente. Ich habe die Stile für die Interaktion getrennt, um die box-shadow zu isolieren die für die Hervorhebung beim Bewegen des Mauszeigers verwendet wird:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

Das Ziel war ein einfach zu verwaltendes und animiertes visuelles Highlight für das Feedback der Nutzenden. Durch die Verwendung eines Rahmenschattens vermeide ich, dass Layout mit dem Effekt. Ich mache das indem Sie einen Schatten erzeugen, der nicht verschwommen ist und der runden Form des „Mag ich“-Element. Dann ändere ich die Streugröße, wenn ich den Mauszeiger darauf bewege.

Wenn nur der Hervorhebungseffekt auf Kästchen so einfach wäre...

Browserübergreifende Auswahl

Ich benötige diese -webkit-- und -moz--Selektoren, um eine browserübergreifende Messung zu erreichen Einheitlichkeit:

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

Benutzerdefiniertes Kästchen

Mit dem folgenden HTML-Eingabeelement zeige ich Ihnen, wie ich Aussehen:

<input type="checkbox">

Dieses Element besteht aus drei Teilen, die angepasst werden müssen:

  1. Kästchenelement
  2. Verknüpfte Labels
  3. Highlight-Effekt

Kästchenelement

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

Die Stile transform-style und position bereiten sich auf das Pseudoelement vor, das wir später vorstellen werden. um die Hervorhebung zu gestalten. Andernfalls ist es meistens ein wenig verurteilter Stil von mir. Ich mag den Cursor als Zeiger, sind die Standardkästchen zu klein. Wenn accent-color unterstützt, bringen Sie diese in das Farbschema der Marke ein.

Labels für Kästchen

Die Angabe von Labels für Kästchen ist aus zwei Gründen wichtig. Die erste besteht darin, Stellen Sie dar, wofür der Kästchenwert verwendet wird, um die Frage „an oder off für was?“ Zweitens haben sich Web-Nutzende an die Interaktion mit Kontrollkästchen über die zugehörigen Labels.

Eingabe
<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>
Label
<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

Fügen Sie auf Ihrem Label ein for-Attribut hinzu, das auf ein Kästchen mit der ID <label for="text-notifications"> verweist. Verdoppeln Sie im Kästchen sowohl den Namen als auch die ID, um damit sie mit verschiedenen Tools und Technologien gefunden werden kann, z. B. mit einer Maus oder einem Screenreader: <input type="checkbox" id="text-notifications" name="text-notifications"> :hover, :active und andere sind mit der Verbindung kostenlos, wodurch die Anzahl der wie Sie mit Ihrem Formular interagieren können.

Kästchen hervorheben

Ich möchte meine Oberflächen einheitlich gestalten. Das Schiebereglerelement hat eine schöne die ich mit dem Kästchen verwenden möchte. Das Thumbnail war box-shadow und der spread-Eigenschaft kann einen Schatten nach oben Dieser Effekt funktioniert hier jedoch nicht, da unsere Kontrollkästchen und sollten be.

Ich konnte den gleichen visuellen Effekt mit einem Pseudoelement erzielen gibt es einiges an komplizierten CSS:

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

Es ist ganz einfach, ein Kreis-Pseudoelement zu erstellen, hinter dem Element, an dem es befestigt ist, schwieriger war. Hier ist das Vorher- und nachdem ich es behoben habe:

Es ist auf jeden Fall eine Mikrointeraktion, aber für mich ist es wichtig, Einheitlichkeit. Die Skalierungstechnik für Animationen ist dasselbe wie anderen Orten. Wir legen eine benutzerdefinierte Eigenschaft auf einen neuen Wert fest und lassen sie von CSS umstellen. basierend auf den Bewegungseinstellungen. Die Hauptfunktion hier ist translateZ(-1px). Die das übergeordnete Element einen 3D-Raum erstellt, und dieses untergeordnete Pseudoelement tippt darauf und platziert sich etwas nach hinten im z-Bereich.

Bedienungshilfen

Das YouTube-Video zeigt eine großartige Demonstration von Maus, Tastatur und Screenreader-Interaktionen für diese Einstellungskomponente. Ich werde einige der wichtigsten finden Sie hier.

HTML-Elementauswahl

<form>
<header>
<fieldset>
<picture>
<label>
<input>

Jedes davon enthält Hinweise und Tipps für das Browser-Tool des Nutzers. Einige Elemente bieten Interaktionshinweise, einige Verbindungsinteraktivitäten und einige helfen bei der Gestaltung Baum für Barrierefreiheit, den ein Screenreader navigiert.

HTML-Attribute

Wir können Elemente ausblenden, die von Screenreadern nicht benötigt werden, in diesem Fall das Symbol neben dem Schieberegler:

<picture aria-hidden="true">

Das obige Video zeigt den Screenreader-Ablauf unter Mac OS. Beachten Sie, wie die Eingabe von einem Schieberegler zum nächsten. Das liegt daran, dass wir das Symbol, das eine Haltestelle auf dem Weg zum nächsten Schieberegler war. Ohne müssen die Nutzenden das Bild anhalten, anhören und über das die sie möglicherweise nicht sehen.

Die SVG-Datei umfasst eine Reihe von mathematischen Methoden. Wir fügen ein <title>-Element hinzu, damit der Mauszeiger kostenlos bewegt werden kann. Titel und einem menschenlesbaren Kommentar zu dem Ergebnis der Mathematik:

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

Davon abgesehen haben wir ausreichend eindeutig gekennzeichneten HTML-Code verwendet, sodass das Formular testet, mit Maus, Tastatur, Controllern und Screenreadern.

JavaScript

Wie die Track-Füllfarbe in JavaScript verwaltet wird, erfahren Sie hier. Sehen wir uns nun den <form>-bezogenen JavaScript an:

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

Jedes Mal, wenn mit dem Formular interagiert und es geändert wird, protokolliert die Konsole das Formular als Objekt in einer Tabelle zur einfachen Überprüfung an, bevor Sie es an einen Server senden.

Screenshot der Ergebnisse von console.table(), in denen die Formulardaten in einer Tabelle angezeigt werden

Fazit

Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! Das macht Spaß Komponentenarchitektur. Wer erstellt die erste Version mit Plätzen bevorzugten Framework? 🙂

Lassen Sie uns unsere Herangehensweisen diversifizieren und alle Möglichkeiten kennenlernen, wie wir das Web entwickeln können. Erstelle eine Demo, twittere mir Links und ich füge sie hinzu findest du unten im Abschnitt Community-Remixe.

Community-Remixe

  • @tomayac mit dem Stil für den Hover-Bereich für die Beschriftungen der Kästchen. In dieser Version gibt es keine Mouseover-Lücke zwischen Elemente: demo und Quelle.