This article details some tips to make duplicate text links into accessibility standards conforming links.

Challenges with duplicate text links

• A detailed link context cannot be shown due to visual appearance guidelines.
• Lack of sufficient space besides the link.
• The link context is visually well understood by link context and hence no additional context may not be required for most of the users.
• Screen readers while listing all links on the page, eg: while using JAWS screen reader, using INSERT+F7 will list all the links on the current page, providing users ability to view and activate all links quickly using a tool provided menu. In such contexts, if there are many links with same text, it will be impossible for users to determine which link to activate.

Following technics can be applied to achieve accessibility compliance for repetitive text links on a page.

1. Provide a title attribute with additional information:
   This is considered to be very simple but most powerful way of describing a link text or link icon. Since the title attributes are visible upon mouse over, it will have no visual impact until the mouse over event is triggered.
2. Provide additional visual tool tip:
   Providing a tooltip with link context text will also enable users to identify the link context.
3. For assistive technology and screen reading softwares:
   While providing a title attribute or tooltip will be sufficient in most of the cases, it may not be always possible to provide a detailed additional text. eg: if there are certain additional instructions for screen readers on how to operate the link when the keyboard interaction is different from normal activation of a link. In such context, use ‘aria-label’, ‘aria-labelledby’, ‘aria-describedby’ attributes to provide additional information on the link context to the users.
4. Using CSS to hide additional information:
   A part of the detailed information can be visually hidden using CSS. However, it should be noted that using display:none will prevent screen readers from accessing the information. To overcome this challenge use visibility:hidden; or position:abolute; and position the visually hidden text from the visible screen. If using bootstrap css framework, consider using sr-only utility class.
5. Combine icon and text within same link:
   If there’s an icon along with the link text, both icon and text could be wrapped inside single anchor tag. This avoids confusion to the users.

Understanding Success criteria

Link purpose context is a level A compliance requirement. The success criterion for this requirement necessitates that the users should be able to understand the purpose of the link.

• 2.4.4 Link purpose (in context) – Level A
• 2.4.9 Link purpose (link only) – Level AAA

Creating an inclusive user interface for enterprise applications isn’t that difficult as often believed. While, a progressive standard compliance pathway would be ideal for many of the existing app user interfaces, it is important to understand that time and efforts required to achieve higher levels of compliance is much more than lower levels.

Web accessibility Standards

• WCAG – Web Content Accessibility Guidelines.
• Section 508 Compliance.
• EN 301 549 – European Standard for digital accessibility.
• BITV – Barrierefreie-Informationstechnik-Verordnung.

Although different organisations, countries and regions have set up specific accessibility conformance laws, the most popular and widely accepted baseline standard is WCAG.

This article focuses on understanding different web accessibility standards and the key building blocks of web accessibility as per WCAG. The current version of WCAG 2.1 standard was published on 5 June 2018. WCAG 2.2 is expected to be released soon.

WCAG accessibility standard compliance levels

Web content accessibility guidance by the World Wide Web Consortium (W3C) is organised under 4 principles and each of them have testable success criteria at three different levels.

• Level A
• Level AA
• Level AAA

The accessibility conformance of a web user interface depends on the following 4 priniciples.

How easy to percieve?

The perceptibility guidelines measures, how easy it is to perceive the information and the user interface components, for its users. Textual information is often easily perceived. But modern user interface components include several non textual information, including, but not limited to images, videos, audios, etc. and unless specially designed, all users will not be able to perceive the contents easily.

How easy to operate?

All user interface component including navigation menus should be easy to operate, using variety of user inputs such as keyboards, pointer devices, assertive technologies, etc.

How easy to understand?

The understandability factors rely upon several factors, including the programatic determination of content language, predictable nature of user interface components, how well it reduces errors and assists users to corrects the errors when user inputs are required.

How robust it is?

The robustness is measured on the factors such as user agent compatibility including assertive technologies. It also considers how well, a web page is structured and different state changes are understood by different user agents.

Designing for inclusive app experience

Designing an inclusive app experience is much more relevant than ever before. In an inclusive world, the user interface components and websites should consider catering needs of different users and different ways of interacting with system. Web developers, designers, content writers, usability experts, and visualisers should consider this factor while designing a web interface solution.

Accessibility is no longer an after thought, instead it’s one of the key success criteria for modern web application interfaces.

Boolean(null); // returns false
Boolean(undefined); // returns false

undefined

A variable declared, but no value assigned to it is ‘undefined’. In other words, the value of a variable with no value is ‘undefined’. The typeof(undefined) is ‘undefined’. ‘undefined’ is a constant.

var foo;
foo; // is undefined
typeof(foo); // is undefined

null

‘null’ is an assignment value. ‘null’ can be used to set a variable as ‘no value’. So using ‘null’ we can empty a variable value. The typeof(null) is an Object.

var bar = null;
bar; // is null;
typeof(bar); // is Object

var a;
console.log('typeof a is now,'+ typeof(a));
a = null;
console.log('typeof a is now,'+ typeof(a));
a = 1;
console.log('typeof a is now,'+ typeof(a));
a = "string value";
console.log('typeof a is now,'+ typeof(a));
a = false;
console.log('typeof a is now,'+ typeof(a));
a = [];
console.log('typeof a is now,'+ typeof(a));
a = {};
console.log('typeof a is now,'+ typeof(a));

