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.

The post Essential Guide for Workplace Inclusion appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Most of the time everyone wants fancy products, but they forget while making them fancy they are not considering accessibility. Accessibility is not just for people with disabilities, it will always benefit every user!

With so many questions, there also comes the “misconceptions” about the accessibility for the interactive elements. In this blog we will try to bust such myths or the so-called misconception by separating the facts from fiction! So, fasten your seat belt (don’t worry I am not taking you for a ride!) and let’s bust them together!

Myth 1: Making interactive elements accessible is time-consuming and expensive

Fact: Most accessibility fixes are relatively simple and inexpensive to implement if you stick to basics i.e., using native HTML elements over custom interactive elements. Moreover, integrating it into the design process itself takes care of lot of foreseeable accessibility issues that occurs during the development phase. But if you keep on waiting for the magic to happen on its own – then you will definitely be late to the party for fixing – which will take a lot of planning to tackle the issues that will occur

Myth 2: The accessible interactive elements are visually boring

Fact: It’s not hidden that everyone want some fancy intuitive websites that are visually appealing! But the beauty about accessibility is you don’t have to compromise on the visual look and feel. You just have to ensure that keeping accessibility in mind you are choosing the right color, the right font size and keeping it user friendly as well. Accessible design can not only be visually appealing but it can actually enhance the user experience for all users, not just those with disabilities. You can use our friend “CSS” to achieve the look and feel that you desire even on the native HTML elements!

Myth 3: Assistive technologies will take care of accessibility of interactive elements, developers need not worry about it

Fact: It’s like saying all the vehicles will drive themselves, driver need not have to worry! Lol

Note: Yes, I know that’s possible in some vehicles now! But you get the point, right?

While assistive technologies can help people with disabilities to access the content, they DO NOT guarantee accessibility. Whatever the assistive technology picks it picks up from the underlying code behind the elements. It’s not like Aladdin’s magical lamp, that you rub it and things come true! Developers, Designers and Content Writers need to make sure the content is designed, written and coded keeping accessibility in mind.

For example, a button needs to be identified with a role of button because the screen reader can’t dream of it to be a button! So, if you code a button as <button>Hit me</button>, the assistive technology like screen reader will identify it as “Hit me, button.”

If you design a button that has very poor contrast, someone with low vision or color blindness won’t be able to perceive the button clearly. 

Similarly, if you are designing an accordion which show/hide the content, wherein though visually the content is available but you forget to remove aria-hidden attribute when content is visible or forget to change the value to “false”, then you are asking for trouble! A screen reader will not be able to access that content if aria-hidden is still present with a value of “true”. 

Myth 4: Scripted interactive elements can be accessed by all

Fact: Imaging if I tie your hands at the back and ask to pick up a glass that is on the top shelf – will you be able to? No, right? You will require help here!

Then why assume everyone will use a mouse to interact with an element? When a scripted element is present on the website that’s functional only using a mouse – it’s a BLOCKER for people with motor disability who might just use a keyboard/switch devices to interact with the website. Even in certain situational disability like when your mouse dies and the only way to hit that button to book your last available seats of your favourite Marvel/DC movie is with a keyboard – but meh! You cannot reach it or activate it! The tickets are now sold out Wouldn’t this be frustrating? It’s the same with scripted elements. So, next time If you code an interactive element, ensure that it’s reachable and actionable using different input devices.

Myth 5: Providing tabindex=”0” will magically make the custom interactive element actionable!

Fact: This is one of my favorites. I have seen so many developers slapping a tabindex=”0” on the neutral containers like <span> or <div> to create the custom interactive elements and forget to provide the necessary scripting. Reality check – tabindex attribute will only make the element focusable! You will have to provide the required event handlers along with the key listeners to make the element functional. Remember basics More importantly, people love tabindex=”0” so much that they go in and give it to non-interactive elements too assuming that screen readers use Tab to read content.

Myth 6: Sometimes we forget, beyond screen reader users’ other disability exists!

Fact: I have made the interactive element accessible for screen reader users. This I get to hear a lot! A custom interactive element will be used which will be only actionable using a screen reader. It won’t be reachable with a keyboard. If someone invites you to a party, but then forgets that you are even at the party. Hurts, right? We need to understand that beyond screen reader users, other disabilities exist – if you have made the interactive element accessible for screen reader users it doesn’t means that automatically it will be accessible for other people with disabilities. Someone who is using just a keyboard/switch device – how will they reach to the element and perform action? The interactive elements MUST be designed keeping inclusion in mind.

