{"id":26537,"date":"2016-05-31T23:01:27","date_gmt":"2016-05-31T15:01:27","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26537"},"modified":"2024-05-10T18:47:12","modified_gmt":"2024-05-10T10:47:12","slug":"web-accessibility-design-guide","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/","title":{"rendered":"Designer&#8217;s Guide to the Basics of Web Accessibility Design"},"content":{"rendered":"<p>The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for responsive design have significantly improved how we design for various devices. However, designing for accessibility \u2013 that is, making your websites usable for all people, including those with disabilities \u2013 is just as crucial.<\/p>\n<p>Although web accessibility has been a focus for quite some time, effectively implementing it can be challenging due to the need for advancements in technology and web development practices. Many developers are eager to contribute to more accessible web environments but struggle with the complexity involved. Key elements include creating <a href=\"https:\/\/www.hongkiat.com\/blog\/high-contrast-color-design\/\">high-contrast text<\/a>, audio adaptations for the visually impaired, media optimizations, and alternative functionalities for browsers that do not support JavaScript or CSS.<\/p>\n<p>In this article, I will explore the <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-design-needs\/\">fundamental concepts of accessibility design<\/a>, its objectives, and practical first steps you can take towards mastering this essential aspect of web development. Although mastering accessibility design is a detailed and lengthy process, the efforts are rewarding. Implementing these practices will not only comply with legal standards but also enhance the overall user experience, ensuring all visitors have equal access to your content.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-design-needs\/\" class=\"ref-block__link\" title=\"Read More: Designing For People With Accessibility Needs\" rel=\"bookmark\"><span class=\"screen-reader-text\">Designing For People With Accessibility Needs<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/accessibility-design-needs.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-24753 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/accessibility-design-needs.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Designing For People With Accessibility Needs<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe people who use the web are not a homogeneous mass but rather a huge group with incredibly...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Introduction to Accessibility<\/h2>\n<p>At its core, accessibility involves designing content that is usable for everyone. This includes individuals who are blind and unable to read, as well as those with physical disabilities that prevent the use of traditional input devices like a mouse or keyboard.<\/p>\n<p>Accessibility also caters to those with less severe impairments, such as minor vision issues, dyslexia, or other reading difficulties. Essentially, the concept of \u201cweb accessibility\u201d encompasses any impairment that might affect a person\u2019s ability to interact with or access a website.<\/p>\n<p>One comprehensive definition, as per <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Web_accessibility\">Wikipedia<\/a>, states that web accessibility is the practice of eliminating barriers that prevent access to websites by people with disabilities. When websites are properly designed, developed, and edited, <strong>everyone has equal access to information and functionality<\/strong>.<\/p>\n<p>However, Anne Gibson suggests in her article on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/alistapart.com\/article\/reframing-accessibility-for-the-web\">A List Apart<\/a> that this definition should be broader, not limited to just those with disabilities. It should include <strong><em>all users<\/em><\/strong> who might have less than optimal internet access, emphasizing that web accessibility benefits <strong>everyone<\/strong> globally.<\/p>\n<p>Contrary to common belief, accessibility does not solely benefit individuals who are blind. According to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.a11yproject.com\/#learn-the-fundamentals-and-principles-behind-accessible-design\">A11Y Project<\/a>, there are four main categories of web accessibility:<\/p>\n<ol>\n<li><strong>Visual<\/strong>: This includes individuals with low vision or no sight at all.<\/li>\n<li><strong>Auditory<\/strong>: This category helps those who are deaf or hard of hearing.<\/li>\n<li><strong>Cognitive<\/strong>: It assists people who face challenges in understanding or processing information.<\/li>\n<li><strong>Motor<\/strong>: This focuses on individuals with physical disabilities that might require alternative input methods, such as adaptive keyboards or voice recognition software.<\/li>\n<\/ol>\n<p>These categories are supported by a range of techniques that evolve along with web standards, yet they adhere to the stability provided by the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/wcag\">WCAG<\/a> (Web Content Accessibility Guidelines). These guidelines are internationally recognized and mandated for certain organizations, like government bodies, to follow.<\/p>\n<p>Next, we\u2019ll explore the regulatory framework surrounding web accessibility before delving into practical design tips that can be applied to enhance website usability.<\/p>\n<h2>The W3C and Accessible Design<\/h2>\n<p>Web accessibility involves a variety of <strong>acronyms that can be overwhelming<\/strong> for newcomers. However, once demystified, they provide a clear framework for understanding and implementing accessibility standards.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/\">W3C<\/a> <strong>(World Wide Web Consortium)<\/strong> \u2013 This international community works to define and guide web standards for languages, protocols, and guidelines, including those for accessibility.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/\">WAI<\/a> <strong>(Web Accessibility Initiative)<\/strong> \u2013 This program under the W3C umbrella outlines all the rules, guidelines, and techniques needed for up-to-date web accessibility practices.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/wcag\">WCAG<\/a> <strong>(Web Content Accessibility Guidelines)<\/strong> \u2013 These standards help designers measure and improve the accessibility level of their websites.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/aria.php\">ARIA<\/a> <strong>(Accessible Rich Internet Applications)<\/strong> \u2013 Specifically focuses on creating accessible applications using JavaScript\/Ajax and similar technologies. Further details can be found in <a href=\"https:\/\/www.hongkiat.com\/blog\/aria-web-standards\/\">this article by Anna Monus<\/a>.<\/li>\n<\/ul>\n<p>Under the WAI, there are additional guidelines such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/uaag.php\"><strong>UAAG<\/strong><\/a> <strong>(User Agent Accessibility Guidelines)<\/strong> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/atag.php\"><strong>ATAG<\/strong><\/a> <strong>(Authoring Tool Accessibility Guidelines)<\/strong>. Initially, focus on the principles and standards outlined in the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/components.php\">WAI framework<\/a> and the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/\">WCAG quick reference guide<\/a>.<\/p>\n<p>A valuable resource for understanding the user perspective is the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/people-use-web\/Overview.html\">W3C\u2019s overview on how people with disabilities use the web<\/a>. This resource offers insights into the challenges faced by individuals with disabilities and provides practical solutions for web designers.<\/p>\n<p>Understanding <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/conformance.html\">WCAG conformance<\/a> is also crucial. This involves evaluating a website\u2019s accessibility level, which is categorized into three ratings: A, AA, and AAA. The highest standard of web accessibility conformance is AAA, and this can be verified using tools like the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/achecker.ca\/checker\/index.php\">web accessibility checker<\/a>.<\/p>\n<p>For a deeper dive into these guidelines, consult the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/intro.html\">Introduction to Understanding WCAG 2.0<\/a> provided by the W3C, along with these helpful resources:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.slideshare.net\/ciwstudy\/wcag-20-simplified-presentation\">WCAG 2.0 Simplified Presentation<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.section508.gov\/develop\/applicability-conformance\/\">Section 508 WCAG Performance<\/a><\/li>\n<\/ul>\n<h2>Steps to Accessible Design<\/h2>\n<p>I strongly recommend checking out the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.a11yproject.com\/\">A11Y Project website<\/a> for actionable accessibility tips. A11Y, a <a href=\"https:\/\/www.hongkiat.com\/blog\/tech-numeronyms\/\">numeronym<\/a> for accessibility, is an open-source initiative available <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/a11yproject\/a11yproject.com\">on GitHub<\/a>, <strong>providing resources for accessible web design<\/strong>.<\/p>\n<p>Explore their comprehensive <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.a11yproject.com\/checklist.html\">accessibility checklist<\/a> or dive into various <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.a11yproject.com\/patterns.html\">design patterns<\/a> suitable for web elements like dropdowns, tabs, accordions, buttons, and modal windows, among others.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.a11yproject.com\/\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/01-a11y-accessibility-website.jpg\" alt=\"Homepage of the A11Y Accessibility Project\" width=\"700\" height=\"704\"> <\/a><\/figure>\n<p>Mastering accessibility is a gradual process; start small and continue learning. If you find certain aspects confusing, don\u2019t hesitate to delve deeper into research.<\/p>\n<p>Begin with A11Y\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.a11yproject.com\/resources\/\">how-tos and quick tips<\/a> to get started. You will encounter specific strategies such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/techniques\/skipnav\/\">skip navigation links<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/high-contrast-color-design\/\">high-contrast color schemes<\/a>. These methods vary in complexity, so trial and error are essential to find what best suits your site.<\/p>\n<p>Also consider the needs of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.hobo-web.co.uk\/design-website-for-blind\/#designing-websites-for-blind-and-visually-impaired-users\">blind or visually impaired users<\/a>, who may use screen readers or audio translators, and might navigate via a keyboard rather than a mouse. This underscores the importance of using <strong>proper semantic HTML<\/strong> (see this <a href=\"https:\/\/www.hongkiat.com\/blog\/html-5-semantics\/\">detailed guide<\/a>), including attributes like <strong>tabindex<\/strong> and <strong>accesskey<\/strong> to enhance navigability.<\/p>\n<p>If you\u2019re ready to dive deeper, consider adopting an <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-ready-wordpress-themes\/\">accessibility-ready theme<\/a>. These themes provide a solid foundation in accessible design principles, allowing you to customize and extend them as needed for your projects.<\/p>\n<h2>Accessibility Testing Tools<\/h2>\n<p>To start, simply choose a specific aspect of accessibility to focus on, and experiment with it. Utilize <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\">testing tools<\/a> to evaluate how well your designs meet accessibility standards.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/web-accessibility-evaluation-tools-list.jpg\" width=\"1000\" height=\"404\" alt=\"List of Web Accessibility Evaluation Tools\"><\/figure>\n<p>This endeavor <strong>can be challenging<\/strong>: the vast array of considerations and the complex nature of the WCAG guidelines might lead to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/psychcentral.com\/blog\/archives\/2013\/01\/21\/overcoming-information-overload\/\">information overload<\/a>. However, it\u2019s important to persevere. Select one accessibility focus at a time, use these tools to refine your approach, and gradually expand your expertise.<\/p>\n<p>For instance, you might begin by enhancing text visibility through the WCAG\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-contrast.html\">contrast specifications<\/a>. After choosing your color palette, check their compatibility using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/contrast-ratio.com\/\">this free contrast ratio tool<\/a> to ensure they meet accessibility standards.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/contrast-ratio.com\/\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/02-contrast-ratio-checker-webapp-github.jpg\" alt=\"Screenshot of the Contrast Ratio Checker tool\" width=\"700\" height=\"515\"> <\/a><\/figure>\n<p>Understanding the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/WCAG\/#visual-audio-contrast\">WCAG guidelines<\/a> can be daunting at first, but with practice, they will become clearer and more intuitive.<\/p>\n<p>To assess the accessibility of an existing website, consider using <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wave.webaim.org\/\">WAVE<\/a>, a <strong>free tool that visually identifies errors<\/strong> and potential issues on your site, highlighting areas like contrast errors and general accessibility violations.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/03-wave-checker-wcag.jpg\" alt=\"WAVE Tool Displaying Accessibility Errors on a Website\" width=\"1000\" height=\"727\"><\/figure>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.tpgi.com\/cynthiasays-com-accessibility-website-scan-announcement\/\">Cynthia Says portal<\/a> is another excellent resource that tests for WCAG conformance levels A, AA, and AAA, as well as Section 508 compliance, providing a comprehensive analysis of your site\u2019s accessibility.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/cynthia-says.jpg\" width=\"1026\" height=\"556\" alt=\"CynthiaSays Tool Screenshot\"><\/figure>\n<p>For those interested in DIY or community-driven solutions, here are some <strong>open-source accessibility tools available on GitHub<\/strong>:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/squizlabs.github.io\/HTML_CodeSniffer\/\">HTML CodeSniffer<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/paypal\/AATT\">Automated Accessibility Testing Tool (AATT)<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/zrrrzzt\/wcag-validator\">WCAG Validator<\/a><\/li>\n<\/ul>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/squizlabs.github.io\/HTML_CodeSniffer\/\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/04-html-code-sniffer-homepage.jpg\" alt=\"Homepage of HTML CodeSniffer\" width=\"700\" height=\"474\"> <\/a><\/figure>\n<div class=\"sue-icon-text su-image-caption\" data-url=\"\" data-target=\"self\" style=\"min-height:34px;padding-left:36px;color:#333333\">\n<div class=\"sue-icon-text-icon\" style=\"color:#333333;font-size:24px;width:24px;height:24px\"><i class=\"sui sui-photo\" style=\"font-size:24px;color:#333333\"><\/i><\/div>\n<div class=\"sue-icon-text-content su-u-trim\" style=\"color:#333333\">HTML Code Sniffe<\/div>\n<div style=\"clear:both;height:0\"><\/div>\n<\/div>\n<h2>Browser Add-ons for Accessibility Testing<\/h2>\n<p>Browser add-ons offer a quick and efficient means to test accessibility. These tools can be used on any computer and website, providing immediate and actionable insights.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/addons.mozilla.org\/en-GB\/firefox\/addon\/ainspector-wcag\/\">AInspector for Firefox<\/a> is highly recommended for comprehensive accessibility evaluations, surpassing many other tools in detail, including WAVE.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/ainspector-sidebar\/\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/05-firefox-ainspector-sidebar-plugin.jpg\" alt=\"Screenshot of AInspector Sidebar for Firefox\" width=\"1259\" height=\"476\"> <\/a><\/figure>\n<p>Firefox users can also utilize the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/wcag-contrast-checker\/\">WCAG Contrast Checker<\/a>, another free tool that is essential for checking visual accessibility.<\/p>\n<p>While Chrome does not support AInspector, it offers <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/accessibility-developer-tools\">Accessibility Developer Tools<\/a>, developed by Google. This extension provides a robust set of tools integrated into the Chrome Inspector to help developers adhere to accessibility standards effectively.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/accessibility-developer-t\/fpkknkljclfencbdbgkenhalefipecmb?hl=en\"> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/06-accessibility-developer-tools-extension.jpg\" alt=\"Screenshot of Accessibility Developer Tools extension for Chrome\" width=\"1118\" height=\"707\"> <\/a><\/figure>\n<p>Chrome enthusiasts also have options like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chromewebstore.google.com\/detail\/wcag-color-contrast-check\/plnahcmalebffmaghcpcmpaciebdhgdf\">luminosity contrast checkers<\/a> and the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/color-contrast-analyzer\/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en\">Color Contrast Analyzer<\/a> for visual accessibility, among other <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/chromewebstore.google.com\/category\/extensions\/make_chrome_yours\/accessibility\">free extensions<\/a>.<\/p>\n<p>While options are limited for Safari, Opera users can access tools like the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/addons.opera.com\/en-gb\/extensions\/details\/siteimprove-accessibility-checker\/\">Siteimprove Accessibility Checker<\/a>, which evaluates WCAG 2.0 compliance. A deeper search may reveal more tools available for different browsers.<\/p>\n<h2>Further Reading on Web Accessibility<\/h2>\n<p>Delving into web <a href=\"https:\/\/www.hongkiat.com\/blog\/accessibility-tools-for-designers\/\">accessibility<\/a> is a challenging yet rewarding journey. It requires commitment but the outcomes are profoundly beneficial.<\/p>\n<p>By this stage, you should have a better understanding of what web accessibility means, its purpose, and the specifics of what developers can do to enhance accessibility on their websites. The next steps involve deepening your knowledge and integrating these principles consistently into your projects.<\/p>\n<p>For more detailed information, explore the articles listed below and consider reviewing the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/intro\/wcag.php\">WCAG guidelines<\/a> directly from the primary source for comprehensive guidance.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/html-table-accessibility\/\">Improving HTML Table Accessibility with Markup<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/accessible-design-for-users-with-disabilities\/\">Accessible Design for Users with Disabilities<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webdesign.tutsplus.com\/articles\/6-tips-for-improving-website-accessibility--webdesign-1660\">6 Tips for Improving Website Accessibility<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mashable.com\/archive\/design-for-visually-impaired\">Ensuring Your Site Is Accessible to the Visually Impaired<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for responsive design have significantly improved how we design for various devices. However, designing for accessibility \u2013 that is, making your websites usable for all people, including those with disabilities \u2013 is just&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[3665],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Designer&#039;s Guide to the Basics of Web Accessibility Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designer&#039;s Guide to the Basics of Web Accessibility Design\" \/>\n<meta property=\"og:description\" content=\"The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-31T15:01:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-10T10:47:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/01-a11y-accessibility-website.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Designer&#8217;s Guide to the Basics of Web Accessibility Design\",\"datePublished\":\"2016-05-31T15:01:27+00:00\",\"dateModified\":\"2024-05-10T10:47:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/\"},\"wordCount\":1534,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-accessibility-design-guide\\\/01-a11y-accessibility-website.jpg\",\"keywords\":[\"Accessibility Design\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/\",\"name\":\"Designer's Guide to the Basics of Web Accessibility Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-accessibility-design-guide\\\/01-a11y-accessibility-website.jpg\",\"datePublished\":\"2016-05-31T15:01:27+00:00\",\"dateModified\":\"2024-05-10T10:47:12+00:00\",\"description\":\"The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-accessibility-design-guide\\\/01-a11y-accessibility-website.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/web-accessibility-design-guide\\\/01-a11y-accessibility-website.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/web-accessibility-design-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designer&#8217;s Guide to the Basics of Web Accessibility Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Designer's Guide to the Basics of Web Accessibility Design - Hongkiat","description":"The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/","og_locale":"en_US","og_type":"article","og_title":"Designer's Guide to the Basics of Web Accessibility Design","og_description":"The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for","og_url":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-05-31T15:01:27+00:00","article_modified_time":"2024-05-10T10:47:12+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/01-a11y-accessibility-website.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Designer&#8217;s Guide to the Basics of Web Accessibility Design","datePublished":"2016-05-31T15:01:27+00:00","dateModified":"2024-05-10T10:47:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/"},"wordCount":1534,"commentCount":12,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/01-a11y-accessibility-website.jpg","keywords":["Accessibility Design"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/","url":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/","name":"Designer's Guide to the Basics of Web Accessibility Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/01-a11y-accessibility-website.jpg","datePublished":"2016-05-31T15:01:27+00:00","dateModified":"2024-05-10T10:47:12+00:00","description":"The internet should be universally accessible, allowing everyone to access the same content no matter where they are in the world. Techniques for","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/01-a11y-accessibility-website.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/web-accessibility-design-guide\/01-a11y-accessibility-website.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/web-accessibility-design-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Designer&#8217;s Guide to the Basics of Web Accessibility Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6U1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26537"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26537\/revisions"}],"predecessor-version":[{"id":71836,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26537\/revisions\/71836"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26537"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}