Skapa hjälpmedelsförberedda adaptiva formulär creating-accessible-adaptive-forms

Adobe rekommenderar att du använder den moderna och utbyggbara datainhämtningen Core Componentsför att skapa nya adaptiva Formseller att lägga till adaptiva Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs ett äldre sätt att skapa adaptiva Forms med baskomponenter.

Introduktion introduction

Ett hjälpmedelsanpassat formulär är ett formulär som alla kan använda, inklusive användare med särskilda behov. Adaptiva Forms har flera funktioner som gör dem mer användbara för användare med olika funktioner. Att skapa tillgänglighet i anpassningsbara formulär ger inte bara en så bred publik som möjligt, utan det är också ett krav när man levererar dokument i områden där det krävs överensstämmelse med tillgänglighetsstandarder. AEM Forms hjälper formulärutvecklare att följa tillgänglighetsstandarderna.

När du skapar ett anpassat formulär bör du tänka på följande när du skapar hjälpmedelsförberedda formulär:

Förutsättning

Du behöver ett hjälpmedelsverktyg som hjälpmedels- och beskrivningsverktyg (ANDI) och ett anpassat formulärtema som utvecklats för att åtgärda tillgänglighetsrelaterade problem för att skapa ett hjälpmedelsanpassat anpassat formulär.

Hämta och installera hjälpmedelstestningsverktyget

Med verktyget för hjälpmedelsförberedda namn- och beskrivningsgranskare (ANDI) kan du identifiera och åtgärda tillgänglighetsrelaterade problem i webbinnehåll. Det rekommenderas enligt Trusted Tester v5 Guidelines of Department of Homeland Security. Det har utvecklats av ​ för socialförsäkringstjänster i USA för att kontrollera att webbinnehållet uppfyller Section 508. Verktyget:

ANDI fungerar med alla större webbläsare. Mer information om hur du konfigurerar och använder verktyget finns i ANDI:s dokumentation.

Hämta och installera temat Ultramarine-Accessible

Temat Ultramarine-Accessible är ett referenstema. Det visar hur du åtgärdar färgkontrast och andra tillgänglighetsrelaterade problem i en adaptiv form. Adobe rekommenderar att du skapar ett anpassat tema för produktionsmiljön baserat på de format som din organisation har godkänt. Utför följande steg för att överföra temat till din AEM:

Göra ett anpassat formulär tillgängligt

Du bör fokusera på fyra nyckelaspekter: tangentbordsnavigering, färgkontrast, meningsfull alternativ text för bilder och lämpliga etiketter för formulärkontroller för att göra ett adaptivt formulär tillgängligt. Gör så här för att göra dina befintliga anpassningsbara formulär tillgängliga:

1. Använd ett tillgängligt tema och utför ytterligare korrigeringar

Använd temat Ultramarine-Accessible i din befintliga adaptiva form. Så här använder du temat:

När du har tillämpat ett tillgängligt tema utför du följande korrigeringar. Förutom tillgänglighetskorrigeringar som ingår i det tillgängliga temat finns det korrigeringar:

2. Ange korrekta etiketter för formulärkontroller provide-proper-labels-for-form-controls

Etiketten eller titeln för en komponent identifierar vad formulärkomponenten representerar. Texten "Förnamn" anger till exempel att användaren måste ange sitt förnamn i ett textfält. För att skärmläsare ska kunna komma åt etiketten är den programmatiskt kopplad till en formulärkomponent. Formulärkontrollen kan även konfigureras med ytterligare hjälpmedelsinformation.

Etiketten som upplevs av skärmläsare behöver inte vara samma som den visuella bildtexten. I vissa fall kanske du vill ange kontrollens syfte mer specifikt. För varje fältobjekt i ett formulär kan hjälpmedelsalternativen användas för att ange vad skärmläsaren ska meddela för att identifiera det specifika formulärfältet.

Så här använder du alternativet Hjälpmedel:

Tillgänglighetsalternativ i formulärkomponenter accessibility-options-in-form-components

Anpassad text Formulärförfattare tillhandahåller innehållet i hjälpmedelsalternativet Egen text. Den här anpassade texten används i hjälpmedelstekniken, till exempel skärmläsare. Att använda inställningen Titel är det bästa alternativet i de flesta scenarier. Du bör endast skapa Reader-text för anpassad skärm när du inte kan använda rubriken eller en kort beskrivning.

Kort beskrivning För de flesta komponenter visas den korta beskrivningen vid körning när användaren placerar pekaren över komponenten. Du kan ange det här alternativet i fältet för kort beskrivning under alternativet för hjälpinnehåll.

Titel Använd det här alternativet om du vill att den visuella etikett som är associerad med formulärfältet ska kunna användas som skärmläsartext i AEM Forms.

Namn Du kan ange ett värde i fältet Namn på fliken Bindning. Namnet får inte innehålla blanksteg.

