Accessibility Testing Archives - Codoid
Select Page

Blog

Category Selected: Accessibility Testing

8 results Found

Accessibility Testing
Accessibility Testing

How to do Accessibility Testing? A Complete Guide

Accessibility Testing
Accessibility Testing
Accessibility Testing

People also read

OTT Testing

How to Perform Android TV Automation Testing using Appium?

Accessibility Testing
Blog

The Importance of QA Testing in eLearning Development

A VoiceOver Quick Reference Guide with Keyboard Shortcuts & Gestures

A VoiceOver Quick Reference Guide with Keyboard Shortcuts & Gestures

Apple is one of the biggest technology companies in the world with over 1.8 billion active devices as of 2022. VoiceOver is an in-built screen reader that was first introduced by Apple in 2009. It is now available on all their devices like Macs, iPhones, iPads, and so on. So as an accessibility tester, knowing to use VoiceOver for testing is mandatory. Being a leading web accessibility testing services provider, we have written this VoiceOver Quick Reference Guide that will help you in using VoiceOver for your accessibility testing. So we will be covering the various VoiceOver shortcut keys you’ll need to know when it comes to Macs and the various VoiceOver gestures when it comes to iPhones & iPads.

How to Get VoiceOver Started?

So let’s start this VoiceOver Quick Reference Guide by seeing how to start VoiceOver across all the devices. On a Mac, you can start VoiceOver by either using the shortcut keys (Command + F5) or by Settings -> General Section -> Accessibility Menu -> VoiceOver.

If you are using an iPad or iPhone that is supported by Siri, then you could also boot it up using Siri. You can also triple press the side button or the home button to start VoiceOver, or turn it on by Settings -> Accessibility -> VoiceOver.

Rotor

One unique feature in VoiceOver is the rotor, which can be described as a wheel of commands that is dependent on the context. So the user can choose what settings or navigation options that have to appear in the rotor. The rotor is highly customizable as the user can assign different navigation options such as headings, window spots, links, and so on as shown.

Rotor Functionality Menu in VoiceOver

You can define the settings you want to display in the rotor by navigating to Settings -> General -> Accessibility -> Voiceover -> Utility -> Web -> Web Rotor.

When it comes to devices such as iPads and iPhones, you can also turn Rotor on by swiping two fingers on the touchscreen like how you would dial with a rotating dial pad. And you will get a similar functionality where you can define the navigation options you need and use them by performing the appropriate gestures.

Accessibility Testing Using VoiceOver

Screen readers are accessibility testing tools that are primarily assistive technologies used by people with disabilities to access the content. So knowing the basic VoiceOver keyboard shortcuts to operate it is a must. In addition to that, there are a few checkpoints that every accessibility tester should validate to ensure that the content is accessible. So in this VoiceOver Quick Reference Guide, we have categorized the VoiceOver keyboard shortcuts with reference to those checkpoints.

  • Content Navigation
  • Reading Content
  • Interactive Element Navigation
  • Table Navigation

VoiceOver Keyboard Shortcuts for macOS:

iMacs and Macbooks are the Apple devices where VoiceOver can be controlled using various keyboard shortcuts. Since devices like iPads and iPhones have a touch screen for the input, they will be using touch gestures to control VoiceOver. We will be covering those gestures later on the blog once we have seen the keyboard shortcuts.

Functional :

ActionCommand
Start or Stop VoiceOverCommand + F5
VoiceOver Activation keys (or VO keys)Control + Option (referenced as VO)
Lock (or unlock) VO keysControl + Option + ;
Open Rotor Control + Option + U
Choose speech setting options such as speaking rate, voice, pitch, etc.Control + Option + Command + Right Arrow / Left Arrow
Modify the chosen speech settingControl + Option + Command + Up Arrow / Down Arrow
Toggle screen curtain on/offControl + Option+ shift +F11

 

Content Navigation

ActionCommand
Go to the top of the page (iMacs)Control + Option + Home
Go to the top of the page (Macbooks)Control + Option + Fn + Left Arrow
Navigate to the bottom of the page (iMacs)Control + Option+ End
Navigate to the bottom of the page (Macbooks)Control + Option + Fn + Right Arrow
Go to the next headingControl + Option + Command + H
Go to the next tableControl + Option + Command + T
Go to the first item on pageControl + Option + A
Scroll (vertically or horizontally)Shift key + scroll
Go to previous (heading, table, etc.)Control + Option + Shift + Command + (H, T, etc.)

 

Reading Content:

ActionCommand
Start readingControl + Option+ A
Stop readingControl
Start reading continuously from this point onControl + Option + Down Arrow
Read the entire pageControl + Option + Up Arrow / Down Arrow
Read the next line, word, characterControl + Option + Right Arrow
Read the previous line, word, characterControl + Option + Left Arrow
Repeat the last spoken phraseControl + Option + Z
Read the selected paragraphControl + Option + P
Read the selected sentenceControl + Option + S
Read the selected wordControl + Option + W

 

Interactive Elements Navigation:

If you are unsure of what interactive elements are, they are what the name suggests. They are web elements that a user can interact with or elements that respond to inputs from the user.

ActionCommand
Go to the next/previous focusable item (link, button, input, etc.)Tab / Shift + Tab
Next linkControl + Option + Command + L
Next visited linkControl + Option + Command + V
Next form elementControl + Option+ Command + J
Next listControl + Option + Command + X
Next graphicControl + Option+ Command + G
Activate a link or form controlControl + Option Enter (or) Space Bar
Interact with (go into/out of) objects (like iframes, menus, application regions, etc.)Control + Option + Shift + Down Arrow / Up Arrow

 

Table Navigation:
ActionCommand
Next tableControl + Option + Command + T
Read column headerControl + Option + C
Read row from VO cursor location to end of rowControl + Option + R
Read column from VO cursor location to the bottom of columnControl + Option + R + C
Move up or down in a columnUp Arrow or Down Arrow
Move to the left or right in a rowLeft Arrow or Right Arrow

iOS VoiceOver gestures

Apart from the way VoiceOver is controlled on these touch-enabled devices, it does provide a very uniform experience across the Apple ecosystem. So let’s take a look at the various gestures in the same categorized view as before.

  • Functional
  • Content Navigation
  • Reading Content
  • Interactive Element Navigation
  • Text Editing
  • Table Navigation

Apart from the gestures that you will be seeing in this VoiceOver Quick Reference Guide, you will also have the option to enable typing feedback for VoiceOver to read out the words or characters that have been typed by Settings -> General -> VoiceOver -> Typing Feedback. Since VoiceOver changes the way gestures work on an iPad or iPhone, make sure to disable them in the Settings.

Functional:

ActionCommand
Start or Stop VoiceOver (When it is enabled)Triple-press home button or side button (iPhone X +)
Gesture help4-finger double-tap
Split tap quick-activationSelect and hold with one finger, tap with another
Double-press buttonTriple-tap
Next/previous app4-finger swipe right/left
Drag modeTap twice and hold
Toggle screen curtain on/offThree-finger triple-tap
Item Chooser:Two-finger triple-tap
Choose speech setting options such as speaking rate, voice, pitch, etc.VO + Command + Right/Left Arrow key
Modify the chosen speech settingVO + Command+ Up/Down Arrow Key

 

