1.3.5 Identify Input Purpose

The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  • The content is implemented using technologies with support for identifying the expected meaning for form input data. (Level AA)

Description

 

While labels or instructions provide clear information on the data that is expected by the user, programmatically providing a way to suggest the type of data expected in the form field may be useful for many users. The success criteria 1.3.5 identify input purpose even try to give some guidance on personalizing the data input.

For example, type=”tel” simply says that the user is expected to enter the phone number but this success criteria gives an opportunity to define if the telephone number to be entered is your telephone or some other persons.

While the type attribute defines the kind of data to be provided, attributes such as HTML5 autocomplete, autofill allows the user programmatically identify the data to be provided.

These properties also allow the assistive technologies to provide additional queues when the user have to enter a particular data. For example, a birthday cake adjacent to the date field represent a birthday field. This can be more appropriate when the HTML5 autocomplete attribute is set to birthday.

 

To ensure that this success criteria, ensure that an autocomplete attribute is specified wherever appropriate and have a value that represents the label. For example for a input text field with a label First Name can have an autocomplete value of given name. This value is independent of language of the page or label and can be understood by most users, user agents and assistive technologies.

 

Who benefits with 1.3.5 Identify input purpose

Many user groups benefits with this success criteria.

  • People with dexterity benefit with the selection of auto-filled values in the input field as it will be difficult for them to type.
  • People with language or memory difficulties benefit with the auto-filled values as they no need to remember the values such as complete address, zip code etc.
  • People with cerebral palsy, stroke, head injury, motor neuron disease or learning disability benefit if the assistive technologies or browser addons can provide icons along with the labels for the input fields.

Related Links

HTML5 Autocomplete

NVDA 2018.3 is released, Download and What’s new

NVDA the free Windows screen reader by NVAccess released the next version for 2018 i.e NVDA 2018.3. The release include few new features, bug fixes and developer enhancements.

Note before download: NVDA 2018.3 breaks compatibility with NVDARemote 2.1 due to a necessary upgrade of WXPython (our Graphical User Interface library). We do expect however that a new version of NVDARemote compatible with NVDA 2018.3 will be released in the coming days.

What’s new in NVDA 2018.3

  •  NVDA will report grammar errors when appropriately exposed by web pages in Mozilla Firefox and Google Chrome.
  • Content marked as being either inserted or deleted in web pages is now reported in Google Chrome.
  • Custom roles via the aria-roledescription attribute are now supported in all web browsers.
  • Added support for various modern input features introduced in recent Windows 10 releases. These include emoji panel (Fall Creators Update), dictation (Fall Creators Update), hardware keyboard input suggestions (April 2018 Update), and cloud clipboard paste (October 2018 Update).
  • Content marked as a block quote using ARIA (role blockquote) is now supported in Mozilla Firefox 63.
  • The user is asked once when NVDA starts if they are happy sending usage statistics to NV Access when checking for NVDA updates.)
  •  Accessible labels for controls in Google Chrome are now more readily reported in browse mode when the label does not appear as content itself.

Complete list of new features, bug fixes and changes can be found here.

 

Download or update to NVDA 2018.3

Visit the NVDA download page for NVDA 2018.3. If already have an older version update to the latest version.

updating to NVDA 2018.3

  1. Press NVDA + n to open NVDA settings.
  2. Navigate to Help by pressing down arrow until you hear Help.
  3. Press right arrow to move into the help menu.
  4. Press down arrow until you hear Check for updates.
  5. Press enter Check for updates and follow the onscreen instructions.

NVDA is an open source and free screen reading solution for Windows operating system. Support the cause by donating to the NVDA project.

 

CSUN 2019 General Call for Papers, Dates and Venue

CSUN 2019, the 34th CSUN Assistive Technology Conference  is scheduled between March 11-15, 2019 at the Anaheim Marriott hotel. Yes, it is a change in venue, route your plan from San Diego  to Anaheim this time.

The general call for papers has just opened on September 13, 2018 and will be closed on October 2nd, 2018 3 : PMPDT. The CSUN program committee has published the instructions and procedure to submit. People submitting proposals for papers are expected to read them and adhere for considering it for review.

 

Call for paper submission

CSUN 2019 papers for presentation should be filled with all the details asked for in the submission form in the prescribed format. An extended abstract with not less than 500 words must be ready in accessible format before beginning the submission process.

 

