Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ELSEVIER: ARTICLE OF THEFUTURE COLLABORATION                  CSUN, 2012
Presenters   Hadi Rangin    It Accessibility Designer and Collaborator    Coordinator    University of Illinois at Urbana...
Overview   Background on the collaboration group   Introducing Elsevier, development culture, and    lessons learned   ...
The Importance of Accessible    Library Databases   Library resources are essential for the success of    students, facul...
Accessibility of Redesigned ArticlePage and how we got there   Article of the Future results in redesigned article    pag...
Accessibility of Redesigned ArticlePage and how we got there   All users will benefit from most    Accessibility/usabilit...
Background on Elsevier   Publishing company founded in 1880   Over 20,000 products for educational and    professional s...
Background on SciVerseScienceDirect   ScienceDirect, born in 1997     Hosts over 2500 journals     Hosts over 11,000 bo...
Why I Care About Web     Accessibility   Elsevier User Centered Design Group (UCD) (45 FTEs)   UCD designs web products ...
Accessibility Matters Booklet   28 page educational booklet sent to 60 offices worldwide
Elsevier Accessibility Policy
What is Article of the Future?www.articleofthefuture.com   Ongoing effort to continuously improve content on SciVerse    ...
Before Article Page Redesign
Redesigned Article Page on SciVerseScienceDirect Left Pane                  Middle Pane          Right Pane  (TOC/        ...
What Was the Challenge?   Accessibility       expertise is diffuse       can take a back seat       not in requirement...
What Was the Challenge?   Heavy Process    3 releases > 30 requirements > 300 pages      documentation     Competition ...
Lessons Learned FromCollaboration   Treat accessible design with discipline   Follow (and “bend”) the process if necessa...
Example of UI Specification – ARIALandmarks                            DIV Description       HTML/ARIA role               ...
Demo of Accessibility Features   Logical linearization of page   Keyboard operability   ARIA Landmarks   Logical headi...
Article of the FutureBackup Slides: Screen Shots and Features
Logical Linearization - Fangs
Keyboard Operability
ARIA Landmarks
Logical Headings Structure
Accessible Search
Good use of structural markup such aslists
Setting Keyboard Focus FromTOC
Visual Indication of Keyboard Focusa:hover, a:focus {  color: #0156AA;  text-decoration: underline;}
Redesigned HTML Article Page on SciVerseScienceDirect
Collaboration Group Members   Rogier Barendrecht (Elsevier) Jon Gunderson (UIUC)                                  Spenc...
Closing Remarks   Thank you to Hadi and Jon!!!   Future Plans     Streamline Accessibility into the Process     Share ...
Q&A
Contact Us   Hadi Rangin    It Accessibility Designer and Collaborator Coordinator    University of Illinois at Urbana/Ch...
Resources and Links   http://www.articleofthefuture.com/   www.developers.elsevier.com/   SciVerse Applications Gallery...
Upcoming SlideShare
Loading in …5
×

CSUN 2012: ScienceDirect Article Of The Future Collaboration

483 views

Published on

These slides were presented by Hadi Rangin and myself at CSUN 2012, The International Technology and Persons with Disabilities Conference. The topic was the ongoing collaboration between Elsevier and university experts in accessibility such as University of Illinois Urbana/Champaign.

  • Be the first to comment

  • Be the first to like this

CSUN 2012: ScienceDirect Article Of The Future Collaboration

  1. 1. ELSEVIER: ARTICLE OF THEFUTURE COLLABORATION CSUN, 2012
  2. 2. Presenters Hadi Rangin It Accessibility Designer and Collaborator Coordinator University of Illinois at Urbana/Champaign Ted Gies Principal User Experience Specialist Elsevier
  3. 3. Overview Background on the collaboration group Introducing Elsevier, development culture, and lessons learned What is Article of the Future? Article Redesign on SciVerse ScienceDirect Definition of the accessibility challenge Demo of Article Redesign Accessibility Features Closing Remarks Q&A
  4. 4. The Importance of Accessible Library Databases Library resources are essential for the success of students, faculty, and researchers Most Literature DB’s not designed with accessibility in mind Users with disabilities are usually not included in design and evaluation Only universally designed applications can be utilized effectively by users with disabilities
  5. 5. Accessibility of Redesigned ArticlePage and how we got there Article of the Future results in redesigned article page Elsevier approached UIUC We formed a group and brought interested parties together We started with mockups Had the chance to eliminate inaccessible approaches in the beginning Everyone had access to the prototype early on We recorded and discussed accessibility issues
  6. 6. Accessibility of Redesigned ArticlePage and how we got there All users will benefit from most Accessibility/usability features Elsevier team recorded lessons and findings and turned into best practices for future use Opened a dialog with decision makers and kept them on course of universal design Resulted in bringing ScienceDirect team on board to address accessibility
  7. 7. Background on Elsevier Publishing company founded in 1880 Over 20,000 products for educational and professional science 300 customer facing web applications Authors include: Stephen Hawking, Nobel Peace Prize Winners, Mike Paciello! ~200 books and journals on topics of disability and accessibility College of Direct Support
  8. 8. Background on SciVerseScienceDirect ScienceDirect, born in 1997  Hosts over 2500 journals  Hosts over 11,000 books SciVerse platform launched in 2010 SciVerse Application Marketplace and APIs launched in 2011
  9. 9. Why I Care About Web Accessibility Elsevier User Centered Design Group (UCD) (45 FTEs) UCD designs web products around user needs Reed Elsevier Accessibility Working Group  Goal to Educate and foster a culture of Universal Access  Connects UX, Product, Universal Access, Strategy, Archive, Customer Support, Corporate Responsibility  Presented Over 15 Webinars on Accessibility Supporting our sales teams and disability services! Civil Rights and quality products for all!!! 2 Big Wins this year…
  10. 10. Accessibility Matters Booklet 28 page educational booklet sent to 60 offices worldwide
  11. 11. Elsevier Accessibility Policy
  12. 12. What is Article of the Future?www.articleofthefuture.com Ongoing effort to continuously improve content on SciVerse ScienceDirect Redesigned HTML article page is one component “lab environment” to revolutionize traditionally flat article format Vision:  Excellent online readability  Seamless navigation and discoverability  Extensible: Can accommodate new apps and domain specific features such as The Protein Viewer 1st version released in January 2012
  13. 13. Before Article Page Redesign
  14. 14. Redesigned Article Page on SciVerseScienceDirect Left Pane Middle Pane Right Pane (TOC/ (Full Text Article) (Extensible)Navigation)
  15. 15. What Was the Challenge? Accessibility  expertise is diffuse  can take a back seat  not in requirements  Addressed accessibility late in the game Lack of usability test participants who use AT
  16. 16. What Was the Challenge? Heavy Process 3 releases > 30 requirements > 300 pages documentation  Competition for resources and across requirements  Scope police Increasing trend towards rich internet applications  Multipane layouts/components/AJAX  Lack of in house expertise with contemporary techniques
  17. 17. Lessons Learned FromCollaboration Treat accessible design with discipline Follow (and “bend”) the process if necessary Establishing roles in team was very helpful Don’t ask for permission But…keep stakeholders engaged A Working, Accessible Prototype Is an Indispensable Tool!
  18. 18. Example of UI Specification – ARIALandmarks DIV Description HTML/ARIA role 1 Global navigation <div aria- with SciVerse links label="SciVerse" role="navigation"> 2 ScienceDirect <div aria- global navigation label="ScienceDirect" role=”navigation ”> 3 Results navigation <div aria- label="Results" role="navigation"> 4 Download options <div aria-label="Download options" role="navigation"> 5 Quick search <div class="singlesearch js_searchform" aria-label="Quick search" role="search“ 6 Extended Search <div aria- labelledby="extendedSearch" role="search"> 7 Left side pane <div class="toc" aria-label="table of contents" role="navigation"> 8 Article/middle pane <div class="content" aria- label="Article" role="article"> 9 Right side pane <div id="sidebar" aria-label=”Related content” role="complementary"> 10 Footer <div class="content" aria- label=”product support” role="contentinfo">
  19. 19. Demo of Accessibility Features Logical linearization of page Keyboard operability ARIA Landmarks Logical headings structure Accessible Search function Good use of structural markup such as lists Setting Keyboard Focus From TOC pane Visual Indication of Keyboard Focus
  20. 20. Article of the FutureBackup Slides: Screen Shots and Features
  21. 21. Logical Linearization - Fangs
  22. 22. Keyboard Operability
  23. 23. ARIA Landmarks
  24. 24. Logical Headings Structure
  25. 25. Accessible Search
  26. 26. Good use of structural markup such aslists
  27. 27. Setting Keyboard Focus FromTOC
  28. 28. Visual Indication of Keyboard Focusa:hover, a:focus { color: #0156AA; text-decoration: underline;}
  29. 29. Redesigned HTML Article Page on SciVerseScienceDirect
  30. 30. Collaboration Group Members Rogier Barendrecht (Elsevier) Jon Gunderson (UIUC)  Spencer de Groot (Elsevier) Julie Hardesty (Indiana University Vasu Edala (Elsevier)  Ranti Junus (Michigan State) Ted Gies (Elsevier)  Hadi Rangin (UIUC) Stefan Kuip (Elsevier)  Robert Slater (UIUC) Doug Miller (Elsevier)  <You> (are invited to join us!) UIUC = University of Illinois at Urbana- Champaign
  31. 31. Closing Remarks Thank you to Hadi and Jon!!! Future Plans  Streamline Accessibility into the Process  Share Technical Best Practices Across Elsevier  Expand the Collaboration Group  Involve AT users in usability testing  Tackle other pages Roll out of Elsevier Accessibility Policy  Road shows  Try out new set of “teeth”
  32. 32. Q&A
  33. 33. Contact Us Hadi Rangin It Accessibility Designer and Collaborator Coordinator University of Illinois at Urbana/Champaign hadi@illinois.edu 217 244-0518 Ted Gies Principal User Experience Specialist Elsevier t.gies@elsevier.com 937 865-6800 Elsevier Accessibility/Usability Collaboration Page
  34. 34. Resources and Links http://www.articleofthefuture.com/ www.developers.elsevier.com/ SciVerse Applications Gallery http://www.disability.illinois.edu/ Join Elsevier Accessibility/Usability Collaboration

×