Content Navigation

ActionGesture
Go to the top of the page Two-finger swipe up
Navigate to the bottom of the pageTwo-finger double-tap one-finger tap
Go to the next headingSet Headings on Rotor and swipe down
Go to the next tableRotor, swipe down
Go to previous (heading, table, etc.)Swipe up
Go back, close a popup, or cancel the last one.Two-finger scrub
Go to the first item on the page4-finger tap on the upper/lower half of the screen
Scroll (vertically or horizontally)3-finger swipe up, down, left, or right
Go back to one link, list, table, landmark, heading, etc.Swipe up

 

Reading Text:

ActionCommand
Start/Stop readingTwo-finger tap
Start reading continuously from this point onTwo-finger swipe down
Read the entire pageTwo-finger swipe up
Read next line, word, characterRotor, swipe down
Read the previous line, word, characterRotor, swipe up
Read the selected paragraphSwipe down - two fingers
Read the selected sentenceSwipe down - two fingers
Read the selected wordRead the selected word
Read from top to current locationVO + B
Toggle speech on/offThree-finger double-tap

 

Interactive Elements Navigation:
ActionCommand
Go to the next/previous focusable item (link, button, input, etc.)Swipe right
Next linkRotor, swipe down
Next visited linkVO + Command +V
Next form or button elementVO + Command + J
Select and deselect checkboxes, radio buttons,Double-tap
Next checkbox. combo box, radio buttonRotor (Same item or form controls), swipe down
Open combo boxDouble-tap
Hear combo box options:Drag finger through the list
Activate the link or buttonDouble-tap
Next listRotor, swipe down

 

Text Editing:

ActionGestures
Select/deselect textPinch out/in
Copy the last spoken text to the clipboardThree-finger quadruple-tap
Change caseThree-finger swipe up/down*
Insert spaceTwo-finger swipe right*
BackspaceTwo-finger swipe left*

 

Table:

ActionCommand
Next tableRotor, swipe down
Move up in a columnSwipe Up
Move down in a columnSwipe Down
Move to the left in a rowSwipe Left
Move to the right in a rowSwipe Right

 

Advantages of VoiceOver:

  • The layout and gestures of VoiceOver are universal across all devices making the shift from one device to another seamless.
  • The curtain mode enables users to turn off the screen when the screen reader is being used to enable a more private user experience.
  • Users will also be able to change the speech rate if they wish to speed things up.
  • Numerous voice options with different accent options such as UK, Ireland, Australia, and South Africa.
  • Users can also determine what information has to be read by the screen reader such as punctuation, emojis, hyperlinks, and so on.

Disadvantages of VoiceOver

  • VoiceOver will not read any content from Microsoft Office for Mac.
  • Likewise, it will also not read any content from Adobe Acrobat.

Conclusion:

So as stated earlier, knowing how to use VoiceOver across all Apple devices is very crucial for an accessibility tester. The categorized tables can serve as an effective VoiceOver keyboard shortcuts guide for macOS or as a VoiceOver gestures cheat sheet for iOS. So we hope this VoiceOver Quick Reference Guide improves your accessibility testing skills. Make sure to subscribe to our newsletter to stay up to date with such informative content.

How to do Accessibility Testing? A Complete Guide

How to do Accessibility Testing? A Complete Guide

As of 2022, the internet has a whopping 4.95 billion users on a global level (i.e) 62.5% of the entire global population is on the internet. There are various reasons for us to believe that the internet is one of the best innovations of this century as it has reshaped the course of our lives by providing us with access to information at our fingertips. But the question to be asked here is if this access is universal to all of us. Truth be told, no. There are about 1 Billion people with at least one form of disability. Web accessibility is the way to ensure that the basic right to information is fulfilled for the 1 billion people, and accessibility testing is the key to ensuring it.

Accessibility testing is definitely very different from regular testing types. Its unique nature might even instill fear in various testers to even try to learn about accessibility testing. Being a leading web-accessibility testing service provider, we have years of experience in this domain. Our dedicated team of testers has mastered the accessibility testing process to not only comply with the various guidelines but to also ensure access and a great user experience for people with disabilities. So in this blog, we will be extensively covering the concepts you will need to know to perform accessibility testing, how web accessibility is measured, the various steps involved in accessibility testing, and much more. Before we head to all that, let’s first clear the air from any and all misconceptions by debunking the myths surrounding accessibility testing.

 

 

Accessibility Laws Around the World

COUNTRY/ REGIONLAW NAME YEAR OF IMPLEMENTATIONSCOPEWCAG VERSION
AUSTRALIADisability Discrimination Act 1992 1992Public sector, Private sectorWCAG 2.0
CANADACanadian Human Rights Act1985Public sector, Private sectorWCAG 2.0
CHINA Law on the Protection of Persons with Disabilities 19902008Public sector, Private sectorNone
DENMARKAgreement on the use of open standards for software in the public sector, October 2007 (Danish)2007Public sectorWCAG 2.0
EUROPEAN Web and Mobile Accessibility Directive2016Public sector WCAG 2.0
FINLAND Act on Electronic Services and Communication in the Public Sector2003GovernmentNone
FRANCE" Law n° 2005-102 of February 11, 2005 for equal rights and opportunities, participation and citizenship of people with disabilities (French)"2005Public sectorNone
GERMANYAct on Equal Opportunities for Persons with Disabilities (Disability Equality Act – BGG) (German)2002Public sector, Private sectorNone
HONG KONG(HKSAR)Guidelines on Dissemination of Information through Government Websites 1999GovernmentWCAG 2.0
INDIA Rights of Persons with Disabilities Act, 2016 (RPD) 2016Public sector, Private sectorNone

 

Accessibility Metrics: How is Web Accessibility Measured?

Though there are different laws that are followed around the world, a majority of them are based on WCAG (Web Content Accessibility Guidelines). W3C (World Wide Web Consortium) developed WCAG and published it for the first time in 1999 in an effort to ensure accessibility on the internet. When it comes to accessibility metrics, web accessibility can be measured using three conformance levels, namely Level A, Level AA, and Level AAA. These 3 WCAG Compliance Levels have numerous success criteria that ensure accessibility to people with various disabilities.

Understanding the 3 WCAG Compliance Levels:

WCAG has developed these compliance levels with 4 primary guiding principles in mind. These 4 aspects are commonly referred to with the acronym POUR.

  • Perceivable
  • Operable
  • Understandable
  • Robust

The perceivable, operable, and understandable principles are pretty self-explanatory as every user should be able to perceive the content, operate or navigate through it, and understand it as well. Robust is focused on ensuring that they can do all the 3 in various devices to decrease numerous limitations. WCAG was first introduced in 1999 and has been going through constant upgrades by adding success criteria to meet the various accessibility needs. The most recent version of WCAG is WCAG 2.1 which was officially released in June 2018.

The 3 WCAG compliance levels are built around these guiding principles. Each level of compliance is built around the previous level. To put it in simple terms, If you have to attain level AAA compliance, you should satisfy all the success criteria from the AA compliance level. Likewise, if you wish to comply with AA level compliance, you should have satisfied all the success criteria of level A. So level A compliance is the most basic of the 3 available WCAG compliance levels. Since there are also no partial WCAG compliance levels, even if your website doesn’t satisfy one of the required success criteria, it will be termed non-compliant.

Level A Compliance: Minimum Level

Level A is the most basic level of accessibility that every website should aim to comply with. It solves the primal problem of people with disabilities finding your website unusable. Since each compliance level is built around its preceding levels, level A compliance lays the foundation for everything. Now let’s take a look at the 30 success criteria at this level.

Level A Compliance Minimum Level

If you are very new to accessibility, you may not be able to comprehend everything mentioned in the list. But this level of compliance ensures that people with visual impairments will be able to use screen readers effectively with the help of proper page structure and media alternatives such as alt-text for images, subtitles for videos, and so on. But it definitely doesn’t solve all the problems. So let’s see what level AA compliance has to offer.

Level AA Compliance: Acceptable Level

If level A is the bare basics, then Level AA is the Acceptance level of compliance a website can look to achieve to enhance the user experience for disabled people. In addition to the 30 success criteria that have to be met in level A compliance, an additional 20 success criteria also have to be satisfied. Of the 50 total success criteria at level AA, let’s take a look at the success criteria exclusive to this level in a categorized way.

Level AA Compliance Acceptable Level

We can see the additional focus on notable aspects like color contrast levels, well-defined roles and labels in form labels, status messages, and so on.

Level AAA Compliance: Optimal Level

Level AAA is the highest level of accessibility compliance that has an additional 28 success criteria that have to be satisfied. So the grand total of success criteria to be met for this level of compliance is 78 as of writing this blog. It is also the most difficult level of compliance to attain. Though achieving this level of compliance is hard, it has to be done if you are looking to build a specialist site for accessibility. Here is a list of the 28 success criteria that are exclusive to level AAA.

Level AAA Compliance Optimal Level

The level of difficulty in each of these success criteria is definitely high. For example, if you have a pre-recorded audio or video on your site, it definitely has to have sign language support. Since live videos are very uncommon on websites, the amount of work needed to achieve this is high. There are also focus areas such as mentioning the expanded form of abbreviations, providing context-sensitive help, and so on.

Which Disabilities Are Supported by WCAG?

Though there are numerous types of disabilities, not all disabilities are covered under the Web Content Accessibility Guidelines. Though there are new guidelines being added over time, as of now WCAG supports visual impairments, auditory disabilities, cognitive disabilities, and motor disabilities. The support is provided due to assistive technologies such as

  • Screenreaders
  • Braille Displays
  • Text-to-speech systems
  • Magnifiers
  • Talking Devices
  • Captioning

 

ARIA

Out of these assistive technologies, screen readers are the most used and so understanding what ARIA is and how it is used is an integral part of accessibility testing.

What is ARIA?

ARIA expanded as Accessible Rich Internet Applications, is a set of attributes that can be added to the HTML for developing more accessible web content applications. It is a W3C specification that fills in the gaps and makes up for the accessibility voids in regular HTML. It can be used to

  • Help Screen readers and other assistive technologies perform better by improving the accessibility of interactive web elements.
  • Enhances the Page Structure by defining helpful landmarks.
  • Improves keyboard accessibility & interactivity.

Now let’s find out how ARIA improves accessibility by taking a look at the most commonly used ARIA attributes with the help of an example.

The most commonly used aria attributes:-

  • 1. aria-checked.
  • 2. Aria-disabled.
  • 3. aria-expanded.
  • 4. aria-haspopup.
  • 5. Aria-hidden
  • 6. Aria-labelledby
  • 7. Aria-describedby
ARIA Attribute Example: Aria-checked

The aria-checked attribute can be used to denote the current state of checkboxes and radio buttons. So it will be able to indicate whether an element is checked or unchecked by using true and false statements. You can use JavaScript to ensure that the ARIA’s state changes when it is checked or unchecked.

ARIA Attribute Example, Aria Checked - Accessibility Testing

  • aria-checked=”true” indicates the element is checked.
  • aria-checked=”false” indicates the element is in an unchecked state.
  • aria-checked=”mixed” indicates partial check for elements that have tri-states

As the name of all the other commonly used attributes suggests, they can be used to indicate if a list is expanded, if there is a pop-up, and so on.

 

Web-Accessibility Testing Tutorial

Accessibility testing is very much different from the regular types of software testing and might seem daunting to many. As seen in the ‘How Accessibility is Measured’ section, there are 3 different WCAG compliance levels. So we will now be focusing on the various success criteria from the A-level compliance. To make it even easier for you to perform these tests, we have broken down the entire accessibility testing process based on the different web elements and content types we will generally add to a website. Once we have covered all that, we will then explore how to ensure general accessibility.

Page Title

The page title is one of the most basic properties of a web page that helps us differentiate the numerous webpages that appear in the search results on Google or when multiple webpages are opened in a browser. We will easily be able to see and identify the difference. But if you’re using a screen reader, it will not read out the domain name. And if the Page Titles are similar, it’ll become hard for the user to know the difference. So make sure to test if the titles clearly convey what the webpage is about.

Best Practice:
<html>
<head>
<title>How to do accessibility testing</title>
</head>
</html>
Bad Practice:
<html>
<head>...</head>
	<body>...</body>
</html>
Places to Check:
  • Browser Tab.
  • Search Engine results page.
  • Bookmarks.
  • Title of other pages within the same website. (Eg. Blog Articles)

Structure check

Now that we have seen how the title can impact a disabled person’s usability, let’s shift to the structure of the webpage. A complicated structure can confuse even a regular end-user. So using a well-planned and clean structure will make it easier for regular users to scan through and read your content while making it accessible for people with cognitive and visual disabilities.

Checklist:
  • 1. Check if the page has a defined header and footer.
  • 2. Validate the main landmark and the complementary landmarks by navigating to specific sections.
  • 3. Test the flow of the Heading structure.
  • 4. If there are numbered lists, bullet lists, or tables, check if they are read properly by the screenreader.
  • 5. Test if the bypass blocks work using a screen reader.
  • 6. Check if the webpage is coded with human-readable language that can be programmatically determined by assistive technologies.
  • 7. Check if the basic structural elements like sections, paragraphs, quotes(blackquotes), etc. have been defined properly.
  • 8. Check for hyperlinks on the page and ensure that the anchor text is descriptive enough to convey the change of context to the user.

Headings

