Hot File

Building your own widgets

View: 479    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

0 point/0 review File has been tested

Léonie Watson of Nomensa explains how DIY widgets can still play a significant role in overcoming barriers to accessibility

Introduction

This article first appeared in issue 229 of .net magazine – the world's best-selling magazine for web designers and developers.

Until HTML5 support in browsers and assistive technologies (ATs) reach critical mass, there’s a good chance that UI widgets will still need to be created with the building blocks of HTML4.

A slider is one example. It’s a control enabling a value to be chosen from a predefined range. Uses include setting a volume level or rating a product.

HTML5 makes it simple to create a slider using the <input>element, with type="range".

<input type="range" min="-10" max="10" step="2"value="0">

This creates a control that can be used to set the element’s value. The min and max attributes define the lower and upper limits of the range and the step attribute describes the increments that can be selected between the two. With a little CSS and some JavaScript, that’s all there is to creating a slider in HTML5.

Here’s the catch though. Browser support for <input type="range"> is sketchy, and AT support is completely non existent.

At the time of writing neither Firefox nor IE has implemented support for <input type="range"> (on Windows or Mac OS). Opera has done so for both platforms, but doesn’t make it available through its accessibility APIs. Only Chrome (on Windows) and Safari (on Mac OS) have implemented support for <input type="track"> and made that information available to ATs through their accessibility APIs.

This means there are still times when a DIY slider might be called for. One method is to use a link to create the focusable marker that moves up and down the slider. The link text represents the currently selected value.

<div id="rail"><a href="#" id="marker"><span>0</span></a></div>

A background image can be used to create the look and feel of a slider rail, with JavaScript to make the interaction work (for mouse and keyboard).

The trouble is that ATs don’t recognise this as a single widget; they see a collection of separate HTML elements. This is where ARIA comes in.

<a href="#" id="marker" role="slider"ariavaluemin="- 10" aria-valuemax="10"ariavaluenow=" 0" aria-valuetext="0"><span>0</span></a>

The ARIA bridges the gap between the HTML and the functionality in a way ATs can understand: role="slider" tells the AT to interpret the element as a slider, and the aria-valuemin and aria-valuemax attributes set lower and upper limits on its range.

The slider’s currently selected value is defined by the aria-valuenow attribute. The aria-valuetext attribute is optional, and is used to define a more user-friendly version of the slider’s current value. For example, if the purpose of the slider was volume control, the aria-valuenow attribute might be 5 and the aria-valuetext 5%.

When JS is added to create the interaction, it’s a good idea to build in extra keyboard accessibility: arrow keys to move in single increments, Page Up and Page Down to move in larger increments and Home and End to move to the upper and lower limits of the slider.

Building your own widgets

Building your own widgets Posted on 26-03-2014  Léonie Watson of Nomensa explains how DIY widgets can still play a significant role in overcoming barriers to accessibility 5/10 479

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 367    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    4.5/1 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 362    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    4.5/1 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 190    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 194    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 204    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    4.5/2 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 179    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 4795    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 312    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    0/0 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd