<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Manjula Subhashchandra Dube</title>
    <description>The latest articles on DEV Community by Manjula Subhashchandra Dube (@manjula_dube).</description>
    <link>https://dev.to/manjula_dube</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F30824%2Fd2679178-9ab2-4eb0-adf0-6dfc370d9e36.png</url>
      <title>DEV Community: Manjula Subhashchandra Dube</title>
      <link>https://dev.to/manjula_dube</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/manjula_dube"/>
    <language>en</language>
    <item>
      <title>All about aria-current attribute</title>
      <dc:creator>Manjula Subhashchandra Dube</dc:creator>
      <pubDate>Tue, 26 May 2020 22:56:27 +0000</pubDate>
      <link>https://dev.to/manjula_dube/all-about-aria-current-attribute-3gkf</link>
      <guid>https://dev.to/manjula_dube/all-about-aria-current-attribute-3gkf</guid>
      <description>&lt;h2&gt;
  
  
  &lt;code&gt;aria-current&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;aria-current&lt;/code&gt; attribute is used when an element within collections is visually styled to indicate it is the current item in the set. This can be an active tab on the nav bar which visually is shown active, or make be a breadcrumb link which is active.&lt;/p&gt;

&lt;p&gt;For some more info on this topic read on &lt;a href="https://www.digitala11y.com/aria-current-state/"&gt;digitala11y&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In short &lt;code&gt;aria-current&lt;/code&gt; is an attribute defined in the &lt;a href="https://www.w3.org/TR/wai-aria-1.1/#aria-current"&gt;WAI-ARIA&lt;/a&gt; specification. This specification extends native HTML, allowing you to change the way an HTML element is "translated" into the accessibility tree.&lt;/li&gt;
&lt;li&gt;It can take multiple values, for example: &lt;i&gt; &lt;b&gt;page, step, location, date, time, false, true &lt;/b&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h5&gt;
  
  
  According to the ARIA 1.1 specification, the &lt;code&gt;aria-current&lt;/code&gt; attribute can be given one of a predefined set of values:
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;page - represents the current page within a set of pages.&lt;/li&gt;
&lt;li&gt;step - represents the current step within a process.&lt;/li&gt;
&lt;li&gt;location - represents the current location within an environment or context.&lt;/li&gt;
&lt;li&gt;date - represents the current date within a collection of dates.&lt;/li&gt;
&lt;li&gt;time - represents the current time within a set of times.&lt;/li&gt;
&lt;li&gt;true - represents the current item within a set.&lt;/li&gt;
&lt;li&gt;false - does not represent item within a set.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Ok, so the concept goes like this:
&lt;/h4&gt;

&lt;p&gt;Using &lt;code&gt;aria-current&lt;/code&gt; the right way.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First we will go through &lt;code&gt;aria-current = page&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;i&gt; I am taking an example of my website. Below you see talks section is an active page the user is currently on.&lt;/i&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--j_gXcsdr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/YknwVh8/Screenshot-2020-05-26-at-21-09-13.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--j_gXcsdr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/YknwVh8/Screenshot-2020-05-26-at-21-09-13.png" alt=""&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="nx"&gt;aria&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;page&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;css-wbxg5e active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/talks&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;font-size: 1em;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Talks&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/i&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;The active sections &lt;code&gt;talks&lt;/code&gt; indicates the current page in the main navigation. While visible to sighted users, it also uses &lt;code&gt;aria-current="page"&lt;/code&gt; to convey the information to screen reader users.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;aria-current="date"&lt;/code&gt; and &lt;code&gt;aria-current="time"&lt;/code&gt; are very similar to each other. This can be used when implementing date picker, when we display a list of dates, and when it's today's date, we should use the `aria-current="date" to mark the current date to screen reader users.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;aria-current="step"&lt;/code&gt;&lt;br&gt;
If we need to indicate the current step within a step indicator of a multi-step process (e.g: multi-step checkout process etc), aria-current="step" should be used to indicate the current step to screen reader users.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some resources to checkout if you interested to learn more on &lt;code&gt; aria-current &lt;/code&gt;  &lt;a href="https://a11ysupport.io/tests/tech__aria__aria_current"&gt;a11ysupport.io&lt;/a&gt;, &lt;a href="https://tink.uk/using-the-aria-current-attribute/"&gt;tink.uk&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you want to know more about ARIA attributes checkout &lt;a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA"&gt;MDN Docs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This article was originally published on &lt;a href="https://www.manjuladube.dev/"&gt;https://www.manjuladube.dev/&lt;/a&gt;. Head over there if you like this post and want to read others like it."&lt;/p&gt;