Headings in a webpage are very crucial as it outlines the main content of the page and helps convey which parts are important. So if your webpage has more than 1 Heading 1, doesn’t have any headings, or doesn’t follow a proper hierarchy, it will definitely cause confusion. That is why the heading structure flow is recommended to go from H1 to H6 even though it is not mandatory.

Best Practice:
*Heading level 1<h1>
    *Heading level 2<h2>
        *Heading level3<h3>
           *Heading level4<h4>
              *Heading level5<h5>
                 *Heading level6<h6>
        *Heading level3<h3>
           *Heading level4<h4>
              *Heading level5<h5>
                 *Heading level6<h6>
    *Heading level 2<h2>
       *Heading level3<h3>
          *Heading level4<h4>
Bad Practice:
   *Heading level 1<h1>
      *Heading level 2<h2>
         *Heading level3<h3>
            *Heading level 1<h1>
               *Heading level 4<h4>
                  *Heading level5<h5>

Tables

Tables are used to present the data in an organized way and in logical order. The table should have a table header, the table header should be marked up with ‘th’. And the data inside the cells should be marked up with ‘td’. If there are any highly complex tables, check if the scope header and id have been provided.

Good Practice:
<table>
	<tr>
		<th>Types of Disabilities</th>
		<th>Description</th>
</tr>
<tr>
<td>Vision</td>
<td>People who have low vision, complete blindness and partial blindness</td>
</tr>
</table>
Bad Practice:
<table>
	<tr>
<td>Vision</td>
<td>People who have low vision, complete blindness and partial blindness</td>
</tr>
</table>
Checklist:
  • Verify if all the column or row data are read out along with the respective column or row headers.
  • Ensure that the number of total rows and columns are properly readout.
  • Check if the row and column numbers are correctly readout when the focus shifts to them.

Lists

Typing out over-long paragraphs and not using lists in pages can greatly reduce the readability for even regular users. The right usage of lists can make it very easy for people with visual impairments using screen readers or for even people suffering from disabilities like Dyslexia. But if the proper HTML coding isn’t used in the lists, screen readers might just read all the words together like a sentence and confuse the user. Since there are 3 types of lists (Unordered list, Ordered list, and Descriptive list), we have shown what the proper code structure will look like.

Good Practice
<ul>
	<li>Apple</li>
	<li>Orange</li>
</ul>
<ol>
‘	<li>Vision</li>
	<li>Speech</li>
</ol>
<dl>
	<dt>Disabilities</dt>
	<dd>Vision</dd>
	<dd>Speech</dd>
</dl>

Forms, labels, and error

Other common components seen in various websites are text boxes, buttons, dropdowns, and so on. Since the user should be able to interact with these web elements, it is important for them to have accessible names and proper ARIA labels for the screen reader to read them properly.

Checklist:
  • 1. Check if proper attributes are used for all required fields as the screen reader should be able to announce to the user that it is a required field.
  • 2. If there are any radio buttons, check if they are grouped together.
  • 3. Check if all elements should receive focus when navigating using the tab key.
  • 4. If there are any errors in an input field, check if the error is mentioned and read out by the screen reader.
  • 5. Check if all the dropdown options have aria attributes like “aria-expanded” and “aria-collapsed”.
  • 6. Verify that the pop-up content has an ARIA attribute as “aria-haspopup”.
  • 7. Check if all buttons have proper ARIA labels that help the user understand their usage.
  • 8. Verify that the aria attributes for alert contents are implemented correctly.

Multimedia Content

Multimedia content such as images, audio, and videos will not be accessible to people with various disabilities. But there are steps developers can take to make them accessible to all by

  • Adding alt text or long descriptions to images.
  • Adding Closed Captions, transcripts, and audio descriptions for videos and audios.

Images – Alt text

Alt-text is nothing but the alternative text that explains the purpose or content of images, charts, and flowcharts for the people who will not be able to see them. So when an image is bought to focus, the screen reader will be able to read out the provided alternative text. If it is a very complex visual that requires more than 140 characters, then we could opt to use long descriptions over alt text.

<div>
<img style=”” src=”” alt=”” width=””> 
</div>

The job doesn’t end by checking if the alt text is present or not, we should ensure that the alt text fulfills its purpose by carrying out the checks from the below checklist.

Checklist
  • 1. Check if the alt text is descriptive enough to convey the intent or info from the image.
  • 2. Be clear when using terms prone to misconception like ‘Apple’. Users might get confused if we are talking about the company named Apple or the fruit named Apple.
  • 3. Make sure the alt text is not used as a holder of keywords for the various SEO needs.
  • 4. Text alternatives are not needed for decorative images as they will not affect the user in understanding the main content of the page. For example, consider a tick mark near the text that says “Checkpoint”. Here it is not mandatory to mention the tick mark.

Videos & Audios

Things get a little more complicated when other multimedia contents such as videos and audio have to be added. We would have to verify if these multimedia contents are supported by closed captions, audio descriptions, or transcripts. Let’s take a look at each of these assistive technologies.

Closed captions & Transcripts

A visually impaired person will be able to understand the context of videos with dialogues or conversations. But what if a person with a hearing disability watches the same video? Though there are auto-generated captions, they are not that reliable. That is why it is important to include closed captions or transcripts for all the videos/audio you add. Though transcripts are not mandatory, they will be effective when used for podcasts, interviews, or conversations. So a person with hearing impairment can read the transcript if they wish to.

Checklist:
  • 1. Check if the closed captions are in sync with the video.
  • 2. Validate if the subtitles have been mapped word-by-word.
  • 3. Make sure the closed captions are visible within the player.
  • 4. If it is a conversational video, make sure the name of the speaker is also mentioned.
  • 5. Check if all the numeric values are mentioned properly.
  • 6. Make sure the closed captions mention important background audio elements such as applause, silence, background score, footsteps, and so on.

Audio Description

But what if the video doesn’t have any or much dialogues or conversations? What if the visuals are a key to understanding the video? Then employing subtitles alone will never be enough. That is where audio descriptions come into play as they will describe all the actions that are happening in the visual and help users understand it clearly.

Checklist
  • 1. Ensure the description makes it possible for visually impaired users to create a clear mental image in their minds.
  • 2. Make sure the audio description covers every action, activity, silence, animation, expression, facial expression, and so on.
  • 3. The paused screen when the audio description is playing should be clearly visible and no text, image, or element should be blurred or misaligned.
  • 4. Check if all the on-screen text is available correctly in the audio description.
  • 5. Validate if all the activities and on-screen elements are in sync with the Audio description.
  • 6. The screen should be paused at the same instance which is being described in the audio description.

Animations, Moving and blinking Contents

Animations, scroll effects, and such dynamic content are being widely used on various websites. As debunked earlier, accessibility guidelines don’t prevent us from doing so. Rather, it just guides us in implementing it in the right and usable way.

Checklist
  • 1. Ensure all animations that are over 5 seconds in length have the provision to play, pause, or stop them.
  • 2. If there are any blinking or flashing contents, ensure that it doesn’t flash more than 3 times in one second as it might affect people prone to seizures.