Myth 7: Role is not mandatory for interactive elements!

Fact: What’s the purpose of an interactive element? To perform an action – correct? If my interactive element is coded as <div tabindex=”0”>Activate Me!</div> to which all the required scripts are provided that makes it actionable using different input devices; my job’s done right? Answer is – you guessed it right, NO! How will a person using a screen reader understand the element is in fact actionable? Should they keep on guessing and activating the elements to understand if they are interactive? Sounds wrong right? Then define role! Role is an important piece of information that helps screen reader users understand the nature of element – like button, links, radio button, checkbox and so on.

Myth 8: Use of native HTML elements limits functionality

Fact: In simple words to say – this is another misconception. Functionalities like accordion, menus, draggable/droppable objects and so on can be perfectly created using native HTML elements. It’s the scripts that has to be handled accurately such that the accordion can expand/collapse content; menu button can open and close the sub menu and so on. Remember native HTML elements provide out of the box accessibility! So, it’s a win-win for everyone

Myth 9: If there’s design constraint to provide a visual text, then use aria-label

Fact: This is another of my favorites. If there’s no space to provide a visual text – provide aria-label to specify the accessible name. So easy, right? Wrong, providing aria-label means you have to hard code the accessible names! Remember? then developers complain about accessibility is a time-consuming process? Most of the sites use template logic wherein the structure will be set and based on the requirement additions/subtraction happens. But if you can utilize the visual text that is already available then why not? If it’s a form field, then a developer can definitely use title attribute to provide the accessible name. Remember, aria-label again is only available for a screen reader user – remember Myth number 6 we explored earlier? So, there is alternative like using aria-labelledby to provide an accessible name using the visual text that is already available.

Conclusion

And that’s a wrap, folks! I hope you enjoyed busting the above myths! By addressing these myths, Developers, Designers and Content Writers also understands the importance of accessible interactive elements and the benefits they bring to all users.

We’ve tried to bust some myths, separated facts from fiction, and hopefully gained some valuable insights on accessible interactive elements. I don’t remember where, but I read this somewhere which stuck with me – “Remember, the only thing that should be exclusive about your website is its content, not its accessibility”.

It’s important to remember that accessibility is not just a checkbox that needs to be ticked off, but a fundamental aspect of creating an inclusive digital space.

So, let’s keep on breaking down the barriers and making digital space more inclusive! Stay curious and keep busting those myths! Do share any additional myths that comes to your mind in the comment section below.

If you have any further questions or would like more information on accessibility reach out to us at info@barrierbreak.com. Also, if you want to know how our accessibility experts test your website and make it accessible, get in touch with our team at sales@barrierbreak.com.

This article by Fahad Lambate 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 Busting Myths: Separating Fact from Fiction in Accessible Interactive Elements appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

At Barrierbreak, our accessibility experts assist you in creating VPATs and ACR for your HR Products & Solutions. We make HR tools & software accessible to ensure they are compliant to Section 508 & ADA.

HR Tech Market

The rapidly changing market dynamics have forced Human Resource in organizations to adopt new ways to respond strategically to the needs of the employees. Post pandemic, companies are most likely to make huge investments in HR Tech to deliver satisfactory employee experience. As per the report by the Fortune Business Insights – The HR Tech Market is expected to grow from $24.04 billion in 2021 to $35.68 billion in 2028 at a CAGR of 5.8% in forecast period.

HR is the department that handles employee recruitments, benefits, compensation, growth and development, and other employee issues. Meeting the needs of an increasingly diverse workforce is a challenge for many businesses. The number of workers with disabilities in the US is expected to double by 2020, according to a study by the National Organization on Disability (NOD). Businesses that want to attract and retain talent may need to rethink their hiring process and consider how they can accommodate employees with disabilities.

HR Tech products are designed to make the HR process more transparent and easier for companies but often this does not happen. HR Tech products are not restricted to a particular department but consumed by every staff in an organization. If a company wants their HR tech to be successful, then they need to make sure that it’s accessible to all their employees.

With expertise in WCAG, Section 508 and ADA testing, our team of accessibility testers at BarrierBreak supports organizations to ensure accessibility of HR Tech tools and solutions used for employee payroll and compensation, talent acquisition and management, workforce analytics, performance management, benefits administration, training and development.

Why Accessible HR Tech?

A lot of companies are thinking about accessibility in the procurement process. It is important to start making a roadmap if you want to be considered. Your HR tools become a differentiator if it is accessible.

