Hello! I'm Chamal Asela Perera.

I test code for living.

Web Accessibility Standards – What, Why and How to Test?

Web Accessibility Initiative (WAI) is an initiative by World Wide Web Consortium (W3C). The main responsibility of the WAI is to work with the global software community to develop and publish guidelines on web accessibility. In 1999 WAI published the first version of the guideline, named Web Content Accessibility Guideline ( WCAG 1.0 ).

In 2008, WAI published the WCAG 2.0, which is the latest version of the guideline. WCAG 2.0 have been widely accepted as the definitive guidelines on how to create accessible websites

WCAG 2.0

WCAG 2.0 organized under 04 main principles and 12 guidelines. Each of these guidelines has testable criteria. It basically covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

We need something like this because an estimated of one billion people in the world have some kind of disability. 39 million people are blind in the world and around 246 million people around the world have low vision. More importantly, it is not only for those with disabilities. A fully accessible website is designed to be flexible and responsive to all people.

WCAG 2.0 principles and guidelines

  1. Website must be perceivable – Information and user interface components must be presentable to users in ways they can perceive
    • Guideline 1.1: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
    • Guideline 1.2: Time-based media: Provide alternatives for time-based media.
    • Guideline 1.3: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
    • Guideline 1.4:  Make it easier for users to see and hear content including separating foreground from background.
  2. Website must be operable  – User interface components and navigation must be operable
    • Guideline 2.1: Make all functionality available from a keyboard.
    • Guideline 2.2: Provide users enough time to read and use the content.
    • Guideline 2.3: Do not design content in a way that is known to cause seizures
    • Guideline 2.4: Provide ways to help users navigate, find content, and determine where they are.
  3. Website must be understandable – Information and the operation of user interface must be understandable.
    • Guideline 3.1: Make text content readable and understandable.
    • Guideline 3.2: Make web pages appear and operate in predictable ways.
    • Guideline 3.3: Help users avoid and correct mistakes.
  4. Website must be robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
    • Guideline 4.1 – Maximize compatibility with current and future user agents, including assistive technologies.
More details on the above guidelines can be found from official WCAG 2.0 – Documentation

Right, So what is for developers or testers? How to do the accessibility testing?

Let’s talk about the important part of the accessibility topic. How can you develop/ or test a WCAG-friendly website, or in another word – How can you ensure your site is not violating the WCAG 2.0 guidelines? Let’s look at a couple of tools which is available for the task.

NoCoffee

NoCoffee is an extension for Google Chrome, It acts as a visual emulator and helps you to understand how visually impaired users can view the web pages.

Chamal_Perera_Blog_NoCoffee_Image

Nocoffee visual emulator in action: [This is how retinopathy patient view your web page]

Google Accessibility tools

Another handy/straightforward Chrome extension from Google. The extension will add an Audit section ( Accessibility Audit ) in the elements tab to the Chrome Developer tool.  Audit result will appear as a list of rules which are violated by the respective page

Chama_Perera_Blog:ol Google Accessibility to

Google Accessibility Tool – In action

Google Accessibility Tool

Google Accessibility Tool – Results


aXE

axeDemo_Chamal_Perera_blog

aXe in action

aXe is again an extension for Google Chrome. It’s pretty easy to use and analyze your web application. You need to go to the Chrome developer tools section once you installed the extension and there you can initiate your session. One of the advantage in aXe is that you can navigate to the exact point in your source code where it violated the WCAG standard and fix it from right there.

Wave

Wave has been there for a quite a long period of time. Wave can be used to test any public URL and not like the other tools, it gives the result on a side panel, which is easy to analyze. Wave also has an extension for Google Chrome and Firefox.

Wave-Chamal Perera Blog

Wave in action

Developers can use these tools to make sure the site they develop doesn’t violate any WCAG rules. Testers can use these tools to find out the accessibility violations.

Advantages of following accessible guideline

Other than not involving in potential lawsuits, there are proven cases studies which indicated improving accessibility could increase sales. CNET received 30% off boost in their traffic after implementing a simple change in their videos. All they did was to add a transcript to their videos. More the people that have access to the website, more the reach.

Everyone should consider about the web accessibility, not because you had to follow the guidelines. Becuase it is the only way to ensure that disabled users have the same experience that other users have. Truth to be spoken, web accessibility is likely not something we’ve spend much time unless we had to. But now we have required tools/ ways to do, So let’s make the web accessible for everyone.

Microsoft Visual Studio emulator – Best in the business ?

Visual Studio emulator for Android is a great tool for debugging/deploy Android applications in the windows environment. For me personally, this is a much more convenient android emulator comparing with the Google’s own AVD emulators. Microsoft Visual Studio emulator for android uses the Hyper-V capabilities of the host computer, resulting in a faster launch. So it’s like, No more staring endlessly at the Android boot logo.

Requirements

  1. First thing, Your computer/development environment must meet the requirements to run Hyper-V
  2. 6GB or more of RAM

More details on the requirements is here

You can download the installer file from here

Features/Advantages

  • Apart from the speed, Microsoft Visual Studio emulator for Android supports a wide range of device profiles, Including devices from Samsung, Motorola, Sony, LG, and more.
Different device profiles

Different device profiles

  • You can install the APK files by using drag-and-drop method to the emulator screen. It also connects to the ADB, so development tools can target this.
  • Powerful simulations – You can try using the camera/map on the emulator
Additional tools available in the simulator

Additional tools available in the simulator

Problems you may face ( . . . or problems I’ve faced )

  • Unable to access the Wi-Fi or mobile data – Probably the most annoying ever I’ve encountered, Basically you can’t access any network/internet services from your emulator.

Solution ( . . . or the solution worked for me )

  1. Disable any virtual Ethernet adapters that aren’t being used.
  2. Go to Hyper-V manager & set the Emulator Internal Network Adapter’s Virtual switch to Windows Phone Emulator Internal Switch.
  3. Run the visual studio emulator on administrative mood.

Some more common problems occurred in the emulator can be found here.

Some more useful tips here

Ultimately this is by far the best simulator I’ve used for the mobile automation activities, especially after a couple of bad experiences with the native android simulators. So easily recommended!