Color Contrast

A general rule to keep in mind when developing or adding such content is to ensure there is proper color contrast between the background color and foreground elements such as text, buttons, graphs, and so on. Be it a table, image, video, form, or any content type we have seen, a lack of proper color usage can make it hard for even regular users to view the content without any difficulty. So it is needless to say that people with low vision or color blindness will find it impossible to access the content. The preferred color of the background is white and the foreground is black.

Now that we have covered all the aspects of adding different types and categories of content, let’s progress to the usage aspects that you must know when it comes to accessibility testing.

Keyboard Control & Interaction

People with visual impairments and motor disabilities will not be able to use a mouse in the same way a regular user can. So using braille keyboards or regular will be the only option they have. The most important key on the keyboard will be the ‘Tab’ key as it will help navigate to all the interactive web elements. You can use the ‘Shift+Tab’ keys combination to move in the backward direction.

  • Test if all the web elements receive focus when you hit the tab key. Also, check if the focus shifts from that element when the tab key is pressed again.
  • The element in focus will be highlighted with a gray outline. So, test if it is visible as it will be helpful for people with motor disabilities.
  • Ensure that the focus order is from left to right or right to left based on the language in use.
  • For web elements such as drop-down lists, ensure that all the options are read out by the screen reader when navigating using the arrow keys.
  • If there is any video or a carousel, the user must be able to control (Pause/Play/Volume Control) it using the keyboard actions alone.
  • Likewise, if there are any auto-play functionalities, check if the playback stops in 3 seconds or provides an option to control the playback.
  • If an interactive element does not receive the tab focus, then the element should be coded with “tab index=0”.

Input Modalities

To make it easier for the users to access the web page with different input options such as the touchscreen on mobiles, and tablets without using the keyboard. While thinking about checking the web page without keyboard keys, we can use pointer cancellation, pointer gestures, and motion actuation.

Zooming

Since there are various types of visual impairments, people with low vision might be able to access the content on the webpage without the use of a screen reader. So we have to zoom in and view the page at 200 and 400% zoom levels and check for

  • Text Overlaps
  • Truncating issues
Other Checks

From all the points we have discussed above, it is obvious that any instructions or key elements that are crucial for understanding and operating the content should not rely only on sensory characteristics. For example, if there is a form to be completed, then the completion of the form shouldn’t be denoted with a bell sound alone as people who have hearing impairments will not be able to access it. Likewise, showing just a visual or color change to denote completion will also not be accessible to all.

If there are any defined time limits, make sure that people with disabilities will be able to use them correctly. So if we take a session expiration as an example.

  • Check if the user is able to turn off or adjust the time limit before it starts.
  • The adjusting limit should be at least 10 times more than the default setting.
  • Make sure there are accessible warning messages before expiration and that there is at least a 20-second time gap for the user to extend the session with a simple action such as typing the space key.
  • It is important to keep in mind that there are exceptions for expirations such as an online test as the ability to extend the provided time limit would invalidate the existence of a time limit. Likewise, these criteria can be exempted if the time limit is more than 20 hours or if a real-time event such as an auction is being conducted.

Most common Accessibility issues

So what kind of issues can you expect when following the above-mentioned checklist? Here’s a list of the most common accessibility issues that will give you a heads up about the various issues you will encounter when performing accessibility testing. Please note that this is not a comprehensive list and that you have to keep your eyes open for any unexpected accessibility issues that might come your way.

  • 1. Heading level issues
  • 2. Incorrect implementation of list tags
  • 3. Missing alt-text for images
  • 4. Incorrect focus order
  • 5. Missing tab focus for interactive web elements
  • 6. Poor Color Contrast
  • 7. Incorrect reading order
  • 8. Missing ARIA labels
  • 9. State not announced.
  • 10. Improper table implementation
  • 11. Inability to access the contents using keyboard keys
  • 12. Content is not visible at 400 % and 200% zoom levels
  • 13. Screen reader not notifying alert messages
  • 14. Screen reader not reading the dropdown list
  • 15. Lack of expanded and collapsed state implementation
  • 16. Missing closed captions, audio descriptions, or video transcripts for videos

 

Challenges of Accessibility Testing

There is no task without any challenges and Accessibility Testing also does come with its own share of challenges.

Dynamic Websites

Dynamic websites tend to have 100 or 1000’s changes every minute or every hour. So implementing web accessibility for dynamic content inside such web pages is considered to be very hard due to the presence of third-party content like ads and other such factors.

Large Websites

Though it would be easier to work with static content in comparison, it would still be a mammoth challenge if it has to be implemented for over 1000 pages in retrospect. So the next major challenge in implementing accessibility is the scale of the website as the more the number of pages, the higher the variety of content that will be available.

Limited Automation Scope

The scope for automating web accessibility tests is very low as even if we write scripts to detect the images with or without alt-text, it only solves half the problem. What if the alt-text is present but not descriptive enough or relevant to that image? We would once again need a manual tester to validate it. Lack of conformance verification is what makes scaling web accessibility tests with automation a challenge.

Test Artifacts over the User Experience

The focus of WCAG and its success criteria are primarily on technical artifacts and not on the user’s journey and goals. To put it in simple terms, their guidelines are only focused on the webpage as seen earlier, and not on the user experience. The clear gap between accessibility and the user experience can be bridged if the accessibility testing team focused on the user experience while performing testing. And that is why we ensure to train our accessibility testers to test by keeping the user experience in mind.

 

Web Accessibility Testing Tools

Since disabled people use various assistive technologies, as a tester you should know how to use those technologies too. That’s just the first step, as you should also use the assistive technology in a way that a real person with disabilities will use it. Putting yourself in their perspective is the key to maximizing the scope of usage. There are dedicated screen readers that come with built-in various devices and platforms. Though there will be various similarities when it comes to the usage of these screen readers, you should know how to use them individually.

Inbuilt List of Screen Readers
  • Narrator for Windows
  • ORCA for Linux
  • Voiceover for macOS and iOS
  • Talkback for Android
  • ChromeVox for Chromebooks
Other Popular Screen Readers
  • JAWS for Windows (Commercial)
  • NVDA for Windows (Free)

Apart from these assistive technologies, we also employ a set of tools to ease the accessibility testing process. While no tool will work without human validation, it is still handy to have such options to speed up the evaluation process. In order to speed things up, even more, we also use various browser extensions and bookmarklets such as,

  • Wave
  • Color Contrast Analyzer
  • arc & axe

 

Conclusion

So that pretty much sums everything up you will need to know to get started with accessibility testing. We hope you found our guide easier to understand when compared to the other conventional options as we have broken down the checks based on the different web elements as they are more tangible. Make sure to subscribe to our newsletter as we will be posting such highly useful content on a weekly basis. Have any doubts? Ask them in the comments section and we will try our best to answer them.

How to use the ChromeVox Screen Reader for Accessibility Testing?

How to use the ChromeVox Screen Reader for Accessibility Testing?