1. Accessibility of HR tech ensures that the design is useful and accommodates a wide range of people with diverse abilities.
2. Accessible HR tech ensures support to your customers in delivering on DEI initiatives & mandates
3. Employee information is confidential, and it is critical to make it easier to access confidential information independently, irrespective of disabilities.
4. Incorporating Accessibility into HR Tech products is not only the right thing to do but also makes great business sense.
5. There are many federal and state laws that require HR Tech products to be accessible to people with disabilities.

The Gist

There are a lot of tech solutions that are meant to help you be more efficient in your HR department. Some of these solutions can streamline your processes, while others can add more insight into your employees.

HR tech should be more user centric. It is also essential to have a VPAT for your HRMS, HRIS and HCM solutions and ensure that they are accessible to all including people with disabilities.

Get in touch with us at sales@barrierbreak.com to know how you can incorporate accessibility in your HR Tech product.

The post Is Your HR Tech Accessible? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

The Switch to Online Business 

Due to the closure of gyms owing to the pandemic, many fitness professionals have taken their businesses online. There are apps available for all types of exercises and workouts that you can complete right from your home! These apps tell you how many calories you have burnt, what’s your heart rate and how many steps you have walked.  

Some people prefer to use fitness apps because they are convenient and allow them to accomplish several workouts in one sitting. A person can sit at home and watch tutorial videos and carry out their workout regime without the hassle of actually going to the gym. The essence of every fitness app lies in the videos.

Why Videos? Why make it Accessible? 

Videos are a great way to increase traffic, creating a lasting impression and engaging your audience better. Compared to text, videos make it easier for your viewers to consume and retain information. However, not all videos are created equally. 

A lot of people have been talking about making videos accessible lately. The concept is pretty simple: you include text descriptions for non-visual learners, and make sure that your video files are properly tagged with relevant data so that screen readers can understand the content being displayed on the screen. Just because someone can’t see what’s happening in your video doesn’t mean they shouldn’t be able to understand it. 

It’s important that you pay attention on how to embed subtitles in the video, how to caption the video, how to provide a transcript with details of what was said in the video or how to make the video captions searchable with Google. 

Apple’s accessibility update for its Apple Fitness + app makes it accessible and inclusive for people with and without disabilities. The new app makes fitness more accessible and inclusive, and it’s all done for a good reason. There are a number of inclusive exercise videos and fitness apps that offer customized exercise programs for people with different types of disabilities.         

How to make fitness videos accessible? 

Video is an extremely flexible medium for creating educational content. It can be used for training, tutorials, interviews, short films, and more. In fact, 83% of people who watch videos online share the videos they like with others. One of the biggest advantages of video is that you can edit it in post-production to make a product or process more understandable. 

1. Providing Captions : Captions are text versions of the audio content, synchronized with the video that are essential for people with disabilities who are deaf or hard of hearing and also for people in sound – sensitive environments. WCAG Success Criterion 1.2.2 Captions (level A) mentions captions should be “provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.” There are free tools available online like Otter.ai, Amara,  YouTube Automatic Subtitles etc. that makes it possible to caption your video or you can outsource it for a fee.  
2. Providing Audio Description : Audio description is a narration that describes visual action taking place in a video. It is typically used to make visual media accessible to people who are blind or have low vision. The most common audio description standard is called “narrative description”, where the narrator describes what can be heard and seen, while not describing anything that cannot be heard (i.e., without telling the viewer what to think). In addition, there are descriptive systems for those who have difficulty seeing the screen, such as closed captioning, which may be used in conjunction with audio description.
3. Consider using an accessible media player : If you want to increase the number of people who view your videos, you should consider using an accessible media player. Consider using a video player with controls that are clearly identified, provide clear labels and that provide keyboard support.

The Support 

Highlight your online fitness business by embracing diversity, inclusiveness, and proving that your online classes meet the needs of everyone who tunes in to them. Use text and images to communicate that working out with you is beneficial and accessible to everyone. Get in touch with us at sales@barrierbreak.com if you need any more information in making your fitness apps or videos accessible and inclusive.  

The post 3 things to make fitness videos accessible for all appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Diwali and Accessibility

Diwali is a time when one goes to meet their loved ones and exchange gifts and sweets, burst firecrackers, have delicious traditional feasts and wear new clothes. It is also a time when  business is booming, and brands are looking to create awareness and increase their sales. Whether it’s an online business or offline, all these brands are giving discount and promotional offers on their products and services. But not all these businesses focus on accessibility and inclusion. Not all of them have their content made accessible. This is where you can edge out your competitor. This is where you can ensure that your promotional activities are accessible and appeals your audiences. And this is where we come in!

