MyAbility: A Web Portal for Students with Challenge based on Web Content Accessibility Guideline 2.0

Abdul Aziz Hamzah, Zatul Amilah Shaffiei, Nor Hayati Abdul Hamid and Nurulnadwan Aziz, "MyAbility: A Web Portal for Students with Challenge based on Web Content Accessibility Guideline 2.0”, Annals of Emerging Technologies in Computing (AETiC), Print ISSN: 2516-0281, Online ISSN: 2516-029X, pp. 194-200, Vol. 5, No. 5, 20th March 2021, Published by International Association of Educators and Researchers (IAER), DOI: 10.33166/AETiC.2021.05.024, Available: http://aetic.theiaer.org/archive/v5/v5n5/p24.html. Research Article


Introduction
Number of people with challenge has been increasing rapidly around the world including Malaysia. As reported by Department of Social Welfare, in their annual report, there are 480,231 people with challenge registered in 2018 (Table 1). They are challenged differently including visual challenge, hearing challenge, speech challenge, learning challenge, multiple challenge, mental challenge, and physical challenge [1].
In Malaysia, the People with Disabilities Act [2] is the main Act that affects persons with challenge. The Act provides registration, protection, rehabilitation, advancement and well-being of person with challenge. To support the Act, there are numbers of non-profit organizations including government organizations offering services to facilitates people with challenges. Universiti Teknologi MARA for example, has taken a step to approve a policy regarding students with challenge based on five principles which are inclusivity, accessibility, equity, flexibility and equivalence [3] . Every member of Universiti Teknologi MARA has responsibility to fulfil right and provide support services to students with challenge. Preliminary investigation indicates that students with challenges in Universiti Teknologi MARA faced difficulties in accessing information [4]. Based on the interview and literature study that has been carried out it was found that a proper web portal that specifically provided according to the needs of student with challenges is insufficiently explored [5][6][7] [8]. Thus, a prototype of web portal namely MyAbility: Web Portal for Students with Challenge has been proposed in this study. It was developed based on Web Content Accessibility Guidelines 2.0 to ensure students with challenge have equal access similar to general students [9]. This study proposes to develop a web portal that inclusive to students with vision, hearing, speech, learning, and physical challenge as most of the higher learning institutions in Malaysia particularly Universiti Teknologi MARA faces difficulties to provide information accessibility to these types of challenge. The web portal has been developed based on three principles of Web Content Accessibility Guidelines (WCAG) which are perceivable, operable, and understandable in order to achieve accessibility content in MyAbility web portal.

Web Content Accessibility Guidelines 2.0
According to the guidelines of the World Wide Web Consortium (W3C), web accessibility refers to access to the web content by any user, irrespective of the browsing technology including people with challenge [9]. WCAG is set of guidelines to improve the web accessibility. The guidelines are produced by The World Wide Web Consortium that aims to provide a single shared standard for the accessibility of web content which able to meet the needs of individuals, organizations, and governments. The WCAG 2.0 has been published in 2008. WCAG 2.0 generally applies to more advanced technologies, easier to be used and understand compared to WCAG 1.0. The principles of WCAG 2.0 which are perceivable, operable, understandable and robust (POUR) is tabulated in Table  2. Data and user interface elements must be made available to users in ways they may interpret.

Operable
The user interface and navigation elements must be functional. Understandable The details and function of the user interface must be known.