ChromeVox is an in-built screen reader developed by Google for Chromebooks. It can also be added to Chrome as an extension even if it is running on Windows or macOS. Since Windows and macOS have their own dedicated screen readers like Narrator and VoiceOver, you might not have the need to use ChromeVox. But if you are looking to test your website on a Chromebook, then knowing ChromeVox will definitely come in handy. As a leading web accessibility testing services company, we always make it a point to master all the resourceful tools for our accessibility testing projects. So we have written this guide to help you get started with accessibility testing using the ChromeVox Screen Reader and to explore all the important ChromeVox keyboard shortcuts.

There are two ways to run ChromeVox on your Chromebook.

1. You can click on ‘Options’ that can be found on the right side corner of your Chromebook and click on the accessibility symbol.

2. Or you can use the press shortcut keys Ctrl+Alt+Z to turn on ChromeVox.

ChromeVox Keyboard Shortcuts:

Once you have got ChromeVox up and running, you can use the various shortcuts to use it effectively. We have created a table of the most important ChromeVox keyboard shortcuts that you’ll need to know by categorizing them into different categories as well.

Main Content Navigation

Skimming through a page’s content is a very common activity that most of us do. So you have to test if your heading levels have been assigned properly as it will also impact regular reading as well. Once the user finds the part they want to be read out by the screen reader, they should be able to start the reading. So use the below ChromeVox keyboard shortcuts for easily testing all these aspects.

S. noFunctionsShortcut Key
1Heading NavigationSearch bar + H
2Previous headingShift +H
3Next Level 1 HeadingSearch bar + 1
4Previous Level 1 HeadingShift + 1
5Next Level 2 HeadingSearch bar + 2
6Previous Level 2 HeadingShift + 2
7Next Level 3 HeadingSearch bar + 3
8Previous Level 3 HeadingShift + 3
9Next Level 4 HeadingSearch bar + 4
10Previous Level 4 HeadingShift + 4

We also all know that not all users would want their screen readers to read everything that is on the display. So it is extremely important for you to test the Skip to main content feature. So once the user hits the enter or spacebar key, the focus should move to the main content area. It should also be verified on each and every page of your site without fail.

Line by Line Navigation

Being able to skim through the content alone isn’t enough. So we also have to test if line by line and word by word navigation also works well with your content.

S. noFunctionsShortcut Key
1Next lineSearch bar + Down Arrow
2Previous lineSearch bar + Up arrow
3Next WordSearch bar + Ctrl + shift + Right arrow
4Previous WordSearch bar + Ctrl + shift + Left Arrow
Interactive Elements Navigation

The tab is the primary key when it comes to navigating through the different interactive elements in the page like links, forms, edit fields, menu items, and so on. You can access the interactive element that has the focus by pressing enter or spacebar. But if you are testing if there are any broken links or if the links have a proper anchor text, you can even navigate across just the links or even get a list of the links on the page by using the mentioned ChromeVox keyboard shortcuts.

S. NoFunctionsShortcut Key
1Forward Navigation of Interactive Elements (Links, Forms, Edit Field)Tab
2Backward Navigation of Interactive Elements (Links, Forms, Edit Field)Shift + Tab
3Next linkSearch bar + L
4Previous linkSearch bar + Shift + L
5Next Visited linkSearch bar + v
6Previous visited linkSearch bar + shift + v
7Show Links listSearch Bar + Ctrl + L
8Show Form listSearch Bar + Ctrl + F
9To Move Focus to pop-up and dialogAlt + Shift +A
Table Navigation

Since tables can have many rows and columns, navigation around each cell using the search bar and arrow keys could turn out to be difficult and confusing. But since we can’t leave any content on the page untested, we have specified the ChromeVox keyboard shortcuts that will help you navigate any table with ease.

S. NoFunctionsShortcut Key
1Show Table listSearch Bar + Ctrl + T
2Next TableSearch Bar + T
3Previous TableSearch Bar + Shift +T
4First cell in the tableSearch Bar + Alt + Shift + Left arrow
5Last cell in the tableSearch Bar + Alt + Shift + Right arrow
6First cell in the current rowSearch Bar + Alt + Shift + Ctrl + Left arrow
7Last cell in the current rowSearch Bar + Alt + Shift + Ctrl + Right arrow
8First cell in the current ColumnSearch Bar + Alt + Shift +Ctrl + Up arrow
9Last cell in the current columnSearch Bar + Alt + Shift + Ctrl + Down arrow
Multimedia Content

There is almost no page that doesn’t have images and videos making alt text, transcripts, and audio descriptions key factors to check. You can use the shortcuts to quickly navigate to all the graphic images and test if proper alt text has been used.

S. noFunctionsShortcut Key
1Next Graphic ImageSearch Bar + G
2Previous graphic ImageSearch Bar + Shift + G

If there is a video on the webpage, keyboard playback controls must be available for the user to pause or play the content easily. Audio descriptions are important for videos that rely on visual cues to convey meaning.

Advantages of the ChromeVox Screen Reader:

Docked and full-screen Magnifier:

As a leading Accessibility Testing Company provider, we understand that Screen readers are not just for people who have total loss of vision. So you have to test your content with ChromeVox’s two types of screen magnifiers that will enable low-vision users to view and read the content of the page without any difficulties.

Of the two types, one is a full-screen magnifier and the other is a docked magnifier. Once the full-screen magnifier is enabled, the entire page is magnified with a zoom level that can be changed as per the need. So if the webpage isn’t optimized for this feature, then the content will start overlapping to create a bad user experience. Since the full screen is getting magnified, it should also be possible to navigate the content with ease at any given zoom level. So make sure to use the Ctrl + Alt + Arrow keys to test that as well.

Since not all users will require the entire page to be magnified, ChromeVox’s Docked Magnifier allows the users to magnify the part of the page where the cursor is. These are a few of the add-on features that are exclusive to the Chromebook that cannot be used in any other system. So make sure to test the content on your page and see if it is compatible with these features as well.

The ChromeVox Screen Reader Chrome Extension

Apart from these exclusive features for the Chromebook, ChromeVox can be added as an extension to Google Chrome on other platforms like Windows and Macs. Installing the ChromeVox extension is no different from installing any other Chrome extension. Though the extension does not have all the features the full version does, it surely has its own benefits as it offers some basic screen reader functionalities.

ChromeVox’s Speech Viewer

Once the ChromeVox Screen Reader has been turned on, the speech viewer will automatically be displayed on top of the screen. This is a great advantage in ChromeVox when compared to other screen readers such as NVDA that don’t have a separate speech viewer as it will overlap the web content.

Disadvantages of ChromeVox:

As you can see, the search bar key and the shift key are important when it comes to ChromeVox keyboard shortcuts.
For Example: Unlike other screen readers, pressing the H key without pressing the search bar key will not move to the heading levels.

