Innovative Web Design and Accessibility : How are accessibility guidelines considered with aesthetic driven web design?
Liu, Oskari (2025-02-21)
21.02.2025
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi-fe2025022113243
https://urn.fi/URN:NBN:fi-fe2025022113243
Tiivistelmä
Aesthetic approach to web design provides a visually pleasing experience for the user. Some exploratory features can also enhance the experience, leaving a lasting image on the user. However, these features might significantly hinder the accessibility of the said websites, re-sulting in a dilemma between the visual aspects and accessibility guidelines. The aim of this master’s thesis is therefore to investigate the potential conflict between aesthetically inspired web design and web accessibility. A total of ten websites are analyzed using an automated accessibility checker tool. The sample pages are selected using a framework, ensuring their “innovativeness” to be fit for the study. The results are then examined together with the design principles and current design trends, from where an answer to the following research question can be formulated: “How are accessibility guidelines considered with aesthetic driv-en web design?”.
The thesis starts with a theoretical portion covering the two main themes of this thesis, web design and accessibility. Web design is further divided into an aesthetic approach and an accessibility approach. The theory around web accessibility revolves around WCAG guide-lines and success criteria. The research is conducted through qualitative content analysis, which allows for a flexible approach to the research question. It is also suitable to the ex-ploratory nature of the research, as this study enters a fairly understudied research area at the intersection of innovative web design and accessibility. The two aforementioned themes form the research lenses utilized in this thesis. In the data analysis phase, the findings are analysed through these lenses, resulting in a comprehensive answer to the proposed re-search question.
The key findings indicate that a slight trade-off between innovative web design and accessi-bility exists. First, the analysis through the design principle lens reveals some prevalent trends. Visual design principles are found to be dominant, while less attention is paid to in-teraction principles. An automated accessibility evaluation tool is subsequently run on the sample webpages. The results provide data on both the quantity of the accessibility viola-tions as well as their types. Findings show that the most frequent violations are related to visual features, particularly in the form of contrast, navigation and non-textual content. As a result, the interactability of the pages is found to suffer from this. Lower interactability in turn affects the accessibility of the pages.
This study is conducted with a limited sample size due to limited resources. With a larger sample size, multiple evaluation tools and potentially a user-testing phase, the results would be more conclusive. Future research is able to build upon the groundwork produced in this study. The dual-lens approach is found to be suitable for this kind of study and is replicable method for future. The framework for selecting the sample pages can also be utilised. Visuaalisuutta painottava verkkosuunnittelu kykenee tarjoamaan käyttäjälle uniikin tai muuten mieleenpainuvan käyttäjäkokemuksen. Hyödyntämällä erilaisia toiminnallisuuksia tai suunnitteluvalintoja, käyttäjiin pyritään vaikuttamaan, ja sitä kautta lisäämään sivun ki-innostavuutta. Tämänkaltainen suunnittelu saattaa kuitenkin heikentää sivun saavutetta-vuutta, johtaen ristiriitaan visuaalisen verkkosuunnittelun sekä saavutettavuuden välillä. Tämän työn tarkoituksena on tutkia tätä dilemmaa analysoimalla yhteensä kymmentä verk-kosivua automaattista tarkastustyökalua hyödyntäen. Otokseen päätyneet verkkosivut vali-taan tiettyjä kriteerejä käyttäen, jolloin varmistutaan sivustojen luonteen olevan tutkielman kannalta sopivat. Tuloksia peilataan sekä suunnitteluperiaatteisiin että ajankohtaisiin trendeihin, minkä pohjalta vastaus tutkimuskysymykseen saadan muodostettua: ”Nykyisten verkkosuunnittelutrendien vaikutus saavutettavuuslakien noudattamiseen”.
Tutkielma alkaa teoriaosuudella. Kaksi pääteemaa, verkkosuunnittelu sekä saavutettavuus käsitellään tässä osiossa perusteellisesti. Teoria saavutettavuudesta keskittyy WCAG saavu-tettuvuusohjeisiin ja sen sisältämiin kriteereihin. Verkkosuunnittelusta tunnistetaan sekä visuaalinen että saavutettavuuslähtöinen näkökulma. Tutkielma toteutetaan laadullista sisällönanalyysiä hyödyntäen. Metodi sopii työn jokseenkin eksploratiiviseen luonteeseen, antaen tutkimusprosessiin joustavuutta. Työn fokus visuaalisen verkkosuunnittelun sekä saavutettavuuden risteyskohdassa on suhteellisen vähän tutkittu aihealue, joten edellä mainittu metodi tukee tätä erinomaisesti. Tutkielman pääteemat muodostavat kaksi tutki-muslinssiä, joiden kautta tutkimuskysymykseen saadaan vastattua kattavasti.
Työn keskeisimmät tulokset osoittavat lievän negatiivisen yhteyden innovatiivisen verk-kosuunnittelun sekä saavutettavuuden välillä. Analyysivaiheessa tunnistetaan ensin vallitse-via trendejä verkkosuunnittelussa. Tutkimusotoksessa visuaaliset suunnitteluperiaatteet osoittautuvat dominoivan, kun taas vuorovaikutus- ja käyttäjälähtöiset periaatteet jäävät vähemmälle huomiolle. Automaattista saavutettavuustyökalua hyödynnetään niin ikään otoksen analysoinnissa. Tulokset osoittavat saavutettavuusongelmien painottuvan visu-aalisiin ominaisuuksiin, kuten kontrastiin, navigaatioon sekä ei-tekstilliseen sisältöön.
Tutkielman otoskoko on suhteellisen pieni johtuen rajallisista resursseista. Jatkotutkimuksia ajatellen otosta verkkosivuista olisi hyvä laajentaa. Toisen saavutettavuustyökalun lisääminen analyysivaiheeseen voisi lisätä tulosten painoarvoa ja vähentää niiden mahdollis-ta puolueellisuutta. Tässä työssä hyödynetty kahden tutkimuslinssin metodi osoittautui tutkimukseen sopivaksi, ja tulevaisutta ajatellen metodia on mahdollista replikoida.
The thesis starts with a theoretical portion covering the two main themes of this thesis, web design and accessibility. Web design is further divided into an aesthetic approach and an accessibility approach. The theory around web accessibility revolves around WCAG guide-lines and success criteria. The research is conducted through qualitative content analysis, which allows for a flexible approach to the research question. It is also suitable to the ex-ploratory nature of the research, as this study enters a fairly understudied research area at the intersection of innovative web design and accessibility. The two aforementioned themes form the research lenses utilized in this thesis. In the data analysis phase, the findings are analysed through these lenses, resulting in a comprehensive answer to the proposed re-search question.
The key findings indicate that a slight trade-off between innovative web design and accessi-bility exists. First, the analysis through the design principle lens reveals some prevalent trends. Visual design principles are found to be dominant, while less attention is paid to in-teraction principles. An automated accessibility evaluation tool is subsequently run on the sample webpages. The results provide data on both the quantity of the accessibility viola-tions as well as their types. Findings show that the most frequent violations are related to visual features, particularly in the form of contrast, navigation and non-textual content. As a result, the interactability of the pages is found to suffer from this. Lower interactability in turn affects the accessibility of the pages.
This study is conducted with a limited sample size due to limited resources. With a larger sample size, multiple evaluation tools and potentially a user-testing phase, the results would be more conclusive. Future research is able to build upon the groundwork produced in this study. The dual-lens approach is found to be suitable for this kind of study and is replicable method for future. The framework for selecting the sample pages can also be utilised.
Tutkielma alkaa teoriaosuudella. Kaksi pääteemaa, verkkosuunnittelu sekä saavutettavuus käsitellään tässä osiossa perusteellisesti. Teoria saavutettavuudesta keskittyy WCAG saavu-tettuvuusohjeisiin ja sen sisältämiin kriteereihin. Verkkosuunnittelusta tunnistetaan sekä visuaalinen että saavutettavuuslähtöinen näkökulma. Tutkielma toteutetaan laadullista sisällönanalyysiä hyödyntäen. Metodi sopii työn jokseenkin eksploratiiviseen luonteeseen, antaen tutkimusprosessiin joustavuutta. Työn fokus visuaalisen verkkosuunnittelun sekä saavutettavuuden risteyskohdassa on suhteellisen vähän tutkittu aihealue, joten edellä mainittu metodi tukee tätä erinomaisesti. Tutkielman pääteemat muodostavat kaksi tutki-muslinssiä, joiden kautta tutkimuskysymykseen saadaan vastattua kattavasti.
Työn keskeisimmät tulokset osoittavat lievän negatiivisen yhteyden innovatiivisen verk-kosuunnittelun sekä saavutettavuuden välillä. Analyysivaiheessa tunnistetaan ensin vallitse-via trendejä verkkosuunnittelussa. Tutkimusotoksessa visuaaliset suunnitteluperiaatteet osoittautuvat dominoivan, kun taas vuorovaikutus- ja käyttäjälähtöiset periaatteet jäävät vähemmälle huomiolle. Automaattista saavutettavuustyökalua hyödynnetään niin ikään otoksen analysoinnissa. Tulokset osoittavat saavutettavuusongelmien painottuvan visu-aalisiin ominaisuuksiin, kuten kontrastiin, navigaatioon sekä ei-tekstilliseen sisältöön.
Tutkielman otoskoko on suhteellisen pieni johtuen rajallisista resursseista. Jatkotutkimuksia ajatellen otosta verkkosivuista olisi hyvä laajentaa. Toisen saavutettavuustyökalun lisääminen analyysivaiheeseen voisi lisätä tulosten painoarvoa ja vähentää niiden mahdollis-ta puolueellisuutta. Tässä työssä hyödynetty kahden tutkimuslinssin metodi osoittautui tutkimukseen sopivaksi, ja tulevaisutta ajatellen metodia on mahdollista replikoida.