{"id":8175,"date":"2023-06-23T20:46:24","date_gmt":"2023-06-23T15:16:24","guid":{"rendered":"https:\/\/razorpay.com\/learn\/?p=8175"},"modified":"2023-06-26T14:28:29","modified_gmt":"2023-06-26T08:58:29","slug":"accessibility-in-technical-writing","status":"publish","type":"post","link":"https:\/\/razorpay.com\/learn\/accessibility-in-technical-writing\/","title":{"rendered":"The Importance of Accessibility in Technical Writing"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Can you recall the latest incident where you, a technology user, have felt stuck when browsing the web? The page you are browsing may have been haphazardly designed and might be guilty of information overload. Either the page could have too much text or too little, and might have been poorly structured.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Just when you think you\u2019ll try to get along with the page for the sake of the information, the page becomes more difficult to browse. The colours are non-complimentary or it has infinite media elements that make browsing feel cluttered and claustrophobic. You are out of patience and uncomfortable as the website is not friendly or accessible to you.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How would you find your way out?<\/span><\/p>\n<h1><span style=\"font-weight: 800;\">What is Accessibility?\u00a0<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Accessibility means different things to different people but is primarily motivated to provide comfortable usability to users, more so to disabled users. An accessible design enables any user of your target audience to use your product with ease despite any disabilities.<\/span><\/p>\n<h2><span style=\"font-weight: 800;\">Usability Vs. Accessibility<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">So are they both the same? What is the difference between accessibility and usability, if any?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Usability, just as the name suggests, is the ability of the intended audience to use the product effectively, efficiently and satisfactorily under the conditions in which it is meant to be used. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">On the other hand, <\/span><span style=\"font-weight: 400;\">accessibility<\/span><span style=\"font-weight: 400;\"> specifically caters to people with disabilities and special conditions, for whom living by <\/span><b>what is considered<\/b><span style=\"font-weight: 400;\"> the usual norm is difficult.\u00a0<\/span><span style=\"font-weight: 400;\">Sometimes, usability practices do not account for disability and cause more harm than good. In such cases, taking care of accessibility creates an empathetic and inclusive design that is helpful to both disabled as well as abled users.<\/span><\/p>\n<h2><span style=\"font-weight: 800;\">Why Web Accessibility is Important\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It\u2019s understood that web accessibility plays a significant role in improving the user experience. But just how much does it help?\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">With accessibility, you are ensuring that every user in your target audience, regardless of their abilities and disabilities, can <\/span><b>access your information easily<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You <\/span><span style=\"font-weight: 400;\">include<\/span><span style=\"font-weight: 400;\"> them, and that matters a lot. Inclusivity and empathy form a core aspect of web accessibility, which ultimately <\/span><b>improves customer satisfaction<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When your customers are satisfied, they <\/span><b>trust your brand<\/b><span style=\"font-weight: 400;\"> more. This will help create a positive image of your brand, which helps with <\/span><b>user retention<\/b><span style=\"font-weight: 400;\">.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Accessible websites <\/span><b>empower users<\/b><span style=\"font-weight: 400;\">. They will engage with your content and provide meaningful perspectives that would benefit both the product and the users.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You are improving the usability of the site for all the users, without bias and presumptions.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ultimately, this quote summarises why accessibility is paramount:\u00a0<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">As per W3C findings, accessibility overlaps with other best practices such as <\/span><a href=\"http:\/\/www.w3.org\/WAI\/mobile\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">mobile web design<\/span><\/a><span style=\"font-weight: 400;\">, device independence, multi-modal interaction, usability, <\/span><a href=\"https:\/\/www.w3.org\/WAI\/older-users\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">design for older users<\/span><\/a><span style=\"font-weight: 400;\">, and search engine optimization (SEO). Case studies show that <\/span><b>accessible websites have better search results, reduced maintenance costs, and increased audience reach<\/b><span style=\"font-weight: 400;\">, among other benefits.<\/span><\/p><\/blockquote>\n<h1><span style=\"font-weight: 800;\">Accessibility in Technical Writing<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">The prime objective of technical writing is to clearly communicate information to use a product. This document is relevant to the user, is easy to read and provides sufficient clarity.\u00a0<\/span><\/p>\n<p><b><i>Here\u2019s an interesting tidbit<\/i><\/b><i><span style=\"font-weight: 400;\">: If you are a technical writer, you are already engaged in the goals accessibility wants to achieve!<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">By virtue, technical writing already encompasses one niche virtue of accessibility: usability. Some more are as follows:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">A technical document is <\/span><b>legibly structured and formatted<\/b><span style=\"font-weight: 400;\"> so that it can be read and easily understood.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">It uses complex language <\/span><b>only to the extent necessary<\/b><span style=\"font-weight: 400;\"> for the target audience, not less, not more.\u00a0<\/span><span style=\"font-weight: 400;\">For example, a developer-facing document will contain developer-centric language like API parameters and types or integration guidelines.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">It <\/span><b>clearly communicates<\/b><span style=\"font-weight: 400;\"> the product\u2019s usage and relevant information.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The document is written in <\/span><b>simple and straightforward language<\/b><span style=\"font-weight: 400;\">. Users who are not proficient in the primary documentation language can still understand it.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Yes, your document is usable, but, does it mean your document is accessible too?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There will be some users who:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Find the <\/span><b>colour coding in your images illegible<\/b><span style=\"font-weight: 400;\"> because the <\/span><span style=\"font-weight: 400;\">user is colourblind<\/span><span style=\"font-weight: 400;\">.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Who <\/span><span style=\"font-weight: 400;\">does not have the dexterity <\/span><span style=\"font-weight: 400;\">to move the trackpad or the mouse freely finds your documentation herculean to access because <\/span><b>there are no keyboard shortcuts<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Find the document <\/span><span style=\"font-weight: 400;\">poorly formatted<\/span><span style=\"font-weight: 400;\">. It may seem legible, but screen readers cannot <\/span><b>transcribe that document <\/b><span style=\"font-weight: 400;\">into a more straightforward format. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Simple as the document language is, it is <\/span><b>not simple enough<\/b><span style=\"font-weight: 400;\"> for users to understand. Your content is not easily searchable online or when downloaded.\u00a0<\/span><\/li>\n<\/ul>\n<p><b>Too much is happening on your site when<\/b><span style=\"font-weight: 400;\">:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Gifs are moving everywhere.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Information coverage is very high and overly technical.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">There are too many controls and buttons.\u00a0<\/span><\/li>\n<\/ul>\n<p>All of this overwhelms your user which leads to a lack of focus. They cannot read in peace and are distracted by your site.<\/p>\n<p><span style=\"font-weight: 400;\">Technical documents are the primary source of information for many users, particularly users with special needs and older users. If such a document alienates the user, the product becomes less reliable for them due to the lack of inclusivity. That is why accessibility is necessary.\u00a0<\/span><\/p>\n<h1><span style=\"font-weight: 800;\">How Razorpay Adopted Accessibility in Technical Documentation<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">In recent years, many organisations have put in efforts into making their websites and documentation portals accessible. W3C recommends <\/span><a href=\"https:\/\/www.w3.org\/TR\/WCAG\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines<\/span><\/a><span style=\"font-weight: 400;\"> to help content creators, designers and developers to build accessible websites. It\u2019s not an enhancement anymore; it is a necessity.<\/span><\/p>\n<p><a href=\"https:\/\/razorpay.com\/docs\/#home-payments\"><span style=\"font-weight: 400;\">Razorpay Docs<\/span><\/a><span style=\"font-weight: 400;\">, the publicly available documentation platform for its users, practices many such guidelines. The style guide provides stringent measures to ensure the documentation is user-sensitive and easy to scan.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">All the pages are <\/span><b>interspersed with diagrams, illustrations, videos and gifs<\/b><span style=\"font-weight: 400;\"> to make information consumable in as many ways as possible.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Every information has an alternative mode of consumption<\/b><span style=\"font-weight: 400;\">. You can either watch the video, refer to an image, or read along.\u00a0<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-8185 size-full aligncenter\" src=\"https:\/\/d6xcmfyh68wv8.cloudfront.net\/learn-content\/uploads\/2023\/06\/Screenshot-2023-06-26-at-14.14.56.png\" alt=\"Accessibility \" width=\"1508\" height=\"1388\" srcset=\"https:\/\/d6xcmfyh68wv8.cloudfront.net\/learn-content\/uploads\/2023\/06\/Screenshot-2023-06-26-at-14.14.56.png 1508w, https:\/\/d6xcmfyh68wv8.cloudfront.net\/learn-content\/uploads\/2023\/06\/Screenshot-2023-06-26-at-14.14.56-300x276.png 300w, https:\/\/d6xcmfyh68wv8.cloudfront.net\/learn-content\/uploads\/2023\/06\/Screenshot-2023-06-26-at-14.14.56-1024x943.png 1024w\" sizes=\"(max-width: 1508px) 100vw, 1508px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The videos available across most pages are <\/span><b>procedural<\/b><span style=\"font-weight: 400;\">, have <\/span><b>intermittent callouts<\/b><span style=\"font-weight: 400;\"> to guide users, and <\/span><b>have closed captioning<\/b><span style=\"font-weight: 400;\"> enabled by default when they have voice-overs. Integration videos are a great example.\u00a0\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can navigate the docs <\/span><b>using keyboard shortcuts<\/b><span style=\"font-weight: 400;\">. For example, press \u2018\/\u2019 (forward slash) and the Search window pops up.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The docs are <\/span><b>optimised for every device<\/b><span style=\"font-weight: 400;\">: desktop, mobile, tablets; docs are easy to access.\u00a0<\/span><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"wp-image-8191 aligncenter\" src=\"https:\/\/d6xcmfyh68wv8.cloudfront.net\/learn-content\/uploads\/2023\/06\/Screenshot-2023-06-26-at-14.17.23-2.png\" alt=\"Accessibility \" width=\"481\" height=\"549\" srcset=\"https:\/\/d6xcmfyh68wv8.cloudfront.net\/learn-content\/uploads\/2023\/06\/Screenshot-2023-06-26-at-14.17.23-2.png 767w, https:\/\/d6xcmfyh68wv8.cloudfront.net\/learn-content\/uploads\/2023\/06\/Screenshot-2023-06-26-at-14.17.23-2-263x300.png 263w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Technical <\/span><b>jargon is sparingly used<\/b><span style=\"font-weight: 400;\"> to make the content accessible to a layman.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">All <\/span><b>images are equipped with alt text<\/b><span style=\"font-weight: 400;\">. For process diagrams where alt text is not sufficient or cannot be optimised, the workflow diagrams are explained in detail on a dedicated page. Also, all images can be zoomed in and out.\u00a0<\/span><\/li>\n<\/ul>\n<h1><span style=\"font-weight: 800;\">The Way Forward<\/span><\/h1>\n<p><span style=\"font-weight: 400;\">Accessibility is a necessity in the current world. By making design, writing, platforms and spaces accessible, you remove barriers to entry and promote inclusivity in the audience. With accessibility, you give users the autonomy to pursue information in their own way, <\/span><b>comfortably<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p>The business case is strong. Accessible designs strengthen the documentation and future proof it. It is empathetic and bridges the gap most usability designs may not consider.<\/p>\n<p>Google rewards you for accessibility. Accessible documentation is SEO-friendly. When you make the website accessible and follow WCAG\u2019s recommendations for code and content, you improve your site\u2019s value according to Google\u2019s algorithm. As a result, Google ranks your website higher.<\/p>\n<p>What remains true throughout this is that making accessible documentation is a part and parcel of technical writing and documentation. Razorpay will continue to invest posthumously in this direction and bring in more capabilities and features on the platform so that every user can find and use the information with ease.<\/p>\n<p><strong>All that we do is for our users and each user is precious to us.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Can you recall the latest incident where you, a technology user, have felt stuck when browsing the web? The page you are browsing may have been haphazardly designed and might be guilty of information overload. Either the page could have too much text or too little, and might have been poorly structured.\u00a0 Just when you<\/p>\n","protected":false},"author":151156578,"featured_media":8176,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3606],"tags":[3675],"class_list":{"0":"post-8175","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tech-writing","8":"tag-accessibility"},"_links":{"self":[{"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/posts\/8175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/users\/151156578"}],"replies":[{"embeddable":true,"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/comments?post=8175"}],"version-history":[{"count":7,"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/posts\/8175\/revisions"}],"predecessor-version":[{"id":8193,"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/posts\/8175\/revisions\/8193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/media\/8176"}],"wp:attachment":[{"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/media?parent=8175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/categories?post=8175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learn.razorpay.in\/learn\/wp-json\/wp\/v2\/tags?post=8175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}