Once you are ready with the details, submit your form at CSUN 2019 call for papers page.

 

Important Dates

Conference Dates:

March 11th 2019 to March 15, 2019.

March 13th to March 15th will be the conference with a kickoff event on 12th. The preconference workshops will be held on 11th March and 12th March.

General call for papers:

Opens on September 13, 2018 and ends on October 2nd, 2018 3 PM PT.

Notification of acceptance

October 23, 2018

Venue

Anaheim Marriott

700 West Convention Way, Anaheim, California 92802 USA   +1 714-750-8000

Additional details of the dates and venue are available on the CSUN 2019 conference page.

 

Now think about your proposals and all the best from Maxability for those submitting their papers.

 

 

aria-rowcount (property)

Dynamic tables are quite common in modern web. In these dynamic tables, Number of rows and columns depends on the data fetched by the input given by the user or any other parameters that define the table. aria-rowcount (property) will be ideal to use in scenarios where the total number of rows are not available currently in the DOM. If all the rows of the table are present in the DOM this property) is not required. The user agents can calculate the total number of rows in the table and share it with assistive technologies.

Along with aria-rowcount property aria-rowindex property also need to be provided for user agents to effectively inform the position of current row within the table in case of dynamic tables.

Developers must set the value of aria-rowcount to an integer equal to the number of rows in the full table. In case the total number of rows is unknown, authors must set the value of aria-rowcount to -1 to indicate that the value should not be calculated by the user agent.

Aria-rowcount property used in roles

Values of aria-rowcount property

Integer that is equal to the total number of rows in the table. The value must be -1 (minus one) if the total number of rows is unknown.

Also have a look at aria-colcount and aria-colindex properties.

 

Maxability Webinar – October 2018 – Web Accessibility Testing Tools

The next webinar on web accessibility is scheduled on October 9th, 2018. Finding an accessibility testing tool that fits right for your project or the role you play might be difficult. Some cases you want to check the accessibility of a webpage real quick to have a high-level understanding, sometimes you need to make a complete analysis. You might not be a technical person but still you want to check if a given website is accessible.

In the market there are many tools available to provide the accessibility audit report in the way you want. This webinar aims in sharing those free and commercial tools. You can make your choice!!!!

Presenter

Rakesh Paladugula

Key take-aways

  • Brief introduction of various accessibility testing tools.
  • Which one is free and which is commercial.
  • Web based and browser plugins.
  • Quick analysis and detailed reports
  • Technical knowledge required or not.

We will not explain you which is good and which is not. This webinar should help you analyzing which is the right tool for you.

Webinar Timing

On October 9th, 2018. Between

  • 9: 00 PM and 10 : 00 PM IST
  • 11 : 30 Am and 12 : 30 pM ET
  • 8 : 30 AM and 9 : 30aM PT

Accessibility Scanner App on Android

Accessibility scanner is an accessibility testing tool available for Android devices. No technical knowledge required to use it. It is a easy to use and self-explanatory mobile accessibility testing tool.

Download from Google Play store

The Accessibility scanner can be downloaded from the play store like any other app. Remember that this app is only available for Android version 6 and above.

 

Setting up and using Accessibility scanner

The Accessibility scanner need to be turned on to use. You can turn accessibility scanner in the accessibility settings of the operating system. Alternately it prompts you to switch it on first time when you open the app on the device.

Switching the Accessibility Scanner On

Navigate to

Apps > Settings > Accessibility > Scanner

And toggle the scanner button to on position. This is one time activity and you can switch the scanner off anytime by following the steps above.

Now the accessibility scanner is ready to do the accessibility audit of your screen.

Scanning for accessibility

Follow the steps below to do an accessibility test.

  1. Open the app you want to test.
  2. Tap the accessibility scanner icon.
  3. The accessibility results will be stored in the scanner app.
  4. The notes of the possible improvements can be found here and you can use the list feature for a detailed information.
  5. The past reports are also available in the scanner app and these can be shared with anyone.

Note: If you are using talkback, use explore by touch to find the scanner icon and double tap on it to perform the audit.

 

What tests can the Accessibility Scanner do?

The accessibility scanner is not a replacement for manual audit. However, it helps everyone including non-technical people to quickly check for some problems their app is causing for various users with disabilities. The accessibility scanner can test the accessibility problems specified below.

  • Content labels
  • Touch target size
  • Clickable items
  • Text and image contrast

The color contrast ratio that the scanner checks is the minimum contrast requirement from W3C WCAG. The touch target is the Android accessibility material design requirements. These can be changed from the accessibility scanner app settings if required.

 

1.3.4 Orientation

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. (Level AA)

Examples where a particular display orientation may be essential are a bank check, a piano application, slides for a projector or television, or virtual reality content where binary display orientation is not applicable.

 

Description

Most of the handheld or tablet devices has the option to lock the orientation of the device. For instance, on an iPhone you can lock the orientation from the control Center (Control Center > lock rotation). Some users lock the orientation of their device for their comfort or some users, since the device is placed on a fixed place the orientation cannot be changed i.e. the devices fixed on the arm of a wheelchair.

1.3.4 orientation wants authors not to create any content or functionality that is restricted to one orientation. This will allow the users to view and operate the content of websites and applications in the orientation they are comfortable with or the default orientation of the device.

So, any application should respect the device specific orientation if the device orientation is locked, If the device orientation is not locked, the application or website should pick the default system level orientation. User agents pick the system level orientation either by the default device orientation or the orientation determined by the device sensors. In any of these conditions the content and functionality should remain unchanged.

Also keep in mind that the operating mechanisms can be different in different orientations. For example in landscape orientation the navigation menu may be a hide/ show mechanism while in portrait the same may be a ham burger menu.

Content or functionality changed by the size of the display of the device are not covered by this success criteria. In other words, 1.3.4 orientation does not talk about the changes in the content and functionality displayed in different screen resolutions.

 

Exceptions

Some situations restrict the benefit of viewing the content in both orientations. They are considered as exceptions of 1.3.4 orientation and are mentioned below.

  • To capture a check, the  process in a banking app can be performed only in landscape due to the larger width compared with the height of the check. In landscape mode the width is usually more than height.
  • A Piano app can only be accessed in landscape so that all the keys of the app can be effectively used.
  • Slides viewed on projector or television cannot be rotated because of their fixed position.

Related Links

Orientation API

HTML5 draggable attribute

The HTML5 draggable attribute specifies if the element can be picked for dragging. Links and images are draggable by default. Since this is a global attribute HTML5 draggable can be used on any element of the base markup.

Using HTML5 draggable attribute

As specified this is a global attribute and can be used in any element of the base markup.E.g. <a href=”abcd.html” draggable=”true”>Checking draggable</a>

Values of HTML5 draggable attribute

HTML5 draggable attribute can be either true or false. If it is set to true it means that the element can be dragged and dropped in a different position. The attribute is usually used in drag and drop operation, re-arranging a list etc.

Screen Reader support for HTML5 draggable attribute

By the time of this writing HTML5 draggable attribute cannot be recognized by popular screen readers JAWS and NVDA on all popular browsers Mozilla Firefox, Google Chrome and MS Internet Explorer and Edge. This proves true with the use of screen reader specific text in the

Examples of 4 design patterns of drag and drop.

 

 

Making emoticons accessible and screen reader friendly

Making Emoticons accessible is something often ignored while exchanging information on the web. Emoticons share expressions, feelings and different other messages in the modern digital content. Conveying these expressions to assistive technologies such as screen readers is something often developers forget or ignore. Let us understand how to make emoticons accessible and assistive technology friendly.

Including emoticons in your markup

Emoticons can be added to your markup in various ways. Explained below are few of them. It is not necessary that every technique provided below can make emoticons accessible or may be suitable for the screen reader / browser combination. Pick the suitable one for your need.

Direct insert of emoticons

🙂
🙁

This technique may not be ideal in all situations. To make it more screen reader friendly you can add ARIA roles and properties to it.

 

Direct insert of emoticons with ARIA substitute

🙂
🙁

By inserting ARIA role img and aria-label, screen reader users will identify the emoticon with accessible name. This method also recognizes the emoticons as images with the use of role img.

Unicode values for emoticons

😀
😁
😃

 

Using Unicode values is the old and most preferred  method for emoticons. The complete list of unicode values can be found here. The emoticons marked-up using unicode values are accessible in general.

Hexadecimal values for emoticons

 


😀
😁

 

In case the emoticons marked-up using Unicode values or hexadecimal values are not identified by screen reading technologies, they can be substituted with the aria techniques specified above.

Emoticon keyboards

