Detta är det 3:e inlägget i en liten serie vi gör om formulärtillgänglighet. Om du missade det andra inlägget, kolla in Hantera användarfokus med :focus-visible. I det här inlägget ska vi titta på att använda en skärmläsare när du navigerar i ett formulär, och även några bästa praxis.

Vad är en skärmläsare?

Du kanske har hört termen "skärmläsare" när du har rört dig på webben. Du kanske till och med använder en skärmläsare just nu för att köra manuella tillgänglighetstester på de upplevelser du bygger. En skärmläsare är en typ av AT eller hjälpmedel.

En skärmläsare konverterar digital text till syntetiserat tal eller punktskrift, vilket vanligtvis ses med en punktläsare.

I det här exemplet kommer jag att använda Mac VO. Mac VO (VoiceOver) är inbyggt i alla Mac-enheter; iOS-, iPadOS- och macOS-system. Beroende på vilken typ av enhet du kör macOS på kan öppningen av VO skilja sig åt. Macbook Pro som kör VO jag skriver detta på har inte pekfältet, så jag kommer att använda genvägstangenterna enligt hårdvaran.

Spinning Up VO på macOS

Om du använder en uppdaterad Macbook Pro kommer tangentbordet på din maskin att se ut ungefär som på bilden nedan.

Du börjar med att hålla ned cmd och tryck sedan snabbt på Touch ID tre gånger.

Om du är på en MBP (MacBook Pro) med en TouchBar kommer du att använda genvägen cmd+fn+f5 för att slå på VO. Om du använder ett traditionellt tangentbord med din stationära eller bärbara dator, bör tangenterna vara desamma eller så måste du aktivera VO i tillgänglighetsinställningarna. När VO har aktiverats kommer du att hälsas med den här dialogrutan tillsammans med en vokaliserad introduktion till VO.

Om du klickar på knappen "Använd VoiceOver" är du på god väg att använda VO för att testa dina webbplatser och appar. En sak att tänka på är att VO är optimerat för användning med Safari. Som sagt, se till när du kör ditt skärmläsartest att Safari är webbläsaren du använder. Det gäller även iPhone och iPad.

Det finns två huvudsakliga sätt att använda VO från början. Sättet jag personligen använder det är genom att navigera till en webbplats och använda en kombination av tab, control, option, shift och piltangenter kan jag navigera genom upplevelsen effektivt med bara dessa tangenter.

Ett annat vanligt sätt att navigera i upplevelsen är att använda VoiceOver Rotor. Rotorn är en funktion utformad för att navigera direkt dit du vill vara i upplevelsen. Genom att använda rotorn slipper du gå igenom hela platsen, se det som ett "Välj ditt eget äventyr".

Specialtangenter

Modifieringsnycklar är hur du använder de olika funktionerna i VO. Standardmodifieringsnyckeln eller VO is control + option men du kan ändra det till caps lock eller välja båda alternativen att använda omväxlande.

Använda rotorn

För att kunna använda rotorn måste du använda en kombination av dina modifieringsknappar och bokstaven "U". För mig är min modifieringsnyckel caps lock. jag trycker caps lock + U och rotorn snurrar upp för mig. När rotorn väl kommer upp kan jag navigera till vilken del av upplevelsen jag vill med hjälp av vänster- och högerpilarna.

[Inbäddat innehåll]

Navigera efter rubriknivå

Ett annat snyggt sätt att navigera i upplevelsen är genom rubriknivå. Om du använder kombinationen av dina modifieringstangenter + cmd + H du kan gå igenom dokumentstrukturen baserat på rubriknivåer. Du kan också flytta tillbaka uppåt i dokumentet genom att trycka på shift i sekvensen som så, modifieringstangenter + shift + cmd + H.

[Inbäddat innehåll]

Historia och bästa praxis

Formulär är ett av de mest kraftfulla inbyggda elementen vi har i HTML. Oavsett om du söker efter något på en sida, skickar in ett formulär för att köpa något eller skickar in en enkät. Formulär är en hörnsten i webben och var en katalysator som introducerade interaktivitet till våra upplevelser.

Webbformulärets historia går tillbaka till september 1995 när det introducerades i HTML 2.0 specifikation. Vissa säger att webbens gamla dagar, åtminstone jag säger det. Stephanie Stimac skrev en fantastisk artikel om Smashing Magazine med titeln "Standardisera urval och bortom: det förflutna, nuet och framtiden för inbyggda HTML-formulärkontroller".

Följande är fem bästa metoder att följa när du skapar ett tillgängligt formulär för webben.

1. Se till att du använder ett formulärelement. Formulär är tillgängliga som standard och bör användas över div:er hela tiden.

<form>
  <!-- Form controls are nested here. -->
</form>

2. Se till att använda for och id attribut på labels och inputär så att de är länkade. På så sätt, om du klickar/trycker på etiketten, kommer fokus att flyttas till inmatningen och du kan börja skriva.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>

