The Wins

Since its enactment in 1990, ADA has played a crucial role in ensuring equal rights and opportunities for people with disabilities. 2023 has witnessed an increasing number of businesses recognizing the value of ADA compliance as they strive to create accessible spaces both physical & digital for their customers.

• DocMagic Introduces ADA-Compliant Digital Loan Documents

DocMagic Inc., a California-based provider of compliant loan document generation, regulatory compliance, and comprehensive eMortgage services, said this week it has added ADA-compliant mortgage loan documents to its document library. The new digital documents are accessible to visually impaired users and others with disabilities, unlocking opportunities for these consumers into the broader mortgage market, the company said. Read More on DocMagic

• The normalization of ADA accessibility at Boston Calling Music Festival

With a golf cart to help festival attendees get around and the willingness to make accommodations as needed, the ADA team at Boston Calling Music Festival made an effort to ensure that all persons could enjoy the festivities to the fullest extent this year. The ADA program offered a 50-seat wheelchair-accessible seating platform near the two main stages for those with physical disabilities, as well as ASL interpreters on a raised platform by the stage for those who are hard of hearing or deaf. Read More on Boston Calling Music Festival

• Tambourine Taps AI for Innovations in ADA Accessibility

Tambourine, the Fort Lauderdale-headquartered digital marketing technology company serving hotels, resorts, and tourism destinations worldwide, announced it has integrated Artificial Intelligence into its flagship product, The Symphony Hotel Marketing Platform. Read More on Tambourine Innovation

• Mishawaka opens ADA accessible playground at Battell Park

The city of Mishawaka held a ribbon cutting for a brand-new playground at its oldest and most historic park. Directly behind the bandshell at Battell Park, this is the first Mishawaka park to feature an AstroTurf surface, making the play area fully wheelchair accessible. The park also highlights a “We-Go-Round,” a wheelchair-accessible merry-go-round, a splash pad, and a sensory play center for kids on the autism spectrum. Read More on Mishawaka Playground

• Servicon Earns Digital Health Award for Responsive Website Design

Servicon, Southern California’s leading hospital environmental services (EVS) provider and commercial cleaning services company, has been named a 2023 Digital Health Award winner. Servicon’s recently updated website earned the Bronze Award in the Web-based Digital Health: Responsive Website Design category for businesses with over 500 employees. Read More on Servicon

The Setbacks

While it is true that 2023 saw some positive steps towards the implementation of the Americans with Disabilities Act (ADA), it is also important to acknowledge that there were lawsuits filed in relation to ADA compliance. These lawsuits serve as a reminder that there is still work to be done in ensuring equal access and rights for people with disabilities.

• Magic Store Must Face ADA Compliance Lawsuit Over Website Design

Online magic store Ellusionist.com Inc. must face discrimination claims brought by a visually impaired customer, a New York federal court ruled. The US District Court for the Southern District of New York on Tuesday denied in part Ellusionist’s motion to dismiss the case, in which the customer says its website fails to accommodate users who require screen-reading software. The court rejected Ellusionist’s argument that the customer failed to state a claim because its website didn’t qualify as a place of public accommodation. Read more on Magic Store

• City Of Chicago Held in Violation of Americans with Disabilities Act

A federal judge in Chicago held the City of Chicago liable for violating the Americans with Disabilities Act (ADA) and Section 504 of the Rehabilitation Act by failing to provide accessible pedestrian signals at signalized intersections throughout the city to those who are blind or have low vision. Read more on City of Chicago

• Lyneer Staffing, LLC Will Pay $119,400 to Settle Americans with Disabilities Act Suit

Lyneer Staffing, LLC, a leading national staffing agency, will provide American Sign Language (ASL) interpreters to deaf applicants, train its managers on reasonable accommodations, and pay $119,400 to settle an Americans with Disabilities (ADA) suit, the U.S. Equal Employment Opportunity Commission (EEOC) announced today. Read more on Lyneer Staffing

Embracing Accessibility

Being ADA compliant is not just a legal requirement; it is also a smart business move. By ensuring that your business is accessible to all individuals, including those with disabilities, you open your doors to a larger customer base. At BarrierBreak, we strongly emphasize the significance of accessibility compliance and have the expertise to provide top-notch ADA testing services. Our ADA testing service provides thorough evaluations and assessments, to ensure your digital products comply with accessibility standards and create an inclusive digital experience for all.

