Bildgalleri: Ordning, bildtexter och regler för mobila enheter

Ett bildgalleri grupperar flera relaterade stillbilder till en ordnad redaktionell enhet. Sekvensen är en del av innebörden: en läsare bör förstå varför dessa bilder hör ihop, vad var och en bidrar med och om övergången från objekt 1 till objekt 2 representerar tid, prioritet, synvinkel eller enkel bläddringsordning.

Detta exempel använder ett redaktionellt rutnät eftersom alla tre vyer är lika viktiga och får plats utan att dölja något objekt. Ordningen går från identifiering till två skickkontroller. Bildtexterna anger vad varje vy bevisar; de upprepar inte bara “kontaktbild”.

Varför detta element är viktigt

Människor inspekterar en uppsättning annorlunda än en hög. En synlig avgränsning och en medveten sekvens talar om för läsaren att bilderna tillsammans besvarar en större fråga. Översikten skapar orientering, sedan minskar detaljbilderna osäkerheten. Den progressionen förhindrar att läsaren öppnar orelaterade bilder, minns deras positioner och själv måste konstruera relationen.

Ordning styr förväntningar. En kronologisk uppsättning utlovar förändring; en produktuppsättning utlovar översikt, skala, funktioner, varianter och skick. Filnamns- eller uppladdningsordning kan få viktiga bevis att framstå som sekundära eller antyda en berättelse som inte finns.

Maskinextraherbarhet är förmågan hos programvara att isolera galleriet utan att förlora relationen mellan bilderna. En maskin kan identifiera separata bildfiler, men den kan inte säkert avgöra om de är alternativ, steg, bevis eller dekoration. En gallerititel, deklarerad ordningslogik, stabila objektpositioner, individuell alt-text och synliga bildtexter tillhandahåller den relationen i text. Samma fält kan mata sökindexering, innehållsinventeringar, tillgänglighetskontroller och strukturerad data utan att förlita sig på datorseende.

De gemensamma skrivreglerna för element styr typade elements företräde, portabla direktiv och kroppsmappning. Denna sida har företräde för bildgalleri-specifika objektbegränsningar, ordning, bildtexter och mobilt beteende. Imitera inte ett galleri med lösa bilder eller en generisk slider när detta elements syfte är tillämpligt.

När det ska användas

Använd ett bildgalleri när två eller fler bilder är jämbördiga och tillsammans besvarar en fråga bättre än var för sig. Varje bild måste tillföra en distinkt vy, ett distinkt tillstånd, skede, detalj eller exempel. Starka fall inkluderar produktvyer, före-och-efter-bevis, en kort processekvens, platsorientering, en designportfölj eller flera detaljer som stödjer en recensionsslutsats.

Tillämpa borttagningstestet på varje objekt. Om borttagning av en bild inte förändrar något läsaren kan besluta om, verifiera eller förstå, ta bort den från uppsättningen. Ett galleri är inte en lagringsyta för varje tillgänglig resurs.

Nära-missar behöver andra element:

• Använd en enskild figur eller imagebox när en bild bär poängen och prosan tolkar den.
• Använd en annoterad skärmbild när läsare måste lokalisera flera kontroller inuti en gränssnittsbild. Dela inte upp en skärm i ett galleri med oförklarade beskärningar.
• Använd en jämförelsetabell när läsaren måste jämföra upprepade attribut över många alternativ. Bilder kan stödja beslutet, men de kan inte ersätta textbaserade kriterier.
• Använd en steglista när handlingar är primärt innehåll. Ett galleri kan visa resulterande tillstånd, men det får inte omvandla nödvändiga instruktioner till bildtexter.
• Använd en produkt-slider när varje kort har pris, tillgänglighet, betyg och en åtgärd. Ett galleri innehåller bilder, inte köpbara enheter.
• Använd separata figurer när bilderna stödjer olika avsnitt och inte delar någon meningsfull sekvens.

Var det ska placeras

Placera galleriet omedelbart efter stycket som anger frågan som uppsättningen ska besvara. Ett produktskicksgalleri följer påståendet om skick; en fallstudiesekvens följer interventionen; ett platsgalleri följer ankomstinformation.

Håll gallerititeln, valfri introduktion, alla objekt, bildtexter, krediteringar och kontroller i en semantisk behållare. Infoga inte prosa, en annons, en uppmaning till handling eller en sidbrytning mellan objekt. Följ galleriet med tolkningen eller nästa beslut när bildtexterna inte bär det fullt ut.

Ett galleri får inte placeras direkt bredvid ett annat galleri, video, stor tabell, helbreddskarta, imagebox eller orelaterad uppmaning till handling. Lägg till förklarande prosa mellan täta visuella enheter eller kombinera genuint jämbördiga objekt.