3. Om ett fält krävs för att formuläret ska vara komplett, använd det obligatoriska attributet och det aria-obligatoriska attributet. Dessa kommer att begränsa formuläret från att skickas. Attributet aria-required säger uttryckligen till hjälptekniken att fältet är obligatoriskt.

<input type="text" id="name" name="name" required aria-required/>

4. Använd, :focus, :focus-within och :focus-visible CSS-pseudoklasser för att hantera och anpassa hur en användare får fokus.

form:focus-within {
 background-color: #cfffcf;
}

input:focus-within {
 border: 10px solid #000000;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 2px solid crimson;
 border-radius: 3px;
}

5. A button används för att anropa en åtgärd, som att skicka in ett formulär. Använd den! Skapa inte knappar med divs. A div per definition är en avdelare. Den har inga inneboende tillgänglighetsegenskaper.

demo

[Inbäddat innehåll]

Om du vill kolla in koden, navigera till VoiceOver Demo GitHub repo. Om du vill prova demon ovan med din skärmläsare, kolla in Navigera i ett webbformulär med VoiceOver.

Programvara för skärmläsare

Nedan finns en lista över olika typer av skärmläsare som du kan använda på ditt givna operativsystem. Om en Mac inte är din valfria maskin finns det alternativ för Windows och Linux, såväl som för Android-enheter.

NVDA

NVDA är en skärmläsare från NV Access. Det stöds för närvarande endast på datorer som kör Microsoft Windows 7 SP1 och senare. För mer åtkomst, kolla in Nedladdningssidan för NVDA version 2024.1 på NV Access-webbplatsen!

KÄFTAR

"Vi behöver en bättre skärmläsare"

- Anonym

Om du förstod referensen ovan är du i gott sällskap. Enligt JAWS hemsida är detta vad det är i ett nötskal:

“JAWS, Job Access With Speech, är världens mest populära skärmläsare, utvecklad för datoranvändare vars synförlust hindrar dem från att se skärminnehåll eller navigera med en mus. JAWS tillhandahåller tal och punktskrift för de mest populära datorapplikationerna på din PC. Du kommer att kunna navigera på Internet, skriva ett dokument, läsa ett e-postmeddelande och skapa presentationer från ditt kontor, fjärrskrivbord eller hemifrån."

JAWS hemsida

Kolla in JAWS själv och om den lösningen passar dina behov, ge det definitivt ett försök!

Skärmläsaren

Narrator är en inbyggd skärmläsarlösning som levereras med Windows 11. Om du väljer att använda denna som din skärmläsare, är länken nedan för supportdokumentation om dess användning.

Komplett guide till Berättare

Orca

Orca är en skärmläsare som kan användas på olika Linux-distributioner som kör GNOME.

"Orca är en gratis, flexibel och utbyggbar skärmläsare med öppen källkod som ger åtkomst till det grafiska skrivbordet via tal och uppdateringsbar punktskrift.

Orca arbetar med applikationer och verktygssatser som stöder Assistive Technology Service Provider Interface (AT-SPI), som är den primära hjälpmedelsinfrastrukturen för Linux och Solaris. Applikationer och verktygssatser som stöder AT-SPI inkluderar verktygssatsen GNOME Gtk+, Java-plattformens Swing-verktygssats, LibreOffice, Gecko och WebKitGtk. AT-SPI-stöd för KDE Qt-verktygssatsen eftersträvas."

Orca hemsida

Prata tillbaka

Google TalkBack är skärmläsaren som används på Android-enheter. För mer information om hur du slår på och använder den, kolla in den här artikeln på Android Accessibility Support Site.

browser Support

Om du letar efter faktisk webbläsarstöd för HTML-element och ARIA-attribut (Accessible Rich Internet Application) föreslår jag caniuse.com för HTML och Tillgänglighetsstöd för ARIA för att få den senaste 4-1-1 om webbläsarstöd. Kom ihåg att om webbläsaren inte stöder tekniken är chansen stor att skärmläsaren inte gör det heller.

DigitalA11Y kan hjälpa till att sammanfatta webbläsar- och skärmläsarinformation med sin artikel,  Skärmläsare och webbläsare! Vilken är den bästa kombinationen för tillgänglighetstestning?

vänster

https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

https://www.w3.org/TR/wai-aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://support.google.com/accessibility/android/answer/6283677?hl=en

https://support.google.com/accessibility/android/answer/6283677?hl=en

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• PlatoData.Network Vertical Generative Ai. Styrka dig själv. Tillgång här.
• PlatoAiStream. Web3 Intelligence. Kunskap förstärkt. Tillgång här.
• Platoesg. Kol, CleanTech, Energi, Miljö, Sol, Avfallshantering. Tillgång här.
• PlatoHealth. Biotech och kliniska prövningar Intelligence. Tillgång här.
• Källa: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/