Our team at BarrierBreak believes a good marketing strategy and accessible content should always go hand in hand. They ensure your content is rendered accessible by applying inclusive design practices. 

Why Accessibility?

We have known Diwali being celebrated by everyone. But do we know what all difficulties are faced by people with disabilities while accessing promotional Diwali campaigns or offers?

Inclusive design and marketing strategy aim to create a positive and accessible user experience for all, including the people with disabilities. Rather than targeting a single user group or target market, integrative design principles seek to appeal to a wide range of users and understand the different ways in which people engage on your website. Inclusive design considers accessibility and inclusion from the outset of a promotional activity and helps you understand diversity and create products and services that are experienced by a large number of people.

Accessibility is an experience that meets the needs of your audience, including those with disabilities. Accessible design provides the foundation to ensure that the experience of your content is inclusive, but it also invites you to consider the content itself. When it comes to creating content, barrier-free design ensures that everyone has equal access so that no one is excluded.

Benefits of Accessible Advertising

Accessibility is just one of the many areas that need to be addressed to create inclusive content. Companies must create policies for internal and external content, including the creation of accessible promotional campaigns. There are many benefits in doing so:

• Accessible advertising campaigns help in reaching people with disabilities, such as people with impaired mobility, vision, hearing and learning.
• Using inclusive designs can not only help you reach potential customers and grow your business. It also shows your brand is committed to serving as many people as possible.
• Creating accessible content is a great way to promote an SEO strategy for brands.
• Creating inclusive content enables brands to forge stronger connections with customers. Consumers with disabilities and their family members are increasingly recognizing the value of the products and services which include them.
• Furthermore, applying universal design principles from the outset can help people with disabilities become potential customers of your brand. Being aware of accessibility increases inclusivity in your brand and improves the user experience.

Challenges Faced

One reason why more brands are not capitalizing on this opportunity is perceived difficulty in making their campaigns available to everyone. Festive marketing campaigns like the ones in Diwali tend to overlook people with disabilities because of the extra effort required to make ads accessible. In accessible advertising, brands fail to address a significant portion of the population because they overlook people with disabilities in their marketing plans.

As disabilities continue to increase, brands need to refine their marketing efforts to broaden their reach and communicate with this underserved population. One way for companies to avoid unintended barriers in this segment is to focus their marketing efforts on consumers with disabilities and their families. By focusing on accessibility in website design and content, you open your business to more people in more situations than you know.

Your content should be your first port of call to show that you care about making your brand inclusive and accessible to all.

How can we help?

Our highly specialized team at BarrierBreak not only helps you create accessible promotional content but also ensures that it is Section 508 and ADA compliant. We ensure the content is in conformance with WCAG 2.0 and 2.1

Get in touch with us at sales@barrierbreak.com for any support in making your content accessible.

The post Encouraging Accessible Advertising this Diwali appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

The post Accessible Digital Ready Technology — Future of Work appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Our specialized accessibility consultancy and accessibility testing team at BarrierBreak not only ensures your business is transitioned smoothly into accessibility but also makes sure all your digital products and services meet the accessibility standards and guidelines such as WCAG, Section 508, ADA.

Nitty-Gritty of Accessibility

To achieve accessibility, build accessibility into your business development process right from the start. Demonstrate how products do not meet accessibility standards and provide useful, actionable and achievable guidelines for ways to seize opportunities, such as new ways to involve the customer base of people with disabilities in the development and design process to solve the problem.

Create an access plan to an existing strategic business cycle, publish the policies on your public viewing website, and update the policies regularly. It is always advisable to integrate accessibility in your business at the beginning.

Creating a barrier-free working environment for workers with disabilities is easier if organizations have a clear understanding of the legal requirements they must comply with. Companies covered by ADA are required to change their business policies and procedures as necessary to serve customers with disabilities and take steps to communicate with them. The rules underlying ADA require companies not to apply a one-size-fits-all approach to dealing with employee disabilities. We have explained more about ADA and digital accessibility in this article. Keep reading!

The Offline World of Accessibility

The ADA requires that new public accommodation facilities, including small businesses, must be accessible and usable for people with disabilities. Businesses have been required to remove architectural barriers to building since the passage of the 1990 American with Disabilities Act, but this process can be difficult for small businesses with limited budgets. The ADA requires companies to remove all architectural barriers from existing buildings and ensure that all newly built or modified facilities are accessible for people with disabilities.

Assessing whether your business has architectural barriers is very crucial!

Accessibility Documentation is the evidence that supports your case when your company needs to defend itself against violations of ADA regulations or lawsuits. It is best for your company to document the steps it has taken to address accessibility issues; however, minor they may seem.

The Online World of Accessibility

The American with Disabilities Act (ADA) outlines rules and guidelines for businesses to allow people with disabilities access, but it can be overwhelming for business owners to read through the long list of requirements.

ADA strikes a careful balance between improving access for people with disabilities and recognizing the financial constraints faced by many small businesses.

The fear of lawsuits and financial risks are not the only reasons why it’s a great idea for your website to adhere to ADA compliance standards. Ethically and financially, it becomes all the more important to address to the needs of your customers. By complying to ADA, it allows you to meet the requirements of the federal and state governments and open your business to a larger clientele. By adhering to these standards, you will not only create a better user experience for your users but also inadvertently increase your profitability and overall company success.

In addition to ADA, AODA policy requires companies and government agencies to adopt an outward-looking, publicly accessible policy, such as achieving a declaration on accessibility and an organizational commitment to timely accessibility.

Why BarrierBreak?

BarrierBreak’s accessibility team assist organizations to recognize that accessibility needs to come at the start, and not be an afterthought. As an accessibility vendor, we help you build accessibility features and support you in integrating accessibility in all your business processes. We make sure the user experience is seamless especially for people with disabilities.

Write to sales@barrierbreak.com to help us support you with accessibility.

The post Building Accessibility Compliance into your Business Processes appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Accessibility for users with cognitive disabilities is a greater challenge than for other types of disabilities. While the use of computer technology in the classroom of students with cognitive disabilities has proven effective, the variety of skills and experiences of users with cognitive disabilities can cause problems. 

Our specialized team at BarrierBreak provides guidance on how people with cognitive disabilities best deal with accessibility issues. We aim to provide practical, step-by-step information and design to deliver effective best practices for web and digital accessibility. 

The Underdogs

While vision and hearing impairments are often discussed when it comes to site accessibility, cognitive disabilities represent the most computer users with disabilities according to the National Center for Disability Access and Education. Cognitive impairment is the least understood disability category, and much of what has been published on cognitive impairment from a clinical and scientific point of view does not include questions related to website accessibility. 

Cognitive learning is a neurological disability that includes neurological disorders as well as behavioral and mental disorders. 

What is Cognitive Disability?

Cognitive impairment refers to a wide range of disabilities – from people with intellectual impairments that limit their ability to age-related problems with thinking and remembering. Cognitive impairments include people with learning disabilities such as dyslexia and attention deficit hyperactivity disorder (ADHD). It affects how people express and receive information and communication, their motor skills, vision, hearing and ability to comprehend and consume information. Such disabilities can impair the ability to read and type text, recognize images, make precise gestures and locate important information.  

Accessibility allows people with cognitive disabilities to focus on the primary purpose of the content. Taking into account deficits in reading, language and language comprehension through supplementary media such as illustrations, symbols, videos and audio can improve accessibility for people with cognitive disabilities. Images, icons and graphic content can help users with cognitive impairments. 

Complex texts can cause difficulties for users with cognitive impairments. People with dyslexia, for example, may find it difficult and time-consuming to access text information. Perception disorders, also known as learning disabilities, include difficulties in processing sensory information such as auditory, tactile and visual. 

The Modus Operandi of Digital Accessibility

The Web Content Accessibility Guidelines (WCAG) 2.0 document is based on a broader understanding of how to create accessible content for specific user groups. The WCAG is a set of recommendations to make digital content and technologies accessible to people with disabilities. Regardless of cognitive, learning or neurological disabilities, many adapt digital content to make it easier to see and to use. 

People with cognitive and learning disabilities use a variety of technologies to adapt and simplify content to their needs. For example, screens readers designed for blind users or for accessing content on a computer or mobile phone are increasingly used by people with cognitive impairments to promote literacy. Supporting technologies have also been developed to facilitate cognitive access for people with physical or sensory disabilities. 

In practice, people with cognitive disabilities are less effective at hacking physical or sensory access technologies to meet their own needs, but that is no excuse for not implementing specific CA measures. Cognitive accessibility includes thinking about accessibility for people with cognitive and learning disabilities. 

What can you do?