</description>
      <category>web</category>
      <category>security</category>
    </item>
    <item>
      <title>Must Watch Javascript 2019 Tech Talks by awesome Women in Tech from 2019</title>
      <dc:creator>Manjula Subhashchandra Dube</dc:creator>
      <pubDate>Thu, 26 Dec 2019 21:39:54 +0000</pubDate>
      <link>https://dev.to/manjula_dube/must-watch-javascript-2019-tech-talks-talks-by-awesome-women-in-tech-from-2019-44nf</link>
      <guid>https://dev.to/manjula_dube/must-watch-javascript-2019-tech-talks-talks-by-awesome-women-in-tech-from-2019-44nf</guid>
      <description>&lt;p&gt;Before 2019 ends I would like to take the opportunity to thank these awesome women in tech, Who according to me delivered amazing tech talks for this year.If you haven't yet watched them, do it before new year.&lt;/p&gt;

&lt;p&gt;Also feel free to mention the amazing one's which you find interesting in the comments ♥️&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=QklMZaObKY4"&gt;Debugging the Debugger by Princiya Sequeira | React Rally 2019&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This talk is the inception of debugging the Firefox devtools’ debugger which is built using React and Redux. All of us love to ‘console’ log our code, but there are other effective techniques that will help accelerate the debug loop cycle.&lt;/p&gt;

&lt;p&gt;In this talk, Princiya will present the various available browser devtools debugging techniques using practical examples from the community to debug the development of the debugger project!&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.dotconferences.com/2019/12/charlie-gerard-exploring-the-hidden-potential-of-sound-data"&gt;Exploring the hidden potential of sound data by Charlie Gerard | dotJS&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Even though we don’t really think about it, sound is a very rich source of information. Leveraging the properties of sound with machine learning, we can gain insights about an environment or an activity performed. Acoustic activity recognition has the potential to create new interactions and better smart systems, and in this talk, Charlie explores how to experiment with this technology in JavaScript, using the Web audio API and Tensorflow.js.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=hjgni3dXcVE"&gt;The Future of Web Animation - Sarah Drasner | JSHeroes 2019&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;In this talk, you'll start learning some bleeding edge techniques such as native-like page transitions with client side rendering, but then we'll push it further. The intersection of health and animation with biofeedback sensors, the future of 3d in the browser complete with interviews with people who are writing these specs .This talk will show that in terms of animation on the web, we're just getting started.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=SHIci8-6_gs"&gt;Tink: A Next-Generation Package Manager by Kat Marchán | JSConf EU&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;With nearly 1,000,000 packages, the npm ecosystem is the largest out there, by far – but the ecosystem and its package manager were created in more humble times, for small projects and packages centered around the Node.js ecosystem itself. It’s about time we redefined package management for modern web development, and that redefinition is tink: a package unwinder for JavaScript brought to you by npm itself. With tink, you’ll find unprecedented speeds, deep compatibility with everything from Node.js to bundlers, and a UX workflow optimized for the modern web developer. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=KT3XKDBZW7M"&gt;Building The New Facebook With React and Relay by Ashley Watkins | React Conf&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Ashley discusses some of the technologies and strategies powering FB5, the new facebook.com. Topics covered include Facebook's approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=GI2Vo-UQG5w"&gt;API Modernization: Building Bridges As You Cross Them by Shelley Vohr | JSConf Budapest 2019&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;In this talk you will learn updates ranging from asynchronous JS to idiomatic getters and setters, as well as allowing developers to access new platform-dependent functionalities. Our APIs can and often are implemented across two or more languages on their way to the end user, and so we'll walk through some examples of how to effectively gather context and write reusable code to make updating simpler.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=ThYp5apom1k"&gt;Work Less and Do More: Google Sheets for Node.js Developers - Franziska Hinkelmann and Anu Srivastav&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;In this talk you will see how you can string together your emails, docs, charts, all of it—into one gorgeous report, ready to email off. You can combine all your data— from GitHub metrics, monitoring data, to surveys — with this wide-ranging platform that involves “human” tools, such as a Calendar and Contacts. Thanks to a helpful client library, Node.js is the glue that you can use to code up all the business work, so that you can get back to the business of coding.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=4Y7LnVILnGE"&gt;The Front-End Stands Alone by Keerthana Krishnan | JS Kongress 2019 &lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;With the advent of serverless architecture, front-end developers can now easily build and deploy their applications without a lot of overheads.&lt;br&gt;
This session aims to look at how to build a basic web application with serverless architecture and why it’s becoming more popular.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=U1th3Qs-E_A"&gt;Accessibility in the Age of Components by Ayesha Mazumdar | React Boston 2019&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;We often build component libraries to improve consistency, collaboration, and customization for a given product. But what if a component library could also scale accessibility across the entire organization? Building accessible components can help distribute responsibility across all of design and engineering, without needing everyone to be an expert on the nitty-gritty details. In this session, we'll go through specific component examples and use cases to help you and your team contribute to a better, more inclusive web.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=PsRtnGpe-nU&amp;amp;feature=youtu.be"&gt;A Journey to the Center of a Slow React App by Pavithra Kodmad | React India 2019&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;What are the major factors that slow down a web application written in React? Can we mitigate them? If so, what are the tradeoffs. Pavitra will be speaking about perf improvements we made in our large application. From state management to measuring correctly to dealing with legacy frontend, this talk will cover a variety of reasons why things got slow. And how to deal with it.&lt;/p&gt;