Placera inte ett galleri inuti ett steg, listobjekt, utrop, tabellcell, accordion, klickbart kort eller ett annat galleri. Dela aldrig upp ett påstående från dess källa eller en varning från åtgärden den begränsar. Reservera den första visningsrutan för det direkta svaret om inte bilderna själva är svaret.

Anatomi

Anatomin är semantisk. Rutnätskolumner, miniatyrstorlekar, skuggor, hörnradier och animation tillhör renderaren snarare än innehållsmodellen.

1. Galleribehållare: Grupperar titel, beskrivning, objekt och kontroller under ett tillgängligt namn.
2. Gallerititel: Anger det gemensamma ämnet eller frågan i 3–10 ord.
3. Introduktion: Förklarar eventuellt sekvensen eller inspektionsuppgiften i en mening.
4. Ordnat objekt: Bevarar stabil källordning oavsett skrivbordslayout.
5. Bild: Använder en befintlig, rättighetsrensad tillgång med inbyggd bredd och höjd.
6. Alternativ text: Beskriver den bildens syfte i uppsättningen snarare än att kopiera dess bildtext.
7. Bildtext: Identifierar vyn och förklarar dess distinkta bidrag.
8. Kreditering: Anger upphovsperson, källa eller licensinformation när så krävs.
9. Kontroller: För ett interaktivt galleri stöder synliga knappar pekare, tangentbord, omkopplare och tryckinmatning.
10. Positionsindikator: Meddelar “2 av 5” i text när vissa objekt är dolda från vyn.
11. Mobil ordning: Matchar DOM-ordning, numrering, tangentbordsordning och den avsedda berättelsen.

Designexempel

Välj den minst interaktiva varianten som bevarar relationen. Varje variant håller fullständiga bildtexter tillgängliga i text och använder samma källordning vid varje brytpunkt.

Redaktionellt rutnät

Använd ett rutnät för 2–6 bilder med lika stor vikt som kan visas tillsammans. Skrivbord kan använda två eller tre kolumner. Mobil komprimeras till en kolumn; den krymper aldrig tre bilder till oläsbara miniatyrer.

Sekventiell remsa

Använd en remsa för 3–8 bilder med en explicit kronologisk eller rumslig progression. På smala skärmar kan den bli ett horisontellt rullningsbart område endast när synliga kontroller, en positionsindikator, tangentbordsoperation och en staplad icke-JavaScript-fallback finns. Gör aldrig svep till det enda sättet att navigera.

Jämförelsepar

Använd exakt två bilder för före-och-efter, original-och-reviderad eller två synvinklar som måste bedömas tillsammans. Använd beständiga textetiketter, inte enbart färg eller position. Mobil staplar objekt 1 före objekt 2 och upprepar etiketterna bredvid bilderna.

Primär bild med detaljvyer

Använd detta för 3–12 produkt- eller artefaktvyer när en översikt förankrar uppsättningen och resterande bilder besvarar distinkta inspektionsfrågor. Val av en miniatyr måste uppdatera den primära bildens alt-text, bildtext, position och annonserade tillstånd. Varje bild förblir nåbar utan JavaScript.

Mobil staplad standard

Använd den staplade listan när interaktivitet inte skulle förbättra förståelsen på ett meningsfullt sätt. Det är standard för redaktionellt innehåll eftersom alla objekt och bildtexter förblir synliga, länkbara, utskrivbara och läsbara utan gester.

Parametrar

Kontraktet lagrar redaktionell innebörd och tillgångsmetadata. Layouttokens, kolumnbredder, mellanrum, kontrollikoner, övergångstid och brytpunkter tillhör renderaren.

Bildtexter krävs för bevis, meningsförändrande ordning, jämförelseetiketter och synlig rättighetsinformation. En produktvinkel kan utelämna en bildtext endast när dess alt-text och kontext särskiljer vyn. mobile=scroll är giltigt endast för strip eller primary-details med erforderliga kontroller.

Syntax och kodexempel

Alla mappningar bevarar samma titel, ordning, objektfält och fallback. Produktion måste avvisa exempelsökvägar tills filerna finns.

Portabelt Markdown-direktiv

:::image-gallery{layout=grid mobile=stack orderedBy=viewpoint}
## Tre vyer som fastställer produktskick

:::gallery-item{src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width=1600 height=1200}
**1. Översikt.** Hela kontakten visar form, skala och orientering.
:::

:::gallery-item{src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width=1600 height=1200}
**2. Låsflik.** Närbilden bekräftar att låsklämman är intakt.
:::
:::

Den första rubriken blir title; varje objekts brödtext blir dess bildtext. Källordning är kanonisk, så masonry får inte omordna objekt för att fylla luckor.

Hugo shortcode-mappning

