Harnessing the Potential of Accessibility Standards and Responsive Web Design Practices to Achieve Learning Interoperability on the Level of the User Interface Presentation in ICWL 2013, Kenting, Taiwan

1. Harnessing the Potential
of Accessibility Standards and
Responsive Web Design Practices
to Achieve Learning Interoperability
on the Level of the User Interface
Mohammad Al-Smadi, Vladimir Tomberg
Image by courtesy of HuffPost Education Group

2. Abilities of conforming to Learning
Standards
• Durability: no need for further redesigns or
redevelopments even with new versions of the system
• Scalability: can it grow from small to large?
• Affordability: is it affordable?
• Interoperability: are information and services sharable
with other systems?
• Reusability: can it be used within multiple contexts?
• Manageability: is it manageable?
• Accessibility: are the contents accessible and
deliverable from anywhere and anytime?

3. General Learning Interoperability
Framework

4. Lack of Interoperability at the UI Level
(Presentation Interoperability)
• Launching the learning content on the end-user
devices causes different behaviors based on the
such properties of the device and the web
browser:
• Width, height of the window,
• Resizing state
• Area of launching within the browser

5. The first approach addressing
mobile UI issues
Separate desktop and mobile versions of a web site
in the mobile browser

6. Current Best Practices –
Responsive Web Design (RWD)
• Using together several well-known
technologies like HTML, CSS, and JavaScript
• The basic methods are:
1. Flexible images (CSS)
2. Media queries (JavaScript)
3. Fluid grids (JavaScript, CSS)

7. From RWD to Adaptive Web Design
• The “Mobile First” principle (Minimum Viable Product
Strategy)
• Progressive Enhancement versus Adaptive Degradation

8. Concepts of interoperability
on the UI level

9. The Missing Part
Accessible Rich Internet Applications
(WAI-ARIA) 1.1
W3C First Public Working Draft
26 September 2013

10. WAI ARIA Code Example
<input type = "image"
src = "thumbnail.gif"
alt = "Effectiveness"
role = "slider"
aria-valuemin = "0"
aria-valuemax = "100"
aria-valuenow = "42"
aria-valuetext = "42 percent"
aria-labelledby = "effective">

11. WAI ARIA Models and Semantics
Keyboard Navigation
Roles
State & Properties
Live Regions

12. Advantages of using WAI ARIA
• The basic principles of Universal Design are
covered − content by default is available for
the widest audience
• Improved accessibility of learning content: all
modern browsers and screen-reading devices
already accessible today with WAI ARIA

13. Extended Learning Interoperability Framework

14. Advantages of the Framework
1. Establishing application domain semantics for
common understanding
2. Consistent learning delivery through adaptive
and flexible design of front-end, learning
content, tools, and services
3. Additional layer of accessibility specifications
enriched with semantics on the presentation
level
4. Combining standard-conform technologies (WAI
ARIA) with widely used best practices (RWD)