Web Accessibility Suits and Settlements in 2017

End of the year, Time to look at web accessibility suits and settlements in 2017. Few web accessibility suits that are filed in the courts, the settlements that are agreed without law suits are provided below. The refresh of section 508 refresh is a major legal update in 2017. Apart from the links below, there are few other suits such as Manhattan College, Long Island University, Hofstra University, College of Westchester, Iona College, College of New Rochelle etc for which I could not find relevant information.

Below are few web accessibility suits and settlements in 2017

Note that all the below links target to external websites.

If you know more suits or settlements not listed here , please comment below and I will update the same in the article. Also read our articles on web accessibility suits and settlements in 2016, 2015 and 2014.

aria-errormessage (property)

aria-errormessage property is used to present the error message to a screen reader user. It uses id value to reference the message container. This is similar to aria-describedby property which references a message from any other container on the page using the id value reference.

As per WCAG 2.0 SC 3.3.1 Error Identification, user need to be intimated about the error message that is displayed when a form field has invalid data or the form submission is failed.

 

Aria-errormessage is a ARIA 1.1 property. This property need to be used along with aria-invalid state.  This property is used in a form field to convey the error message to a screen reader user.

 

How does aria-errormessage work?

 

Aria-errormessage need to be used in the form element referring to the message container with the id value. Initially the form field will be in valid state. So aria-invalid must be set to false or completely avoid using it. The error message container will be hidden from the screen and also for the screen reader using the CSS properties such as visibility:hidden. If the screen reader user need to be intimated immediately when the error message is invoked, in other words when the user enters invalid data aria-live property need to be used. So initially set aria-live to off.

Once the user inputs an invalid data in the form, change the status of aria-invalid from false to true. This will inform the screen reader user that the data entered is incorrect. Now 2 make the error message visible to the user change the CSS style property to visibility:visible. The aria-errormessage will now be able to associate the message since the container’s id is already referred in the input element. To ensure that the error message is announced immediately to the screen reader user switch the aria-live property to aria-live=”assertive”.

 

Aria-errormessage used in roles

Can be used in any element of the base markup.

Values of Aria-errormesage property

Uses id reference as the value.

 

 

NVDA 2017.4 is released, What should you know now?

NVDA 2017.4 is released today. In case if your machine have not prompted for an update download it from NVAccess website.

Wait, before updating be aware that NVAccess has stopped support for Windows XP and Windows Vista. If you are running these operating systems do not update to NVDA 2017.4. This version starts support from Windows 7 with service pack 1 and above. NVAccess have still made the older version i.e. NVDA 2017.3 available for download on there website.

Highlights of NVDA 2017.4 release

  • When the web dialogs are opened by default they are opened in browse mode. Developers are not specifically required to add role=”document” to switch from focus mode to browse mode if you are doing so.
  • The elements list option now contains the forms and button options. By pressing NVDA + f7, users can now get list of forms and buttons along with links, headings and landmarks.
  • The group labels for form elements are better reported.
  • Users can now navigate to rich text fields with the text fields quick command “e” , “shift + e” and form fields quick command “f” and “shift + f”.
  • The announcement of connecting and disconnecting the power charger along with the % of battery is made available in NVDA 2017.4.
  • The screen oriantation if changed is announced to the user.

Read the complete What’s new in NVDA 2017.4

International Day Of Persons With Disabilities December 3rd, 2017

“Transformation towards sustainable and resilient society for all”.
Is the theme for this year.

 

The annual observance of the International Day of Persons with Disabilities was proclaimed by the United Nations General Assembly resolution 47/3 in 1992. It aims to promote the rights and well-being of persons with disabilities in all spheres of society and development, and to increase awareness of on the situation of persons with disabilities in every aspect of political, social, economic and cultural life. Further, India signed the United Nations Convention on the Rights of Persons with Disabilities (UNCRPD) and subsequently ratified the same on 1st October, 2007. The Convention came into effect on 3rd May 2008.  Being a signatory to the Convention, India has an international obligation to comply with the provisions of the Convention.

Is that all ?

In 2015 the Accessible India Campaign was launched by central government. A new term divyang was made popular by Government of India. The new Rights of persons with disabilities Act – 2016 bill is passed in both the houses and became a law.

Is this enough?

When it comes to implementation, the results are not promising.  As one of the core missions of Accessible India campaign to make public spaces accessible, by July 2016 all international airports need to be made accessible and by end of 2018 all the domestic airports need to be made accessible. I have not found any accessible self check-in Kiosks. On contrary airports are turning into silent airports making it difficult for blind passengers to get the information in voice. When we ran a quick accessibility check on Accessible India campaign, the website itself is not disability friendly. Read

What’s Next?