&lt;p&gt;Thank you for Reading!!&lt;br&gt;
Happy New Year &lt;/p&gt;

</description>
      <category>womenintech</category>
      <category>javascript</category>
      <category>react</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Top 10 things to know about web accessibility as a Developer in 2020</title>
      <dc:creator>Manjula Subhashchandra Dube</dc:creator>
      <pubDate>Tue, 24 Dec 2019 17:55:56 +0000</pubDate>
      <link>https://dev.to/manjula_dube/top-10-things-to-know-about-web-accessibility-as-a-developer-in-2020-4eel</link>
      <guid>https://dev.to/manjula_dube/top-10-things-to-know-about-web-accessibility-as-a-developer-in-2020-4eel</guid>
      <description>&lt;h2&gt;
  
  
  What is web accessibility ?
&lt;/h2&gt;

&lt;p&gt;Before we dive into what web accessibility is, we should first understand what the word ‘Accessibility’ entails.From my knowledge, “Accessibility means the ability of everyone regardless of their condition to have access to something (e.g internet, transport system).” It's not a switch that can be turned on and off. We need to write semantic HTML right from the start.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Add Alt Text to All Images
&lt;/h3&gt;

&lt;p&gt;Adding alternative text for images is the first principle of web accessibility.This text acts as a replacement for the image if it fails to load. Adding alternative text to the image helps the users who use screen readers. The screen readers will read the alt text and provide the information to the non sighted users.&lt;/p&gt;

&lt;p&gt;Alt text should answer this question: What is the content conveyed by the image?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; If the image is purely decorative or if it creates redundancy because the surrounding context already explains the content. Then adding an empty  attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Forms should be accessible
&lt;/h3&gt;

&lt;p&gt;Although building forms can be a difficult task at times, making them moderately accessible isn’t as complicated as you might think. Filling forms on websites and apps for people with disabilities and even for people without disabilities should always be with ease.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The first rule to create a truly accessible form is to use native HTML form controls.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;radio&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;checkbox&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Submit&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Since we use the native HTML controls, the name, role, and state of the elements are exposed by default to all assistive technologies. But if you using div's to build custom elements, make sure you do not forget to add ARIA attributes like aria-label, aria-checked, role= “radio” etc.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Make sure to use Explicit label wherever possible. 👇
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;label&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fname&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;First&lt;/span&gt; &lt;span class="nx"&gt;Name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/label&amp;gt;&lt;/span&gt;&lt;span class="err"&gt; 
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fname&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fname&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;br&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;label&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;lname&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Last&lt;/span&gt; &lt;span class="nx"&gt;Name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/label&amp;gt;&lt;/span&gt;&lt;span class="err"&gt; 
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;input&lt;/span&gt; &lt;span class="nx"&gt;type&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;lname&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;lname&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;If explicit label is not being used make sure to provide every form control a label using aria-label, aria-labelledby.&lt;/p&gt;

&lt;p&gt;For more information read visible label&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Ensure all interactive features are keyboard-accessible
&lt;/h3&gt;

&lt;p&gt;The most important goal of keyboard accessibility is to make every interactive element, such as links and form controls, available with the Tab key. This is how keyboard-only users navigate through a web page. Testing your website for keyboard accessibility is actually pretty easy: just press the Tab key and navigate from the top of the page to the bottom, highlighting active elements as you go.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;People who are blind need full keyboard access. Period.&lt;/em&gt;&lt;br&gt;
          — David Macdonald, co-editor of Using WAI ARIA in HTML5&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Common Keys Used in Keyboard Operation of Web Pages and Web-based Applications&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Tab – move to the next link, form element or button.&lt;br&gt;
