There are several guidelines that needs to be followed for making web content accessible & the most popular is Web Content Accessibility Guidelines 2.1 (WCAG). For a new front-end developer, it could be overwhelming to understand WCAG. Since it has 4 principles, 13 guidelines, 78 success criteria’s & each success criteria have multiple techniques and failures.  

So, if you are a React developer who wants to start building accessible websites, today I will cover how you can find accessibility issues when you write the code and fix it very easily, so you ship accessible code! 

Eslint-plugin-jsx-a11y 

Eslint-plugin-jsx-a11y is a plugin which performs a static evaluation of the JSX code to find accessibility issues in React websites. It also provides errors & hints to fix them. It has total 36 different rulesets & few of them can be more customized when used with “recommended” mode. 

Note: For the following steps you will need a code editor like Visual studio Code. 

Step 1: Let’s create a demo react-app 

Create a demo react app using following command.  

npx create-react-app my-app

Now write some code of your application in App.jsx file which is inaccessible. For instance, we have created navigation links & a sign up form. 

<div className="App"> 
      <div className="app-header">
      <img src="/image/logo.png" className="App-logo" /> 
          <div class="primar-nav"> 
              <a href="/home">Home</a> 
              <a href="/services">Our services</a> 
              <a href="/signup" tabIndex="1">Sign Up</a> 
          </div> 
      </div> 
      <div className="app-content"> 
        <div>Sign up</div> 
          <p>Enter your details below to sign up!!</p>
        <label>First name</label> 
        <input type="text" id="fname" /> 
        <label>Last name</label> 
        <input type="text" id="lname"/> 
        <label>Email</label> 
        <input type="text" id="email"/> 
        <label>Password</label> 
        <input type="password" id="password"/> 
        <div 
          onClick={() => {   
            user_signUp(); 
          }} 
        > 
          Sign Up 
        </div> 
      </div> 
    </div> 

Step 2: Now, let’s Install es-lint package 

To install es-lint package, run the following command in terminal. 

npm install eslint --save-dev

Step 3: Now, Install eslint-plugin-jsx-a11y package. 

To install the eslint-plugin-jsx-a11y package, run the following command in terminal.  

npm install eslint-plugin-jsx-a11y --save-dev

Step 4: Now let’s setup .eslintrc.json & Package.json files 

Create a file with name “.eslintrc.json” in your src folder & write the following code inside the file. It will act as a configuration file for our eslint package. 

{"extends": ["plugin:jsx-a11y/strict"]}

Add the following code inside Package.json file inside “scripts” object. 

"lint": "eslint src"

Step 5: Now let’s fire up the engines & take this for a test drive!!  

In the terminal run the command: npm run lint

You will see terminal throws the following accessibility errors along with line number of code where the error is found. 

• img elements must have an alt prop, either with meaningful text, or an empty string for decorative images 
• Avoid positive integer values for tabIndex. 
• A form label must be associated with a control.    
• Visible, non-interactive elements with click handlers must have at least one keyboard listener.  
• Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element. 

As a developer, you might be wondering what does each error mean and how should you fix them? No worries! We got you covered! 

How to understand issues & fix them? 

1. img elements must have an alt prop, either with meaningful text, or an empty string for decorative images 

   Images without alternate text are difficult to perceive for screen reader users. They won’t know if the image exists if alternate text is not given. To fix this issue provide alt attribute to the img element with descriptive alternate text as shown below:

   <img src="images/logo.png" className="App-logo" alt="Company logo" />
   
   

   Check out Images tutorial from W3C to learn more about accessible Images.

2. Avoid positive integer values for tabIndex

   When positive tabindex values are used it creates an unexpected tab order, which makes tabbing order less intuitive for keyboard-only users. In our website when user will navigate through the page with tab key the focus will be set to “Sign Up” link first instead of “Home” link which is appearing first visually. This will disorient keyboard, low vision & screen reader users while accessing the page contents. To fix this issue remove tabindex attribute from anchor element as shown below: 

   <a href="/signup">Sign Up</a>

   Check out tabindex attribute from MDN Web Docs to learn more.  

3. A form label must be associated with a control 

   The <label> element must be associated with the respective input control pragmatically. This will ensure that the assistive technology users understand the purpose of input fields. The id & htmlFor attributes can be used to associate the input control with a label. To fix this issue associate the labels with respective input controls as shown below: 

     
   <label htmlfor="fname">First name</label>
   <input type="text" id="fname" />
   
   <label htmlfor="lname">Last name</label>
   <input type=”text” id=”lname” /> 
   
   <label htmlfor="email">Email</label>
   <input type="text" id="email" /> 
   
   <label htmlfor="password">Password</label>
   <input type="text" id="password" /> 
   

   Check out Labelling Controls from W3C to learn more. 

4. Visible, non-interactive elements with click handlers must have at least one keyboard listener.  

   When a non-interactive element such as <div>, <span> & so on are used for interaction which have only click events, they won’t be operable with a keyboard. This will make it difficult for screen reader & keyboard-only users to activate the element. To activate a Button, Enter/Return  or Spacebar keys are used. So, in case of non-interactive element, you need to add a script to listen to these key events. To fix this issue add a keyboard event equivalent to click event as shown below: 

    
   <div       
         onClick={() => {
            user_signup();
          }}
          onKeyDown={(event) => {
          if (event.which === 13 || event.which == 32) {
            user_signUp();
          }
          }}
         >  
        Sign Up 
   </div>  
   

5. Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive element. 

   Non-native elements such as <div>, <span>; and so on do not have any semantic meaning & hence when they are used for interactions on the page it becomes difficult for assistive technology users to understand their purpose. Instead, native interactive HTML elements such as anchor(<a>), button(<button>), form controls like radio button (<input type="radio">) & checkbox (<input type="checkbox">) and so on should be used. 

   If using native HTML elements is not possible then you should provide appropriate roles, states & properties of ARIA along with keyboard support for the non-native elements. To fix this issue provide role="button” & tabindex="0” attributes to the <div> element as shown below: 

   
   <div 
        onClick={() => {   
        user_signup(); 
        }} 
        onKeyDown={(event) => { 
        if (event.which === 13 || event.which == 32) { 
          user_signUp(); 
        } 
        }} 
        role=”button” 
        tabindex=”0” 
        > 
        Sign Up 
   </div> 
   
   

Fixed all the errors? Let’s test again! 

After fixing all the errors if you run the command npm run lint again you won’t get any errors in terminal & your application will be compiled successfully! 

Plugin Modes 

This plugin comes with 2 modes. 

1. Strict – Enabled by default & offers more rules set by default. 
2. Recommended – It has less rules enabled by default. Allows some rules to have extra options in this mode. 
   

You can also create & configure your own custom rules as per the requirements. 

You can read more details about the plugin & other rules in the eslint-plugin-jsx-a11y github page. 

Wait, this is not the end!! 

There are more issues in our code which were not captured by the plugin. Yes that’s true, automated testing can’t identify all the Accessibility errors. So, we will perform a basic manual test to identify the remaining issues. Manual testing is a must when it comes to Accessibility of digital solutions! 

1. The links such as “Home”, “our services“, “Sign up” and so on visually look like a list but not marked as list programmatically. Also, these links should be wrapped inside <nav> element along with a unique label which would render as a Navigation landmark for screen reader users. CSS can be used to maintain the presentation of the page. 
    
   To fix this issue wrap the links inside an unordered list <ul> & <nav> element. Also provide aria-current="page" attribute to the link which represents the current page within set of navigation links. 
    
   

    <nav aria-label="primary"> 
     <ul> 
       <li><a href="/home">Home</a></li> 
       <li><a href="/services">Our Services</a></li> 
       <li><a href="/signup" aria-current="page"> Sign Up</a></li> 
     </ul> 
   </nav>  

2. The text “Sign Up” inside the main content visually constitutes as a section heading but is not marked as heading programmatically. 
    
   To fix this issue mark the text “Sign Up” as heading with <h1> element. 
    
   <h1>Sign Up</h1> 

Hence manual testing needs to be performed with keyboard, screen reader & other assistive technologies to find issues which needs human judgment. We also recommend including people with disabilities in your testing process to get overall feedback about their experience. 

There are more automated tools like ANDI, WAVE and so on which can be used to find more accessibility issues on the rendered output. 

Note that these were simple elements & accessibility can be implemented even for complex interactions like search, drag & drop and so on. 

Accessibility in React official documentation also has more detailed information on how you can implement accessibility in React based websites. 

To summarize,  

1. We wrote code that was not accessible. 
2. Setup the eslint-plugin-jsx-a11y plugin. 
3. Ran the test & got the a11y errors inside terminal. 
4. Understood about the errors & how to solve them. 
5. Fixed our code & compiled successfully.  
6. Congratulations!! You successfully shipped accessible code because coding for accessibility isn’t difficult! 

Looking for a reliable digital accessibility partner that can help you help you think accessibility first and build accessibility features into your digital products? Write to us at sales@barrierbreak.com or schedule a consultation with our accessibility expert.

This article by Siddharaj Suryavanshi is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.

The post Code for everyone – Find & Fix Accessibility Issues in React appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Label is an important piece of text that tells you what the purpose of the control is. Users can decide based on the label if clicking or activating the button will submit the form details or reset the form! 

Unique and descriptive labels must be provided for all types of controls.  

Adding visual labels is beneficial for all users but it is essential to remember to programmatically define the labels. A programmatically defined label will tell assistive technology users about the purpose of the control when they navigate between different controls on a web page or an application. In the absence of label, assistive technology will identify the control as unlabeled! Furthermore, off-screen labels should be avoided as they are not available for everyone! 

Labels can be provided in the form of text, images, symbols, text along with images or symbols. In the case of images used as labels, make sure that textual descriptions are added such that the information can be made available for assistive technology users! 

Generally, textual labels are provided for input fields, drop-downs, checkboxes, and radio buttons whereas symbols or icons are used for menus and buttons. It is recommended to place labels to the left or top of input fields and drop-downs and on the right of checkboxes and radio buttons.  

For Global Accessibility Awareness Day, (GAAD 2023), BarrierBreak ran a campaign “#LabelYourControls” as we believe Accessibility is a journey and labelling your controls is a crucial step of this journey when it comes to making your digital solutions accessible for people with disabilities! Our team shared helpful tips throughout the day i.e. 18th May, 2023 marking GAAD on Twitter, LinkedIn and Facebook.

