Designing for accessibility with empathy: how we approached the new Springer journal pages

_{Guest post by James Alegria, a Digital Brand Designer focused on creating a best-in-class user experience for the academic community.}

Two astronomers independently predicted the existence of Neptune. Oxygen was discovered three times in four years. Mendel’s genetic theory was forgotten, then later rediscovered. That’s because science doesn’t deal in exclusivity. If something’s real, it’s real for everyone.

It is the same for accessibility. Building the world to be inclusive by design, whether they be physical spaces or digital, benefits all humankind regardless of who we are. Access to knowledge should not be limited by who you are, where you are, or the device you are using. As a research publisher, we have a duty to never take the fundamental right to access news and knowledge for granted. 

I am part of a team that designs the most highly used research publishing platform in the world, which means we must think about making accessibility real for a wide variety of people. This doesn’t just apply to people with disabilities. Anyone, from people who have low bandwidth connections (perhaps that’s all of us now we are working from home!) to those who are not computer literate, to those who are not fluent in the language of our websites and need them to be ultra clear and usable. Post covid-19, non-disabled people are now understanding the reality that has long been true for the disabled.

A Forrester Research study commissioned by Microsoft found that 57% of computer users are “likely or very likely to benefit from the use of accessible technology due to experiencing mild to severe difficulties or impairments.” This is evident in word prediction software; its original intent was to help users with physical disabilities increase their typing speed and decrease the number of keystrokes needed to complete a word or a sentence. Now, almost every person who owns a digital device interacts with predictive text. As the web now touches almost every area of life and business, accessibility cannot be an afterthought but fundamental to the user experience.

What does this mean for design & development?

“We’re not trying to design for all of us, we’re trying to design for each of us. If we design for people who have a unique need, it benefits people universally.” Bryce Johnson, a senior inclusivity designer on Microsoft’s Xbox team

In the UK, for example, around 1 in 5 people have a disability that affects their ability to access the web. This could be visual, hearing, motor or cognitive (affecting memory and processing).

As a designer, educating yourself about the variety of accessibility needs and what they mean causes you to rethink certain design decisions. If you are visually impaired, how can you read text or headings if the colour contrast is too low? If you are physically impaired and rely on a keyboard, scrolling up and down pages that have poor information visibility can cause severe pain. Even watching a video in a loud and disruptive environment (or around your wonderful kids!), you may hope to have captions as an option, a feature originally made for those who are deaf or hard of hearing.

Our front-end discipline has long recognised this and thanks to their efforts, Springer Nature is now well regarded as being industry leading for its accessibility focus and Frontend Playbook. Accessibility and designing with intent is part of our everyday product development.

Redesigning our Springer journal sites with accessibility in mind from the start

_{(Above - old Springer journal homepage on the left, new iteration on the right)}

We’ve been working on Springer journals for the past year now, testing and iterating along the way to make things better. By thinking about accessibility from the get go, and working across-discipline, we’ve reached a design that is less cluttered and easier to navigate. This ensures authors can find information they need to gauge the journal more quickly. Editors can better promote what they need, expanding the reputation and reach of the journal. Thanks to our fantastic front-end developers, just a few of the improvements to accessibility include:

• A layout that better adapts to different devices

This is really something users have expected as standard for a long time but the old journal pages were pretty poor at; elements that were visible on desktop screens disappeared on mobile and text was too tiny to read. When we first kick-off a project, we sketch out how the information is presented in a one column layout, allowing us to establish hierarchy and decide the most important user tasks. This allows us to think about how things should appear on narrow viewports first and then adapt it to larger screens. Our typography will also adapt to screen sizes, allowing people to read easily whilst still fitting information within the viewport.

• Bigger, badder typography

It’s bigger! No need to lean into your screen to make out those tiny journal metric details… oh and we now use system fonts, which means that for body text and interface elements, the font comes from your computer’s OS instead of being installed from the web, saving on performance time.

• Faster, stronger

Our new site loads 54% faster. On a representative device (a mid-range phone in India), the old springer.com sites were between 17-19 seconds. On the same device, the new sites now average between 8-9 seconds. We always have room to improve on this front, and we’re also looking at the performance of our scholarly article pages.

• Most important information is presented at the top

The Journal USP and promotional text, with links to the editorial board and aims are front and centre. We separated them into different pages rather than having it all on the homepage, which would push content further down. We use some Javascript to toggle visibility of the USP to also save space. Generally, we always aim to think of what a non-javascript experience is like, as despite what it can do to make your website more flashy, an over-reliance can often be detrimental to performance.

• Making sure our content is readable to screen readers

We ensure background images that convey meaning have fallback, provide alternative text for images, ensure content is visible to assistive technologies and link text is meaningful within context on Springer Nature Link and make tooltips work with keyboard navigation.

Access granted

We can all play our part in this endeavour by familiarising ourselves with the tools that others have to use (e.g. screen readers) or thinking about how we internationalise our services and language use for non-native speakers. Springer Nature’s own frontend playbook contains excellent resources for people wanting to get started. Eric Bailey's Empathy Prompts provides simulated examples of how different conditions, disabilities, and situations can affect the experience on the web. (As Eric notes, disability simulators are intended to help build empathy, not describe any one person's experience). For those of us who work in multidisciplinary teams, the US government’s accessibility for teams guide provides a nice overview of how different disciplines can all contribute to a product’s accessibility.

Building empathy brings us closer to the minds of our diverse society, allowing us to better understand each unique experience. Accessibility is not a hindrance to design - quite the opposite - it focuses and challenges assumptions we hold about our users. As our new reality challenges all of us on what is the “norm” and the rate of change has increased, we have an opportunity to place accessibility at the heart of everything we do.

For more information on accessibility at Springer Nature, read our policy statement.  

_{References and further resources}

_{Making your service accessible} 

_{Le Verrier—Magnificent and Detestable Astronomer}

_{Colour contrast- GOV.UK} 

_{What a Year of Learning and Teaching Accessibility Taught Me}

_{Sympathy vs empathy}

_{Springer Nature Front End Playbook}