Executing the above would out log like;

typeof a is now,undefined
typeof a is now,object
typeof a is now,number
typeof a is now,string
typeof a is now,boolean
typeof a is now,object
typeof a is now,object

The same variable transformed its type into different types! The data type for null, array and object are object itself. Undefined type is undefined itself, a string’s type would be string, number’s type would be number and the boolean’s type would be Boolean.
When a variable is declared in JavaScript, it becomes a new object. All the variables and functions defined are the properties of the window object. “window” is the root object and all the JavaScript variables, functions, namespaces, etc. are different properties in window object.

Inheritance in JavaScript

Below section demonstrates how the inheritance works in JavaScript.  Below example shows how the SubClass inherits a SuperClass.

In the above example, ” SubClass.prototype = new SuperClass;” makes the SubClass inherit all the properties and methods of SuperClass.

No Multiple inheritance in Javascript

Does javaScript support multiple inheritance? The answer is No!
Why does JavaScript not supporting Multiple inheritance?
Inheritance in JavaScript happens at run time by searching the prototype chain of an object. An object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain!
NOTE: If multiple classes needs to be inherited, they should be arranged in the same hierarchy with parent-to-child relationship.
Though we can have multiple constructor function call within a constructor function, it is different from the multiple inheritance. Using ‘prototype’ property, we cannot add/modify any properties/methods of such inner consturctors.
 

Defining an Object using a Constructor function

Let’s create a constructor function named “Person“.  We will use “name“,”age“,”gender” as the properties and “talk” as the method for the “Person” ‘class’ constructor function. The code looks like below:

“personA” and “personB” are two different instances of the Person ‘class’. Both these instances do inherit all the properties and methods of the Person ‘class’.  Any modifications or changes to the Person ‘class’ properties or methods will be available in all its instances as well.

Adding  new  Methods to the constructor using Prototype

Below function will add a new method (reduceAge) to the Person ‘Class’. Once this method is invoked it will reduce the age value by the number passed as the argument into this function. Below is the example.

Creating a simple constructor function is very simple as above!

HTML code:

<body>
<div>
<canvas id="myCanvasElm" width="250" height="250">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
<button onclick="drawRectagle();">drawRectagle</button>
</body>

JavaScript code:

function drawRectagle(){
// Get the Canvas element
var myCanvas = document.getElementById("myCanvasElm");
if (myCanvas.getContext) {
// If Canvas is supported
var canvasContext = myCanvas.getContext('2d');
// Set the fill style to #00FF00
canvasContext.fillStyle = "#00FF00";
// Draw the rectangle 100x50 pixels in dimension at x/y 10,10
canvasContext.fillRect(10, 10, 100, 50);
}
}

NOTES:

getContext(): This method returns an object that provides methods and properties for drawing on the canvas.
fillRect(): This method draws a “filled” rectangle.context.fillRect(x,y,width,height).
fillStyle: The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing. context.fillStyle=color|gradient|pattern;

Example below:

var a = {
test: false,
test2: false,
text:'sample text here'
}

var b = {
test2: true,
test3: false
}

Merging function

var merge = function( first, second ) {
for (key in second){
first[key]=second[key]
}
return first;
}

call the merge function

merge(a,b)

Understanding JSON

The word JSON stands for JavaScript Object Notation. As the name shows, it can be said as the notation of javascript objects. JSON is a syntax used to store and exchange the information similar to that of XML. It is faster and easier to use JSON comparing to XML.

Sample JSON Code:

{
 "books": [
 {
 "title": "book1 Title",
 "author": "book1 Author"
 },
 {
 "title": "book2 Title",
 "author": "book2 Author"
 },
 {
 "title": "book3 Title",
 "author": "book3 Author"
 },
 {
 "title": "book4 Title",
 "author": "book4 Author"
 }
 ]
 }

The above JSON Code is equallant to the following XML code

<?xml version="1.0" encoding="UTF-8" ?>
<books>
<title>book1 Title</title>
<author>book1 Author</author>
</books>
<books>
<title>book2 Title</title>
<author>book2 Author</author>
</books>
<books>
<title>book3 Title</title>
<author>book3 Author</author>
</books>
<books>
<title>book4 Title</title>
<author>book4 Author</author>
</books>

Features of JSON:

• JSON is said to be lightweight text-data interchange format
• JSON is easy to understand.
• JSON does not require a parser.
• JSON does not have any end tags like in XML
• JSON can use Arrays.
• JSON is shorter than XML

JSON syntax rules:

• JSON data is in key:value pairs.
• Each JSON data is separated with comma.
• The square bracket in a JSON Object can hold array
• The curly bracket in a JSON Object can hold objects.

Parsing JSON data:

A valied JSON string can be parsed using the javascript eval() method. The data then can be accessed using the object literal notation of JavaScript as the JOSN is a subset of JavaScript

Code:

$().jquery

or

$.fn.jquery

or

$()['jquery']

or

$.fn['jquery']

or

jQuery.prototype.jquery

or

$.prototype.jquery

The article shows multiple ways and the easiest way to identify the jQuery version.
How to check jQuery version?, how to identify jquery version, jquery version detection, which version of jquery is used, all the questions answered here.