In conclusion, do explore “Comedians with Disabilities Act: Changing Attitudes Through Laughter” at the link:https://www.send2press.com/wire/comedians-with-disabilities-act-change-attitudes-through-laughter/. An inspiring example of how people with disabilities are using comedy to drive positive change.

Let’s embrace the journey of accessibility as we continue to celebrate the spirit of the ADA and work together towards a more inclusive world.

The post ADA Anniversary: Reflecting on Triumphs and Challenges in 2023 appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

While exploring Pune city with my friends, we decided to book bus tickets through a web site for our convenience. Although the booking process initially took some time, I was able to complete it within minutes. Intrigued by my quick booking, my friend asked me how I managed to do it so efficiently. They had trouble navigating the web on iPhone and iPad with VoiceOver screen reader because they were navigating through web content using only swipe gestures. They wanted to know if there are any shortcuts available on iPhone and iPad to navigate the web, similar to the way desktop screen readers like JAWS, NVDA, Narrator, and others use quick navigation keystrokes.

So, I thought of writing an article on ‘navigating web with VoiceOver rotor on iPhone and iPad’. To begin with, let's start with understanding the rotor.

What is rotor in VoiceOver?

VoiceOver is a built-in screen reader found on all iPhone, iPad and Mac devices. The rotor is one of the features of the VoiceOver, which lets you navigate through a set of elements on the web, apps and system utilities as follows: 

• Increase/decrease Volume 
•  Increase/decrease the speech rate. 
•  Reading methods i.e., character, word, line and so on.
• Navigate through headings, lists, links and so on the web pages. 

How do you use rotor on iPhone and iPad? 

First, to turn on VoiceOver:

1. Go to "Settings". 
2. Select the "Accessibility" option. 
3. Select the "VoiceOver" option. 
4. Activate the "VoiceOver On" switch. 

To use the rotor, follow the below steps:

1. Rotate two fingers on the screen of an iPhone or iPad device as if you are turning a dial either clockwise or anticlockwise.
2. The VoiceOver will read out the first rotor option. 
3. Keep rotating your fingers to hear more options. 
4. Lift your fingers to choose an option from the rotor. 
5. By flicking up/down one can access the selected options on the screen.

The elements of the rotor options change based on the application in use at any given time. For example, if you choose the heading option when a web page is open, a flick down or up will move VoiceOver to the next or previous heading on the web page. 

With rotor options, we can move to the next element by Flicking down and move to the previous element by flicking up with one finger. If you swipe left and right on the screen, VoiceOver will read out the next item on the page. 

One more important thing about the rotor feature is that, if we choose any option then VoiceOver announces the number of elements present on the web page for the selected option. 

For example, when a user selects "headings" option in the rotor on BarrierBreak’s home page, VoiceOver announces "13 headings". 

Rotor Options and their actions

The following tables show the Rotor Options and their actions for navigating the screen content and some system utilities. 

Note: Rotor options and actions mentioned in this post are as per iOS 16.5.

In this post, I have covered rotor options related to web and some basic actions.  

Reading options

Rotor options	VoiceOver Action
Character	Moves to next/previous character
Word	Moves to next/previous word
Line	Moves to next/previous line

System utilities options

Rotor options	VoiceOver Action
Speech rate	Increase/decrease speech rate
Volume	Increase/decrease volume
Container	Move VoiceOver focus from one container to another. For example, Doc area to the home screen.

Web element options

Rotor options	VoiceOver Action
Heading	Moves to the next/previous heading
List	Moves to the next/previous list
Table	Moves to the next/previous table (focus stay at the beginning of table)
Button	Moves to the next/previous button
Form control	Moves to the next/previous form control (check box, radio buttons and so on)
Text fields	Moves to the next/previous text field
Search fields	Moves to the next/previous search field
Links	Moves to the next/previous links
Visited links	Moves to the next/previous visited links
Unvisited links	Moves to the next/previous unvisited links
In-Page Links	Moves to the next/previous In-Page Links
Images	Moves to the next/previous images
Landmark	Moves to the next/previous landmark (Banner, main and so on)
Same element	Moves to the next/previous same element