But the major drawback in the ChromeVox Screen Reader when it comes to testing is taking screenshots as the content in the speech viewer will not be covered. So you would have to rely on videos for your bug reports. Videos for major bugs are fine, but it will be a cumbersome task to add videos even for small bugs.

Conclusion:

Apart from the few disadvantages, ChromeVox is a great screen reader for testing your content on a Chromebook. The unique ChromeVox Screen Reader Chrome extension might also turn out to be useful in rare scenarios. So we hope you are now clear on how you can use ChromeVox to get effective web accessibility testing done using the various ChromeVox keyboard shortcuts. If you are looking to test your content across various platforms and screen readers, there are various options such as JAWS, NVDA, Narrator, OKRA, Voice Over, and so on.

A Conclusive JAWS Testing Tutorial with Keyboard Shortcuts

A Conclusive JAWS Testing Tutorial with Keyboard Shortcuts

A screen reader is an assistive technology that helps people with disabilities such as blindness, vision impairment, and low vision. The screen reader renders the various webpage elements like the text, buttons, and images as speech and braille output. There are various types of screen readers for different environments. As one of the leading accessibility testing companies, we make it a point to familiarize ourselves with all the top tools. And JAWS is definitely one of the best options out there. So in this JAWS Testing Tutorial, we will be exploring the important JAWS Hotkeys and have a step-by-step guide to get started with JAWS for testing purposes.

Did You Know?

JAWS was created by Ted Henter in 1989 who is a former motorcyclist who lost his eyesight due to a fatal car accident in 1978.

Ted Hunter - Founder of JAWS

Why JAWS?

Jaws (Job Access With Speech) is the most popular screen-reading tool available in the market. It can be used to read the content in documents, web apps, emails, eBooks, and so on. It is available in over 10 different languages and has multilingual Eloquence & Vocalizer expressive synthesizers that enhance the overall experience. It helps a visually disabled user to read the content by just using the standard keys, has skim-reading capabilities, and has screen magnification options that make it a complete package. So, we can use JAWS without any second thoughts to ensure that the web pages have been designed according to the accessibility norms and regulations.

How to Install JAWS?

The installation process we will be covering is for a Windows machine.

  • Download the latest version of JAWS from their official website.
  • Open the downloaded exe file.
  • Click on “YES” in the popup dialog box that appears.
  • Click on the checkbox to accept the agreements and click “Install”.
  • Once the installation has been completed, close the window and restart the computer when prompted.

Now that we have seen the installation process, let’s take a look at the JAWS Hotkeys you’ll need to know.

JAWS Hotkeys/Keyboard Shortcuts:

S. NoDescriptionKeystrokes
1Start readingInsert+down arrow key
2Stop readingCtrl
3Heading navigationH
4Direct Heading Navigation (H1 to H6)1 to 6
5LandmarksR
6To go to main content regionQ
7TablesT
8Data in the tableCtrl+Shift+right/left/up/down arrow key
9ListL
10Items in a listI

We have listed only the most important JAWS Hotkeys you’ll be needing here. If you can’t find a JAWS keyboard shortcut combination you are looking for or want to explore all the JAWS Hotkeys, kindly use this file.

How to perform JAWS testing?

To test a website using JAWS, you have to open a browser and navigate to the website you’d like to test, and start using JAWS. Though it sounds simple, you might feel lost and not know what to do to get conclusive results. Thanks to our years of experience in providing the best web accessibility testing services to all our clients, we have created this list that will help you get started with JAWS testing.

Navigation

Being able to access the entire page and understand the content is one of the most basic actions that every user must be able to do. You can check that by navigating the page using the TAB key to ensure that all interactive elements receive tab focus. Also, verify if non-interactive elements don’t receive tab focus. Check if the focus order is from left to right or right to left.

Just like how we try to skim through the article by seeing the headings to get an idea, people using JAWS should also be able to do that. Since the screen readers can’t convey the visual representation, make sure to check the heading tag’s flow as if it is not in order from H1 to H6.

Once you’ve checked that, move down the page using the down arrow key and observe if all the content is read properly in a meaningful sequence without any repetitions or sections getting skipped. You also have to make sure that everything works well when going back to the previous lines using the up arrow key.

Multimedia Content Alternatives

Websites don’t shy away from using various multimedia content like photos, videos, and so on to make an impact. As a first step, verify if all the images receive focus. If they do, check the alt text (alternative text) and see if it is relevant and if it describes the image well enough.

Videos that have voiceovers or dialogues will not be much of an issue as it can be understood by listening to the audio. But if the video has burnt in the text without any voice-over, then you have to make sure to add a transcript that can be read by JAWS for the user to understand. Likewise, if the video is entirely visual, you can add an audio description to make it possible for the user to get at least an idea. It is recommended to not have videos auto-play when the site is opened. So it must be possible to control the playback of the videos using your keyboard.

Videos that have voiceovers or dialogues will cause much of an issue as it can be understood by listening to the audio. But if the video has burnt in the text without any voice-over, you have to make sure to add a transcript that can be read by JAWS for the user to understand. Likewise, if the video is entirely reliant on the visual, you can add an audio description to make it possible for the user to get at least an idea. It is recommended to not have videos auto-play when the site is opened. So it must be possible to control the playback of the videos using your keyboard.

Other Content Types

Internal and external links are very common on all web pages. So ensure that the change of context is clear and avoid vague lines like ‘Click Here’ or ‘Read More’ out of nowhere.

If there are any lists on the webpage, then it will be read properly only if the content has been fed as an ordered or unordered list. Likewise, if there are any tables, you should check if JAWS reads all the content with the respective rows and columns using standard keys.

Check if the table row and column headers are read out for each table cell to make it easy to understand. Verify if all form fields, links, and buttons are accessible when using the space/enter key.

Avoid Visual Reliance

It’s a common practice to make certain words, phrases, or even lines appear bold to emphasize their importance. But since they are only visual cues, they will not be picked up by the screen reader. So make sure to use ‘strong’ and ’em’ tags when needed. The same applies to any color variations used for the same purpose.

Yes, Captcha is an important feature in a website. But that doesn’t mean you have to use only visual options as it will not be possible for JAWS to pick it up.

Though flashy signs and calls to action are of the past and can no longer be found on many websites, it is still important to check for them. JAWS will have a tough time if an image with the words download is hovering over a vague hyperlink text like ‘Click Here’.

General JAWS Testing Checks

  • Make sure if your page has a bypass block, the main content, and a landmark region.
  • Verify if all the ARIA attributes have been implemented properly.
  • Ensure that there are no black hat SEO techniques such as using hidden text to boost ranking as it will disrupt JAWS.
  • Check if all the content is in a single language and if there are any different languages used, do mention it in your code to avoid confusion. It is also a good practice to use a language attribute to mention the language.

Conclusion

We hope you have found this JAWS Testing Tutorial and the JAWS Hotkeys to be helpful and now have an idea of how to test your website’s accessibility by using JAWS. You can even check out our blog that explains how you can easily test your website for accessibility. Though those easy checks will not be enough, it is always good to get started as you yield the twin benefits of fulfilling a person with disabilities their right to information and reaching a wider audience.

