Accessibility on the web I – semantic control elements

Until a few years ago, most websites were designed to be operated via a mouse on a PC or notebook. Efforts to achieve accessibility for the blind, the visually impaired, the deaf or the motorically or cognitively disabled were deemed commendable, but not absolutely necessary. Even today, there are still decision-makers and developers who work according to this principle. Based on examples from our own experience in the context of developing ETH-Bibliothek’s Knowledge Portal and the Website of the Network of Libraries and Information Centres in Switzerland (NEBIS), we aim to illustrate that the reality on the web compels you to adopt a different approach. After all, accessibility – i.e. unhampered access to web contents – is tightly intertwined with aspects of the usability (user-friendliness) of the mobile web.

Figure 1: The Knowledge Portal of ETH-Bibliothek and the Website of NEBIS Network

As an example, this article examines a fundamental semantic control element: the button. It can trigger a search or submit a form, for instance. So far, that’s self-explanatory. But what happens if a magnifying glass in the search field seems more visually appealing to a web designer? He integrates the image of a magnifying glass, but not as a button, and enables the search to be launched via Javascript constructs when the enter key is pressed in the search field. Visually, it’s elegant.

Figure 2: the magnifying glass in the Knowledge Portal’s search field

The drawback with this approach is that it renders software programmes such as screen readers – i.e. reader applications for the blind and visually impaired – unusable as alternative user interfaces. Moreover, there are other implications. We are currently witnessing the success story of mobile terminal devices that work with touchscreens. We might encounter the magnifying glass again here, designed accordingly by the web designer. Touching the image might well leave marks on the display but the search is not launched, which baffles the user – an unnecessary nuisance that could have been avoided by implementing a button, especially since semantic buttons can also look like a magnifying glass.

Real buttons are also responsible for another kind of “magic” behaviour. Even die-hard mouse-users usually utilise a login form in such a way that they press the enter key directly after entering the password to register. Turning to our visually oriented web designer again, he has taken an attractive image of a button and embedded it in a link (<a>-Element). If you click on the image with the mouse, it works fine. The alternative use of the enter key after filling in the login form, however, remains off limits. This also has consequences for the user-friendliness of the display keypad on Smartphones or tablets. An entry field “Open” is integrated in their keypads, which users can select immediately after typing (e.g. the password). This function, too, can only be used if a real button has been utilised.

Figure 3: example of an iPhone Display keypad

For many, operating a page with a keypad might be an exception. For others, however, it’s a necessity. A wealth of assistive technologies for web users with motoric or visual disabilities are based on keypad controls. Besides, it is also apparent that, in light of the growing prevalence of mobile terminal devices, fingers are increasingly replacing the mouse as the control element for touchscreens. These devices also offer new digital participation possibilities for blind people with the screen reader VoiceOver.

The Knowledge Portal upgrade and the reconstruction of the NEBIS website have shown us that it is necessary to already define accessible web design as a requirement in the planning phase for web projects. Ideally, the interplay between the website structure, content, appearance and functionality will then be considered throughout the entire realisation process, which means extra effort and expense. Ultimately, however, this already provides the access aids that people with a disability need to understand the contents of and navigate around a website as soon as it “goes live”.At the same time, this enables certain usability problems involved in the mobile use of web applications to be ruled out from the start.

Author: Bernd Uttenweiler
Coauthor: Maximiliane Okonnek


This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International Public License.
CC-BY-SA

DOI Link: 10.16911/ethz-ib-1008-en