As we discussed in our blog article titled accessibility problems on social media applications, users highly depend on emoticon keyboards that are available in the market. ON IOS I use a emoticon keyboard that has different symbols defined in different categories. VoiceOver recognizes each of them with appropriate accessible name. Like any other character on the keyboard I can just add that to my text area in any application. Here is some information on using emoticon keyboard with IOS. Some apps such as facebook messenger provides the user to pick the emoticons directly from the app. under expression picker.

 

Emoticon add-ons for screen readers

I recently found this NVDA add-on called emoticons. This is quite interesting. Being a screen reader user you might not know how to type in all the emoticons you could imagine. This add-on solves that problem for you. Once you install the add-on, press NVDA + i to open the insert emoticons dialog. Choose the emoticon you want. The emoticons below are thus written in this article.

😑

(handshake)

😨

Related Links

 

 

Accessibility Inspector in Mozilla FireFox 61 and beyond

Accessibility Inspector is now built into Mozilla FireFox 61. This feature will give a wonderful opportunity for the accessibility testers and consultants to review the accessibility properties of any element and provide a detailed description for the audit report. In this article let us understand , how to enable it and use the feature. Screen reader users, don’t be panic, this feature is also accessible with the screen reader.

 

How is this Accessibility Inspector useful?

Before enabling the feature, let us understand how is this useful.

For a screen reader to understand a button as a button or link as a link on the browser the accessibility APIs of the browser help. The accessibility APIs expose the role and other information that is required for the screen readers. The information exposed by accessibility APIs include semantically supplied roles such as <a>, <label> as well as those supplied by WAI ARIA such as role=”link” and aria-label.

What is Accessibility Tree

The roles and other information made available by accessibility APIs is presented in a hierarchical structure called accessibility tree. This is similar to a DOM structure but it only has the accessibility related properties.

 

Making the accessibility inspector available directly on the browser or via dev tools make the life of developers and accessibility testers easy. Eg: Using this feature one can quickly check if an image on the page has an alternate text or not, can easily identify the button displayed is really a button or an image with click functionality etc.

Enabling accessibility inspector on FireFox browser.

 

  1. Make sure you are running Mozilla FireFox version 61 or above. Menu > Help > About Firefox or Alt + h, a.
  2. Now open your developer settings. Right Click or  Application key or Shift + F10 and select inspect element or Control + Shift + i.
  3. Now open the Dev tools settings. Go to the three dots menu and select Settings or Press F1 (Function key 1).
  4. Navigate through the settings and check the Accessibility checkbox to checked state.
  5. Now the accessibility tab will be added to the Dev tools panel.
    Accessibility Inspector panel from Dev tools

Accessing Accessibility Inspector

Once the accessibility inspector is enabled there are two ways to access the properties of any  element.

Method 1: Simple Method

In this method you can directly navigate to any element on the web page and check it’s properties.

  1. Navigate to the element for which you want to check the accessibility properties.
  2. Right Click, hit the application key or Shift + F10 and select Inspect Accessibility Properties.
  3. The accessibility Inspector panel opens. Use the tab or shift tab to find the Accessibility tree. The accessibility tree should have the earlier selected element focused.
  4. Use a tab to move to the properties of the element.
  5. Use the arrow keys to navigate between different properties such as Name, role, action, value, keyboard shortcut, state, attributes etc.

Method 2: Not So easy Method

In this method you can navigate from one node to another in the hierarchical accessibility tree, choose any element you prefer to and check it’s accessibility properties.

  1. Open the dev tools. Right click or application key or Shift + F10 and choose Inspect element or shortcut Control + Shift + i
  2. Navigate to Dev tools toolbar. Use shift tab or tab to navigate within the Dev tools window.
  3. Move focus to Accessibility in the tool bar. Use left and right arrow to move within the toolbar.
  4. Activate the accessibility option in the toolbar.
  5. Press tab to move into the accessibility inspector panel and to Accessibility tree.
  6. Navigate within the accessibility tree and observe the elements in the structure. Up and down arrow to move between the nodes and left and right arrows to expand or collapse the same.
  7. To check the accessibility properties of any element, bring focus to that element in the accessibility tree and press tab to move to it’s properties.
  8. Use the arrow keys to navigate between different properties such as Name, role, action, value, keyboard shortcut, state, attributes etc.

See the video

Happy Accessibility.