{"id":83582,"date":"2022-10-06T07:13:04","date_gmt":"2022-10-06T05:13:04","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"modified":"2020-09-17T00:18:49","modified_gmt":"2020-09-17T03:18:49","slug":"accessibility-tips-for-web-developers","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/","title":{"rendered":"Accessibility tips for web developers"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Are-your-UI-components-accessible\" >Are your UI components accessible?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Can-your-UI-component-be-used-with-the-keyboard-alone\" >Can your UI component be used with the keyboard alone?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Using-tabindex\" >Using tabindex<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Using-autofocus\" >Using autofocus<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Adding-keyboard-interaction\" >Adding keyboard interaction<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Can-you-use-your-UI-component-with-a-screen-reader\" >Can you use your UI component with a screen reader?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Do-all-components-and-images-have-meaningful-text-alternatives\" >Do all components and images have meaningful text alternatives?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Do-your-components-provide-semantic-information\" >Do your components provide semantic information?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Can-users-understand-everything-without-relying-on-color\" >Can users understand everything without relying on color?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Is-there-sufficient-contrast-between-text-and-images-and-their-background\" >Is there sufficient contrast between text and images and their background?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\" >Is the moving or flashing content in your components stoppable and safe?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/#Conclusions\" >Conclusions<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Improving accessibility makes your site more useable for everyone.\n        <\/p>\n<p>\n          <time>Dec 6, 2019<\/time><\/p>\n<\/header>\n<p>It&#039;s awesome to build sites that are inclusive and accessible to everyone.<br \/>\nThere are at least six key areas of disability you can optimize for:<br \/>\n<strong>visual<\/strong>, <strong>hearing<\/strong>, <strong>mobility<\/strong>, <strong>cognition<\/strong>, <strong>speech<\/strong>, and <strong>neural<\/strong>.<br \/>\nMany tools and resources can help here,<br \/>\neven if you&#039;re totally new to web accessibility.<\/p>\n<p>Over one billion people live with some form of disability.<br \/>\nYou might have been in a loud room at some point<br \/>\ntrying to hear the conversation around you<br \/>\nor in a low-lighting condition trying to find something in the dark.<br \/>\nDo you remember the frustration you felt with that circumstance?<br \/>\nNow imagine if that temporary condition were permanent.<br \/>\nHow different would your experience on the web be?<\/p>\n<p>To be accessible, sites need to work across multiple devices<br \/>\nwith varying screen sizes and different kinds of input, such as screen readers.<br \/>\nMoreover, sites should be usable by the broadest group of users,<br \/>\nincluding those with disabilities.<br \/>\nHere&#039;s a sample of just a few disabilities your users may have:<\/p>\n<div class=\"w-table-wrapper\">\n<table>\n<thead>\n<tr>\n<th>Vision<\/th>\n<th>Hearing<\/th>\n<th>Mobility<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<ul>\n<li>Low vision<\/li>\n<li>Blindness<\/li>\n<li>Color blindness<\/li>\n<li>Cataracts<\/li>\n<li>Sun glare<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Hard of hearing<\/li>\n<li>Deafness<\/li>\n<li>Noise<\/li>\n<li>Ear infection<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Spinal cord injury<\/li>\n<li>Limited dexterity<\/li>\n<li>Hands full<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<th>Cognitive<\/th>\n<th>Speech<\/th>\n<th>Neural<\/th>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>Learning disability<\/li>\n<li>Sleepiness or distraction<\/li>\n<li>Migraine<\/li>\n<li>Autism<\/li>\n<li>Seizure<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Ambient noise<\/li>\n<li>Sore throat<\/li>\n<li>Speech impediment<\/li>\n<li>Unable to speak<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Depression<\/li>\n<li>PTSD<\/li>\n<li>Bipolar disorder<\/li>\n<li>Anxiety<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><strong>Visual issues<\/strong> range from an inability to distinguish colors to no vision at all.<\/p>\n<ul>\n<li>Ensure text content meets a minimum<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast-contrast\">contrast ratio threshold<\/a>.<\/li>\n<li>Avoid communicating information<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-without-color\">using solely color<\/a><br \/>\nand ensure that all text is<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-scale\">resizable<\/a>.<\/li>\n<li>Ensure all user interface components can be used with assistive technologies<br \/>\nsuch as screen readers, magnifiers, and braille displays.<br \/>\nThis entails ensuring that UI components are marked up<br \/>\nsuch that accessibility APIs can programmatically determine<br \/>\nthe <em>role<\/em>, <em>state<\/em>, <em>value<\/em>, and <em>title<\/em> of any element.<\/li>\n<\/ul>\n<p><strong>Tip:<\/strong> The element inspection feature in the Chrome, Edge, and Firefox developer<br \/>\ntools displays a tooltip of CSS properties<br \/>\nthat includes a quick check for color contrast ratio.<\/p>\n<p><img alt='inspect-element-5474631' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/inspect-element-5474631.jpg'><\/p>\n<p>I personally live with low vision, and I often find myself zooming in on sites,<br \/>\ntheir DevTools, and the terminal.<br \/>\nWhile supporting zoom is almost never at the top of developers&#039; to-do lists,<br \/>\nit can make a world of difference to users like me.<\/p>\n<p><strong>Hearing issues<\/strong> mean a user may have issues hearing sound emitted from a page.<\/p>\n<p><img alt='screen-reader-7256747' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/screen-reader-7256747.jpg'><\/p>\n<p><strong>Mobility issues<\/strong> can include the inability to operate a mouse, a keyboard, or a touch screen.<\/p>\n<ul>\n<li>Make the content of your UI components<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/wai-aria-practices\/#keyboard\">functionally accessible from a keyboard<\/a><br \/>\nfor any actions one would otherwise use a mouse for.<\/li>\n<li>Ensure pages are correctly marked up for assistive technologies \u2014 including<br \/>\nscreen readers, voice control software, and physical switch controls \u2014 which<br \/>\ntend to use the same APIs.<\/li>\n<\/ul>\n<p><strong>Cognitive issues<\/strong> mean a user may require assistive technologies<br \/>\nto help them with reading text, so it&#039;s important to ensure text alternatives exist.<\/p>\n<ul>\n<li>\n<p>Be mindful when using animations. Avoid video and animation that<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#time-limits\">repeat<\/a><br \/>\nor flash, which can cause <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#seizure\">issues<\/a><br \/>\nfor some users.<\/p>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2019\/03\/prefers-reduced-motion#too_much_motion_in_real_life_and_on_the_web\"><code>prefers-reduced-motion<\/code><\/a><br \/>\nCSS media query allows you to limit animations<br \/>\nand autoplaying videos for users who prefer reduced motion:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">prefers-reduced-motion<\/span><span class=\"token punctuation\">:<\/span> reduce<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token selector\">button<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">animation<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>Avoid interactions that are<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/no-timing.html\">timing-based<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>This may seem like a lot of bases to cover,<br \/>\nbut we&#039;ll walk through the process for assessing<br \/>\nand then improving the accessibility of your UI components.<\/p>\n<p><strong>Tip:<\/strong> The GOV.UK accessibility team has made some great<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/accessibility.blog.gov.uk\/2016\/09\/02\/dos-and-donts-on-designing-for-accessibility\/\">accessibility dos and don&#039;ts digital posters<\/a><br \/>\nto spread awareness of best practices in your team:<\/p>\n<p><img alt='two-donts-4261761' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/dos-donts-4261761.jpg'><\/p>\n<h2 id=\"are-your-ui-components-accessible\"><span class=\"ez-toc-section\" id=\"Are-your-UI-components-accessible\"><\/span>Are your UI components accessible? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Summary (tl; dr)<\/strong><\/p>\n<p>When auditing your page&#039;s UI components for accessibility, ask yourself:<\/p>\n<ul>\n<li>\n<p><strong>Can you use your UI component with the keyboard only?<\/strong><\/p>\n<p>Does the component manage focus and avoid focus traps?<br \/>\nCan it respond to the appropriate keyboard events?<\/p>\n<\/li>\n<li>\n<p><strong>Can you use your UI component with a screen reader?<\/strong><\/p>\n<p>Have you provided text alternatives for any information presented visually?<br \/>\nHave you added semantic information using ARIA?<\/p>\n<\/li>\n<li>\n<p><strong>Can your UI component work without sound?<\/strong><\/p>\n<p>Turn off your speakers and go through your use cases.<\/p>\n<\/li>\n<li>\n<p><strong>Can your UI component work without color?<\/strong><\/p>\n<p>Ensure your UI component can be used by someone who cannot see colors.<br \/>\nA helpful tool for simulating color blindness is a Chrome extension called<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/see\/dkihcccbkkakkbpikjmpnbamkgbjfdcn\">SEE<\/a>.<br \/>\n(Try all four forms of color blindness simulation available.)<br \/>\nYou may also be interested in the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/daltonize\/obcnmdgpjakcffkcjnonpdlainhphpgh\">Daltonize<\/a><br \/>\nextension, which is similarly useful.<\/p>\n<\/li>\n<li>\n<p><strong>Can your UI component work with high-contrast mode enabled?<\/strong><\/p>\n<p>All modern operating systems support a high contrast mode.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/high-contrast\/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en\">High Contrast<\/a><br \/>\nis a Chrome extension that can help here.<\/p>\n<\/li>\n<\/ul>\n<p>Native controls (such as <code><button><\/code> and <code><\/code>)<br \/>\nhave accessibility built in by the browser.<br \/>\nThey are focusable using the <code>Tab<\/code> key;<br \/>\nthey respond to keyboard events (like the <code>Enter<\/code>, <code>Space<\/code>, and arrow keys);<br \/>\nand they have semantic roles, states, and properties used by accessibility tools.<br \/>\nTheir default styling should also meet the accessibility requirements listed above.<\/p>\n<p>Custom UI components<br \/>\n(with the exception of components that extend native elements like <code><button><\/code>)<br \/>\ndo not have any built-in functionality, including accessibility,<br \/>\nso you need to provide it.<br \/>\nA good place to start when implementing accessibility<br \/>\nis to compare your component to an analogous native element<br \/>\n(or a combination of several native elements,<br \/>\ndepending on how complex your component is).<\/p>\n<p><strong>Tip:<\/strong> Most browser developer tools support inspecting the accessibility tree of a page.<br \/>\nIn Chrome DevTools, this is available via the <strong>Accessibility<\/strong> tab in the <strong>Elements<\/strong> panel:<\/p>\n<p><img alt='a11y-tree-chrome-2315214' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/a11y-tree-chrome-2315214.png'><\/p>\n<p>Firefox also has an <strong>Accessibility<\/strong> panel:<\/p>\n<p><img alt='a11y-tree-ff-3157030' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/a11y-tree-ff-3157030.jpg'><\/p>\n<p>Safari exposes accessibility information in the <strong>Elements<\/strong> panel&#039;s <strong>Do not give<\/strong> tab.<\/p>\n<p>The following is a list of questions you can ask yourself when attempting to make your UI components more accessible.<\/p>\n<h2 id=\"can-your-ui-component-be-used-with-the-keyboard-alone\"><span class=\"ez-toc-section\" id=\"Can-your-UI-component-be-used-with-the-keyboard-alone\"><\/span>Can your UI component be used with the keyboard alone? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ideally, ensure that all functionality<br \/>\nin your UI component can be accessed via keyboard.<br \/>\nWhen designing your user experience,<br \/>\nthink about how you would use your element with the keyboard alone<br \/>\nand figure out a consistent set of keyboard interactions.<\/p>\n<p>First, ensure that you have a sensitive focus target for each component.<br \/>\nFor example, a complex component like a menu may be one focus target within a page<br \/>\nbut should then manage focus within itself so that the active menu item always takes focus.<\/p>\n<figure class=\"w-figure\">\n  <img alt='manage-focus-5142883' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/manage-focus-5142883.png'><figcaption class=\"w-figcaption\">\n    Managing focus within a complex element.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"using-tabindex\"><span class=\"ez-toc-section\" id=\"Using-tabindex\"><\/span>Using tabindex <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>tabindex<\/code> attribute allows elements and UI components to be focused using the keyboard. Keyboard-only and assistive technology users both need to be able to place keyboard focus on elements to interact with them. Native interactive elements are implicitly focusable, so they don&#039;t need a <code>tabindex<\/code> attribute unless you wish to change their position in the tab order.<\/p>\n<p><strong>There are three types of <code>tabindex<\/code> values:<\/strong><\/p>\n<ul>\n<li>\n<p><strong><code>tabindex = &quot;0&quot;<\/code><\/strong> is the most common and places the element in the natural tab order (defined by the DOM order).<\/p>\n<\/li>\n<li>\n<p><strong>to <code>tabindex<\/code> value greater than 0<\/strong> places the element in a manual tab order \u2014 all elements in the page with a positive <code>tabindex<\/code> value are visited in numerical order before elements in the natural tab order.<\/p>\n<\/li>\n<li>\n<p><strong>to <code>tabindex<\/code> value equal to -1<\/strong> causes the element to be programmatically focusable, but not in the tab order.<\/p>\n<\/li>\n<\/ul>\n<p>For custom UI components, always use <code>tabindex<\/code> values of 0 or -1, as you won&#039;t be able to determine the order of elements on a given page ahead of time \u2014 and even if you did, the order may change. TO <code>tabindex<\/code> value of -1 is particularly useful for managing focus within complex components as described above.<\/p>\n<p>Also ensure that focus is always visible, whether by allowing the default focus ring style or by applying a discernible custom focus style. Remember not to trap keyboard users \u2014 they should be able to move focus away from an element using only the keyboard.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>You may also be interested in the roving <code>tabindex<\/code> or <code>aria-activedescendant<\/code> approaches,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex\">covered over on MDN<\/a>.<\/p>\n<\/div>\n<h3 id=\"using-autofocus\"><span class=\"ez-toc-section\" id=\"Using-autofocus\"><\/span>Using autofocus <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The HTML autofocus attribute allows an author to specify<br \/>\nthat a particular element should automatically take focus<br \/>\nwhen the page is loaded.<br \/>\n<code>autofocus<\/code> is already supported on<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#association-of-controls-and-forms\">all web form controls<\/a>,<br \/>\nincluding buttons.<br \/>\nTo autofocus elements in your own custom UI components,<br \/>\ncall the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLElement.focus\"><code>focus ()<\/code><\/a> method,<br \/>\nsupported on all HTML elements that can be focused<br \/>\n(for example, <code>document.querySelector (&#039;myButton&#039;). focus ()<\/code>).<\/p>\n<h3 id=\"adding-keyboard-interaction\"><span class=\"ez-toc-section\" id=\"Adding-keyboard-interaction\"><\/span>Adding keyboard interaction <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once your UI component is focusable,<br \/>\nprovide a good keyboard interaction story<br \/>\nwhen a component is focused by handling appropriate keyboard events.<br \/>\nFor example, allow the user to use arrow keys to select menu options<br \/>\nand <code>Space<\/code> or <code>Enter<\/code> to activate buttons.<br \/>\nThe ARIA <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/wai-aria-practices\/#aria_ex\">design patterns guide<\/a><br \/>\nprovides some guidance here.<\/p>\n<p>Finally, ensure that your keyboard shortcuts are discoverable.<br \/>\nA common practice is to have a keyboard shortcut legend (on-screen text)<br \/>\nto inform the user that shortcuts exist.<br \/>\nFor example, \u00abPress? for keyboard shortcuts. \u00bb<br \/>\nAlternatively, a hint such a tooltip can be used<br \/>\nto inform the user about a shortcut.<\/p>\n<p>The importance of managing focus cannot be overstated.<br \/>\nOne example is a navigation drawer.<br \/>\nIf you add a UI component to the page,<br \/>\nyou need to direct focus to an element inside of it;<br \/>\notherwise, users may have to tab through the entire page to get there.<br \/>\nThis can be a frustrating experience,<br \/>\nso be sure to test focus for all keyboard navigable components in your page.<\/p>\n<p><strong>Tip:<\/strong> You can use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/puppeteer\/puppeteer\">Puppeteer<\/a><br \/>\nto automate running keyboard accessibility tests for toggling UI states.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medium.com\/walkme-engineering\/web-accessibility-testing-d499a7f7a032\">WalkMe Engineering<\/a><br \/>\nhas a great guide on this I recommend reading.<\/p>\n<figure class=\"w-figure\">\n  <img alt='aria-expanded-9017763' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/aria-expanded-9017763.gif'><br \/>\n<\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> category <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">.category<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">role<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> category<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">button<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">tabindex<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> category<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">0<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> window<span class=\"token punctuation\">.<\/span>document<span class=\"token punctuation\">.<\/span>activeElement <span class=\"token operator\">===<\/span> elem<span class=\"token punctuation\">,<\/span> category<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">aria-expanded<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> category<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">false<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span>keyboard<span class=\"token punctuation\">.<\/span><span class=\"token function\">press<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Space'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> page<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">aria-expanded<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> category<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">true<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"can-you-use-your-ui-component-with-a-screen-reader\"><span class=\"ez-toc-section\" id=\"Can-you-use-your-UI-component-with-a-screen-reader\"><\/span>Can you use your UI component with a screen reader? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Around 1\u20132% of people use a screen reader.<br \/>\nCan you understand all important information<br \/>\nand interact with the component using the screen reader and keyboard alone?<\/p>\n<p>The following questions should help you address screen reader accessibility.<\/p>\n<h3 id=\"do-all-components-and-images-have-meaningful-text-alternatives\"><span class=\"ez-toc-section\" id=\"Do-all-components-and-images-have-meaningful-text-alternatives\"><\/span>Do all components and images have meaningful text alternatives? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wherever information about the <em>yam<\/em> or <em>purpose<\/em><br \/>\nof an interactive component is conveyed visually,<br \/>\nprovide an accessible text alternative.<\/p>\n<p>For example, if your <code><\/code> UI component only displays a gear icon<br \/>\nto indicate that it&#039;s a settings menu,<br \/>\nit needs an accessible text alternative, such as \u00absettings,\u00bb<br \/>\nthat conveys the same information.<br \/>\nDepending on context,<br \/>\nyou can provide a text alternative using an <code>alt<\/code> attribute,<br \/>\nan <code>aria-label<\/code> attribute, an <code>aria-labelledby<\/code> attribute,<br \/>\nor plain text in the Shadow DOM.<br \/>\nYou can find general technical tips in <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webaim.org\/resources\/quickref\/\">WebAIM Quick Reference<\/a>.<\/p>\n<p>Any UI component that displays an image should provide a mechanism<br \/>\nfor providing alternative text for that image, analogous to the <code>alt<\/code> attribute.<\/p>\n<h3 id=\"do-your-components-provide-semantic-information\"><span class=\"ez-toc-section\" id=\"Do-your-components-provide-semantic-information\"><\/span>Do your components provide semantic information? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Assistive technology conveys semantic information<br \/>\nthat is otherwise expressed to sighted users via visual cues<br \/>\nsuch as formatting, cursor style, or position.<br \/>\nNative elements have this semantic information built-in by the browser,<br \/>\nbut for custom components you need to use<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/WAI\/PF\/aria\/\">ARIA<\/a> to add the information.<\/p>\n<p>As a rule of thumb, any component that listens to a mouse click or hover event<br \/>\nshould not only have some kind of keyboard event listener,<br \/>\nbut also an ARIA role and potentially ARIA states and attributes.<\/p>\n<p>For example, a custom <code><\/code> UI component might take an ARIA role of slider,<br \/>\nwhich has some related ARIA attributes: <code>aria-valuenow<\/code>, <code>aria-valuemin<\/code> and <code>aria-valuemax<\/code>.<br \/>\nBy binding these attributes to the relevant properties on your custom component,<br \/>\nyou can allow users of assistive technology to interact with the element,<br \/>\nchange its value, and even cause the element&#039;s visual presentation to change accordingly.<\/p>\n<figure class=\"w-figure\">\n  <img alt='slider-8196398' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/slider-8196398.png' class=\"w-screenshot\"><figcaption class=\"w-figcaption\">\n    A range slider component.<br \/>\n  <\/figcaption><\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>fancy-slider<\/span> <span class=\"token attr-name\">role<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>slider<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-valuemin<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-valuemax<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>5<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-valuenow<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2.5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>fancy-slider<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"can-users-understand-everything-without-relying-on-color\"><span class=\"ez-toc-section\" id=\"Can-users-understand-everything-without-relying-on-color\"><\/span>Can users understand everything without relying on color? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Color shouldn&#039;t be used as the only means of conveying information,<br \/>\nsuch as indicating a status, prompting the user for a response,<br \/>\nor visualizing data.<br \/>\nFor example, if you have a pie chart,<br \/>\nprovide labels and values for each slice<br \/>\nso users who have visual impairments can understand the information<br \/>\neven if they can&#039;t tell where the slices begin and end:<\/p>\n<figure class=\"w-figure\">\n  <img alt='pie-chart-2580594' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/pie-chart-2580594.png'><figcaption class=\"w-figcaption\">An accessible pie chart. (From the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/GL\/low-vision-a11y-tf\/wiki\/Informational_Graphic_Contrast_(Minimum)\">W3C Web Accessibility Initiative<\/a>.)<\/figcaption><\/figure>\n<h3 id=\"is-there-sufficient-contrast-between-text-and-images-and-their-background\"><span class=\"ez-toc-section\" id=\"Is-there-sufficient-contrast-between-text-and-images-and-their-background\"><\/span>Is there sufficient contrast between text and images and their background? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Any text content displayed in your component should meet the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-contrast\">minimum WCAG AA-level contrast threshold<\/a>.<br \/>\nConsider providing a high-contrast theme that meets the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast7\">higher AAA threshold<\/a>,<br \/>\nand ensure that user agent style sheets can be applied<br \/>\nif users require custom contrast or different colors.<br \/>\nYou can use this <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\">Color Contrast Checker<\/a><br \/>\nas an aid when designing your component.<\/p>\n<h3 id=\"is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\"><span class=\"ez-toc-section\" id=\"Is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\"><\/span>Is the moving or flashing content in your components stoppable and safe? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Content that moves, scrolls, or blinks for more than five seconds<br \/>\nshould be able to be paused, stopped or hidden.<br \/>\nIn general, avoid flashing content.<br \/>\nIf something must flash, make sure it flashes no more than three times per second.<\/p>\n<p>A number of tools are available that can assist with<br \/>\ndebugging the accessibility of your visual components.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.deque.com\/products\/axe\/\">Ax<\/a> provides automated accessibility testing<br \/>\nfor your framework or browser of choice.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.deque.com\/blog\/axe-and-attest-integration-puppeteer\/\">Ax Puppeteer<\/a><br \/>\ncan be used for writing automated accessibility tests.<\/li>\n<li>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Lighthouse<\/a><br \/>\nAccessibility audits provide helpful insights for discovering common accessibility issues.<br \/>\nThe accessibility score is a weighted average of all accessibility audits<br \/>\nbased on <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/dequelabs\/axe-core\/blob\/develop\/doc\/rule-descriptions.md\">Ax user impact assessments<\/a>.<br \/>\nFor monitoring accessibility via continuous integration, see <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\">Lighthouse CI<\/a>.<\/li>\n<\/ul>\n<p><img alt='lh-a11y-audit-4036737' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/lh-a11y-audit-4036737.png'><\/p>\n<ul>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/tenon.io\/\">Tenon.io<\/a> is useful for testing common accessibility problems.<br \/>\nTenon has strong integration support across build tools, browsers (via extensions), and even text editors.<\/p>\n<\/li>\n<li>\n<p>There are many library- and framework-specific tools<br \/>\nfor highlighting accessibility issues with components.<br \/>\nFor example, web.dev<br \/>\nexplains how to use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/eslint-plugin-jsx-a11y\">eslint-plugin-jsx-a11y<\/a><br \/>\nto highlight accessibility issues for React components in your editor:<\/p>\n<p><img alt='react-a11y-testing-6044405' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/react-a11y-testing-6044405.png'><\/p>\n<p>If you use Angular, codelyzer<br \/>\nprovides in-editor accessibility audits too:<\/p>\n<p><img alt='angular-a11y-testing-2426100' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/angular-a11y-testing-2426100.png'><\/p>\n<\/li>\n<li>\n<p>You can examine the way that assistive technologies see web content by using<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/library\/archive\/documentation\/Accessibility\/Conceptual\/AccessibilityMacOSX\/OSXAXTestingApps.html#\/\/apple_ref\/doc\/uid\/TP40001078-CH210-SW1\">Accessibility Inspector<\/a> (Mac)<br \/>\nor <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/desktop\/dd373661(v=vs.85).aspx\">Windows Automation API Testing Tools<\/a><br \/>\nand <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/accessibility.linuxfoundation.org\/a11yweb\/util\/accprobe\/\">AccProbe<\/a> (Windows).<br \/>\nYou can also see the full accessibility tree that Chrome creates<br \/>\nby navigating to <code>chrome:\/\/accessibility<\/code>.<\/p>\n<\/li>\n<li>\n<p>The best way to test for screen reader support on a Mac is using the VoiceOver utility.<br \/>\nUse <code>\u2318F5<\/code> to enable or disable it, <code>Ctrl + Option \u2190 \u2192<\/code> to move through the page,<br \/>\nand <code>Ctrl + Shift + Option + \u2191 \u2193<\/code> to move up and down the accessibility tree.<br \/>\nFor more detailed instructions,<br \/>\nsee the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.apple.com\/voiceover\/info\/guide\/_1131.html\">full list of VoiceOver commands<\/a><br \/>\nand the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.apple.com\/voiceover\/info\/guide\/_1131.html#vo27972\">list of VoiceOver Web commands<\/a>.<\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/khan.github.io\/tota11y\/\">tota11y<\/a> is a useful visualizer<br \/>\nfor assistive technology issues built by Khan Academy.<br \/>\nIt&#039;s a script that adds a button to your document that triggers several plugins<br \/>\nfor annotating things like insufficient contrast ratio and other a11y violations.<\/p>\n<\/li>\n<li>\n<p>On Windows, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.nvaccess.org\/\">NVDA<\/a> is a free, open source screen reader<br \/>\nthat&#039;s fully featured and rapidly gaining in popularity.<br \/>\nHowever, note that it has a much steeper learning curve for sighted users than VoiceOver.<\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/chromelens.xyz\/\">ChromeLens<\/a> helps develop for the visually impaired.<br \/>\nIt also has great support for visualizing keyboard navigation paths.<\/p>\n<p><img alt='chromelens-1704496' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/chromelens-1704496.jpg'><\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.chromevox.com\/\">ChromeVox<\/a> is a screen reader available as a Chrome extension and built into ChromeOS devices.<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"conclusions\"><span class=\"ez-toc-section\" id=\"Conclusions\"><\/span>Conclusions <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We still have a long way to go to improve accessibility on the web.<br \/>\nPer the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2019\/accessibility\">Web Almanac<\/a>:<\/p>\n<ul>\n<li>4 out of every 5 sites have text that easily blends into the background, making it unreadable.<\/li>\n<li>49.91% of pages still fail to provide <code>alt<\/code> attributes for some of their images.<\/li>\n<li>Only 24% of pages that use buttons or links include textual labels for them.<\/li>\n<li>Only 22.33% of pages provide labels for all their form inputs.<\/li>\n<\/ul>\n<p>To learn more about accessibility fundamentals and help improve those statistics,<br \/>\nI recommend the Accessible to all docs on web.dev.<br \/>\nThere&#039;s a lot we can do to build experiences that are more accessible for everyone.<\/p>\n<p><img alt='web-dev-a11y-3820183' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/web-dev-a11y-3820183.jpg'><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Improving accessibility makes your site more usable for everyone. Dec 6, 2019 It&#039;s awesome to build sites that are inclusive and accessible to everyone. There are at least six keys\u2026<\/p>","protected":false},"author":1,"featured_media":83583,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83582","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Accessibility tips for web developers - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It&#039;s awesome to build sites that are inclusive and accessible to everyone.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility tips for web developers\" \/>\n<meta property=\"og:description\" content=\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It&#039;s awesome to build sites that are inclusive and accessible to everyone.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T05:13:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Accessibility tips for web developers\",\"datePublished\":\"2022-10-06T05:13:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"},\"wordCount\":2491,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\",\"name\":\"Accessibility tips for web developers - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"datePublished\":\"2022-10-06T05:13:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"width\":1000,\"height\":420,\"caption\":\"hero-8449472-5278027-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Accessibility tips for web developers - R Marketing Digital","description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","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:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/","og_locale":"en_US","og_type":"article","og_title":"Accessibility tips for web developers","og_description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/accessibility-tips-for-web-developers\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-06T05:13:04+00:00","og_image":[{"width":1000,"height":420,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Accessibility tips for web developers","datePublished":"2022-10-06T05:13:04+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"wordCount":2491,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/","url":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/","name":"Accessibility tips for web developers - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","datePublished":"2022-10-06T05:13:04+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","width":1000,"height":420,"caption":"hero-8449472-5278027-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=83582"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/83582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/83583"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=83582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=83582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=83582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}