How to Test a Website for Web Accessibility Easily? A Basic Website Accessibility Testing Checklist

How to Test a Website for Web Accessibility Easily? A Basic Website Accessibility Testing Checklist

Performing comprehensive web accessibility testing for any website is no easy task. There are so many guidelines to be followed to become compliant with standards like WCAG. But at the same time, you have to at least make sure to make your website is accessible on a basic level. So we have created this basic Website Accessibility Testing Checklist with reference to the easy checks issued by W3C. Though they are not definitive methods, it’s definitely a great place to start and evolve from that point onwards.

A Basic Website Accessibility Testing Checklist

  • Page Title and Content Headings
  • Alt Text and Multimedia Alternatives
  • Moving and Flashing Content
  • Text Size and Contrast ratio
  • Keyboard access

Page Title and Content Headings

Since Page Titles appear in search results, browser tabs, bookmarks, and so on, make sure to make it clear and unique. See if the main content is properly visible in all these places and use a screen reader to see if it read properly. Unclear page titles will make it very hard to navigate across different pages.

Using headings in a random order will make it hard for the user to understand the structure of your content. So in addition to confusing regular readers, it will also confuse the screen readers and cause them not to function properly.

Alt Text and Multimedia Alternatives

Alt Text and Multimedia Alternatives are key points in our Website Accessibility Testing Checklist as websites are now filled with a lot of visual content. Visually impaired users won’t be able to see any graphical content that you use on your webpage. So if you are adding an image, make sure to add appropriate alt text to the images as that will help the user understand the purpose of the image using words. Similarly, make sure to add closed captions and transcripts for videos based on the type. The media shouldn’t always start to play as soon as the page opens. Even if it does, then make sure to make it easy to pause it by adding keyboard controls for the playback.

Moving and Flashing Content

Carousel posts on websites have become a very commonly used feature. Flashing contents are instrumental in helping certain content stand out from the rest. But you have to make sure that the content doesn’t flash more than 3 times every second as it might cause seizures. Moving content and carousel content shouldn’t be too rapid that it becomes incomprehensible for your users. Similar to the media controls, the user must also be able to control the moving content to prevent the features from becoming a distraction.

Text Size and Contrast ratio

Text Size & Contrast ratio

It is always a good idea to keep your text size fairly big as content with small text sizes rarely works. Even if you keep the text size big enough and fail to use proper text and background colors, the text will become hard to read. You should also test it from the perspective of a person with color blindness to see there are no contrast issues. There is even a tool called the Color Contrast Analyzer that you could use to check if the contrast ratio will pass the required standards. Few people will be able to read the content only when the text is enlarged beyond the regular size. So make sure there is enough spacing in places you add the text and not cram in too much content. Keep it simple, yet catchy.

Keyboard access

We have added this factor to our Website Accessibility Testing Checklist as it is one of the most overlooked aspects. Not everybody will be able to navigate through your website using a mouse. So make sure it is possible to navigate to the different elements like drop-down lists, text fields, menus, and so on. The labels used for text boxes should convey the requirement and be on the left side of the box for left-to-right languages. Make sure to highlight mandatory fields with the asterisks (*) sign and not just color to differentiate it.

Why is Accessibility Testing Mandatory?

So this is a basic Website Accessibility Testing Checklist that you can concentrate on, to begin with. But they are in no way sufficient to get a proper standardization as your website might pass all these checks and still have major accessibility issues. If your website isn’t accessible, there are possibilities of getting sued based on the part of the world you are in. Why go through all the hassle and be at risk when you can simply outsource the web accessibility testing to one of the best web accessibility testing service providers like us? Making your product accessible is no longer a choice you can ignore as it is an important part of making your product available to a wider audience and enhancing the product’s overall usability.

Web Accessibility Laws: Is WCAG non-compliance punishable by law?

Web Accessibility Laws: Is WCAG non-compliance punishable by law?

It is not a simple yes or no question as it depends on a lot of factors like the core purpose of the website, who runs it, and the country it is used in. Though the Web Content Accessibility Guidelines (WCAG) are the universally accepted standards to be followed on the web, it is not a global law followed in every country. Countries like the United States of America do have accessibility-related laws, but there are no dedicated laws when it comes to the web. So in this blog, we will explore the various Web Accessibility Laws around the world to see how WCAG non-compliance can end up becoming a punishable offense.

The Web Accessibility Laws in Different Regions

So if you are located in the U.S and if the website belongs to a federal agency or their contractors, those websites must comply with WCAG 2.0. But if the website belongs to a private business, the website definitely has to be accessible as per the ADA. The Americans with Disabilities Act (ADA) requires every place of public accommodation to be accessible in terms of infrastructure (Wheel Chair accessible Entry elevators, and so on). Though websites do come under this category as a place of public accommodation as the users do visit the website to obtain information, make a purchase, and perform such activities, there are no defined guidelines or standards that the websites have to adhere to.

Likewise, if you are in countries like Canada, New Zealand, or Australia, only government sites have to meet the WCAG guidelines. There are no defined standards for public sites with a few exceptions in certain areas. Argentina requires their public sites to be compliant with WCAG 1.0 and Ecuador’s public sites have to comply with WCAG 2.0. The European Union is where we can find the best Accessibility standards. They have created the Web Accessibility Directive which is in many ways similar to WCAG 2.0. It even has a few additional requirements where users should be able to report such issues, and so on. Though it was initially launched with only government sites to be compliant in 2016, by 2018 even public websites have been instructed to meet the standards.

There are also numerous countries that do not have any prominent Web Accessibility Laws. But if you are running a business website, it is always better to have a site that is accessible as there is always a possibility of getting sued by the consumer.

The Case against Dominos

Companies have been sued in the past for having inaccessible websites and apps. For example, Domino’s was sued by a visually impaired man when he was unable to order pizza from their website despite using a Screen Reader. Despite the case being very strong on the plaintiff’s side, it took more than 3 years for the judgment to come through. The court ruled Dominos’ website to be inaccessible and ordered them to meet the compliance. But the real question here is why would Dominos fight the case instead of just making their website accessible.

The Business Angle

Any company that doesn’t consider people with disabilities as viable customers are missing out on a lot of business. According to a report by Forbes, 1 in every 4 Americans have some form of disability, and about 57 million Americans have a disability that hinders their ability to view and use online services. In the digital age we live in, it wouldn’t be wise to leave out such a huge part of the population assuming it is not essential. But beyond the business aspect

Global Scale

So it is evident that the Web Accessibility Laws are different in different areas of the world. But what if you have a website that functions on a global scale? The only solution here would be to have your website meet the highest standards of accessibility so that you wouldn’t have to worry about any disputes. You could achieve this goal by outsourcing the task to one of the best web accessibility testing service providers like us. If we do take a look at it beyond the business aspect, fulfilling the rights of people with disabilities should be a moral responsibility that shouldn’t be overlooked.