ELSEVIER: ARTICLE OF THE

FUTURE COLLABORATION

CSUN, 2012

Presenters

Hadi Rangin

It Accessibility Designer and Collaborator

Coordinator

University of Illinois at Urbana/Champaign

Ted Gies

Principal User Experience Specialist

Elsevier

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

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

Accessibility of Redesigned Article

Page 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

and educated developers

Accessibility of Redesigned Article

Page 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

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

Background on SciVerse

ScienceDirect

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

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…

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

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

Before Article Page Redesign

Redesigned Article Page on SciVerse

ScienceDirect

Left Pane

(TOC/

Navigation)

Middle Pane

(Full Text Article)

Right Pane

(Extensible)

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

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

Multi pane layouts/components/AJAX

Lack of in house expertise with contemporary

techniques

Lessons Learned From

Collaboration

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!

Example of UI Specification – ARIA

LandmarksDIV Description HTML/ARIA role

1 Global navigation with SciVerse links

<div aria-label="SciVerse" role="navigation">

2 ScienceDirect global navigation

<div aria-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="singlesearchjs_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">

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

Backup Slides: Screen Shots and Features

Article of the Future

Logical Linearization - Fangs

Keyboard Operability

ARIA Landmarks

Logical Headings Structure

Accessible Search

Good use of structural markup such as

lists

Setting Keyboard Focus From

TOC

Visual Indication of Keyboard

Focus

a:hover, a:focus {

color: #0156AA;

text-decoration: underline;

}

Redesigned HTML Article Page on SciVerse

ScienceDirect

Collaboration Group Members

Rogier Barendrecht (Elsevier)

Spencer de Groot (Elsevier)

Vasu Edala (Elsevier)

Ted Gies (Elsevier)

Stefan Kuip (Elsevier)

Doug Miller (Elsevier)

UIUC = University of Illinois at Urbana-

Champaign

Jon Gunderson (UIUC)

Julie Hardesty (Indiana University)

Ranti Junus (Michigan State)

Hadi Rangin (UIUC)

Robert Slater (UIUC)

<You> (are invited to join us!)

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”

Q&A

Contact Us

Hadi RanginIt Accessibility Designer and Collaborator Coordinator

University of Illinois at Urbana/Champaign

hadi@illinois.edu

217 244-0518

Ted GiesPrincipal User Experience Specialist

Elsevier

t.gies@elsevier.com

937 865-6800

Elsevier Accessibility/Usability Collaboration

Page

Resources and Links

http://www.articleofthefuture.com/

www.developers.elsevier.com/

SciVerse Applications Gallery

http://www.disability.illinois.edu/

Join Elsevier Accessibility/Usability

Collaboration