Download the 12 tips on how to #LabelYourControls on web, android and iOS and feel free to share these tips with your colleagues, friends, or anyone who may be interested in promoting accessibility. 

Download Now

The post Importance of Labelling your Controls  appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

I completed my degree, I secured a job, and all seemed to be going on smoothly. I was slowly but surely starting to achieve my goals and aspirations. However, unexpectedly and abruptly, life took a major turn. It came to a complete halt! 

You may be curious as to what transpired. My circumstances resembled that of an individual, soaring at great heights in the sky, only to plummet into a valley below. Let’s rewind. 

I graduated with a degree in computer science and engineering. I got a job at an on-campus interview and was ready to fly high with my dreams and career, but this is life! We do not know what will happen in the next moment. 

One day I was not feeling well and went to a doctor for treatment, and during the treatment, I lost my eyesight due to a drug reaction. Since I was born with normal vision and had no eyesight problems, nor did I ever wear glasses, it was very hard for me to digest the fact that I could no longer see and had lost my vision. 

Coping with vision loss 

My life came to a complete stop because as a computer technician, I was no longer able to see and work on the computer. I do not know what happened. Thousands of questions, and was not able to think of anything good, I was completely broken from the inside and did not know how to continue and what to do next. I was not able to use my phone, read any books, go outside, work on the computer, travel alone, and many other things and I felt like I was living in a nightmare. 

I was not aware of what lay ahead for me as there was no one to help me and guide me. My parents were also very sad and did not know what to do and tried to find a solution. 

Discovering Assistive Technology 

During the treatment, I visited one of the famous hospitals in India where a doctor suggested me a rehabilitation center and showed me how people with visual impairment live their lives, learn many things, and solve challenges. One of the staff took me to the computer lab and what I saw there amazed me. One of the instructors who was visually impaired, shared her knowledge and experience with computers and cell phones, how they use them and work with them. 

She turned on her computer, opened Gmail, quickly logged in, opened the inbox, composed a message, and sent it to me. I was shocked because within a split second she was doing all the tasks on one computer and as I watched it all happen, I was speechless and got goosebumps. I felt like OMG! I felt like fate has given me a new life and a new opportunity. 

The moment I experienced this and understood that life never ends, I found a new turning point in my life as ‘Assistive Technology’. Technology that supports me to learn, grow and live my life like others. At a point where I had lost all my hopes and dreams, this technology became my guide and mentor and helped me get back to my life. 

At first, it took me some time to learn and understand how it works because I was a sighted computer user before I lost my vision and the transition to learning how to use computers with screen readers took some time, but I learned and now I can say with confidence that I can work on the computer, read newspapers, do online transactions and online shopping, and much more. 

After learning computers with JAWS (Job Access with Speech) and NVDA (Non-Visual Desktop Access) and magnifier in Windows 10, I learned assistive technology in cell phones such as Talkback in Android and Voiceover in iOS, which made my life smoother and gives me back the confidence that “I CAN”. 

The power of assistive technology 

I am happy to share that this turning point of ‘Assistive Technology’ has changed my life and other people’s views, even though I am a person with visual impairment – how I use computers, laptops and mobile devices and do my daily work and also help others when needed. It was like a boomerang for me. 

During my journey with assistive technology, I became acquainted with the term ‘accessibility,’ which was completely new to me. To learn more about it, I enrolled in a small course. There, I discovered that accessibility is a platform that can help me build a career and find employment, while also allowing me to contribute to making the digital world more accessible.  

Accessibility to the rescue 

Through my studies, I was fortunate enough to secure a job at BarrierBreak, one of the most reputable digital accessibility companies in India. Here, I have gained a deeper understanding of assistive technology and how it can be used to make digital products more accessible. In my role as an Associate Accessibility Tester, I test and suggest various remediation techniques to ensure that digital products like websites and mobile apps are more inclusive and accessible to individuals like me, who rely on screen readers to navigate their daily lives.  

BarrierBreak: a place of Inclusion, Growth, and Support

I consider myself incredibly fortunate to have been given the opportunity to work at BarrierBreak, a company that not only offers equal opportunities for growth and development but also emphasizes the importance of staying up-to-date with the latest technologies and best practices. Through both training and hands-on experience, I have gained a deeper understanding of web and mobile apps accessibility, WCAG, ARIA, and A11Y concepts, which has bolstered my confidence in my role. 

What makes BarrierBreak different is the feeling that everyone is part of a team and that everyone helps and supports each other. I have been fortunate to work alongside a team of the best mentors, who have consistently been available to help me grow and provide the best solutions to clients.

As a member of the BarrierBreak family, I have learned to embody the company’s core values of I3ON – Inclusion, Innovative, Integrity, Ownership, and Nurture – which have served as a guiding force in both my professional and personal life. I am deeply grateful to assistive technology and to BarrierBreak for providing me with this opportunity, and I sincerely hope that it serves as a turning point for many others, enabling them to lead smoother, happier lives. 

This article by Gayatri Murthy is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.

The post Turning point: The day when assistive technology came into my life appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Technology can help in different ways: 