Ingen Om du väljer Ingen får formulärobjektet inget namn i det publicerade formuläret. Ingen rekommenderas inte för formulärkontroller.

3. Ange textmotsvarigheter för bilder provide-text-equivalents-for-images

Bilder kan förbättra förståelsen för vissa användare. För användare som använder skärmläsare minskar dock bilderna formulärets tillgänglighet. Om du väljer att använda bilder anger du textbeskrivningar för alla bilder.

Kontrollera att texten beskriver objektet och dess syfte i formuläret. En skärmläsare läser upp den här alternativa texten när en bild påträffas. En bild måste alltid ha en alternativ text angiven.

Markera en bildkomponent och välj . Ange alternativ text för en bild under Egenskaper i sidlisten.

4. Ange tillräcklig färgkontrast provide-sufficient-color-contrast

Hjälpmedelsdesignen inbegriper att överväga ytterligare riktlinjer för färganvändning. Formulärförfattare kan använda färger för att förbättra formulärens utseende genom att markera olika formulärkomponenter. En felaktig användning av färg kan dock göra ett formulär svårt eller omöjligt att läsa av personer med olika funktioner.

Användare med nedsatt syn förlitar sig på hög kontrast mellan text och bakgrunden för att läsa digitalt innehåll. Utan tillräcklig kontrast kan ett formulär bli svårt, för att inte säga omöjligt, att läsa för vissa användare.

Vi rekommenderar att du använder standardfärgerna för teckensnitt och bakgrund - innehåll i svart färg mot en vit bakgrund. Om du ändrar standardfärgerna väljer du antingen en mörk förgrundsfärg på en ljus bakgrundsfärg, eller omvänt.

Mer information om hur du ändrar färgkontrast och tema för anpassade formulär finns i Skapa anpassade teman för anpassade formulär.

5. Kontrollera att formulärkontrollerna är tangentbordstillgängliga ensure-that-form-controls-are-keyboard-accessible

Ett hjälpmedelsanpassat formulär kan fyllas i helt och hållet med bara tangentbordet eller en motsvarande indataenhet. Användare med nedsatt rörelseförmåga eller nedsatt syn har kanske inget annat val än att använda tangentbordet och många användare som kan använda en mus föredrar tangentbordsinmatning. Genom att använda de olika indatametoderna kan du inte bara skapa hjälpmedelsförberedda formulär, du kan också skapa formulär som bättre passar alla användares önskemål.

Följande kortkommandon finns i AEM Forms.

Dessutom finns det olika kortkommandon för komponenten Date Picker i Adaptive Forms. Om du vill aktivera kortkommandona markerar du komponenten Date Picker och väljer för att öppna egenskaperna. I avsnittet Patterns väljer du ett visningsmönster med listrutorna Type och Pattern. Spara egenskaperna för att aktivera användning av kortkommandon för komponenten Date Picker.

Följande kortkommandon är tillgängliga för datumväljarkomponenten i Adaptiv Forms:

Åtgärd

Kortkommando

• Visa komponentalternativen för datumväljaren när tabbfokus markerar kalenderikonen
• Utför klickhändelsen när tabbfokus markerar ett alternativ

Blanksteg eller Retur

Dölj komponentalternativen för datumväljaren

Esc

• Flytta markören framåt genom de alternativ som är tillgängliga i datumväljarkomponenten.
• Ange flikfokus för kalenderikonen när datuminmatningsfältet är aktivt

Tabb

Flytta markören bakåt genom de alternativ som är tillgängliga i datumväljarkomponenten

Skift+Tabb

• Visa komponentalternativen för datumväljaren när tabbfokus markerar datuminmatningsfältet
• Flytta markören nedåt i kalendern som är tillgänglig i datumväljarkomponenten

Nedåtpil

Flytta markören uppåt i kalendern som är tillgänglig i datumväljarkomponenten

Uppåtpil

Flytta markören bakåt i kalendern som är tillgänglig i datumväljarkomponenten

Vänsterpil

Flytta markören framåt i kalendern som är tillgänglig i datumväljarkomponenten

Högerpil

Utför åtgärden för den bildtext som är tillgänglig mellan höger och vänster navigeringspilar i kalendern

Skift + uppåtpil

Utför åtgärden för högernavigeringspilikonen som är tillgänglig i kalendern

Skift + Vänsterpil

Utför åtgärden för den vänstra navigeringspilikonen som är tillgänglig i kalendern

Skift + högerpil

Använd hjälpmedelsverktyget för att hitta återstående tillgänglighetsproblem

Med hjälp av ANDI (Accessible Name and Description Inspector) kan du identifiera och åtgärda kompatibilitetsrelaterade problem i en adaptiv form. Så här använder du ANDI-verktyget för att hitta hjälpmedelsproblemen i en adaptiv form: