Accessible button components for mobile device screen
Choe, Jaeryeong (2024)
2024
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202404298177
https://urn.fi/URN:NBN:fi:amk-202404298177
Tiivistelmä
As the European Accessibility Act (EAA) came into effect in 2019, web accessibility has been gaining more attention among designers. This thesis will help designers provide accessible button components for mobile applications that meet the most recent Web Content Accessibility Guidelines (WCAG) 2.2 released in October 2023.
This thesis was done with a thesis partner, Cargotec Finland Oy, which is a world leading corporation providing cargo and load handling products. Overall, the thesis consists of two parts, research and practical implementation in order to apply research findings into a mobile application project of Cargotec Finland Oy. The purpose of the thesis was to research how to improve accessibility of user interface (UI) buttons for mobile applications and create reusable components in a prototyping tool, Figma, according to WCAG 2.2, existing design systems, literature, and journals.
The results suggest that accessibility of UI buttons can be affected by six aspects, target size, color contrast, color use, states, visual hierarchy, and composition. In terms of practical implementation two features of Figma, component properties and variables, were mainly adopted. Component properties were applied to produce flexible button components in an efficient way. As a result, buttons in the project were kept consistent, being capable of supporting variants in diverse types, states, and structure. Also, variables feature allowed to build color tokens and streamline creating multiple UI color modes.
This thesis was done with a thesis partner, Cargotec Finland Oy, which is a world leading corporation providing cargo and load handling products. Overall, the thesis consists of two parts, research and practical implementation in order to apply research findings into a mobile application project of Cargotec Finland Oy. The purpose of the thesis was to research how to improve accessibility of user interface (UI) buttons for mobile applications and create reusable components in a prototyping tool, Figma, according to WCAG 2.2, existing design systems, literature, and journals.
The results suggest that accessibility of UI buttons can be affected by six aspects, target size, color contrast, color use, states, visual hierarchy, and composition. In terms of practical implementation two features of Figma, component properties and variables, were mainly adopted. Component properties were applied to produce flexible button components in an efficient way. As a result, buttons in the project were kept consistent, being capable of supporting variants in diverse types, states, and structure. Also, variables feature allowed to build color tokens and streamline creating multiple UI color modes.