{"id":2823,"date":"2020-09-10T10:20:57","date_gmt":"2020-09-10T09:20:57","guid":{"rendered":"http:\/\/blog.doaj.org\/?p=2823"},"modified":"2020-09-10T10:20:57","modified_gmt":"2020-09-10T09:20:57","slug":"designing-for-better-accessibility-in-open-access-scholarly-publishing","status":"publish","type":"post","link":"https:\/\/blog.doaj.org\/de\/2020\/09\/10\/designing-for-better-accessibility-in-open-access-scholarly-publishing\/","title":{"rendered":"Designing for better accessibility in open access scholarly publishing"},"content":{"rendered":"<p><em>This is a guest post by Sophy, our UX Designer.<\/em><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/blog.doaj.org\/de\/2019\/10\/01\/were-paving-the-way-for-greater-things-to-come\/\" target=\"_blank\">Accessibility has always been a top priority<\/a> in doaj.org\u2019s redesign project, along with improving:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>user experience, <\/li><li>navigation, and<\/li><li>responsiveness on various devices, browsers, and operating systems.<\/li><\/ol>\n\n\n\n<p>We approached the project with the idea that accessibility, as opposed to branding and visual design, is foundational to all of these elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why accessibility-first?&nbsp;<\/h2>\n\n\n\n<p>DOAJ is a platform and organisation with a global reach and a highly diverse audience: it indexes <strong>15,100+<\/strong> journals, from <strong>134<\/strong> countries, covering <strong>80<\/strong> languages. It is therefore essential that our design and user interface strives for inclusivity.<\/p>\n\n\n\n<p>We mostly think of web accessibility (<a rel=\"noreferrer noopener\" href=\"https:\/\/www.a11yproject.com\/\" target=\"_blank\">abbreviated to <em>a11y<\/em><\/a>) as best practices that make a website usable for people with visual disabilities. This often omits the needs of those with speech, motor, and cognitive impairments. Accessibility not only includes users with lifelong disabilities but also users affected by environmental or otherwise temporary circumstances (e.g. using a device with a smaller screen on a slower network).&nbsp;<\/p>\n\n\n\n<p>Good <em>a11y<\/em> certainly shows consideration for disabled users. As an added benefit, its implementation has been shown to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Boost SEO and content discoverability with <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Semantics#Semantics_in_HTML\" target=\"_blank\">semantic HTML<\/a>;<\/li><li>Improve the site\u2019s performance and speed by reducing reliance on Javascript and CSS for functionality; and<\/li><li>Improve maintainability and reduce <a rel=\"noreferrer noopener\" href=\"https:\/\/uxdesign.cc\/what-is-design-debt-and-why-you-should-treat-it-seriously-4366d33d3c89\" target=\"_blank\"><em>design debt<\/em><\/a> through a simpler and more consistent user interface.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Automated testing tells part of the story<\/h2>\n\n\n\n<p>As a starting point, we looked to implementations of the Web Content Accessibility Guidelines (WCAG). Using tools like <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse\" target=\"_blank\">Lighthouse audits<\/a> and <a rel=\"noreferrer noopener\" href=\"https:\/\/accessibilityinsights.io\/docs\/en\/web\/overview\" target=\"_blank\">Accessibility Insights for Web<\/a>, checklists implementing <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noreferrer noopener\">WCAG 2.1 AA\u2019<\/a>s guidelines are simple to follow.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/doajournals.files.wordpress.com\/2020\/09\/lighthouse-current-5.png\" alt=\"Lighthouse scores are: 64% performance, 79% accessibility, 77% best practices, 79% SEO\" class=\"wp-image-2764\" width=\"789\" height=\"336\" srcset=\"https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-current-5.png 1032w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-current-5-300x128.png 300w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-current-5-1024x437.png 1024w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-current-5-768x327.png 768w\" sizes=\"(max-width: 789px) 100vw, 789px\" \/><figcaption>Lighthouse audit scores for the current website.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1032\" height=\"440\" src=\"https:\/\/doajournals.files.wordpress.com\/2020\/09\/lighthouse-new-3.png?w=1024\" alt=\"Lighthouse scores are: 97% performance, 100% accessibility, 92% best practices, 90% SEO.\" class=\"wp-image-2765\" srcset=\"https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-new-3.png 1032w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-new-3-300x128.png 300w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-new-3-1024x437.png 1024w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/lighthouse-new-3-768x327.png 768w\" sizes=\"(max-width: 1032px) 100vw, 1032px\" \/><figcaption>Lighthouse audit scores for the new website (a work-in-progress).<\/figcaption><\/figure>\n\n\n\n<p>One of the most common errors for over 85% of the <a rel=\"noreferrer noopener\" href=\"https:\/\/webaim.org\/projects\/million\/#wcag\" target=\"_blank\">top 1,000,000 home pages<\/a> is low-contrast text, an easily-detectable barrier for users with colour vision deficiencies (CVDs). DOAJ\u2019s current colour palette does not pass automated colour contrast tests for text and background, so we revised it and opted for a softer and more restrained palette that follows WCAG\u2019s <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3.org\/WAI\/perspective-videos\/contrast\/\" target=\"_blank\">contrast requirements<\/a>. We want to be more thoughtful in our use of colour, reserving DOAJ\u2019s orange for important calls-to-action only.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"2800\" height=\"789\" src=\"https:\/\/doajournals.files.wordpress.com\/2020\/09\/a11y-palette-1.png\" alt=\"Left side of picture shows ten accessible combinations for text on background colours in shades of orange, black, and beige. Right side shows the &quot;Copyright &amp; Licensing&quot; section of the new application form using the accessible colour palette. The first question asks for license(s) permitted by the journal, followed by checkboxes for Creative Commons licenses.\" class=\"wp-image-2815\" srcset=\"https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/a11y-palette-1.png 2800w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/a11y-palette-1-300x85.png 300w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/a11y-palette-1-1024x289.png 1024w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/a11y-palette-1-768x216.png 768w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/a11y-palette-1-1536x433.png 1536w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/a11y-palette-1-2048x577.png 2048w\" sizes=\"(max-width: 2800px) 100vw, 2800px\" \/><figcaption>On the left: accessible colour combinations for text &amp; background in the new palette.<br>On the right: preview of the new site\u2019s application form using these combinations.<\/figcaption><\/figure>\n\n\n\n<p>As a result, we updated the orange-on-white horizontal logo and made a slight adjustment to the text. The cleaned-up DOAJ logotype uses the same typeface as the old one, but with a bolder font-weight and adjusted <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Kerning\" target=\"_blank\">kerning<\/a>. This version is now more flexible as it can be used in different contexts, and on both dark and light backgrounds:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"622\" src=\"https:\/\/doajournals.files.wordpress.com\/2020\/09\/094f120fe8889957309b17c28fe7223e-1.gif\" alt=\"Animation showing the evolution of the DOAJ logo. The original orange logo is much wider, uses a thinner font weight and shows the full text &quot;Directory of Open Access Journals&quot;. The revised logo only shows the acronym DOAJ and is bolder.\" class=\"wp-image-2811\" \/><figcaption>The bolder and more compact logo can be used with photography, illustrations, and coloured backgrounds.<\/figcaption><\/figure>\n\n\n\n<p>The next three most-common a11y errors all concern the correct use of HTML markup: missing alternative text for images, empty links, and missing form input labels. A good part of DOAJ\u2019s redesign included rewriting our page templates to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>use semantic HTML tags and accurate WAI-ARIA roles as much as possible<\/li><li>better organise content both visually and hierarchically (<code>&lt;h1&gt;<\/code> through <code>&lt;h6&gt;<\/code>)<\/li><li>reduce markup complexity and gradually remove meaningless HTML elements (also known as <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wiktionary.org\/wiki\/divitis\" target=\"_blank\"><em>divitis<\/em><\/a> due to the overuse of <code>&lt;div&gt;<\/code> tags) unless it is used for styling purposes<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Inclusivity concerns influenced some design choices<\/h2>\n\n\n\n<p>We mentioned earlier that DOAJ contains journal and article content in 80 languages, so we made sure that our new typefaces could support as many different languages as possible for displaying text in different scripts and special characters. Other considerations included:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open source status of the fonts, in keeping with DOAJ\u2019s open source and open access mission<\/li><li>Suitability for text-heavy web content, in particular, long scholarly article titles<\/li><li>Personality of the typeface: unassuming, yet functional<\/li><li>Font legibility, based on characteristics like larger x-heights and wider characters<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2814\" height=\"860\" src=\"https:\/\/doajournals.files.wordpress.com\/2020\/09\/screenshot-2020-09-08-at-17.15.38.png?w=1024\" alt=\"Screenshot of glyphs showing latin, cyrillic, and greek characters. \" class=\"wp-image-2756\" srcset=\"https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/screenshot-2020-09-08-at-17.15.38.png 2814w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/screenshot-2020-09-08-at-17.15.38-300x92.png 300w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/screenshot-2020-09-08-at-17.15.38-1024x313.png 1024w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/screenshot-2020-09-08-at-17.15.38-768x235.png 768w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/screenshot-2020-09-08-at-17.15.38-1536x469.png 1536w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/screenshot-2020-09-08-at-17.15.38-2048x626.png 2048w\" sizes=\"(max-width: 2814px) 100vw, 2814px\" \/><figcaption>Glyphs included in the typeface Source Sans Pro<\/figcaption><\/figure>\n\n\n\n<p>As for text readability, we have been <a rel=\"noreferrer noopener\" href=\"https:\/\/blog.doaj.org\/de\/2020\/07\/01\/doajs-basic-criteria-updated-and-rewritten-in-plain-english\/\" target=\"_blank\">revising our content to use Plain English<\/a> so that we can better serve users for whom English is not their first language.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qualitative user research and historical usage data gave a broader perspective on design issues<\/h2>\n\n\n<p>Automated testing scores are not the only indicators of accessibility. As with user experience, we know that a11y can\u2019t simply be condensed into a to-do list of technical requirements. This is why we conducted live, moderated usability tests of the new application form followed by interviews with real DOAJ users; these tests have helped us determine specific pain points when filling out the form and further refine our design.&nbsp;<\/p>\n<p><!-- \/wp:post-content --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>We also conducted a card sorting exercise with users to improve our site structure and optimise website navigation and content findability. We used card-sorting software to visualise clusters of information (i.e. pages of the site) that were categorised together by our testers:<\/p>\n<p><!-- wp:image {\"id\":2809,\"sizeSlug\":\"large\"} --><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"560\" class=\"wp-image-2809\" src=\"https:\/\/doajournals.files.wordpress.com\/2020\/09\/card-sorting-clusters-1.gif?w=1000\" alt=\"3D animation showing different clusters, or groups, formed by testers\u2019 categorisation of DOAJ.org\u2019s pages. There are six different groups shown.\"><figcaption>&nbsp;Each group can be interpreted as a category in our site\u2019s information architecture.&nbsp;<br>Each label represents a single web page.<\/figcaption><\/figure>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Our findings helped us flatten and simplify the site\u2019s content hierarchy, hopefully making it easier for users to find what they are looking for, whether it is a journal\u2019s metadata, technical documentation, or guidelines on how to apply to DOAJ.&nbsp;<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Our approach combined user testing with qualitative data gathered from the live website. Google Analytics helped us quickly analyse traffic and behaviour to understand how our users navigated from one page to another. Using&nbsp; Hotjar, we also visually prioritised information on every page based on real users\u2019 cursor movements on the current site:<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:image {\"id\":2805,\"sizeSlug\":\"large\"} --><\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"1106\" class=\"wp-image-2805\" src=\"https:\/\/doajournals.files.wordpress.com\/2020\/09\/heatmap-4818354-movement-desktop-1-5.jpg?w=741\" alt=\"A heatmap of the search tool showing that most users move their cursor and click on the search bar (positioned to the right), the first article, and the next page button.\" srcset=\"https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/heatmap-4818354-movement-desktop-1-5.jpg 800w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/heatmap-4818354-movement-desktop-1-5-217x300.jpg 217w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/heatmap-4818354-movement-desktop-1-5-741x1024.jpg 741w, https:\/\/blog.doaj.org\/wp-content\/uploads\/2020\/09\/heatmap-4818354-movement-desktop-1-5-768x1062.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><p><\/p>\n<figcaption>Heatmap showing cursor movement on the search page for an anonymised sample of 1,000 users.<br><span style=\"font-size:inherit\">The current site places the search bar, the most clicked area on this page, on the right. This could be unintuitive for a majority of our users who read in languages with left-to-right scripts.<\/span><\/figcaption>\n<\/figure>\n<p><!-- \/wp:image --><\/p>\n<p><!-- wp:heading --><\/p>\n<h2>User experience improvements will not end with the new website launch<\/h2>\n<p><!-- \/wp:heading --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>We know things might not be perfect when we launch the website: some features have changed and some might not work as expected. You will be able <a href=\"https:\/\/doaj.org\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">to report or give feedback<\/a> on website-related issues.&nbsp;<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>We are committed to continually improving the user experience of DOAJ\u2019s platform in the long term. For example, we\u2019re looking at further usability testing, including unmoderated ones, as well as testing with self-identified disabled users and multilingual users; we\u2019re planning on translating the website into French; and we\u2019re currently working on our accessibility statement to clarify potential a11y issues with the site.&nbsp;<\/p>\n<p><!-- \/wp:paragraph --><\/p>\n<p><!-- wp:paragraph --><\/p>\n<p>Please leave your thoughts in the comments. We welcome your feedback.<\/p>\n<p><!-- \/wp:paragraph --><\/p>","protected":false},"excerpt":{"rendered":"<p>This is a guest post by Sophy, our UX Designer. Accessibility has always been a top priority in doaj.org\u2019s redesign project, along with improving: user experience, navigation, and responsiveness on various devices, browsers, and operating systems. We approached the project with the idea that accessibility, as opposed to branding and visual design, is foundational to&#8230;<\/p>","protected":false},"author":378,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[615],"tags":[51,257,272,440,536,540,553],"class_list":["post-2823","post","type-post","status-publish","format-standard","hentry","category-guest-post","tag-accessibility","tag-heatmaps","tag-inclusivity","tag-redesign","tag-user-experience","tag-ux","tag-wcag"],"_links":{"self":[{"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/posts\/2823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/users\/378"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/comments?post=2823"}],"version-history":[{"count":0,"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/posts\/2823\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/media?parent=2823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/categories?post=2823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.doaj.org\/de\/wp-json\/wp\/v2\/tags?post=2823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}