• HR Tech solutions for Managing Diversity, Equity & Inclusion –  Can provide organizations with insights that can inform better HR decision-making and can ensure that all employees have equal access to HR information and resources, regardless of their location or abilities. 
• Making HR Tech accessible – It is critical for organizations to accommodate employees with disability in their organization. This includes making the everyday solutions that organizations are using for employees to meet accessibility standards and guidelines like Web Content Accessibility Guideline.  
• Job Accommodations – Companies can now provide necessary accommodations for employees with a disability that make it easier for them to work in a comfortable environment. This is especially important when it comes to providing access to assistive technology and resources to assist employees to become effective and productive at the workplace. 

HR Tech Trends  

Here are the five important HR Tech trends that have started making an impact on making workplaces more accessible and inclusive. They support organizations to better engage with their employees, streamline their processes, improve productivity, and create a better working environment for everyone involved including employees with disabilities. 

Artificial Intelligence (AI) and Machine Learning (ML)  

ML and AI are transforming businesses’ operations by reducing administrative overhead and improving efficiency. ML can help streamline processes, automate everyday tasks, and improve data accuracy, while AI can be used to make decisions based on data analysis.  

This can be especially beneficial for employees with disabilities who may not have access to traditional tools or resources. With ML and AI, they can work more efficiently, without having to worry about the manual labor of traditional methods.  

Microsoft has added live captions to PowerPoint as part of its AI-powered features. This feature automatically generates real-time captions for the spoken words in a presentation. These captions make it easy for the audience to follow along especially people who are deaf or hard of hearing. 

The Business Wire reports that the Global Artificial Intelligence in HR Market is estimated to be USD 3.89 Bn in 2022 and is expected to reach USD 17.61 Bn by 2027, growing at a CAGR of 35.26%.  

Virtual and Hybrid Work 

The demand for HR tech solutions that support remote work and virtual technologies has increased and is expected to grow significantly in the coming years, due to the impact of the COVID-19 pandemic. Remote working tools and technologies are becoming more popular as companies strive to provide employees with greater accessibility and flexibility.  

These tools enable companies to connect with their employees regardless of their physical location. They also make it easier for companies to provide accommodations for employees with disabilities, allowing them to stay connected and productive even when they are not physically present in the office. 

Zoom video conferencing and online meeting platform is a popular tool for virtual & hybrid work due to its versatility and ease of use. It is compatible with screen readers like JAWS, NVDA, VoiceOver supporting employees with visual impairment to access the platform and participate in online meetings.  

Diversity, Equity, and Inclusion (DEI) Solutions 

Companies are investing in HR tech solutions that help them track and improve their DEI efforts, including tools for monitoring and analyzing diversity data, and promoting equitable hiring practices. Companies using HR tech solutions for DEI have reported improvements in their ability to track and analyze DEI data, allowing them to make more informed decisions on how to improve their DEI efforts. 

The study from RedThread Research, found the number of technology vendors serving the DE&I market has grown by 87 percent since 2019, and DE&I vendors experienced an 82% CAGR over a 4-year span. 

Gamification & Engagement 

HR tech solutions are incorporating gamification elements to increase employee engagement and motivation, and these solutions have become increasingly popular in employee training. By incorporating gamification elements, these solutions create a more engaging and enjoyable work environment, leading to increased employee satisfaction and motivation. 

As per the report from TalentLMS, 83% of employees who undergo gamified training are more motivated at work. However, accessibility is an important aspect to consider when designing or procuring gamification tools for the workplace. It is also important for companies to have policies and processes in place to support employees with disabilities and ensure that they are able to fully participate in gamification initiatives. 

The Global Gamification Market size is expected to reach $58.8 billion by 2028, rising at a market growth of 26.8% CAGR during the forecast period 2022 -2028 

Employee Well-being & Mental Health 

Well-Being and Mental Health are no longer a buzzword. These are becoming increasingly important areas of focus for companies and HR departments, and HR tech solutions are being developed to support these efforts. Companies are providing employees with access to mental health support, and HR Tech solutions should ensure that they support companies create a more inclusive and supportive work environment with their solutions.  

Conclusion 

As per the report by Fortune Business Insights, the global Human Resource Technology Market Size is projected to reach USD 39.90 billion in 2029, at a CAGR of 7.5% during the forecast period, 2022-2029. 

Technology is revolutionizing the way HR approaches workplace accessibility and inclusion. Companies today are recognizing the importance of accessibility in HR tech and are taking steps to ensure that their HR tech tools are accessible to all employees. This includes conducting accessibility assessments, implementing accessibility standards and guidelines, and working with accessibility vendors to ensure that their HR tech tools meet accessibility requirements. In today’s competitive business environment, investing in accessible HR tech can definitely be a competitive advantage. 

Get in touch with our accessibility consultant to help you incorporate accessibility into your HR Tech Solutions or write to us sales@barrierbreak.com.  

The post HR Tech trends that are starting to make workplaces more accessible & inclusive appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Back in August 2022, we had published a blog on WCAG 2.2 AQuick start Guide to find out what to expect from the new version of the guidelines. Since then two Candidate Recommendations of the guidelines have been released. The first one in September 2022 and the second one in January 2023. In this post, we will see what has changed from new success criteria’s, and removal of a success criteria to minor changes in the terms used in different success criteria’s.

