Så här skapar du ADA-vänliga registreringsformulär
Du kommer att lära dig
Lär dig hur du använder tillgänglighetsassistentfunktionerna på fliken Formulärvarningar i redigeraren för registreringsformulär för att undvika några av de vanligaste problemen med WCAG Efterlevnad (Web Content Accessibility Guidelines). företag som strävar efter att göra sina webbplatser ADA-vänliga bör hänvisa till och följa WCAG-standarder. Tillgänglighetsassistenten hjälper dig att skapa registreringsformulär som är tillgängliga för alla besökare på din webbplats.
WCAG-standarderna syftar till att göra webbinnehåll mer tillgängligt för alla, inklusive personer med funktionsnedsättning. Tillgänglighet på webbplatser är ett lagkrav i många länder, och genom att implementera WCAG-standarder kan man tillgodose många av dessa tillgänglighetsbehov. Observera att även om tillgänglighetsassistenten är avsedd att hjälpa till att identifiera tillgänglighetsproblem enligt WCAG 2.0 Advanced Analytics-standarderna när de gäller registreringsformulär, kanske den inte kan identifiera alla tillgänglighetskrav på grund av kända begränsningar i befintlig teknik eller andra faktorer som är oberoende av teknik. Användning av tillgänglighetsassistenten kan hjälpa till att uppfylla kraven på webbtillgänglighet, men garanterar inte efterlevnad av tillämpliga lagar. För att bekräfta de juridiska konsekvenserna och kraven på webbtillgänglighet rekommenderas att du rådfrågar en kvalificerad jurist.
Innan du börjar
Nedan finns en lista över problem som tillgänglighetsassistenten kommer att kontrollera. Observera att de feltyper som anges nedan är hur Klaviyo:s tillgänglighetsassistent identifierar dem, inte specifika indatafältnamn i formulärbyggaren. Om ett fel upptäcks visas en varning med en beskrivning och en uppmaning att åtgärda felet på fliken Formulärvarningar.
Typ av fel | Beskrivning |
Namn på knapp | Säkerställer att knapparna har urskiljbar text. |
Bild-alt | Säkerställer att bildelement har alternativ text (alt text) eller en html-roll av "none" eller presentation. |
Färg-kontrast | Säkerställer att kontrasten mellan förgrunds- och bakgrundsfärger uppfyller WCAG 2 Advanced Analytics tröskelvärden för kontrastförhållande. |
Länk-i-text-block | Se till att länkar kan särskiljas från omgivande text på ett sätt som inte är beroende av färg. |
Länk-namn | Säkerställer att länkar har urskiljbar text. |
Etikett | Säkerställer att varje formulär element har en etikett. |
Skapa ett ADA-vänligt registreringsformulär
Oavsett om du skapar ditt första registreringsformulär eller uppdaterar ett formulär hjälper tillgänglighetsassistenten dig att identifiera och åtgärda tillgänglighetsproblem.
För att skapa ett formulär i linje med WCAG-standarderna som anges ovan:
- Skapa ett nytt registreringsformulär eller öppna formulärredigeraren för ett av dina befintliga registreringsformulär.
- Använd redigeraren för att lägga till innehållsblock och utforma formuläret så att det passar ditt varumärke.
Tillgänglighetsassistenten kommer att övervaka formulärelement som inte uppfyller WCAG-standarderna när du bygger ditt formulär och logga dem som Aktiv-varningar. I ett befintligt formulär loggas alla problem i avsnittetAktiva varningar.
- Klicka på formulärvarningarna längst ned till vänster för att se de identifierade tillgänglighetsproblemen.
Under Aktiv-varningar ser du olika kort som beskriver de element som inte uppfyller WCAG-standarderna som tillgänglighetsassistenten identifierade i ditt formulär, utöver andra innehålls- eller designproblem som identifierades. Varje kort innehåller en beskrivning av problemet och en uppmaning att antingen åtgärda eller avfärda det. Om du till exempel lägger till en bild i registreringsformuläret kommer tillgänglighetsassistenten att varna dig för att lägga till en alt-text till bilden. Alt-texten ger en beskrivning av bilden så att kunder som surfar på din webbplats med en skärmläsare kan komma åt innehållet på digital.
- För att åtgärda ett problem följer du förslagen på kortet och antingen löser eller lägger till det saknade elementet. När du är nöjd med dina ändringar klickar du på Fix.
Vissa problem kommer att uppmana dig att åtgärda dem i respektive blockinställningar (t.ex. en knapp block) eller i avsnittet Stilar, snarare än direkt i fliken Formulärvarningar. För att lösa dessa problem ska du notera problembeskrivningen på varningskortet och sedan klicka på Redigera block (eller Redigera stilar) för att göra de föreslagna ändringarna. Navigera tillbaka till fliken Formulärvarningar när du har åtgärdat problemet.
- Om du vill ignorera ett eller flera av tillgänglighetsförslagen klickar du på Avvisa. Om du avfärdar ett ärende visas en modalruta där du ombeds att avbryta eller bekräfta ditt val.
När du har åtgärdat eller avfärdat alla identifierade problem kommer du att se meddelandet "Inga Aktiv-varningar" i fliken Formulärvarningar.
Du kan återgå till ignorerade frågor vid ett senare tillfälle genom att öppna assistenten och visa dina tidigare avfärdade varningar. Vi rekommenderar att du åtgärdar alla problem som markeras i tillgänglighetsassistenten. Bristande efterlevnad av WCAG-standarder kan utsätta ditt företag för juridiska risker.
- Klicka på Publicera för att sätta ditt registreringsformulär live på din webbplats med din tillgänglighetsuppdatering.
Observera att när du klickar på publicera kommer du att uppmanas att åtgärda eventuella Aktiv-formulärvarningar. Du kan välja att åtgärda felen på fliken Formulärvarningar eller publicera ändå.
JAWS tillgänglighetsrapporter
Observera att JAWS, ett skärmläsningsprogram för Microsoft Windows, kanske inte upptäcker registreringsformulär på din webbplats som skapades i Klaviyo. För att säkerställa att besökare som använder JAWS fortfarande kan interagera med registreringsformulär på din webbplats föreslår vi att du lägger till en extra kodsnutt på din webbplats som gör den mer tillgänglig för JAWS.
Kopiera följande kodsnippet och klistra in det i webbplatsens huvudtemafil så att JAWS upptäcker och läser ditt Klaviyo registreringsformulär:
const isAriaHiddenTrue = ($el) => {
const ariaHiddenValue = $el ? $el.getAttribute("aria-hidden") : null;
return ariaHiddenValue === "true";
};
const isHTMLElement = (node) => {
return node.nodeType === Node.ELEMENT_NODE;
};
const isModal = (node) => {
if (node.children.length !== 1) return false;
const modalContainer = Array.from(node.children[0].classList).some((cls) =>
cls.startsWith("kl-private-reset")
);
return modalContainer;
};
const getTopLevelDomElements = () => {
const body = document.body;
// Use the children property to get all top-level elements
const topLevelNodes = Array.from(body.children).filter((node) => {
if (isHTMLElement(node)) {
const tagName = node.tagName.toLowerCase();
console.log("isModal: ", isModal);
// Filter out specific tags
return (
tagName !== "script" &&
tagName !== "link" &&
tagName !== "iframe" &&
tagName !== "style" &&
!isModal(node)
);
}
return false;
});
return topLevelNodes;
};
const a11yHideTopLevelElements = () => {
const $elements = getTopLevelDomElements();
$elements.forEach(($el) => {
if (!isAriaHiddenTrue($el)) {
$el.setAttribute("kl-aria-hidden", "true");
$el.setAttribute("aria-hidden", "true");
}
});
};
const a11yShowTopLevelElements = () => {
const $elements = getTopLevelDomElements();
$elements.forEach(($el) => {
if ($el.hasAttribute("kl-aria-hidden")) {
$el.removeAttribute("kl-aria-hidden");
$el.removeAttribute("aria-hidden");
}
});
};
Kommande steg
Det är viktigt att upprätthålla WCAG-standarder i alla dina Klaviyo-registreringsformulär. Tidigare publicerade registreringsformulär kan fortfarande innehålla tillgänglighetsproblem som du kan åtgärda, men notera att Klaviyo inte automatiskt kommer att åtgärda problem som inte uppfyller WCAG.
Navigera till fliken Formulärvarningar i redigeraren för vart och ett av dina befintliga formulär för att lösa eventuella tillgänglighetsproblem för att hjälpa till med WCAG-Efterlevnad på din webbplats.
Ytterligare resurser
- Bästa praxis-referens för tillgänglighet i e-postmeddelanden och formulär
Lär dig hur du gör din e-post och ditt registreringsformulär mer tillgängliga. När du utformar din e-post och registreringsformulär vill du se till att dina mönster är tillgängliga för alla dina mottagare.
- Komma igång med registreringsformulär
Lär dig hur du skapar och anpassar registreringsformulär i Klaviyo för att publicera på din webbplats så att du kan engagera kunder, samla in e-post och telefonnummer och bygga långvariga kundrelationer.
- Lista över Axe HTML 4.5-regler