Some of the default options of the rotor are "Headings", "Links", "Form controls", "Containers" and so on. VoiceOver provides users with an option to customize the options that come up in the rotor. To customize the rotor options, perform the following steps:

1. Go to "Settings".
2. Select the "Accessibility" option.
3. Select the "VoiceOver" option. 
4. Select the "rotor" option. 
5. Choose rotor options that you required such as "Table", "Landmark", "Unvisited links", "Visited links" and so on. 

So far, we discussed about the different rotor options of VoiceOver, now let’s discuss the rotor actions. 

What is rotor action?

The rotor actions are another feature of VoiceOver which allows user to perform action on apps. This feature was introduced in iOS 14. 

• Edit apps on home screen: This function enables the user to "Drag" and "Delete" for apps on the home screen. 
• Direct touch in apps: Direct touch is a way in which user can tell VoiceOver to ignore touch events in part or all on an app's screen so that the app can handle those touch events directly. 

To configure rotor actions, perform the following steps:  

1. Go to the "Settings" 
2. Select the "Accessibility" option. 
3. Select the "VoiceOver" option. 
4. Select the "rotor action" option. 

Browsing with VoiceOver Rotor 

Now let’s see the rotor in action. I’ll be downloading the "SAAS Accessibility Toolkit" from the BarrierBreak website. 

1. Open BarrierBreak website in safari browser. 
2. Select "headings" option in the rotor. 
3. By Flicking down with one finger, navigate to "Accessibility Consulting" heading. 
4. Navigate to "Download now" button using right swipe and double tap to activate it. 
5. Next, select "Form controls" option in the rotor. 
6. By Flicking down with one finger, navigate to "Name", "Corporate Email", "Company", "Industry" form fields and fill up the details. 
7. Swipe right and navigate to "Request Toolkit" button and double tap to activate it. 

Wasn’t it fast and easy?  

The VoiceOver rotor is a powerful tool that allows users with visual impairments to navigate the web effortlessly on their iPhones and iPads. And now that you have an understanding of the various rotor options used for web navigation, it is time to acquaint yourself with VoiceOver and take your accessibility journey in web navigation to the next level! 

Share your thoughts in the comments section below, and let's continue the conversation on creating a more inclusive web for all.

Useful VoiceOver Resources: 

• Getting started with VoiceOver on iOS
• Getting started with VoiceOver on Mac

The post Navigating web with VoiceOver rotor in iPhone and iPad  appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Featured Story

Disability Rights advocate smashes celebrity birthdays record!

By Guinness World Records

Having sharpened her memory skills with months of rehearsing, when Heidi attempted the record for most celebrity birthdays identified in three minutes she was confident she would get a high number on her first go.

---

BarrierBreak Highlight

Using Emojis is so fun! But how to make them accessible? 

Do you think using just emojis without any text is accessible to all users?

Nope, it’s not. Avoiding text and using only emojis impacts users with cognitive impairments users when the emojis are not the commonly used ones they in fact are confusing for all users.

Read More

---

People Stories

Double amputee Everest climber pledges to work for benefit of people with disabilities!

By AP News

The first double above-the-knee amputee to climb Mount Everest returned from the mountain on Tuesday pledging to dedicate the rest of his life to helping people with disabilities.

---

Top Picks

Google and Apple compete for AI-Powered accessibility.

By Analytics India Mag

AI has the potential to revolutionize the way humans interact with their devices, especially for those with health conditions and physical impairments. Whether it’s text-to-speech models in screen readers for people with visual impairments, or intelligent accessibility changes for those with mobility issues, accessibility for all is an important part of software development and AI innovation.

Poll shows most older adults use assistive tech to age in place.

By AHCJ

More than half of adults age 55 and older use assistive technology — including mobile health apps and fitness trackers — to stay healthier so they can age in place, according to a May 2023 U.S. News & World Report survey. However, getting older may also mean dealing with health issues like mobility problems, vision, hearing or cognitive limitations. That can make remaining at home more challenging. This is when technology can help!