The changes have been included at the start of each section of the below post for easy identification. In all there are 9 new success criteria’s being added in WCAG 2.2 as per the latest Candidate Recommendation. 1 success criteria, 4.1.1 Parsing is obsolete and has been removed from the guidelines. In addition, the conformance level for 2.4.7 Focus visible success criteria has changed from Level AA to Level A in WCAG 2.2. Out of these 9 success criteria’s: 

• 2 are at Level A 
• 5 are at Level AA 
• 2 are at Level AAA 

Level A 

4.1.1 Parsing

The Parsing success criteria is obsolete and has been removed from WCAG 2.2 guidelines. This criteria is no longer useful because the accessibility errors that fail under this criteria are already covered by other success criteria’s. Additionally, modern browsers and assistive technologies can handle parsing errors and thus they are no longer creating accessibility errors for people with disabilities. WCAG 2.2 is backward compatible, i.e. it covers success criteria included in both WCAG 2.0 and 2.1. Even though 4.1.1 Parsing is removed from WCAG 2.2, it has not been removed from WCAG 2.0 and 2.1 as of now. In the future, this can happen for sure but for now in order to conform to WCAG 2.0 and 2.1 one needs to yet test for 4.1.1 Parsing at Level A. 

3.2.6 Consistent Help

The first “Note” of the success criteria has changed. As per the note, the help mechanism can be either provided on the page directly or a direct link can be provided to the page that contains the information.

The purpose of this success criteria is to ensure that users can find help consistently at the same location across different pages of the website or application. Finding help at a consistent location is beneficial for users with cognitive disabilities who would like to access help when they are not able to complete any task, such as filling up a form.

Help on a website can be in the form of: 

• Contact information, email address, phone number, office timings
• Contact form, messaging application, chat application, social media channel
• Support page, FAQ page
• Chatbot 

3.3.9 Redundant Entry

The purpose of this success criteria is to provide users with an option to either select previously filled details or auto-populate the details. This will avoid the need to enter the information again by users in a multi-step form and is found very helpful by users with cognitive impairments. This success criteria can be met by providing users to select previously filled information in the form of a drop-down and they can simply select the details. Alternatively, users can simply tick a checkbox, such as Nominee address is same as Applicant’s address or copy and paste the textual information in the respective input fields.

Exceptions include: 

• Auto-populating the information will affect the security of the form.
• It is essential to enter the information again as it is part of the activity, i.e. in the case of a memory game. 
• Previously entered information is no longer valid.

Level AA 

2.4.11 Focus Appearance

The purpose of this success criteria is to ensure that the focus indicator for user interface controls is clearly visible and discernable. This will help users with mobility impairments and those with low vision who use a keyboard to easily locate their focus on the page.

The success criteria require that a visible focus indicator meets either one or both of the below-mentioned requirements: 

The entire focus indicator meets all the below requirements: 

• Focus indicator encloses the user interface component or sub-component that is focused, i.e. solidly surrounds the control. 
• Focus indicator should have a minimum contrast of 3:1 between its pixels and its focused and unfocused states. 
• Focus indicator pixels should have a contrast of 3:1 with the adjacent non-focused indicator colors.
• An area of the focus indicator meets all the below requirements: 
• Area of the focus indicator is at least 1 CSS pixel thick of the unfocused component or sub-component, or is at least 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component. 
• Area of the focus indicator should have a minimum contrast of 3:1 between its pixels and its focused and unfocused states. 

The area of the focus indicator pixels should have a contrast of 3:1 with the adjacent non-focused indicator colors or is not less than 2 CSS pixels. 

Exceptions include: 

• Focus indicator is determined by the user agent, such as web browsers.
• Focus indicator and its background is the default, i.e. generated by the browser and is not modified by the web page author. 

2.4.12 Focus Not Obscured (Minimum) 

The purpose of this success criteria is to make sure that when any user interface component receives focus, the component is not entirely hidden by any content created by the author. In order to meet this success criteria, some part of the component should be visible when it receives focus. For example, a non-modal dialog, sticky header/footer etc. can hide a focused component as well as its focus indicator. At any point, the user should be able to identify which component has focus currently on the page. This requirement is beneficial for people with low vision and those with mobility impairments.

2.5.7 Dragging Movements

The purpose of this success criteria is to help users carry out dragging functionalities through alternative means. People with dexterity impairments might find it difficult to carry out drag and drop activities or change values of a slider. Including an alternative method for functionalities based on dragging will help users accomplish their task easily.

A web page can provide users with drop-downs to select minimum and maximum price along with price range sliders in order to meet the success criteria. This success criteria does not apply to dragging movements that are part of user agents including assistive technologies and browsers. 

2.5.8 Target Size (Minimum)

In this success criteria, there are changes related to “Exceptions” for spacing and inline as well as “Note” for inline targets and line-height which are covered below. 

The purpose of this success criteria is to help users easily activate user interface controls and avoid unintentional activation of controls. When target sizes for controls are small users with mobility impairments who find to precisely control mouse movements will find it difficult to activate controls. Similarly, users browsing the web via mobile devices will also benefit by defining minimum target size of controls.

The minimum target size for pointer inputs is 24 by 24 CSS pixels. This requirement has the following exceptions:

• Spacing: The target does not overlap with any other target and has a target offset of at least 24 CSS pixels with every adjacent target. 
• Inline: The target is within a sentence or is in a bulleted or numbered list, or its size is otherwise constrained by the line-height of non-target text. 
• Essential: It is essential to present a target with smaller size than the minimum recommended 24 CSS pixels. 
• User Agent Control: Target size is determined by the user agent and not defined by the page author. 
• Equivalent: An equivalent control exists on the page that meets the minimum target size requirements. 

In the case of inline targets, the line-heights should be interpreted as perpendicular to the flow of text. So for language that is displayed top – to – bottom, the line-height would be horizontal.

3.3.8 Accessible Authentication 

Before the release of the first Candidate Recommendation, this success criteria was at 3.3.7. The first “Note” of the success criteria has changed. As per the “Note”, “Object recognition” and “Personal content” may be represented by images, video, or audio. 

The purpose of this success criteria is to provide users with an accessible, easy to use and secure means to login and perform tasks. Users with cognitive disabilities who might not be able to memorize usernames or passwords rely on copy and paste functions and password managers to enter their credentials. If a website uses scripts that block password managers or copy and paste functions, then it becomes difficult for users to login into their accounts and perform different tasks.

The success criteria requires that authentications are easy to use, accessible and secured. Authentication should not require cognitive function and if they are based on cognitive function than an alternate method is made available.

Cognitive function that requires users to recognize objects or provide content to the website is considered as an exception to the success criteria.

Level AAA 

2.4.13 Focus Not Obscured(Enhanced)

Before the release of the first Candidate Recommendation of WCAG 2.2 this success criteria was named as 2.4.12 Focus Appearance (Enhanced).

The purpose of this success criteria is to make sure that when any user interface component receives focus, the component is fully visible and is not hidden by any content created by the author. This success criteria is similar to 2.4.12 Focus Not Obscured (Minimum) and the only difference is that it requires that the focus be fully visible whereas as per 2.4.12, it is acceptable even if only some part of the focus is visible. 

3.3.9 Accessible Authentication (Enhanced)

As per the first Candidate Recommendation of WCAG 2.2 this success criteria was named as Accessible Authentication (No Exception). The criteria has now been renamed to Accessible Authentication (Enhanced). 

The purpose of this success criteria is to provide users with an accessible, easy to use and secure means to login and perform tasks. Users with cognitive disabilities who might not be able to memorize usernames or passwords rely on copy and paste functions and password managers to enter their credentials. If a website uses scripts that block password managers or copy and paste functions, then it becomes difficult for users to login into their accounts and perform different tasks.

The success criteria requires that authentications are easy to use, accessible and secured. Authentication should not require cognitive function and if they are based on cognitive function than an alternate method is made available. This success criteria is similar to 3.3.8 Accessible Authentication but does not include exceptions related to objects and user-provided content.

Would be great to see what the finally published WCAG 2.2 Guidelines looks like. The number of success criteria for meeting conformance will increase by 9 and take the total to 86 at Level AAA and 56 at Level AA if none of the above is removed! 

We would be happy to assist you with any questions or information you need related to WCAG 2.2 or accessibility. Get in touch with our accessibility consultant at sales@barrierbreak.com.

The post WCAG 2.2 – What to expect as per January 2023 Update! appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

It’s no secret that the COVID-19 pandemic has had a devastating effect on the global economy. In addition, the Russian invasion of Ukraine and higher than expected inflation are all adding to the global slowdown. Many businesses have been forced to downsize or close their doors entirely. As per Forbes, the US economy may not officially be in a recession, but it’s not looking good. 

The current economic climate has forced many organizations to re-evaluate and re-plan their priorities and budgets. In the last 5 years, we are seeing organizations shift left and finally embracing accessibility. So now how do we keep the accessibility focus in these tough times?

BarrierBreak’s accessibility experts suggest five strategies to maintain your accessibility commitment in the economic slowdown:

1. Communicate the importance of accessibility to decision-makers

Make sure that decision-makers within your organization are aware of the importance of accessibility. They may not be aware of the business case for accessibility or may not realize how accessible products and services can benefit your customers.

Highlight customer or end-user stories to help them continue to invest in accessibility. Check our article on Higher Sales and a Business Win with Accessible Digital Products

2. Plan & strategize your Accessibility Roadmap

Remember, accessible products and services have a competitive advantage. The first step in meeting your accessibility commitments is to create a roadmap that provides an overall plan and strategy.  

Start with assessing your current state of accessibility for your digital assets such as websites, mobile apps, products, and/or services. It is critical to prioritize digital assets, plan resources, set milestones and goals based on business & customer’s needs.

3. Keep accessibility in mind when making budget decisions.

You might be worried that you’re going to come under pressure to cut your accessibility budget. You might well be right.

The Accessibility Roadmap will assist you to think of different models & approaches to deliver without reducing your accessibility commitments. Look at priorities, optimize processes & build efficiencies that can help you manage cost.

4. Train your employees on accessibility

Accessibility should be embedded into your organization’s culture, not treated as an afterthought. Create resources that can help them to do it right the first time like playbooks, checklists, video trainings. Invest in training people to implement accessibility as you design, build, test and deploy.

5. Time to adopt a Hybrid Delivery Model

Effectively plan the hybrid delivery models so as to optimize delivering on your accessibility commitment. Identify functions or processes that you can deliver with in-house and/or outsourced offshore resources. Find an offshore accessibility testing partner who can help your team to plan and implement accessibility into your digital solutions in the most cost-effective manner.

