Att förbättra Tillgängligheten på 24 olika sätt

0
107

Jag har funderat nyligen om vilken typ av mitt arbete och vilka aspekter av det jag gillar mest. I en roll som ofta sträcker sig över världarna för design och utveckling, oavsett om redigering kopiera, utvärdera design av ett gränssnitt eller omstrukturera kod, jag har kommit att inse att mina intressen ligger i att akten av den översyn och förfining.

Mitt arbete på 24 sätt är ett typexempel. Sedan Drog McLellan bad mig att omforma platsen under 2013, jag har stannat på som en del av teamet, hjälpa till att granska, redigera och formatera artiklar. Men jag har också kunnat uppfylla den önskan uttryckte jag på att lansera den nya designen:

Jag är en stor anhängare av iteration och inte behandla en webbplats som någonsin blir klar. Jag hoppas att vad som släppts i år kan fungera som en grund, och att utformningen kommer att utvecklas under de kommande åren.

Under de mellanliggande åren, som verktyg har förbättrats och bästa praxis har mognat, jag fixade designen och omstrukturerade koden, och utvecklat en del bibliotek i processen.

24 sätt startsidan

Fokus på Tillgänglighet

Detta år jag har lyssnat till människor som Laura Kalbag prata om tillgänglighet i form av universell design, och följs bloggar som Heydon Pickering är inklusive Komponenter, som handlar om hur att designa och implementera gemensamma interaktionsmönster med en inkluderande inställning. Plötsligt, den taggiga föremål för tillgänglighet har känt mig mer lättillgänglig och mindre dogmatiskt.

Med all denna kunskap rötas, jag var angelägen om att se hur 24 sätt skulle klara när de sätts under lupp. I denna artikel, jag kommer att omfatta fem områden där jag hade möjlighet att göra förbättringar:

  • Sida struktur
  • Märkning av delar
  • Navigering med tangentbordet
  • Ljudmässiga erfarenhet
  • Allmän användbarhet

Innan jag börjar, tack. Efter att ha gjort en första uppsättning av förändringar, jag frågade min vän och tillgänglighet Francis Storr att granska mitt arbete. Han upptäckt ytterligare ett antal frågor, delvis ett resultat av hans erfarenhet på detta område, men också från att ha testat webbplats med en rad olika hjälpmedel och verktyg.

Nytänkande Sida Struktur

Den ursprungliga designen hade antagit en mobile-first-strategi. Navigeringen var deprioritized och placeras mot botten av sidan. För att säkerställa att den kan nås från toppen av sidan i icke-JavaScript-scenarier, jag har lagt till en hoppa över till navigering länk. Om JavaScript är tillgängliga kan denna länk var adjungerad för att avslöja en navigering låda, som skulle glida i från toppen eller höger, beroende på bredden av det virtuella. Detta resulterade i följande sida struktur:

<header class=”c-banner”>…</header>
<a class=”c-meny” href=”#meny”>Hoppa till meny</a>
<viktigaste class=”c-main”>…</main>
<nav class=”c-navigering” id=”menu”>
<div class=”c-rail-nav”>…</div>
<div class=”c-navigering__lådan”/>…</div>
</nav>
<footer class=”c-contentinfo”>…</footer>

I efterhand var detta problematiskt på flera sätt:

  • Menu-knappen (.c-meny) var inte i anslutning till den del av det kontrollerade (c-navigation-låda). Flytta fokus runt den sida som den här kan vara förvirrande, särskilt om det inte hanteras på rätt sätt.
  • Alla typer av navigering på webbplatsen var grupperade tillsammans, även om varje uppsättning länkar som serveras med ett annat syfte.
  • Lådan beteende förlitat sig på att ha en länk beter sig som en knapp. Men den första regeln av ARIA stater:

    Om du kan använda en infödd HTML-element eller attribut med semantik och beteende kräver att du redan inbyggt i, istället för att re-purposing ett element och lägga till en ARIA roll, staten eller egendom för att göra den tillgänglig, så gör det

    Förra året, jag uppdaterade JavaScript så att denna länk skulle ersättas med en knapp, men denna komplexitet fanns en antydan att min ursprungliga lösningen var inte optimal.

