Innebygd kontra egendefinert: Når bør du velge et ekte element?
Derfor er en ekte knapp alltid bedre enn et stylet span-element.
Innebygd kontra egendefinert: Når bør du velge et ekte element? er en gratis leksjon i Web Accessibility Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Web Accessibility Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Det grunnleggende valget
For enhver kontroll står du overfor ett valg: Bruk et innebygd HTML-element, eller bygg et egendefinert element selv. Innebygde elementer vinner nesten alltid.
En ekte knapp fungerer bare
En innebygd button kan få fokus, klikkes med mus, tastatur og berøring, og kunngjøres riktig. Du skriver én tagg, så gjør plattformen resten.
<button>Buy now</button>En stylet span fungerer ikke
Style en span slik at den ser ut som en knapp, og den har fortsatt ingen rolle, ingen fokusmulighet og ingen tastaturstøtte. Den lurer bare øyet.
<span class="button">Buy now</span>Kostnaden ved egendefinert
For at en egendefinert kontroll skal fungere, må De legge til en role, tabindex og tastaturbehandlere for Enter og Space. Det er mye kode for å etterligne ett enkelt element.
<span role="button" tabindex="0">Buy now</span>Og De kommer til å glemme noe
Selv omhyggelig lagde egendefinerte kontroller overser særtilfeller: fokusringer, deaktivert tilstand og berøring. Det innebygde elementet håndterer allerede alt dette.
Innebygde elementer er mer enn knapper
Dette gjelder for hele plattformen. En ekte select, avkrysningsboks eller details gir Dem funksjonalitet og tilgjengelighet som en div-etterligning aldri kan matche fullt ut.
<input type="checkbox"> Remember meSkjemaer elsker innebygde elementer
Innebygde skjemakontroller sendes inn sammen med form, validerer seg selv og kobles automatisk til en label. Det er sjelden verdt å bygge dette på nytt for hånd.
Når egendefinert er berettiget
Velg custom bare når det ikke finnes noe innebygd element for mønsteret, for eksempel et grensesnitt med faner eller et tre. Følg da et utprøvd implementeringsmønster nøye.
Stilsett innebygde elementer fritt
Er De bekymret for at en ekte knapp ser kjedelig ut? De kan style innebygde elementer grundig med CSS. Behold semantikken, og gi utseendet akkurat den formen De ønsker.
Mindre kode, mer robusthet
Når De velger det ekte elementet, betyr det mindre JavaScript, færre feil og en kontroll som tåler oppdateringer av nettlesere og hjelpemiddelteknologi uten ekstra arbeid.
Hovedregelen
Gjør dette til standarden Deres: innebygd first, egendefinert bare som siste utvei. Nettplattformen gir Dem enorme tilgjengelighetsfordeler, så la den gjøre jobben.
Hurtigsjekk
La oss avgjøre om vi skal bruke innebygd eller egendefinert.
Oppsummering
Velg native først: en ekte knapp eller et ekte inndatafelt gir Dem fokus, tastaturfunksjonalitet og semantikk uten ekstra arbeid. Velg egendefinert bare når det ikke finnes noe passende element, og stilsett innebygde elementer fritt. 🎉
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Innebygd kontra egendefinert: Når bør du velge et ekte element?» gratis?
Ja – hele teksten i «Innebygd kontra egendefinert: Når bør du velge et ekte element?» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Web Accessibility Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Innebygd kontra egendefinert: Når bør du velge et ekte element?»?
Derfor er en ekte knapp alltid bedre enn et stylet span-element. Du øver på Web Accessibility Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Web Accessibility Academy?
Ingen tidligere erfaring er nødvendig. Web Accessibility Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Innebygd kontra egendefinert: Når bør du velge et ekte element?»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Web Accessibility Academy-leksjonen?
Ja. Alle Web Accessibility Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Tagger har betydning: Hvorfor div-suppe mislykkes
- Tekstelementer: Avsnitt, lister og fremheving
- Tilgjengelighetstreet: Det skjermlesere hører
- Innebygd kontra egendefinert: Når bør du velge et ekte element?