Comments
  1. Sven Jenzer
  2. Maximiliane Okonnek
  3. jordan shoes
  4. supreme new york
  5. yeezy boost
  6. air jordans
  7. off white jordan 1
  8. hermes birkin
  9. off white clothing
  10. spongebob kyrie 5
  11. supreme outlet
  12. russell westbrook shoes
  13. hermes birkin
  14. golden goose
  15. hermes belt
  16. kevin durant shoes
  17. kd12
  18. curry 7 sour patch
  19. retro jordans
  20. yeezy
  21. air jordan
  22. kyrie 6
  23. golden goose outlet
  24. hermes birkin
  25. kyrie 6 shoes
  26. stone island sale
  27. golden goose
  28. kyrie irving shoes
  29. golden goose sneakers
  30. chrome hearts online
  31. jordans
  32. supreme clothing
  33. off white clothing
  34. moncler outlet
  35. giannis antetokounmpo shoes
  36. Royal CBD
  37. washington dc
  38. jordan 6
  39. Tattoo
  40. actualidad
  41. información
  42. meet mexico swinger
  43. 부커취
  44. bape clothing
  45. click here
  46. for additional information
  47. for more info
  48. Best Reviews Products
  49. Best Product Reviews
  50. C_THR81_2005 practice test
  51. cao su giam chan
  52. besprocentnye zajmy
  53. supreme sweatshirt
  54. kyrie 4
  55. w88 lite
  56. balenciaga sneakers
  57. 관전클럽
  58. designer lighting
  59. 온라인카지노
  60. Google My Business Australia
  61. balenciaga shoes
  62. cyprus
  63. profile
  64. click here
  65. see the website
  66. explore
  67. see more
  68. more details
  69. 토토사이트
  70. SEO Service List
  71. map
  72. latina cam girls
  73. kyrie 3
  74. longchamp handbags
  75. profile
  76. Carpet Cleaning by Steam
  77. for details
  78. see this website
  79. Tattoo
  80. Tattoo Design
  81. moncler jackets
  82. hondaqq
  83. cursos online
  84. supreme clothing
  85. more about here
  86. Schilders Den Haag
  87. Lines Don't post
  88. Credit Sweep Scam
  89. have a look at
  90. instapot reviews
  91. Smart iptv
  92. yeezy
  93. MEYD-630
  94. IELTS Preparation in Karachi
  95. venue finder
  96. curry 6 shoes
  97. Tattoo Artists
  98. click here
  99. Pin up casino
  100. wsop game 2019
  101. supreme clothing
  102. on thi giay phep lai xe b2
  103. 바카라사이트
  104. nike react
  105. yeezy boost 350 v2
  106. 더킹카지노
  107. C_ACTIVATE12 questions
  108. Live Murder
  109. Sex with me
  110. los angeles townhouse
  111. ugearsmodels.us
  112. casino online
  113. sewa kipas blower
  114. kevin and david amazon
  115. kevin david crowe
  116. beste apparaten met koffiepads
  117. for more information
  118. click for more
  119. jordan retro
  120. supreme hoodie
  121. longchamp outlet
  122. hermes belt
  123. retro jordans
  124. remont noutbukov Almaty
  125. hire game developers
  126. 바카라
  127. xvideos
  128. more details
  129. South Skip Bins
  130. Digital Marketing
  131. jordan shoes
  132. a bathing ape
  133. giannis antetokounmpo shoes
  134. stone island
  135. golden goose
  136. lebron 17 shoes
  137. yeezy
  138. golden goose
  139. access35바카라사이트
  140. Salvatore
  141. German
  142. jordan 12
  143. moncler
  144. hermes bag
  145. yeezy 700
  146. yeezy boost
  147. giannis antetokounmpo shoes
  148. this website
  149. buy women clothes online
  150. onderwatercamerakopen.com
  151. may lam cua nhom
  152. see more
  153. builders in Halifax
  154. stiiizy pink acai
  155. stiiizy pod
  156. polizas de seguro de autos
  157. lose weight
  158. May cat nhom
  159. austdoor tphcm
  160. more information
  161. beste onderwatercamera kopen
  162. youtube gameplay
  163. yeezy
  164. golden goose outlet
  165. yeezy supply
  166. supreme hoodie
  167. curry shoes
  168. nevada towing
  169. C_TS460_1909 practice test
  170. Tattoo Shops
  171. balenciaga sneakers
  172. jordan shoes
  173. longchamp bags
  174. golden goose outlet
  175. longchamp
  176. url
  177. info

Leave a Reply

Your email address will not be published.