{{< image-gallery layout="grid" mobile="stack" orderedBy="viewpoint" >}}
## Tre vyer som fastställer produktskick

{{< gallery-item src="/cdn-assets/examples/connector-overview.webp" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward" width="1600" height="1200" >}}
**1. Översikt.** Hela kontakten visar form, skala och orientering.
{{< /gallery-item >}}

{{< gallery-item src="/cdn-assets/examples/connector-lock.webp" alt="Close view of the connector showing an intact raised locking tab with no visible crack" width="1600" height="1200" >}}
**2. Låsflik.** Närbilden bekräftar att låsklämman är intakt.
{{< /gallery-item >}}
{{< /image-gallery >}}

Denna adapter-specifikation är inte en registrerad shortcode. Använd semantiska figurer i källordning och referera inte till saknade tillgångar före godkännande.

WordPress-block

<!-- wp:amicited/image-gallery {"layout":"grid","mobile":"stack","orderedBy":"viewpoint"} -->
<section aria-labelledby="condition-gallery">
  <h2 id="condition-gallery">Tre vyer som fastställer produktskick</h2>
  <ol>
    <li><figure><img src="connector-overview.webp" width="1600" height="1200" alt="Complete black industrial connector on a neutral surface, oriented with its locking tab facing upward"><figcaption><strong>Översikt.</strong> Hela kontakten visar form, skala och orientering.</figcaption></figure></li>
    <li><figure><img src="connector-lock.webp" width="1600" height="1200" alt="Close view of the connector showing an intact raised locking tab with no visible crack"><figcaption><strong>Låsflik.</strong> Närbilden bekräftar att låsklämman är intakt.</figcaption></figure></li>
  </ol>
</section>
<!-- /wp:amicited/image-gallery -->

En WordPress-implementering får använda ett native Gallery-block endast om det bevarar alt-text per objekt, bildtexter, inbyggda dimensioner, källordning och det tillgängliga gruppnamnet. Att styla en sekvens av bakgrundsbilder uppfyller inte kontraktet.

Exempel

Bra: varje vy löser en annan osäkerhet

Begagnad utrustnings skick — inspektionsordning

1. Hela enheten: Fastställer identitet och visar att höljet är komplett.
2. Typskylt: Bekräftar exakt modell och märkspänning i läsbart fokus.
3. Strömkontakt: Visar raka stift och en intakt låsflik.
4. Slityta: Visar den djupaste synliga repan bredvid en linjal för skala.

Detta följer köparens inspektionslogik. Varje bildtext är verifierbar, linjalen förhindrar att en närbild överdriver skadan och den mobila stapeln bevarar ordningen.

Dåligt: en karusell som används som soptipp för tillgångar

Vårt senaste evenemang Tolv nästan identiska scenbilder, inga bildtexter, auto-avancering var fjärde sekund. Navigering visas endast vid hovring. Mobilversionen visar en beskuren mittskiva och accepterar endast svepgester.

Varken medlemskap eller ordning har en anledning. Tolv filnamn förmedlar inget till en skärmläsare; auto-avancering förhindrar inspektion; endast-hovring-kontroller utesluter tangentbords- och pekanvändare; endast-svep-navigering döljer åtkomst; och beskärningen kan ta bort motivet. Välj de få bilder som berättar en definierad historia, skriv distinkta alternativ och bildtexter, stoppa automatisk rörelse och använd som standard en mobil stapel.

Schema-uppmärkning och tillgänglighet

Ett galleri får inte automatiskt särskild sökbehandling. Märk upp endast relationer som den synliga sidan och tillgångarna stödjer. Meningsfulla bilder kan mappas till ImageObject med stabil contentUrl, bildtext, upphovsperson eller krediteringstext, licensinformation och representativ status när dessa fakta är kända. Ett explicit ordnat galleri kan mappas till ItemList, med position-värden som matchar källordning. Produktvyer kan fylla förälderns Product.image-egenskap. Skapa inte enheter för dekorativa bilder, hitta på licenser eller påstå att varje bild är representativ.

Använd native <img>-element inuti <figure>-element med synlig <figcaption> där så krävs. Namnge sektionen genom dess rubrik. Bevara ordnade relationer med <ol> eller motsvarande positionssemantik; visuell placering åsidosätter aldrig DOM-ordning.

Alternativ text beskriver syftet med varje bild i denna uppsättning. Den bör inte börja med “bild av”, upprepa bildtexten ordagrant eller beskriva detaljer som är irrelevanta för beslutet. Två fotografier av samma objekt kräver olika alt-text eftersom de har olika syften. Använd alt="" endast när en bild är verkligt redundant och borttagning inte skulle ta bort bevis.

Interaktiva varianter behöver namngivna föregående- och nästa-knappar, tangentbordsaktivering, en textbaserad positionsindikator och ett statusmeddelande efter förändringar. Auto-avancering är förbjuden. Behåll fokus på den aktiverade kontrollen och bevara innehåll utan JavaScript, vid 200 % zoom och med reducerad rörelse.

Skrivregler

Varje galleri besvarar en gemensam fråga. Ange varför det finns, ordna sedan efter berättelse, kronologi, prioritet, synvinkel eller jämförelse — aldrig uppladdningsordning.

• Använd 2–8 objekt för ett normalt galleri; använd exakt 2 för en jämförelse och 3–12 för en primär produkt/detalj-uppsättning.
• Skriv titlar på 3–10 ord och valfria introduktioner på en mening med 8–30 ord.
• Håll bildtexter på 5–30 ord. Börja med vyn, tillståndet eller objektets etikett när det förbättrar skannbarheten, förklara sedan dess bidrag.
• Använd parallell bildtextstruktur genom hela uppsättningen. Om den första börjar med en tillståndsetikett bör de andra också göra det.
• Håll alternativ text fokuserad på vad en icke-visuell läsare behöver från just den bilden; sikta på 40–180 tecken och överskrid aldrig 250.
• Håll en faktabaserad, observerande ton. Ange “tätningen sitter plant” istället för “den fantastiska tätningen ser perfekt ut.”
• Identifiera tid, skala, beskärning, tillstånd och källa när de begränsar tolkningen.
• Använd samma jämförelsevillkor när utseende är bevis: motsvarande beskärning, vinkel, skala, ljus och färgbehandling.

Placera aldrig en rubrik, ett stycke, en tabell, en lista med instruktioner, en uppmaning till handling, ett formulär, ett pris, ett betyg, ett vittnesmål, en expanderbar avslöjning, en video, en ljudspelare eller ett produktkort inuti en objekts bildtext. Baka aldrig in bildtexter i pixlar, gör färg till den enda etiketten, dölj materiella defekter genom beskärning, exponera kunddata eller publicera en bild utan bekräftade användningsrättigheter.

Inläggstyper som använder det

Raderna nedan speglar postTypes frontmatter. Inkludering innebär att inläggstypen kan använda ett galleri när bilderna utgör en verklig uppsättning; det gör inte elementet obligatoriskt på varje sida.

QA-checklista

• Titeln anger en gemensam fråga eller ett gemensamt ämne, och varje bild bidrar med ett distinkt svar.
• Antalet objekt matchar den valda varianten och innehåller ingen redundant bild.
• orderedBy anger en försvarbar berättelse-, kronologi-, prioritets-, synvinkel- eller jämförelseordning.
• Käll-, visuell-, tangentbords-, skärmläsar-, numrerings- och mobilordning överensstämmer alla.
• Varje src pekar på en befintlig, rättighetsrensad stillbild före publicering.
• Varje bild har inbyggd bredd och höjd, ett avsiktligt alt-värde och en meningsfull beskärning.
• Bevis, jämförelser och ordnade objekt har koncisa synliga bildtexter med parallell struktur.
• Krediteringar och licenslänkar är synliga och korrekta där så krävs.
• Jämförelsebilder använder motsvarande skala, vinkel, beskärning, ljus och etiketter om inte en skillnad är redovisad.
• Mobil använder en läsbar staplad fallback eller fullständiga tillgängliga kontroller; svep är aldrig den enda inmatningen.
• Interaktiva varianter har synliga föregående- och nästa-knappar, en textbaserad positionsindikator, tangentbordsstöd och ingen auto-avancering.
• Galleriet fungerar utan JavaScript och vid 200 % zoom, respekterar reducerad rörelse och skapar ingen horisontell sidöversvämning.
• Den första viktiga bilden skjuts inte upp, senare laddningstillstånd meddelas och reserverat utrymme förhindrar layoutförskjutning.
• Ingen väsentlig instruktion, siffra, varning, etikett eller slutsats finns endast i pixlar.
• Galleriet innehåller ingen video, produktkort, formulär, pris, betyg, vittnesmål eller uppmaning till handling.
• Strukturerad data matchar synlig ordning, bildtexter, rättigheter och entitetsrelationer utan att behandla dekoration som innehåll.
• Portabla Markdown-, Hugo- och WordPress-mappningar bevarar samma fält, objektordning och innebörd.

FAQ

Academy-mallen renderar de fem granskade frågorna som lagras i denna sidas [[faq]] frontmatter. De täcker antal objekt, mobila karuseller, alternativ text och bildtexter, förbjudet blandat innehåll och strukturerad data.

Framgång innebär att en läsare kan förklara relationen mellan bilderna och varje objekts bidrag. Utan meningsfull ordning, distinkta bildtexter och en tillgänglig mobil väg är uppsättningen en tillgångslista snarare än ett galleri.