Här är den struktur jag kom på idag:

<header class=”c-banner”>

<a class=”c-banner__hoppa över” href=”#”>Hoppa till innehåll</a>
</header>
<div class=”c-meny”>
<knappen class=”c-meny__knappen”>…</button>
<div class=”c-meny__lådan”>…</div>
</div>
<viktigaste class=”c-main” id=”main”>…</main>
<nav class=”c-rail-nav”>…</nav>
<footer class=”c-contentinfo”>…</footer>

Flytta navigering mot toppen av sidan innebar knappen och låda var nu bredvid varandra. Meny-knappen är inte längre två ansikten; det är och alltid kommer att vara en knapp.

En nackdel med denna metod är att navigeringen kan höras varje gång du besöker en ny sida. Återigen kan vi använda en hoppa-länk, men den här gången en som pekar på att innehållet i block (#main). Snarare än att dölja detta tabbindexvärden element från vissa användare, det blir synligt på fokus.

Denna struktur kan vara mindre ideologiskt rena, men det är betydligt mer pragmatisk. Detta blev ett återkommande tema. Ja, efter att ha gett upp allt hopp om att HTML5 beskriva algoritmen någonsin som stöds av webbläsarna, jag slutade använda h1 för rubrikerna och följt den rekommendation som rubrik leden bör användas för att förmedla dokumentets struktur istället.

Förbättrad Navigering Med Tangentbordet

Som den mest interaktiva delen på plats, menyn var förvånande fokus för min granskning. Design dikterar att de navigering lådan ska uppföra sig som en dialog, ett gränssnitt mönster som tar med sig ett antal antaganden. Dessa beskrivs i detalj i eBay SINNE mönster, men i huvudsak en dialogruta som drar bort fokus från andra element på sidan och är modal, bara element inom den kan användas när den är öppen.

Jag hade tidigare knåpat ihop olika bitar av JavaScript för att hantera fokus (att binda som på olika punkter som produceras udda bugg till exempel att inte dra fokus till det första elementet i dialogrutan), men hade försummat att ange menyn roll. Med fast dessa frågor (lägga till en roll=’dialog’ när menyn är öppen), Francis påpekade att skärmläsare kan fortfarande komma åt länkar utanför dialogrutan när den var öppen. I macOS Berättarröst till exempel, genom att trycka på CTRL + OPT + CMD + L för att navigera på länkar i menyn, skulle i själva verket kunna meddela varje länk på sidan.

Lösningen var att markera allt utanför dialogrutan som “inaktivt”. Rob Dodson beskriver detta i detalj i sin video Tillgänglig Modala Dialogrutor. Genomförandet av detta kan vara lite krångliga, men ett förslag om att införa en inert attribut skulle göra det lättare att hantera. Under tiden, ger förslaget en polyfill så att du kan använda den här funktionen idag.

Jag har funnit att genom att tänka på ett gränssnitt i form av gemensamma interaktionsmönster, och hur de bör fungera för att vara allmänt förstås, har hjälpt mig att undvika komplexitet och skriva mer robust kod. I själva verket, som att kliva in i en värld av tillgänglighet har upptäckt en uppsjö av användbara resurser, med välskrivna JavaScript exempel en gott. Med tanke på min svåra relation med webben programmeringsspråk, dessa har visat sig ovärderlig.

Korrekt Märkning Element

En bra mängd av tillgänglighet kommer ner till märkning saker att förlita sig på utseende ensam för att förmedla mening. Mycket som alt-attribut gör det möjligt för oss att beskriva bilder, aria-etikett (och sina relationer) utöka denna förmåga till andra element.

Navigering komponent som tillåter användare att flytta mellan artiklar i en serie.

Här är markup jag var med i navigeringen element som tillåter användare att gå igenom tidigare och kommande artiklar inom en rad:

<div class=”c-rail-nav”>
<a rel=”prev” href=”/2016/vi-behöver-för-att-prata-om-teknisk-skuld/”
data-sekvens-title=”Vi Måste Prata Om Teknisk Skuld”>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ roll=”img”>
<sökväg d=”M50 100l85 85 7-7-78-78 78-78-7-7″/>
</svg>
<span class=”u-hidden”>Föregående artikel</span>
</a>

<a rel=”next” href=”/2016/what-the-heck-är-inclusive-design/”
data-sekvens-titel=”Vad Sjutton Är Inkluderande Design?”>
<span class=”u-hidden”>Nästa artikel</span>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ roll=”img”>
<sökväg d=”M150 100l-85 85-7-7 78-78-78-78 7-7″/>
</svg>
</a>
</div>

Samtidigt som jag hade förutsatt text innehåll för dessa länkar, denna del hade fortfarande ett antal frågor:

  • Ingen antydan gavs om den roll dessa länkar spela och deras förhållande till varandra.
  • Med roll=’img’ på SVG-ikoner, men som inte tillhandahåller all tillgänglig namn, var besläktad med bland annat bilder utan alt-attribut.
  • Användbar information, i det här fallet titeln på föregående och nästa artikel, som var gömd i en data – attribut. Detta attribut används i stylesheet för att lägga till innehåll som visas i animerade ‘lappar’ som visas på hover:

.c-rail-nav a[rel=föregående]:hover::efter {
innehåll: “Tidigare: ” attr(data-sekvens-titel);
}

.c-rail-nav a[rel=next]:hover::efter {
innehåll: “Nästa: ” attr(data-sekvens-titel);
}

Meningsfullt innehåll i CSS? Detta borde ha varit en röd flagga. Jag ändrade denna del enligt följande:

<nav class=”c-rail-nav” aria-label=”Artiklar”>
<a rel=”prev” href=”/2016/what-the-heck-är-inclusive-design/”
aria-label=”Previous: Vi Måste Prata Om Teknisk Skuld”>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ tabbindexvärden=”false” aria-hidden=”true”>
<sökväg d=”M50 100l85 85 7-7-78-78 78-78-7-7″/>
</svg>
</a>

<a rel=”next” href=”/2016/what-the-heck-är-inclusive-design/”
aria-label=”next (Nästa): Vad den Heck Är Inkluderande Design?”>
<svg width=”20″ height=”20″ viewBox=”0 0 200 200″ tabbindexvärden=”false” aria-hidden=”true”>
<sökväg d=”M150 100l-85 85-7-7 78-78-78-78 7-7″/>
</svg>
</a>
</nav>

Det första jag gjorde var att ge denna uppsättning av länkar på en etikett. Jag ursprungligen välj Artiklar navigering. Men i tester VoiceOver skulle meddela: navigering, Artiklar navigering. Som nav element redan beskriver den roll, vi behöver bara ge ytterligare information om den typ av navigering.

För det andra, på inrådan av Francis, jag har lagt tabbindexvärden= “false” till alla inline SVG-markup. Detta är på grund av en bugg i IE11 där SVGs är tangentbordet tabbindexvärden som standard.

Märkning av SVG-ikoner, jag hade två val. Jag kan antingen flytta den dolda texten innehåll på dessa ikoner med aria-etikett, eller ta bort dem från tillgänglighet träd helt och hållet med hjälp aria-dolda. I med tanke på det andra alternativet, som jag insåg att jag kunde slå ihop den dolda texten med att i data – attribut, och använda detta i kombination med information inom en aria-etikett attribut. Helt plötsligt, mitt CSS blev mycket enklare:

.c-rail-nav a:hover::efter {
innehåll: attr(aria-märkningen).
}

Tillgänglig koden är användbar kod.

Med tanke på den Fonetiska Erfarenhet

Att navigera på webbplatsen med hjälp av en skärmläsare leda till mig att göra några andra små förändringar. Till exempel ett par länkar på webbplatsen är bland annat en höger-pilen, en visuell blomstra som skapats med hjälp av följande CSS:

.c-fortsätter::efter {
innehåll: ‘203A’; /* Enda Pekar åt Höger Vinkel Citattecken */
}

Men skärmläsare normalt meddela genererat innehåll. När dessa länkar var att läsa ut, du skulle höra nonsens som detta:

länk, fler artiklar av drew enda pekar åt höger vinkel citattecken.

Lägga till tala; ingen hade någon effekt (CSS ljudmässiga egenskaper har lite stöd). Men jag kunde skapa en liknande pil med hjälp av CSS gränser:

.c-fortsätter::efter {
display: inline-block;
vertical-align: middle;
höjd: 0.375 em;
bredd: 0.375 em;
gränsen: 0.1875 em solid;
border-color: currentColor currentColor transparent transparent.
förändra: rotera(45deg);
innehåll: “;
}

Fortsätta länkar innan och efter förbättringar. Medan de ser likadana ut, den reviderade design låter mycket bättre.

Jag har också gjort förbättringar till styling av författaren namn i artikel sammanfattningar. Ursprungligen var dessa särskiljas från resten av utdrag av styling dem som versal text. Francis påpekade att vissa skärmläsare kommer att stava ut versaler (oavsett om de visas i HTML eller har ändrats av CSS) om de inte stava ett känt ord. Till exempel Berättarröst och NVDA har problem med Chris Coyier efternamn, så att hans namn skulle läsas upp som Chris C-O-Y-I-E-R. enkel lösning var att skilja namnen med hjälp av modig text istället.

Om jag är ärlig, jag har varit lite arrogant i det förflutna, tänker på att med hjälp av semantisk uppmärkning och progressive enhancement, jag behöver inte oroa sig alltför mycket om tillgänglighet. När du använder rätt element, och med tanke på ett gränssnitt inte bara i visuell form är viktigt, detta är den absolut minimum. En förståelse för olika tekniska hjälpmedel, och viljan att testa med dem, är lika viktigt.

Se Över De Allmänna Användbarhet

Funderar på tillgänglighet fick mig att förbättra den övergripande användbarheten.

För detta år i rad artiklar, som vi inte längre länk till författarens webbplatser från artikel utdrag. Detta historiska kvarleva var dåligt löst tidigare, om du råkade klicka på författarens namn du skulle tas till deras hemsida, inte den artikel som du skulle förvänta sig. Vi ingår även kommentar räknas som var knutna till kommentaren på artikeln sida (vilket i sig är kopplad till ett separat kommentarer sida). Galenskap!

Nu, varje artikel har en koppling till artikeln. En hemsida som en gång inblandade tabb genom 24×3 länkar, är nu mindre bullriga och mycket lättare att navigera för alla.

Andra finesser ingår att se webbplatsen är lyhörda när det gäller höjd samt bredd, se menyn navigering kan avsättas när du klickar utanför den, och en översyn av de övergripande prestationerna. Dessa kan inte anses tillgänglighet förbättringar, men jag är inte så säker på det. Att påstå att detta skulle vara att tänka tillgänglighet är en helt separat oro. I själva verket, att göra förändringar som gynnar en grupp av användare normalt kommer att gynna alla.

Att skapa något nytt alltid kommer att väcka uppmärksamhet och beundran, men det är en under-firade adeln i att förbättra det som redan finns. Även om inte alla förändringar kan vara visuella, de kan ha lika stor effekt. Jag vet att hade vi bestämde oss för att omforma platsen detta år, många av dessa förbättringar skulle inte ha gjorts. Förhoppningsvis, denna översikt kommer att uppmuntra dig att titta på dina egna projekt och tänka på att liknande förändringar du kan göra.

Att ha en växande medvetenhet om problemen, och att öka din kunskap om de verktyg som finns tillgängliga är en förutsättning för att arbeta på webben. Dock inte hålla på att kunskap sparas för framtiden, om du kan, gå tillbaka och korrigera dina äldre projekt också.