Every one of us have a shared responsibility to make world a better place. Let us try to make barrier free environment first before making it accessible.  Start making an impact by doing simple things such as providing the captions you share on social networks. If you own a digital asset such as a website or if you can influence the website owner do a simple accessibility check and give a shout out to make it accessible.

HTML5 autocomplete attribute

HTML5 autocomplete is the next article in the series of HTML5 attributes that impact accessibility. Autocomplete is a new attribute in HTML5 specification. It is an attribute of input element.

Using HTML5 autocomplete attribute

The autocomplete attribute is used along with HTML5 input element. This attribute informs if the field has the property to remember the similar values entered by the user earlier. The autocomplete attribute predicts the value and provide suggestions to the user based on earlier typed values.

The autocomplete attribute has two possible values on and off. autocomplete=”off” is equal to not having the attribute at all. Some browsers by default remembers the values depending on the field type. If you want the user agent not to remember the value at all, eg: input fields such as one time passwords (OTP) use autocomplete=”off” specifically.

autocomplete=”on” is the default value and is equal to having only autocomplete without the value. Use either “autocomplete” or autocomplete=”on” for fields such as email address so that each time you fill in a registration form or login to a website you can type in few characters and choose the value.

Example code below.

<br /> <input type="tel" autocomplete="on" /><br /> <input type="email" autocomplete="off" /><br /> <input type="text" autocomplete /><br /> <input type="url" /><br />

The HTML5 autocomplete attribute is allowed on the following input types. text, search, url, tel, email, password, datepickers, range, and color. Remember that the screen readers must announce the autocomplete property to the user whenever it is available.

Have a look at the live example.

Related links

Updating to Firefox Quantum, Screen reader users wait

Screen reader users are asked not to  update to next version of Firefox. Mozilla is releasing Firefox 57 called as Firefox Quantum on November 14, 2017. Firefox Quantum is switching to a multiprocessor methodology to increase the speed and to be more efficient. Firefox quantum is a fast, modern and performant browser that puts users first. The new Firefox quantum will be using 30% less memory and will be 2 times faster than the earlier versions in general.

Though Firefox Quantum seems to be faster and efficient this version is not ideal for screen reading technologies. No matter if you are using JAWS or NVDA Firefox quantum is not suitable for you at this point. Freedom scientific on a blog post mentions that only the latest versions of JAWS, Zoom text and Magic are compatible to certain extent. Read the blog posts from creator of NVDA and Freedom Scientific JAWS to know more information.

 

Why shouldn’t I update to Firefox quantum?

The loading and processing time or simply the interaction of screen reader with Firefox quantum is very slow. This is due to the multiprocessor methodology used in the latest version. With this method the communication process between browser and assistive technology is significantly deteriorated. If you love experimenting new features you can go ahead with Firefox quantum.

 

Shouldn’t I update Firefox at all?

At this junction you have two options. One is to stop updating your browser until a screen reader user friendly version is released. To stop updating the Firefox browser navigate to Tools menu and open options. Under general tab select the radio button under updates i.e. Check for updates but let you choose to install them or Never check for updates. By default automatically install updates will be selected. The second is to install Firefox Extended Support release (ESR). Choose the appropriate option such as language and operating system type and install. This will prevent you from automatically updating to Firefox quantum. Better to install Firefox ESR before November 12, 2017 to avoid the pain.

Whom does it impact?

This Firefox quantum impacts the screen reader users who largely depend on Mozilla firefox for their day to day browsing needs. This impacts to those who use Firefox for accessibility testing. The product organizations and website owners etc should know this to address the customer queries.

 

Hope this article helps the screen reader users in making a choice before installing the new Firefox quantum.

 

aria-details (property)

Aria-details property identifies the element that provides a detailed explanation of an object. It is an ARIA 1.1 property.

When an image or a similar element needs a detailed explanation, something more than what aria-describedby can provide aria-details can be used. The detailed explanation can be a container of text on the same page or a link that takes the user to a different page. The content that is referred by aria-details should be always visible.

aria-details property just informs the existence of a detailed explanation of the object to the user. It does not convert the content available in the referenced location and read out by screen reader similar to what aria-describedby does. Since the content provided in the reference of aria-details is lengthy it might not be easy for the user to consume the entire content. They may also loose the meaning or intent of some content.

aria-details property uses id value of the container for referencing the content.

Aria-details and aria-describedby properties can be used for same element in certain situations. however, if the user agents only respects one attribute when more than one references the same element then aria-details property takes the priority.

 

Example

<img src=”pythagorean.jpg” alt=”Pythagorean Theorem” aria-details=”det”>

<details id=”det”>

<summary>Example</summary>

<p>

The Pythagorean Theorem is a relationship in Euclidean Geometry between the three sides of

a right triangle, where the square of the hypotenuse is the sum of the squares of the two

opposing sides.

</p>

<p>

The following drawing illustrates an application of the Pythagorean Theorem when used to

construct a skateboard ramp.

</p>

Alternately the detailed explanation can be in a different page linked and referenced as follows.

<img src=”pythagorean.jpg” alt=”Pythagorean Theorem” aria-details=”det”>

<p>

<a href=” Pythagorean.html” id=”det”> Pythagorean</a>

</p>

Aria-details property used in roles

Can be used in any element of the base markup.

Values of Aria-details property

Uses a single id reference as the value.

 

HTML5 abbr attribute

This article on HTML5 abbr attribute is part of the series of articles we want to post on HTML5 attributes and elements that impact accessibility. If you have not read have a look at our accesskey article.

HTML5 abbr is an attribute, do not get confused with the abbr element. The abbr element used to expand the abbreviations is different from the abbr attribute. The HTML5 abbr attribute is used within the header cell of a table i.e. <th> element.

The value of HTML5 abbr attribute is text or otherwise called as alternative label. The text is not visible on the screen but read by the screen reader. This text is read only when user navigates the table by referring with other cells of the table. Content authors can provide either abbreviation or expansion or a different text all together.

As on today the latest version of NVDA i.e. NVDA 2017.3 does not support HTML5 abbr attribute. JAWS seems to have support with this attribute on all three major browsers.

Using HTML5 abbr attribute

The abbr attribute is used within the <th> element. Example code below.

</p> <th abbr="Make">Toy manufacturer</th> <th abbr="Model">Vehicle model</th> <p>
Also have a look at the live HTML5 abbr attribute example.

Related Links

None available

VPAT 2.0 for Section 508, WCAG 2.0 and En301 549

Voluntary Product Accessibility Template 2.0 ® (VPAT 2.0 ®) is updated by Information Technology Industry Council ITICExternal Website. The purpose of the VPAT is to assist customers and buyers in making preliminary assessments regarding the availability of commercial “Electronic and Information Technology,” also referred to as “Information and Communication Technology” (ICT) products and services with features that support accessibility.

With the recent Section 508 refresh, it has become essential to have a The latest VPAT. can be downloaded from ITICExternal Website. Those who publish VPAT 2.0 have to follow the points outlined in essential requirements and best practices to complete the VPAT 2.0 conformance report.

VPAT 2.0 is updated from VPAT 1.0 to allow the venders create the accessibility conformance reports based on revised section 508 standards and section 255 guidelines. The current template also allows the user to report for W3C WCAG 2.0 standards and EN301 549 requirements. Venders are expected to report at least one of these standards to publish a VPAT® 2.0 report. VPAT 2.0 users agree not to deviate materially from the template format provided by ITICExternal Website, and to use the service mark (“®”) where appropriate. Further it is not mandatory to use the same format as provided on the ITICExternal Website. Venders can create their VPAT 2.0 reports in alternate formats such as PDF or HTML but the report must be accessible. Remove the content such as instructions and other sections which are not applicable for your product before publishing it following the instructions provided there.

The integrity of the data provided in VPAT 2.0 is the responsibility of the venders who created it. This template should allow the users / buyers to do a preliminary analysis of the accessibility features in the product.

WebAIM screen reader user survey 7

WebAIM screen reader user survey 7 is a study conducted by webAIMExternal Website to understand the preferences of screen reader users. This survey helps web developers and those who create web standards understand the new trends and practices screen reader users follow and thus try incorporating the best practices.

The webAIM screen reader user survey 7External Website is primarily intended for the actual screen reader users, however those who use screen readers for evaluation of websites and applications are also encouraged to take the survey.

The survey is open until November 1, 2017. It contains 30 questions that may approximately take 15 minutes. The survey is purely voluntary. Taking this survey will help in advancement of best practices in the space of accessible ICT.

Note that no personally identifiable information is collected in the survey. The browser and operating system information is collected when you submit the survey. The aggregated results of the survey will be made available by the end of the year.

To take the survey and for any further information visit WebAIM screen reader user survey 7External Website.

My thoughts

  • Few mobile screen readers such as Ideal and voice assistance are very rarely used as far as I know. In webAIM screen reader survey #6External Website these screen readers are not been shown. Interested to see the results in this area.
  • Another interesting question in the survey is “Which of the following most accurately describes your screen reader usage?”. I think results help in understanding the screen reader usage along with auditory/ visual comparisons.
  • Screen reader user survey #6External Website have not given a clear picture on the use of landmarks and skip links. Hope the latest survey helps to get to a more clear understanding.