Achieve Digital Accessibility at Scale: Audit – Maintain – Comply

BarrierBreak is the Leader in Offshore Digital Accessibility Testing & Consulting. Your trusted adviser and reliable source for accessibility testing solutions. Get in touch with us to ensure your digital solutions conform to WCAG 2.1 & 2.0,  Section 508 Testing, and to create a VPAT for your product.

 

The post ACCESSIBILITY BUZZ – June 2023 appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Yes, we are talking about “Smiling, Laughing, Kissing, Heart Eyes, Thinking, Angry” emojis. The ones that have become a part of our daily messages/emails. No matter if the messages are sent to friends, family, colleagues, or business stakeholders. Emojis help to add feelings to the messages. It’s also a great way to keep the tone of your message light.

Something like: “Happiest Birthday! Let’s plan a party at 21.00 today!”

Such an eye-pleasing birthday wish [Awww]. But is it the same for screen reader users? Let’s find out!

Screen reader users announce the birthday wish text as “Happiest Birthday! Cake Cake Cake Let’s plan a party at 21.00 today! Grinning face with big eyes”.

Oops! The message is not the same as I want to convey and also not enjoyable to hear all those unwanted expressions multiple times.

As we know screen reader announces the alt text of the image, we should try and use the most meaningful emojis (as per the context) along with the fact that it should be best to use them at the end of the statement or at the part that does not break the meaning of the message.

How are emojis generally used?

Everyone uses emojis differently such as someone would replace the text with emoji, someone will add many emojis along with the text, or someone will add an emoji that represents their emotions. Let’s have a deeper look at the emojis used.

Using emojis to convey messages

Sometimes emojis are too easy to use to convey a message. Like the feature to react to a particular text using emojis such as “thumbs up”, “thumbs down”, “Shocked”, and many more.

In the above bad example, the message that was to be conveyed was ‘Hey, I called you. Call me back once available’ but unfortunately, this is not coming out of the emojis. Instead, it announces “Hey, I ‘Telephone receiver’ you. ‘Telephone receiver’ me ‘Back arrow’ once available.”

Using emojis without text

Do you think using just emojis without any text is accessible to all users?

Nope, it’s not. Avoiding text and using only emojis impacts users with cognitive impairments users when the emojis are not the commonly used ones they in fact are confusing for all users.

Punctuation, Letters, Numbers! Oh yes, Emoticons!

:),  :-),  :-(,  :(,  :|,  these are a few examples of punctuation emoticons used across. These are announced as “colon right parenthesis”, “colon dash right parenthesis”, “colon dash left parenthesis”, “colon left parenthesis” and “colon vertical bar”. It will be annoying to listen to such announcements and the exact information will not be conveyed to users.

In the above bad example, the expression ‘speechless’ could not be communicated using emoticons.

Emoticons or Emojis is also = Unicode

Yes, emojis and emoticons look like images or icons, but they are characters from the UTF–8 character set.

‘128525’ will just mean some random numbers. However, using this random number along with the combination of ‘&#’ & ‘;’ in the HTML code will display smiling face with heart eyes emoji.

The unicode that will be used displays the same emoji/emoticons but with a different visual appearance on different platforms and with a different description of the emoji/emoticons. For example, an emoji can be called “Slightly smiling”, “Smiling face”, “Happy face” and so on.

To know more about emoticons/emoji Unicode check out the Unicode List. Let’s find out how different screen readers render emojis created using Unicode and <img> tag in HTML.

Emojis created using Unicode in HTML:

Using the code <p>&#128525;</p> in HTML, the generated emoji is announced as below by different commonly used screen readers:

But what if we want the accessible name to be uniformly identified on all platforms?
We can mark the emojis using <img> element and provide an appropriate and descriptive name. But yes this is only to enhance the user experience.

Emojis created using <img> tag in HTML:

When using a <img> tag along with an appropriate alternate text will render to all screen readers uniformly.

For example, creating an emoji as an image and providing an alternate text as below will announce as ‘Smiling face with heart shaped eyes’ to all screen readers on all platforms.

<img src="smiling-hearteyes.png" alt="Smiling face with heart shaped eyes">

This helps us to conclude creating emojis as images will help users render the same meaning across the platforms.

How to make emojis accessible?

Let’s check different ways to make the emojis accessible for all users.

Alternate text

Alternate text is important for understanding the emojis to assistive technology users. That does not mean providing alternate text when the emojis are used for decorative purposes on a webpage.

When the emojis are informative or/and interactive they should have an alternate text that describes them which will help the user to select the suitable emojis.

Alternative text should be concise and unique. For example, Happy face, Sad face, Angry face and so on.

<img src="angry.png" alt="Angry face">

<img src="angry.png" alt="Red circle with two dots and a brace bracket">

In the above bad example, the emoji is described per its visual appearance, however, it is difficult to conclude it indicates an angry face.

Colour Contrast

Emojis are presented using different colours like default, white, black and brown, giving users more options to select emojis. This adds up a task to ensure the emojis are visible in different modes like high contrast, dark mode and light mode. The emojis should meet the required contrast to help all users to identify the emojis.

Colour contrast requirements as per Success Criterion 1.4.11 Non-text Contrast:

• Identify all the key parts of a graphical object i.e., Emojis.
  • For example, in the case of a crying face emoji, the yellow circle face, the blue tears, black eyes and mouth are key parts of the emoji for a user to identify it as a crying face.
• Ensure that all the key parts meet the color contrast requirement of 3:1 with their adjacent colours.

Check out the Decoding WCAG 1.4.11 Non-text Contrast blog that explains the Non-text content requirements in layman’s language.

Note: Meeting Success Criterion 1.4.11 is only required when the emoji does not have any alternative to convey the same information in the surrounding.

Good Example:

In the above good example, the ‘heart’ emoji is clearly visible due to its sufficient contrast with background.

Bad Example:

In the above bad example, the ‘speechless’ emoji is not clearly visible due to its insufficient contrast with background.

Moving and Blinking Emojis

Many emojis move continuously like a clinking wine glass, a smiley with a thumb moving to indicate a like, moving eyes, and so on emojis. We must have seen such emojis on different platforms and even used some of these.

Watching them all move is delightful, but will it be the same for users with reading impairments, vestibular disorders and users with attention deficit disorders I guess NO.

One should avoid the auto movement of emojis. Even if auto movement is required it should only appear on keyboard focus or mouse hover. Also, the movement should be slow and stop within 5 seconds.

Good Example:

Using a Gif that stops within 5 seconds.

In the above good example, the Gif will be stoped after 5 seconds, not distracting users from page content or even having severe consequences.

Bad Example:

Using a Gif that cannot be stopped.

In the above bad example, the Gif will be played continuously, distracting users from page content or even having severe consequences.

CSS @prefers-reduced-motion media query

Use CSS @prefers-reduced-motion media query that ensures the page is displayed as per the user’s device setting for displaying animated content.

Animation can be displayed using the user’s device setting:

• On Windows to reduce the motion use Show animations in Windows
  • Steps: Settings > Display > Ease of Access
• On MacOS to reduce the motion use Reduce Motion
  • Steps: Settings > Accessibility > Display.
• On Android to reduce the motion use Remove animations
  • Steps: Settings > Accessibility > Text and display.

Hello!

Try the user’s device setting to turn off the animation.

Visual tooltip

(Again something that helps enhance user experience)

Yes, you read that correct! There are so many emojis that we have interpreted it wrong even today there are emojis that we do not know the real meaning of.

One of the best examples is folded hands emoji that many have thought of and used as a High Five emoji.

To avoid such misunderstanding for all the visual users it’s best to add a visual tooltip conveying the meaning of the emo

The tooltip does not have to be too descriptive or extra fancy. The tooltip text should be available on keyboard focus and on mouse hover. The requirement of 1.4.13: Content on Hover or Focus should be considered.

Do’s!

• Use colour combination for emojis that have sufficient contrast against all background modes like Default, Dark and High contrast modes.
• Provide concise alternate text that describe the emojis if you want all users to get an identical description.
• Use emojis instead of Emoticons to help the user understand the meaning of it.
• Use emojis in the statement where it makes the most meaning, preferably at the end of the statement.
•  Animated emojis should stop the motion within 5 seconds. If this is not achievable then the best solution is to provide a single play/stop button at the beginning of the page to control the animations. Alternatively, animated emojis should adhere to user device settings of controlling the animation.

Yippee! We have successfully understood the requirement to create accessible emojis for all users.

So, I hope now after understanding the requirement we all will be careful in which context to use emojis and how to ensure they will be accessible.

Let’s use accessible emojis and create delightful reading experiences for all!

The post Using Emojis is so fun! But how to make them accessible?  appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Featured Story

Google Maps will now show wheelchair accessibility information for all!

By Metro

Google Maps is providing wheelchair accessibility information by default for over 40 million places worldwide, including on public transport, pubs and restaurants.

The feature can help those with mobility needs to plan their trips by checking if the shop or landmark they’re visiting has step-free access.

---

BarrierBreak Highlight

How to get started with Voice Access (Android)?

Speech Recognition has come a long way in recent years, and with the way it is being evolving will definitely only lead to more improvements. These features can make it easier for users with any disabilities to interact with their devices and perform a wide range of tasks using their voice.

Read More

---

People Stories

He didn't want his daughter, who has cognitive and physical disabilities, to feel left out. So, he built a fully accessible theme park!

By CBS News

After seeing his daughter excluded, Hartman started on a quest to create a space where no one felt left out. His idea: an inclusive theme park. This theme park isn't just for people with disabilities. It's for everyone. But he made sure every single experience and ride is what he calls "ultra accessible."

---

Top Picks

Actor Is First With Down Syndrome To Star In Disney Film

By Disability Scoop

An actor with down syndrome is making history by appearing in a leading role alongside Jude Law and other big names in a new version of “Peter Pan” that Disney is releasing this week. It marks the first time that Disney has cast someone with a visible disability in a lead role.

The tech industry's accessibility-related products and launches this week!

By Engadget

Major tech companies are taking the GAAD week as a chance to share their latest accessibility-minded products. From Apple and Google to Webex and Adobe, the industry’s biggest players have launched new features to make their products easier to use. Here’s a quick roundup of this week’s GAAD news.

Achieve Digital Accessibility at Scale: Audit – Maintain – Comply

BarrierBreak is the Leader in Offshore Digital Accessibility Testing & Consulting. Your trusted adviser and reliable source for accessibility testing solutions. Get in touch with us to ensure your digital solutions conform to WCAG 2.1 & 2.0,  Section 508 Testing, and to create a VPAT for your product.

 

The post ACCESSIBILITY BUZZ – May 2023 appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

Voice Access on Android 

Voice Access is used to navigate and interact with Android devices using voice commands. 

Basic Requirements 

• Introduced in Android Version 7 and later. 
• Working microphone in Android device for users to give commands. 
• Download Voice Access from Google Play store. 
• Google Assistant should be activated on the device such that users can switch on Voice Access even by giving the command “Turn on Voice Access”. 

Turn Voice Access On or Off 

1. Go to Device Settings  
2. Select Accessibility and then tap Voice Access
3. To start using Voice Access, tap the Voice Access activation button

Tip: You can set up the activation button in Settings  > Accessibility > Voice Access > Settings > Activation button.

Interact using Voice Access 

Activate Voice Access 

After tapping on Voice Access activation button , the text “Voice Access on ” is displayed on screen to indicate that user can give voice commands to perform actions. They can use “Stop Listening” command to stop Voice Access. 

Activate Elements 

We can activate elements using voice commands such as “Tap” followed by the name of the elements. 

Basic Commands to interact with Voice Access 

• Show labels – This command displays an overlay with the name of the elements along with numbers. Users can say label name to activate the respective element. For Example, if users say, “Navigate Up” on Accessibility Settings screen, it will take users to the previous screen. 

• Show numbers – This command displays an overlay with number tags for the elements. Users can say “Tap number” or just the number to activate with respective item. For Example, if users say, “Tap 10″, it will activate the Accessibility Menu button on Accessibility Settings screen and take them to the Accessibility Menu screen. 

Tip:  Users can quickly find out the description of numbered element using “What is [number] ?” Command. 

• Show grid – This command displays numbered grid overlay and user can say “Tap number” on the grid to enlarge that area which will then present a new set of grid overlay. For Example, if users say “Tap 18” it will open an enlarged view of the grid that will display more numbers. Again, when users say, “Tap 8”, the Display & brightness button on Settings screen will get activated and they will be taken to Display & brightness screen.    

Tip: More information on how to interact with Voice Access can be found on https://support.google.com/accessibility/android/answer/6151848

Let’s explore opening the browser, to open the browser give the command “Open Chrome”. Now that we have opened the browser, let’s go ahead and open a website and say the following commands: 

1. Use the “Tap Address” command to navigate to the Address Bar. 
2. Dictate the Web address. (For example, https://www.barrierbreak.com/image-description/) 
3. Use the “Tap Go” command to activate the “Go” button to access the screen.

Now to navigate through the Image description screen, whether it is to a link, button or form controls, use the following commands. 

• Tap element name  – To directly activate a link or button. 
• Scroll Up or Scroll Down – To go up and down a screen. 
• Go back – To navigate to previous screen.                

Don’t you feel speech recognition is fascinating? It has come a long way in recent years, and with the way it is being evolving will definitely only lead to more improvements. These features can make it easier for users with any disabilities to interact with their devices and perform a wide range of tasks using their voice. 

Utilizing Voice Access on your Android device can greatly enhance your experience and accessibility. By following the steps outlined in this blog, you can easily get started with voice access and enjoy its rich set of features.   

Hope this series of blogs helps you to get started with the speech recognition in Android and iOS. Feel free to drop in your comments and share your experiences of using Voice Access! 

Happy exploring !! 

Looking for a reliable digital accessibility partner that truly understands your commitment to inclusion and accessibility? Why settle for anything less than the best? Choose us as your accessibility vendor and take the first step towards a truly inclusive digital future. 

This article by Jayshree Sharma 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 How to get started with Voice Access (Android)? appeared first on Leader in Offshore Accessibility Testing | Section 508 Compliance | WCAG Conformance | BarrierBreak.

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.

Featured Story

Accessible QR Code From Zappar Makes Packaging Talk To The Blind

By Forbes

Zappar, the venerable UK studio that was one of the pioneers in mobile AR, announced the launch of Zapvision, an Accessible QR code solution, which helps blind and partially sighted people access information related to items on store shelves and cupboards at home.

---

BarrierBreak Highlight

Busting Myths: Separating Fact from Fiction in Accessible Interactive Elements

As an accessibility expert, I have always come across a question – be it from my team or the clients. How can I make this interactive element accessible? Most of time my answer is simple, use native HTML elements over ARIA. But what about custom interactive elements?

Read More

---

People Stories

The Oscars Are Expanding Accessibility To The Red Carpet This Year

By Huffpost

For the first time in its 94-year history, the Academy Awards show is expanding its accessibility, both on and off screen, to the Oscars’ red carpet on Sunday. The Oscars’ red carpet will include audio transcriptions — provided by a team that includes a blind audio describer — and live captions to ensure access for deaf and hard-of-hearing audiences.

---

Top Picks

An exploration of cinematic accessibility: Open captions set the standard

By Mashable

In the 21st century, auditory and visual accessibility has gained relevance for viewers with and without disabilities, as more and more audiences report that they prefer to watch content with subtitles or captions. As social media platforms and streaming apps have picked up on the demand, some have instituted automatically generated or even customizable captions.

Accessibility Tags roll out this week on PlayStation Store on the PS5 console

By Playstation

Accessibility Tags allow game developers to provide detailed insight on accessibility features supported in their games. As you browse various game hubs on PlayStation Store game hubs on PS5, you’ll see a list of accessibility features by pressing the “Triangle” button if the game you select supports Accessibility Tags. These can range from visual and audio accessibility settings to DualSense controller options, etc.

Achieve Digital Accessibility at Scale: Audit – Maintain – Comply

BarrierBreak is the Leader in Offshore Digital Accessibility Testing & Consulting. Your trusted adviser and reliable source for accessibility testing solutions. Get in touch with us to ensure your digital solutions conform to WCAG 2.1 & 2.0,  Section 508 Testing, and to create a VPAT for your product.

 

The post ACCESSIBILITY BUZZ – April 2023 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.