Skapa tillgänglig adaptiv Forms creating-accessible-adaptive-forms

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 bygga upp tillgängligheten i Adaptive Forms ger inte bara största möjliga publik av innehåll, utan det är också ett krav när man levererar dokument i de länder där det krävs överensstämmelse med tillgänglighetsstandarder. AEM Forms hjälper formulärutvecklare att följa standarderna för tillgänglighet.

När du skapar ett adaptivt formulär bör du tänka på följande när du skapar tillgängliga adaptiva formulär:

  • Kontrollera formuläret med hjälpmedelstestningsverktyget för namn och beskrivning (ANDI)
  • Ange korrekta etiketter för formulärkontroller
  • Ange textmotsvarigheter för bilder
  • Ange tillräcklig färgkontrast
  • Kontrollera att formulärkontrollerna är tangentbordstillgängliga

Förutsättning

Du behöver ett hjälpmedelsverktyg som Namnkontroll och beskrivning för hjälpmedel (ANDI) och Tema för adaptiv form har utvecklats för att åtgärda tillgänglighetsrelaterade problem för att skapa ett tillgängligt adaptivt 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:

  • Hjälper dig att identifiera tillgänglighetsproblem ​ en webbsida
  • Tillhandahåller förslag för att förbättra ​
  • Identifierar problem med tangentbordstillgänglighet och färgkontrast
  • Identifierar tydligt skärmläsarinnehållet enligt standarderna

ANDI fungerar med alla större webbläsare. Se, ANDI:s dokumentation om du vill ha detaljerade anvisningar om hur du konfigurerar och använder verktyget.

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:

  1. Hämta temapaketet.
  2. Navigera till Experience Manager > Navigation Navigering > Forms på din AEM.
  3. Välj Create > File Upload. Markera och överför filen x Ultramarine-Accessible-Theme.zip. Temat överförs till din AEM.

Göra ett adaptivt 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 din befintliga Adaptive Forms tillgänglig:

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:

  1. Öppna det adaptiva formuläret för redigering.
  2. Markera en komponent och välj den överordnade ikonen. Välj Adaptive Form Container och välj sedan konfigurationsikonen.
  3. Välj temat Ultramarine-Accessible i egenskapsläsaren och välj Save -ikon.
  4. Uppdatera webbläsarfönstret. Temat tillämpas på den adaptiva formen.

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:

  1. Lägg till en meningsfull alternativ text för logotypbilden i det adaptiva formuläret.

    Ange en meningsfull alternativ text för bilder i sidhuvuds- och sidfotskomponenter i den adaptiva formulärmallen. När du korrigerar mallen och använder den för att skapa ett adaptivt formulär, ärver den adaptiva Forms alla tillgänglighetsrelaterade korrigeringar som tillämpas på mallens sidhuvud och sidfot. Om du har ett befintligt adaptivt formulär kan du göra ändringar på adaptiv formulärnivå. Ändringar som görs i en adaptiv formulärmall flödar inte automatiskt till ett befintligt adaptivt formulär.

  2. Lägg till en rubrikkomponent som innehåller formulärnamn i det adaptiva formuläret. Om formulärdesignen anger ett företagsnamn lägger du även till en separat rubrikkomponent för företagsnamnet.

    De flesta tillgänglighetsverktygen informerar användarna om innehållets hierarki så att de lättare kan förstå webbsidans struktur. Ange olika rubriknivåer för organisationsnamn och formulärnamnstext i det adaptiva formuläret för att ge en hierarkisk struktur till texten. Använd dessutom en textkomponent före varje panel och avsnitt med en lämplig rubriknivå för att skapa en hierarki.

    Använda ett rubrikformat

  3. Ändra bakgrundsfärgen för sidfoten så att rätt kontrast används i enlighet med tillgänglighetsstandarderna för att förbättra textens synlighet och läsbarhet. Du kan använda ANDI för att hitta färgkontrastproblem i formuläret. Använd inte särskilt små teckensnitt. Små teckensnitt är svåra att läsa.

  4. Ersätt växel- och bildvalskomponenterna i det befintliga adaptiva formuläret med en valfri komponent (radio).

  5. Ersätt den numeriska nummerkomponenten i det befintliga adaptiva formuläret med en numerisk rutkomponent.

  6. Ersätt datuminmatningsfält med datumväljarfält.

  7. Ange visnings-, validerings- och redigeringsmönster för datumväljarkomponenten. Ange även ett eget valideringsfelmeddelande. Du har till exempel angett ett ogiltigt datum. Datumets korrekta format är YYY-MM-DD.

  8. Ange anpassad hjälpmedelstext för datumväljarkomponenten. Ange t.ex. ditt födelsedatum. Skärmläsare läser dessa anpassade hjälpmedelstexter.

  9. Använd kort beskrivning i stället för lång beskrivning för adaptiva formulärkomponenter. En lång beskrivning lägger till en hjälpknapp. Kontrollera att det adaptiva formuläret inte har någon hjälpknapp.

  10. Lägg till anpassad hjälpmedelstext i alla skrivskyddade celler i tabeller. Du kan även inaktivera alla skrivskyddade celler i tabeller.

  11. Ta bort signaturfält för skript, om sådana finns i det adaptiva formuläret. Konfigurera det adaptiva formuläret som ska användas Adobe Sign för en smidig digital signeringsupplevelse.

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 nödvändigtvis 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:

  1. Markera en komponent och markera cmppr .
  2. Klicka Accessibility i sidlisten för att välja önskat hjälpmedelsalternativ.

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

Tillgänglighetsalternativ i formulärkomponenter

Egen text Formulärförfattare anger innehållet i alternativet Anpassad text för hjälpmedel. 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 för att AEM Forms Använd den visuella etikett som är kopplad till formulärfältet som skärmläsartext.

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.

NOTE
  • Alternativknapp och kryssruta kan bara ha två alternativ för tillgänglighet: Anpassad text och Titel.
  • För XFA-baserade adaptiva Forms ärvs hjälpmedelsalternativet från de hjälpmedelsalternativ som angetts i XDP. Verktygstips från XDP mappas till Short Description och Caption mappas till Title. De andra alternativen fungerar som de är.

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 markera cmppr . Ange alternativ text för en bild under Egenskaper i sidlisten.

Alternativ text för en bild

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.

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.

Åtgärd
Kortkommando
Flytta markören framåt genom ett formulär
Tabb
Flytta markören bakåt genom ett formulär
Skift+Tabb
Flytta till nästa panel
Alt+högerpil
Flytta till föregående panel
Alt+vänsterpil
Återställ ifyllda data i ett formulär
Alt+R
Skicka ett formulär
Alt+S

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

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öger navigeringspil högerpil som är tillgängliga i kalendern
Skift + Vänsterpil
Utför åtgärden för den vänstra navigeringspilen vänsterpil som är tillgängliga 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 tillgänglighetsrelaterade problem i ett adaptivt formulär. Så här använder du ANDI-verktyget för att hitta hjälpmedelsproblemen i en adaptiv form:

  1. Öppna det adaptiva formuläret i förhandsgranskningsläge.
  2. Klicka på den bokmärkta ikonen för verktyget ANDI. ANDI-verktyget analyserar den adaptiva formen och visar tillgänglighetsproblem. Mer information om hur du använder verktyget finns i ANDI:s dokumentation.
  3. Granska och åtgärda de problem som rapporterats av ANDI.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab