Creation of an Interactive and Accessible Online Learning Environment

Transcription

1 Creation of an Interactive and Accessible Online Learning Environment Jere Kuusinen & Jukka Vuorinen Satakunta UAS, Finland 2014

2 Abstract To create a pedagogical model for the development of an accessible online service. At the same time, the site design & technology is based on the principle of accessibility The users are our co-designers in the design project.

3 The site ( Is currently written only in Finnish 4 main categories based on target groups: Home, school, work and leisure 4 main subcategories Discuss, find, learn and news

4 Principles The site should fulfill at least W3C WAI accessibility priority levels A up to AAA We wanted to combine the easiness of content management, responsive site idea with one page web design, which supports better UX (User Experience) amongst mobile users. To provide wide-ranging information about accessibility

5 Web development design It is made and not made with Wordpress! We used only the content producting side of Wordpress We created our own solution for data transferring from Back end to Front end side. Final way to produce the website is an independed solution which is separated from Wordpress common framework.

6 Why? To avoid reloading same website elements again. Make finally a true responsive website for all kind of mobile users (the principle of Device independence) One page website design? yes but scrolling the page without getting lost

7 Information retrieval between Back End and Front End The content to be presented is searched from the content management system (Wordpress) The website is modified into its final form with the help of dynamic technologies in responsive web design. The aim was to create a faster technical solution, which would create the website in a more efficient way than the present system of content management.

8 The Front End At first, we created a separate index.html file, which included the frame of the HTML code of the website. It also recognises the size of the user s display. The style files defining the layout and Bootstrap.css were also loaded in this file. Bootstrap enables responsive web design. When the styles had been designed, we created JavaScript and Bootstrap libraries, which collect, parse and forward information to the frame file (index.html). All above-mentioned forms an entity known as Front End

9 The Back End When the user presses the button, Front end will send inquiries to Back end. The information is retrieved from Wordpress on the basis of these questions. The backend.php file operates as Back end and it includes functions taken directly from Wordpress. These functions are used to carry out the inquiries.

10 Information retvieval and processing Backend_wp.php unpacks the echo of the outputs of specific functions, saves the outputs in variables and collects them into a array. JSON (Javascript Object Notification) is used to send them further to the JavaScrip file in backend.php, which placed the inquiry in the first place.

11 Finally turning all information to web page Previously mentioned Javascript file will process the information, which is in JSON form and saves it into variables with additional HTML tags. These variables are merged into one variable, whose content is placed in the HTML frame (index.html) in a dynamic way. The menu element is placed separately only when it includes submenus.

12 Summary When you click the menu, you perform Back end searches again. In other words, that part of the website is emptied of its content and refilled by the outputs of the search. Only the new content is loaded, not the entire page. All information is searched dynamically and the HTML frame (index.html) does not include ready-made elements, but everything is created dynamically on the basis of the user action. All information is retrieved into the new solution we created, and the content changes take their place automatically.

13 Accessilibility verification Interative design process with real users Two web surveys with persons with disabilities Technical evaluation with tools (usability, responsive design) Speech synthesis tests (Jaws, Apple speech to text) Essential components of Web accessibility (W3C)

14 Conclusions On the basis of the usability tests, our solution can be used with a variety of web browsers, mobile handhelds and so on. Positive feedback was given, in particular, on the user interface and its efficiency with different assistive aids. The testers mentioned as deficiencies the complex dropdown-menus which demand good motor skills from their users. The website does not yet conform the definitions of W3C A-level accessibility. The content gathered most positive feedback from users with disabilities

15 Further work To develope site language to plain language To continue offering alternative modalities for persons with disabilities Data optimization for decreasing site loading time Continuing work with users with disabilites. To fulfill W3C highest AAA level of accessibility.

16 Resources W3 Web accessibility initiative WAI Guidelines and Techniques How to Meet WCAG 2.0 (W3C WAI)

17 Thank you for your attention!