3.2 Implementation
4.2.5 Tillgänglighetsarbete med Microsoft Accessibility Insights
Microsoft Accessibility Insights, MAI:s, assessment-funktion användes på samtliga vyer i applikatio- nen. Utvärderingen bestod av både automatiska och hel- och halvmanuella tester. Nedan beskrivs de åtgärder som gjordes efter MAI:s feedback.
4.2.5.1 Dynamiska aria-labels
En av ändringarna vi gjorde utifrån MAI var att lägga till dynamiskt genererade aria-labels på de knappar som finns för olika lägenheter på vyn ‘Mina sidor’, både för de lägenheter som användaren intresseanmält sig på och för de annonser som användaren laddat upp. Genom användande av aria67skapas ett objekt som kan läsas upp med hjälpteknik. Istället för att skärmläsaren läste upp till exempel ‘Mer info’ och ‘Redigera annons’, läste den efter denna justering upp saker som ‘Mer info om Vallavägen 4’ och ‘Redigera annons för Västanåvägen 27’, där adresserna som lästes upp hängde ihop med just den lägenhet som knapparna hörde till. Informationen som skärmläsaren kommer åt på ‘Mer info’-knapparna visualiseras i figur 4.13.
4.2. Implementation
Figur 4.13: Knappen för mer info efter implementation av dynamiska aria-labels.
Dynamiken i knapparnas aria-labels fungerade genom att vi via JavaScript skickade infomation på HTML-form som inkluderade adressen för den aktuella lägenheten. Bootstrap-kort med informa- tion om en specifika lägenheter lades till i HTML-koden tillsammans med aria-labels med hjälp av JavaScripts append-funktion, enligt nedan.
1 $("#<container-id>").append(<HTML-kod>)
När append-funktionen användes för att skicka information om knappar tillhörande specifika lä- genheter inkluderades alltså en sträng som innehöll rätt information. JavaScript-koden som möj- liggjorde detta följde formatet som visas nedan.
1 ’<a class="btn btn-primary" href="/ad&id=’+ad.id+’" role="button"
2 aria-label="Mer info om ’+apartment?.address+’">Mer info</a></div>’
4.2.5.2 Skip-links och landmarks
Ytterligare tillgänglighetsbrister som pekades ut av Microsoft Accessibility Insights var avsaknaden av skip-links. MAI-testerna påvisade även avsaknaden av vissa ARIA-landmarks, till exempel main. Tillgänglighet med hjälp av skip-links och landmarks faller under WCAG-kriteriet 2.4.18, med syftet att underlätta navigationen på webbapplikationen genom direkt tillgång till det primära innehållet på varje vy. Skip-links implementerades genom att skapa en länk som första element i varje vy som länkar till vyns huvudinnehåll. Detta är relevant för att kunna hoppa över element som upprepas mellan vyer, till exempel navbaren. Länken är dold grafiskt med CSS och är endast åtkomlig med tab-funktionen och kan därför användas med skärmläsare utan att vara synlig för seende använda- re.
I samband med att detta åtgärdades lade vi även till ett dolt h1-element på startvyn med texten ‘Startsida för Subbo’ för att en användare med skärmläsare ska kunna förstå vad för typ av vy som visas, trots att vi valt att inte ha några synliga titlar som talar om vad det är för typ av vy. Vi har bedömt att det utifrån design och innehåll är tydligt för användare utan synnedsättning att startvyn är just en startvy; Detta gäller däremot inte för icke seende användare, varför den dolda h1-rubriken ökar tillgängligheten för dessa användare.
1 <div id="skiptomain"><a href="#wrapper">Hoppa till huvudinnehall</a></div>
8W3C. URL: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html. (hämtad 2021-
4.2. Implementation
4.2.5.3 Tillgängliga bilder
MAI pekade ut vilka bilder som saknade alt-taggar, och gav även påminnelser om att alla bilder som inte bidrar med information ska markeras med decorative genom att tilldelas en tom alt-tag, vilket vi inte hade gjort tidigare.
För de olika bilderna i annonsen lade vi till alt-taggar som beskrev att bilden i fråga föreställde en bostad och på vilken adress bostaden låg, enligt nedan. I figur 4.14 visualiseras vad en skärmläsare läser upp när bilden är i fokus. Detta kan jämföras med innan tillgänglighetsanpassningarna, då ingen information förmedlades till skärmläsaren annat än att fokus låg på en bild, enligt figur 4.15. 1 ’<img src="’+ apartment_image_src +’" alt="bild pa bostad ’ + apartment?.address + ’
" class="d-block w-100 card-img-top">’
4.2. Implementation
Figur 4.15: Vad skärmläsaren läser upp för användaren när en bild utan alt-tagg är i fokus.
När det kom till Subbo-loggan så ansåg vi att den inte tillförde någon information och markerade den således som dekorativ genom att ge den en tom alt-tag, enligt nedan.
1 <img src="assets/img/subbologo.png" alt="" style="width: 76px;">
4.2.5.4 Nåbara knappar
En annan upptäckt vi gjorde till följd av MAI-analysen var att knapparna ‘Redigera annons’ och ‘Redigera profil’ inte gick att ta sig till genom att navigera webbapplikationen med tab-knappen. Felet orsakades av hur knapparna var skrivna. De knappar som inte gick att navigera till med tab- funktionen var länk-element av typen ‘button’, som inte innehöll en länk i href-attributet, enligt kodraden nedan.
1 <a class="btn btn-secondary" id="edit-ad-btn" >Redigera annons</a>
Dessa länkar blev utformade på detta sätt för att de till en början länkade till en annan del av web- bapplikationen, men sedan skrevs om som rena knappar. Då de skrevs om togs href-elementet bort från länken, vilket resulterade i att knappen fungerade som vanligt vid användning av muspekare, men inte vid användning av tangentbord. Felet åtgärdades genom att göra om länk-elementet till ett button-element enligt nedan.
1 <button class="btn btn-primary id="edit-ad-btn" aria-label="Redigera annons for’+ ad .apartment?.address +’" >Redigera annons</button>
Även knapparna ‘Se tillgängliga bostäder’ och ‘Hyr ut din bostad’ som finns mitt på applikationens startvy hade tillgänglighetsproblem som upptäcktes i Microsoft Accessibility Insights och sedan åt- gärdades. Knapparna är designade som en vit, rektangulär ram med en text i mitten. Problemet var att de vita ramarna var skrivna som button-element medan texten på knapparna var länk-element enligt exemplet i kodraden nedan.
4.2. Implementation
1 <button class="btn btn-outline-light btn-lg"><a href="/create-advert" type="button" style="color: rgb(248, 249, 250); margin-left: 0px;">Hyr ut din bostad</a></ button>
Detta gjorde att både ramarna (button-elementen) och texten (länk-elementen) inkluderades i tab- ordningen, men endast länkarna var klickbara. Vid navigering med skärmläsare innebar detta att när fokus var på ramarna till knapparna sa skärmläsaren att man var på en knapp men det hände ingenting när knappen klickades på. Problemet löstes genom att ta bort länk-elementen och göra button-elementen klickbara enligt exemplet i kodraden nedan.
1 <button class="btn btn-outline-light btn-lg" onclick = create_ad() type="button" style="width:280px; height:60px; border:3px solid; border-radius: 5px; color: rgb(248, 249, 250); margin: auto; ">Hyr ut din bostad</button>
4.2.5.5 Sidtitlar
Ännu en åtgärd som vidtogs till följd av MAI var att lägga till sidtitlar för varje vy. Sidtiteln är namnet som skrivs ut på fliken i webbläsaren för att det ska vara tydligt var i webbapplikationen man är, se figur 4.16. Detta implementerades i URL-routingen på klientsidan. När en vy länkas till genom vår routing med page.js ändras sidtiteln med hjälp av JavaScript och document.title enligt följande: 1 document.title = "Subbo - Hem";
Figur 4.16: Sidtitel för hem-vyn efter tillgänglighetsarbete.
4.2.5.6 Formvalidering
MAI uppmärksammade oss även på att det vid ifyllnad av formulär ska finnas en kontroll som gör att det inte inte går att lämna fel informationen eller hoppa över obligatoriska fält i formuläret. Implementationen av detta gjordes med hjälp av det automatiska system för HTML-formulär som finns inbyggt i webbläsaren för att säkerställa att ett fält inte lämnas tomt. Detta implementeras ge- nom att lägga till ‘required’ för varje fält som är obligatoriskt. Dessutom specificerades det korrekta formatet för inmatning av postnummer som användaren uppmanades använda genom att lägga till ett mönster som användarens inmatning var tvungen att följa, se exempel i kodraden nedan. 1 <input type="tel" pattern="[0-9]{5}" class="form-control" id="editZip" value=""
autocomplete="postal-code" autocomplete="postal-code" placeholder="12345" required oninvalid="this.setCustomValidity(’Ange postkod p formatet 12345’)" onchange="this.setCustomValidity(’’)">