In conclusion, it would be difficult to avoid recession as inflation continues to rise. But it is also important to maintain your accessibility commitment in an economic slowdown. By doing so, you will be able to ensure that your products and services are accessible to all customers while also mitigating any legal risks. Additionally, you will be able to achieve a high level of customer satisfaction.

Reach out to the BarrierBreak team, we would be happy to work with you to develop a cost-effective delivery model for your accessibility requirements. There are various ways in which we can help you maintain your accessibility commitment in an economic slowdown. Our model will assist your business in high customer retention by making a significant impact and showing your commitment to accessibility. Additionally, through our expert services, we can design an accessibility roadmap for your organization that can generate higher satisfaction and revenue.

The post 5 strategies to maintain your accessibility commitment in an economic slowdown appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Food for thought

USD 8 trillion disposable income in the hands of disabled people and their families, but can they really shop on your online store? Research has demonstrated that none of the world’s top 50 websites meet the digital accessibility guidelines with more than one billion people, or 15% of the global population, reporting a disability affecting their ability to navigate websites.

BarrierBreak provides comprehensive retail accessibility testing solution that evaluates your business needs. Ensure your e-commerce websites & mobile applications conform to WCAG 2.0 & WCAG 2.1, and are Section 508 and ADA compliant. We also help you to create VPAT for your products and services to make it more attractive to government buyers and win more RFPs.

Retail trivia

Online shopping, also known as e-commerce, allows customers to buy goods and services directly from sellers on the website. It allows you to shop from the comfort of your home, at any time of day and any day of the year. On the other hand, sellers sell their products, regardless of whether the product is luxurious or meets the needs of the customer, on such portals. It can be difficult for people with disabilities to know what the product contains.

In 2018, consumers around the world spent a total of $2.8 trillion on online retail sales, a figure that could rise to $4.8 trillion in 2021. If you don’t consider the impact of online retail accessibility or web accessibility on your e-commerce revenue margins, you’re giving away a slice of the pie to retailers who make online retail accessibility their priority.

Let’s dive deeper

The Covid-19 pandemic has accelerated a shift towards online shopping especially for people with disabilities which requires the focus to shift towards digital accessibility.

Customers with a disability encounter many barriers when navigating retail websites. Despite the need to access digital content, most retailers do not see where their access problems lie.

Many of these obstacles are minor inconveniences, but others make navigating the site difficult or impossible without help. While online shopping has its own advantages, accessibility barriers on many e-commerce websites, makes it difficult for people with disabilities enjoy the same experience as everyone else.

The Compound Effect

Companies that prioritize e-commerce accessibility during the pandemic are more likely to see their websites prioritized by Google than by their competitors.

• E-commerce accessibility leads to the removal of barriers to online shopping for people with disabilities and enhances overall user-experience. Customers make their purchases in the traditional way by viewing what the product looks like and reading the description, and when the e-commerce website is accessible, everyone has access to similar information regardless of their disability but can also make their purchase with confidence.
• The accessibility of your online retail shop will bring you more customers than any other sector of the economy, which is reason enough for you to take an action now! Improving the accessibility of websites is a tangible improvement that thousands, even millions, of people will notice. Improving websites that facilitate access to essential goods for people with disabilities during quarantine can have an immediate positive impact on businesses.  
• Another reason to ensure an accessible e-commerce website is legal requirement. From 2017 to 2018, web accessibility lawsuits and litigations rose by 181 percent. If there are any inaccessible sections on your website, it can be deemed discriminatory against persons with disabilities, which violates the accessibility standards and guidelines such as Section 508, WCAG and ADA.

As online retailers are a for-profit business and disabled and elderly people are targeted markets, it is vital that they work hard to make their websites accessible to this demographic.

Why Online Retail or E-commerce accessibility is important?

Here’s what G3ICT has to say, “Committing to inclusive design not only makes a retailer’s website accessible to customers with disabilities, but also creates a shopping environment that is easier for all customers to use. Streamlined designs load quicker.”

Our team of highly experienced accessibility testing team at BarrierBreak which include testers with disabilities, ensures accessible e-commerce website. We ensure that your retail website is in compliance with the American with Disabilities Act (ADA) in accordance with the Web Content Accessibility Guidelines (WCAG ). Write to sales@barrierbreak.com to help us support you.

The post Why Online Retail should focus on Digital Accessibility? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

This is where an accessibility partner comes in. An accessibility partner is a company that specializes in making websites and digital products accessible to people with disabilities. By working with an accessibility partner, digital agencies can ensure that their clients’ websites are compliant with the latest accessibility standards.

If you’re a digital agency looking to offer accessible web design and development services, read on to learn more about what an accessibility partner can do for you!

Why do you need an Accessibility Partner?

There are many reasons why digital agencies should consider working with an accessibility partner. One of the most important reasons is that it can help you broaden your reach and tap into new markets.

An accessibility partner can help you make your website and digital content more accessible to people with disabilities. This is important because it can help you reach a larger audience and build a more inclusive online presence.

In today’s digital world, accessibility is more important than ever. By working with an accessibility partner, you can show your commitment to inclusivity and make sure that everyone can access and enjoy your digital content.

Selecting the right Accessibility Partner