Robust
Information must be sufficiently robust to be accurately understood by a wide range of user agents.
According to Table 3, there are expectations and quality requirements under each principle which help to address the need of students with challenge. There are 12 guidelines for web accessibility under WCAG 2.0. The guidelines are 1.1 to 4.1 which represents specific principles and description ( Table 2). Table 3. Guidelines of WCAG 2.0 based on POUR principles [9] Principle 1: Perceivable -The client must be aware of the data and user interface elements Guideline 1. 1 Provide text substitutes for any non-text material. Therefore, it can be adapted to other formats that users with challenges need (i.e. large print, braille, voice, signs, or a simplified language). Guideline 1. 2 Provide synchronized alternatives for multimedia elements. Guideline 1. 3 Build material that can be delivered in a variety of methods (i.e. spoken aloud, simplified design) without losing information or structure. Guideline 1.4 Making it easier for people with challenges to see and hear the content (i.e. separating the background from the background) Principle 2: Operable -User interface features and functionality must be user-operable Guideline 2.1 Render all the features available on the keyboard. Guideline 2.2 Provide enough time for users with challenges to read and use the content. Guideline 2. 3 Do not create content that is known to cause seizures. Guideline 2.4 Provide ways to help users with challenges to navigate, find information, and identify their location. Principle 3: Understandable -The client must understand the details and function of the user interface Guideline 3.1 Enable the users with challenges to read and understand text content. Guideline 3.2 Design Web pages appear and work in a predictable manner. Guideline 3.3 Assist users with challenges to prevent and correct errors. Principle 4: Robust -Material must be sufficiently robust to be accurately understood by a wide range of user agents Guideline 4.1 Maximize connectivity for current and future clients, including assistive technologies.
In the development of MyAbility web portal, the principles that have been applied are perceivable, operable and understandable. Guideline 1.4, 2.3, 3.1, and 3.3 have been applied in MyAbilty. Guideline 1.4 stated that the content must be distinguishable, make it easier for users with challenges to see and hear the content including separating the foreground and background. The use of colour is important particularly in terms of conveying information, indicating an action, prompting a response, or distinguishing a visual element. MyAbility web portal used different colour to separate the content and background. Next, Guideline 2.3 stated that the web pages do not contain anything that flashes more than three times in any one second period. Meanwhile, Guideline 3.1 stated that the web pages should make the text content readable and understandable. This include language used, reading level, and pronunciation. The developed MyAbility web portal used simple choice of words that are easy to read and understand by the students with challenge. Lastly, Guideline 3.3 stated that the web pages help user to correct mistakes and errors. Therefore, MyAbility web portal provides error identification that could assists the students with challenge to identify unintended errors.

Research Methodology
Web Development Life Cycle (WDLC) methodology has been utilized throughout the development of MyAbility Web Portal as it could minimize the production of time, organizes unstructured problem, and keep the users involves the entire life cycle of development [10]. There are five (5) phases involves which are (i) planning, (ii) analysis, (iii) design, (iv) development, and (v) testing.
The first step involves in WDLC methodology is planning. The main activities carried out are define the user needs, problem statement, objective, context, and significance of the web portal to the students with challenge. To complete the activities, interview, user persona, and literature review have been conducted with a respective person. A staff who manages the students with challenges in Universiti Teknologi MARA, Malaysia was involves in this study as the respondent. At this phase, this study gathered to identify the process of interaction with students with challenge. Furthermore, user persona method and interview have been carried out with three students with challenge to gathered the general requirements towards system in university. Next, literature review on related databases which is specific to identified keywords also have been conducted to investigate the user needs.
Next is analysis phase where the gathered data has been evaluated to determine the functional and non-functional specifications of the proposed web portal. Existing systems for people with challenges has been analysed and compared each other particularly in terms of accessibility design guidelines. At this phases, the identified design features were listed. They are text colour selection, text size alteration, contrast, language, keyboard accessibility, text reader, audio and video content transcript, background colour changer, and user personalization. These features help to determine the non-functional requirement that is accessibility element.
Then, in design phase, the use case diagram, user interface, database structure, and entity relationship diagram (ERD) has been focused to represent the analysis phase in detail. Microsoft Visio tool has been used to design the use case and ERD. As for user interface, Adobe XD has been selected as the designing tool. Thus, the deliverables of this phase are the use case diagram, ERD and web portal interface.
At the development phase, the MyAbility Web Portal was developed according to the identified design features. The development process includes the installation of a localhost on the computer to create a server. After that, the coding session begins to design user interface of the proposed web portal. The functionality was included to make sure the web portal can be used by the users. The programming language used for web development are phpMyAdmin, XAMPP, MySQL, HTML, and JavaScript.
Lastly, at the testing phase the user experience testing has been carried out with 2 students with challenges and one staff to ensure the web portal functions as expected. In addition, all functional and non-functional parts on the web portal also has been reviewed through a set of testing procedure and questionnaire given to students with challenge and staff as the feedback from the user is important for future improvement.

Result and Analysis
This section provides the result and discussion based on three (3) objectives which are (i) to identify the requirements of MyAbility Web Portal for student with challenge, (ii) to design the MyAbility Web Portal for student with challenges, and (iii) to develop the MyAbility Web Portal for student with challenges. The discussion is based on the WCAG 2.0 guideline.

Objective 1: To identify the requirements of MyAbility Web Portal for students with challenges
To achieve the objective 1, interview has been conducted with Head of Student Welfare Management Unit to identify the user requirement of MyAbility Web Portal. Next, user persona has been built based on the requirement of students with challenge. Furthermore, some of the design requirements are obtained through literature review.

Analysis of the interview session
From the interview session, the responded states that the current communication process between the management and students with challenge was carried out using conventional method. As example, announcement and news are conveyed through WhatsApp platform. Furthermore, the students with challenge also needs to go physically to financial building to meet the staff in order to get the financial and hostel assistance. This is difficult for students with challenge because some of them faces physical and movement restrictions.

Analysis of user persona
User persona has been carried out for to two students with challenge (i.e. visual and physical). The Persona has been utilized in design phase to understand the users' needs, experiences, behaviours, and goals [11]. It also important to recognise that different people have different needs and expectations [12]. By creating user persona, the needs and goals for students with challenges has been identified. There are (i) to get fully challenged-friendly environment, (ii) to participate in the events and (iii) to get all the benefits provided for students with challenge.

Design requirements of MyAbility Web Portal for students with challenges
To design the web portal, university's policy states five principles which are inclusivity, accessibility, equity, flexibility, and equivalence over the course of study. Thus, the proposed web portal focus on accessibility by providing web accessibility into the web portal. Accessibility element which focuses in this study is on screen readability (  The requirements gathered in objective 1 were evaluated to design the MyAbility Web Portal interface. The use case diagram and low-fidelity user interface are presented. Both designs are used as a guideline in the development of MyAbility Web Portal. The use case diagram of MyAbility Web Portal for students with challenges represents the student and staff as the actor for university's system. It shows the action/function that can be performed by them when using the MyAbility Web Portal (Figure 1).

User Experience Testing
There are two students with challenge involves in user experience testing in the terms of the functionally of the accessibility elements provided in the proposed prototype. A series of task has been outlined to the subjects to perform the user experience testing. It was found that, all of the accessibility elements provided in MyAbilty Web Portal are well-function. Both of the subject's states that the proposed web portal is easy to use and the provided accessibility tools are useful because it helps them to use the proposed web portal more effectively. The subjects also comment that the interface colour is too simple and plain. Meanwhile, in terms of interaction design and content provided in the MyAbility Web Portal, the subjects states that it is still lacking and need improvement. Besides, the subjects also suggest that forum section need to be provided in MyAbility Web Portal as it is important to provide chat or discussion platform between students with challenge and staff. Hence, the collected results will be used as input for future development.

Conclusion
This study proposed a MyAbility Web Portal which particularly designed and developed to fulfil the needs of students with challenge on information accessibility in higher learning institution.
In this study, Universiti Teknologi MARA, Malaysia has been chosen as the subject of the study as it is one of the universities in Malaysia that accepts the highest number of students with challenges to study. User requirement analysis has been carried out and it was found that information accessibility is the priority problem for students with challenge. Therefore, MyAbility Web Portal has been developed based on university policy and the standard of Web Content Accessibility Guideline (WCAG) 2.0. Informative and valuable comments gathered from the user experience testing particularly in terms of the accessibility elements provided in the MyAbility Web Portal. Thus, all of the comments will be used for future development.