By Haoyang Qin
This article will provide you the basics of web accessibility and showcase the web accessibility plugin my teammate (Jing Min) and I have made. Have you ever learned about web accessibility? There are many people in this world who use assistive tools to enhance their web browsing experience – let’s take a deeper dive.
Introduction to Web Accessibility
According to the World Report on Disability provided by the WHO, the total number of people worldwide with a disability is one billion, 61 million of which are adults in the United States.
People with disabilities can have various difficulties in navigating the web. Those who are color blind can be unable to see the content of a web page because of its color. Blind people cannot understand the content of a web page at all without the assistance of reading tools. For people who have poor vision, options to enlarge the text or the ability to switch to a high-visibility cursor can help them locate the content they need accurately.
That’s why web accessibility is so important for web page development. And by designing and coding web pages to be usable by people with disabilities, you are also improving the usability of the site for all users, thus improving overall professionalism.
Therefore, Jing and I decided to develop an accessible web browser plugin for people who have difficulty navigating the web. The plugin can be used with any web page – feel free to see a demo of it starting at 4:00 of this video!
Design
Our web page contains six essential web accessibility functions:
- “Voice Switch” & “Voice Speed” for screen reading
- “Color Combo” for changing the page’s color to black and white
- “Subtitle” for providing content to people who are deaf or hard-of-hearing
- “Font Size” for making text bigger
- “High Visibility Cursor” to reduce the possibility of dizziness and mild epilepsy caused by losing track of the cursor
Considering the operational difficulties for some people, we designed our plugin so users can use either their mouse or the Tab / Shift + Tab keys on their keyboard to navigate through our website. By clicking the buttons on our web page, you will experience the power and effectiveness of web accessibility.
The details of how these features were developed will not be described here, as things get very technical – if you have a background in coding, though, feel free to view the latter part of this page for an in-depth explanation.
Making it Multilingual with 24Ways
By using the 24Ways Javascript procedure, we can localize web pages into multiple languages. For localization of the web page, functions in the page can also be switched to the corresponding language as the language of the page is switched. For example, Chinese will read Chinese when screen reading.
Through 24Ways, we created json files for the target languages, defining every feature and localizing it uniformly.
Summary
Efficient cooperation with my teammate made the whole project development process very smooth. The final result is displayed in the form of a web page, where users can experience different web accessibility functions by clicking buttons on the web page. At the bottom of the page, you can freely switch the source language from English to Chinese or German.
This is our bold attempt and successful experiment for web accessibility. At present, the prototype of the plugin has been established, where it can be used normally for a variety of web page types. Accessibility plugins can help make web pages more intelligent, but the project still needs more attention and further development.
We hope that in the near future, more and more people will benefit from the development of smart web page plugins, and more companies will be aware of and pay attention to the development of barrier-free plugins.
Feel free to look at the GitHub repository for our plugin here!
References
- “Accessibility Basics.” Usability.gov, Department of Health and Human Services, 26 Feb. 2015, https://www.usability.gov/what-and-why/accessibility.html.