With all the different companies and providers out there, how do you choose the right one for your business? Here are a few factors to consider when choosing an accessibility partner for your digital agency:

• Qualifications and experience of the Accessibility Experts and Testers
• Good understanding of digital accessibility best practices and Accessibility standards & guidelines.
• The Accessibility Testing & Auditing Methodologies
• Approach to Accessibility Consulting
• Customer Service and Support

By keeping these factors in mind, you can narrow down your options and find the right accessibility partner for your digital agency.

Who are we?

BarrierBreak is a trusted Offshore Accessibility advisor with deep expertise and experience in delivering world-class digital accessibility solutions. With expertise in accessibility standards and guidelines such as Section 508, ADA, WCAG 2.0 & 2.1 we help you achieve digital accessibility at scale.

You work with a trusted name in Accessibility & get access to experienced Digital Accessibility Professionals who have experience in delivering solutions in North America, UK & European markets.

Check out: Become a BarrierBreak Trusted Partner

Next Step

Schedule a conversation with our Accessibility Consultant to discuss your agency’s needs. Write to us at partner@barrierbreak.com and we will help you find the best solutions for digital accessibility audit & testing.

The post Accessibility Partner for Digital Agencies appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

The Boom

The mobile app industry in India is growing at an exponential rate. By 2022, the total number of mobile app downloads is projected to reach 6.5 billion. With such a large market potential, it’s no surprise that more and more businesses are starting to develop mobile apps. However, as these apps become more commonplace, it is important to consider the needs of all users, including those with disabilities.

Accessibility should be a key consideration for any mobile app development project. By taking accessibility into account, you can ensure that your app is usable by the widest possible audience. Additionally, accessible apps tend to be better designed and more user-friendly overall.

At BarrierBreak, we believe Making any website or application accessible on mobile devices is equally important as making them accessible on desktops. Our experts in mobile accessibility testing will help you seamlessly integrate accessibility in your mobile applications.

How did it all start?

Until 2016, digital accessibility of ICT-based products and services (including websites and apps) was not recognized in the Indian legal system. However, with the enactment of the Rights of Persons with Disabilities Act, 2016, accessibility has been made a statutory obligation that every service provider whether public or private has to comply with.

Further, with the notification of the Rights of Persons with Disabilities Rules, 2017, Guidelines for Indian Government Websites were made mandatory as the standard of compliance for ICT (a term defined under the act which includes apps and websites).

The rule as it stands today, led to two confusions, one around the applicability of GIGW to private players, and two, only the web standards forming part of GIGW in relation to a website are applicable and not the mobile application-related standards which were included in the GIGW in 2019 because of the way the rule 15 of the rules was worded.

Given the limited users with disabilities which roughly translates to 2.2% of our population as per the data available from the survey conducted by NSSO, the majority of businesses and service providers have ignored the needs of people with disabilities.

What did they say?

“With a view to ensure compliance with the law and to solve the problem of inaccessibility of websites and apps because of which persons with disabilities face problems on a day-to-day basis, a collective initiative called Mission Accessibility, founded by Mr. Rahul Bajaj (Roads scholar and a lawyer) and myself Amar Jain (a corporate lawyer and accessibility professional) both of whom are blind, worked through the route of litigation to get the legal position clarified through the judicially speaking reasoned order pronounced by the Chief Commissioner for Persons With Disabilities.” says Amar Jain.

Amar Jain continues, “The order, interalia clarified that the law including GIGW are applicable to private players, and not only website, but all platforms be it apps or others, will have to be compliant with the accessibility standards. Further, the order clarified that GIGW and BIS standards are good enough directions issued by the Government based on which every private player can comply and ensure ICT accessibility.”

Additionally, the order established a settled process to ensure compliance through the relevant ministry by analyzing the allocation of business rules and accordingly upheld the fact that the Directorate General of Health Services, Ministry of Health and Family Welfare Government of India is the nodal ministry for governing health-related matters, therefore it is the competent body alone to issue relevant directions to the service providers for ensuring compliance with the ICT standards in relation to websites and apps offered in the healthcare sector.

In a country where over billions live with some form of disability, it’s essential that businesses start considering accessibility when developing their apps. By making mobile apps accessible, businesses can not only positively impact the lives of those with disabilities, but also tap into a large and untapped market.

Get in touch with us at sales@barrierbreak.com for getting your mobile applications evaluated by a team of accessibility experts as per user experience and accessibility guidelines.

The post Why Mobile apps in India need to take Accessibility seriously? RPWD mandates accessibility & CCPD on digital accessibility appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

These are times where:

1. We have to move fast but ensure that we don’t ignore digital accessibility.
2. Budgets will be scarce, and we need to find ways to do more with less.
3. Teams would be stretched to make it happen but might not always have the resources needed.

At BarrierBreak, we understand this and we also believe this is an opportunity to make a difference.

We are the leaders in offshore digital accessibility specializing in Accessibility Testing, VPAT Creation, Accessibility Consulting and Accessible Documents. BarrierBreak’s People First approach includes people with disabilities as a part of our testing process. Every team consists of people with disabilities that are trained accessibility testers and specialists.

Come and learn about the packages to support your Accessibility needs. Meet our team at Booth 614 at CSUN 2022

The post Digital Accessibility Solutions – Meet BarrierBreak at CSUN 2022 appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.