Shift+Tab – move to the previous link, form element, or button.&lt;br&gt;
Enter – activate the current link or button.&lt;br&gt;
Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus.&lt;br&gt;
Up/Down arrow keys – move between radio buttons or, in some cases, menu links.&lt;br&gt;
Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins.&lt;br&gt;
Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;If you are interested in reading tips on how to improve your keyboard navigation. Read here&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  4. Design usable focus states
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0UTnHvtM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/erwmmx2jh4yplhdi5kmz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0UTnHvtM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/erwmmx2jh4yplhdi5kmz.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators.&lt;/p&gt;

&lt;p&gt;Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. Your designers might find these default focus indicators not very pretty and be tempted just to hide or remove them. However, if you get rid of this default style, be sure to replace it with something else.&lt;/p&gt;

&lt;p&gt;Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site.&lt;/p&gt;
&lt;h3&gt;
  
  
  5. Use correct markup on your content
&lt;/h3&gt;

&lt;p&gt;When writing semantic markup, we use HTML tags to tell browsers something about the contents of the element. In semantic markup, tags are no longer just a way to get content to show up on a web page in a human-readable format.&lt;/p&gt;

&lt;p&gt;The tags themselves become a way to tell a machine (whether a browser, a computer, a smartphone, or another smart device) something about the meaning of the content.&lt;/p&gt;

&lt;p&gt;Headings mark where the content starts — they’re tags given to text to define its style and purpose. Headings also establish the hierarchy of the content of the page.&lt;/p&gt;

&lt;p&gt;Titles with big font sizes help a reader understand the order of the content better. Likewise, screen readers also use heading tags to read content. This way, people with low-vision get an overview of the page by reading each heading in a hierarchal flow.&lt;/p&gt;

&lt;p&gt;It’s important to use proper structural elements when you develop a site. HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat that content. The components and structure of a page are what arranges an accessibility tree. This tree is what powers screen readers which are used by people who are blind so they can “listen” to a page.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Not using markup correctly affects accessibility. Don’t use HTML tags for a style effect only. Screen readers navigate web pages by heading structure (true headers, not just text that is styled big and bold) hierarchically. The people that use your site can listen to a list of all of the headings, jump the content by types of titles, or navigate directly to top-level headings &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;&lt;/em&gt; &lt;/p&gt;
&lt;h3&gt;
  
  
  6. Do not use disabled attributes on buttons
&lt;/h3&gt;

&lt;p&gt;If you use disabled attributes on button it removes it from the accessibility tree and therefore the screen readers will never know if the exists on the page.&lt;/p&gt;

&lt;p&gt;To solve the above problem make sure you style the button visually to make it look disabled and can use &lt;code&gt;pointer-events: none&lt;/code&gt; to prevent the clicking on button.&lt;/p&gt;

&lt;p&gt;But how do I make sure when the screen readers users use the web page they should understand that the button is disabled.&lt;/p&gt;

&lt;p&gt;The solution to your problem 🤘 is using &lt;code&gt;aria-disabled&lt;/code&gt; attribute&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;target&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;aria&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;disabled&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;true&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  7. Use &lt;code&gt;display: none&lt;/code&gt;  CSS property  or &lt;code&gt;hidden&lt;/code&gt; attribute carefully.
&lt;/h3&gt;

&lt;p&gt;Often there might be a situation that you might want to hide something on some click of the button or link. In this case do remember if you use &lt;code&gt;display: none&lt;/code&gt; or &lt;code&gt;hidden&lt;/code&gt;, it will also be removed from the accessibility tree. Setting &lt;code&gt;display: none&lt;/code&gt; hides the content but also removes it from the accessibility tree so screen readers won’t read it.&lt;/p&gt;

&lt;p&gt;There might be situation when you might want to display something only for the screen reader users and want the content to be visually hidden. How will you handle this ?&lt;/p&gt;

&lt;p&gt;There's great solution 👇 to hide content visually while keeping it in the accessibility tree for screen readers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sr&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;only&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;border&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
  &lt;span class="nl"&gt;clip&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;rect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 
  &lt;span class="nl"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
  &lt;span class="nl"&gt;margin&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;overflow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;hidden&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="nx"&gt;px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h4&gt;
  
  
  Hiding Content for Screen Readers
&lt;/h4&gt;

&lt;p&gt;Some content is not important for understanding a web page, but is added to make the design more visually appealing. For example, icons and glyphs can provide a nice visual polish, but tend to be unhelpful — and sometimes downright distracting — for screen reader users. In this scenario we’ll want to hide the content from screen readers while showing it to everyone else.&lt;/p&gt;

