Tässä tehtävässä tärkeintä oli laittaa sivun otsikko h1-tagien sisään sekä lisätä jokaiselle lomake-elementille (paitsi submit-napille) elementtiin viittaava label. Tehtävän alkuperäisessä koodissa ollut placeholder on myös poistettu ja korvattu labeleilla.
Verkkokaupassa oli tärkeää laittaa kuviin alt-tekstit. Yläpalkissa olevan kaupan logon paras alt-teksti on "verkkokauppa" ja kuva on vielä hyvä laittaa h1-tagien sisään. Muutenkin sivun otsikkotasoille oli syytä tehdä jotain.
Tämä oli typerä tehtävä. Urhoollisesti monet sitä kuitenkin tekivät. Tehtävän laittamisen jälkeen löysin ARIA:sta täydellisen ratkaisun tähän taulukolla tehdyn layoutin ongelmaan: role="presentation". Eli, vaikkei ARIA vielä ollutkaan 2. luennon asioita, en edes yrittänyt tehdä mallivastausta ilman tätä rolea. Käytännössä siis koodiin ei tarvitse tehdä mitään muuta kuin lisätä jokaiseen sivun table-elementtiin role="presentation", niin ruudunlukuohjelma ei lue taulukoita enää taulukoina, mutta asettelu on ennallaan. Sen lisäksi toki muutamasta h-elementistä on apua.
Viestilistassa tärkein asia oli lisätä viestin näyttävälle "painikkeelle" role="button". Sen lisäksi, jotta fokus oikeasti siirtyy ilmestyvään tekstiin, viestien div-elementtiin tarvitaan tabindex="-1".
Koska tehtävän "valintalista" muistuttaa toiminnaltaan radiobuttoneita, tärkeintä tässä tehtävässä oli lisätä ul-elementille role="radiogroup" ja jokaiselle li-elementille role="radio". Sen lisäksi li-elementeillä pitää olla aria-checked-attribuutti, joka kertoo ruudunlukuohjelmalle, mikä vaihtoehdoista on valittuna. (Vieläkään en onnistunut saamaan JavaScriptiä toimimaan, jos laitoin se JavaScript-paneeliin, joten se on HTML:n mukana.)
Tässä vielä malliksi, kuinka saavutettavuuden takia välttämättömiä aria-attribuutteja voi käyttää myös CSS-selectoreina, jolloin lista-elementeillä ei tarvitsekaan olla class-attribuuttia eikä javascriptissä tarvitse muuttaa kuin aria-checked-attribuutin arvoa.
Verkkokaupan navigaatiossa olevat "alimenut" (dropdown menu) saa tehtyä saavutettavasti JavaScriptin kanssa. Kun alimenun sisältävää valikkokohdetta klikkaa, lisätään alimenun sisältö -diville luokka "show". Näin alimenut saa näkyviin näppäimistörajapinnankin kautta.