Align your digital content with the Web Content Accessibility Guidelines (commonly referred to as WCAG 2.0) the most widely accepted standard for equal access to the Internet. Compliance with these guidelines may help protect against lawsuits alleging violations of Section 508 and American with Disabilities Act (ADA). 

In short, barrier-free websites help secure brands that promote positive word-of-mouth for the disabled population among their friends, family members and the general public. Several organizations have joined forces to identify measures to support the digital inclusion of people with cognitive disabilities. 

It seems that the use of information and communication technology (ICT) is a challenge for people with intellectual disabilities and that there is a digital divide between them and more connected citizens. 

We can bridge that gap for you! Our highly experienced team at BarrierBreak does not only ensure your digital products conform to accessibility standards but also provides a barrier-free experience for people with cognitive disabilities. 

Write to sales@barrierbreak.com and reach out for further assistance. 

The post Cognitive Disability & Digital Accessibility appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Recently, we were contacted by a company that was looking to create accessibility overlays for their website. We have been meaning to do a blog post about what accessibility overlays are, so we decided to take this opportunity to dive into the topic a little deeper.

We are seeing a digital transformation due to the pandemic and organizations are recognizing the need to provide an inclusive user experience to their customers. In addition, ADA-related lawsuits have increased by 23% in 2020. Though this has focused much-needed attention on digital accessibility, many organizations are also seeking quick fixes such as accessibility overlays to avoid accessibility lawsuits.

What are Accessibility Overlays?

Accessibility overlays and tools are automated software solutions that claim to detect and solve accessibility problems on the web. Accessibility Overlay tools typically apply JavaScript codes to make improvements to the front-end code of the website and quickly fix accessibility issues. There are various types of accessibility overlays with tool-based options such as toolbars, plugins, JavaScript and hardware models.

What do Accessibility Overlays offer?

If you want to make your digital solutions accessible online, accessibility overlays and widgets are one of the possibilities you’ll encounter along the way. Their goal is to make the websites accessible without having to change the source code underlying, ensuring accessibility in a fraction of the time and cost.

In the market for a quick fix, accessibility providers promise that accessibility overlays can make the necessary repairs to your website, help you resolve WCAG conformance issues in seconds, and do so at a fraction of the cost of other accessibility solutions.

Disadvantages of Accessibility Overlays

• 70-80% of the problems are not detected by the overlay. Overlays do not address accessibility problems in the source code, which means that people with disabilities are unable to navigate a website and access information at the same level.
• Issues such as unlabeled buttons and fields are not addressed, as are keyboard navigation, images, alt-text and other common accessibility issues.
• The problem is that while overlays can make websites more responsive to include accessibility tools, they can also make pages too rigid to be adaptable and override user preferences.
• There are also legal risks when an overlay creates a barrier for people with a disability in their experience with the site.
• Some users find overlays disruptive to their own access tools and they have manipulated their browsers to block overlays.

“Personally, I wouldn’t put an overlay on BarrierBreak’s website, so why would I advise customers to use overlays. If your organization focuses on inclusion, then Overlays are not the answer. Invest in Accessibility by building accessible products and solutions not by using a quick fix that can break at any time.”  Shilpi Kapoor, CEO at BarrierBreak

Why do we not advocate or recommend Accessibility Overlays?

• As per the WebAIM Survey of Web Accessibility Practitioners on accessibility overlays – 67% of respondents rate these tools as not at all or not very effective. Respondents with disabilities were even less favorable with 72% rating them not at all or not very effective, and only 2.4% rating them as very effective.
• Most providers that offer accessibility overlay widgets are solutions that combine aspects of overlay widgets to create their end product. Apart from the obvious problem of non-compliance with ADA regulations and the resulting lawsuits, accessibility overlays fall apart in many ways.
• Even the National Federation of the Blind has revoked accessiBe’s sponsorship saying that National Convention Sponsorship Statement Regarding accessiBe wherein they state “the Board believes that accessiBe currently engages in behavior that is harmful to the advancement of blind people in society. In particular, it is the opinion of the Board that accessiBe peremptorily and scornfully dismisses the concerns blind people have about its products and its approach to accessibility.”

There is no shortcut to an accessible design! Providers whose sole purpose is to ensure the accessibility of the website and to avoid lawsuits for overlays do not have a good track record in bringing lawsuits.

Get in touch for a 30 min tête-à-tête focused discussion on accessibility and personalized advice to forward your organization’s accessibility journey.

The post Why should you stay away from Accessibility Overlays? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.