&lt;p&gt;In this case we’ll use the aria-hidden attribute. aria-hidden is a boolean attribute so it can be set to true or false. Setting the attribute to false is the same as not including it at all, so you’ll generally want to set it to true and use it like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;my-glyph&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;aria&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;hidden&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;true&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;h3&gt;
  
  
  8. Visual Order &amp;amp; Dom Order should always match
&lt;/h3&gt;

&lt;p&gt;Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience. Screen readers and other assistive technologies navigate the page in DOM order. The flow of information should make sense.&lt;/p&gt;

&lt;p&gt;Lets see an example&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ol&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;li&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Basket&lt;/span&gt; &lt;span class="nx"&gt;Ball&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/li&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;li&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Foot&lt;/span&gt; &lt;span class="nx"&gt;Ball&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/li&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;li&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Throw&lt;/span&gt; &lt;span class="nx"&gt;Ball&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/li&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/ol&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. In most layout situations, the visual order will match that DOM order. Do nothing, and the list items will flow in the block direction of the document. Apply flexbox, and it will flow in the inline direction of the document.&lt;/p&gt;

&lt;p&gt;But flexbox and grid also allow you to muck it up. Now take this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="nx"&gt;ol&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;flex&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;flex&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;direction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;reverse&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;In the above case, the DOM order still makes sense, but the visual order is all wrong.When you use the tab key to move through the content, there is a disconnect between the visual order and the keyboard navigation (DOM) order. In this simple example it is still although it wrong, but in a situation where &lt;code&gt;flex-box&lt;/code&gt; is used to layout a complex interface it could make things horrible &amp;amp; unusable for the users using assistive technologies.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Solution is providing &lt;code&gt;tabindex&lt;/code&gt;to the element so the visual and dom order matches&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;But the problem is that tabindex is scoped to the document. If the above code were included in a page, it would completely hijack the tab order. The three items with tabindex would be the first three things on the page to receive keyboard focus, irrespective of their overall location in the DOM structure.&lt;/p&gt;

&lt;p&gt;To read more check out this awesome article&lt;/p&gt;

&lt;h3&gt;
  
  
  9. Use color with care.
&lt;/h3&gt;

&lt;p&gt;The color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.&lt;/p&gt;

&lt;p&gt;There are several tools you can use to evaluate color contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.&lt;/p&gt;

&lt;h3&gt;
  
  
  10. Make dynamic content accessible.
&lt;/h3&gt;

&lt;p&gt;When web page content updates dynamically (i.e. without a page refresh), screen readers may not be aware of whats happening on the page. This includes screen overlays, in-page updates, popups, and modal dialogs. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Problems:&lt;/strong&gt;&lt;br&gt;
Keyboard-only users may be trapped in page overlays. Magnification software users might be zoomed in on the wrong section of the page.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Solution&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;These functions can easily be made accessible. Options include ARIA roles and alerts.&lt;/p&gt;

&lt;p&gt;Ensure that video players do not auto-play (non-consensual sound), and that the players can be used with a keyboard. Additionally, all videos must have options for closed captioning and transcripts for the hearing-impaired.&lt;/p&gt;

&lt;p&gt;If your site contains a slideshow, make sure that each photo has alt text and can be navigated via the keyboard. If you are using any unique widgets (such as a calendar picker or drag-and-drops), be sure to test for accessibility.&lt;/p&gt;

&lt;p&gt;This is one of the great article I found on internet which I recommend&lt;/p&gt;

&lt;p&gt;Reading resources 📚&lt;/p&gt;

&lt;p&gt;WebAIM Articles, resources, and training on web accessibility.&lt;br&gt;
&lt;a href="https://alistapart.com/article/color-accessibility-workflows/"&gt;Color Accessibility Workflows&lt;/a&gt;: Some neat examples to nail the colors in your design by Geri Coady.&lt;/p&gt;

&lt;h3&gt;
  
  
  Useful tools
&lt;/h3&gt;

&lt;p&gt;WebAIM Color Contrast Checker: Great contrast color checker that gives you results in real time for regular and large text.&lt;br&gt;
Inclusive Components: A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.&lt;br&gt;
Color Oracle: A free color blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common color vision impairments see.&lt;br&gt;
Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers.&lt;br&gt;
AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector.&lt;br&gt;
Contrast: A macOS app for quick access to WCAG color contrast ratios.&lt;/p&gt;

&lt;p&gt;Develop responsibly. Thank you. &lt;/p&gt;

</description>
      <category>a11y</category>
      <category>web</category>
      <category>developer</category>
    </item>
  </channel>
</rss>
