1.4.11 Non-text Contrast

the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components
  • Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects
  • Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

 

Description

1.4.11 Non-text contrast is similar to 1.4.3 Contrast minimum. People with low vision will have tough time reading and understanding the content that has poor contrast. As regular text requires 4.5 : 1 contrast between the text and background, large text requires 3 : 1 ratio between the text color and it’s background, in WCAG 2.0 non-text elements such as actionable controls, focus indicators, selection identifiers are not specifically mentioned to meet the contrast requirements. In WCAG 2.1, these active controls i.e. buttons and form fields, text on action controls, visual effects such as focus indicators,  selection identifiers, boundaries of controls indicating the hit area require a minimum contrast ratio of 3 : 1. This is equal to that of the contrast requirement of large text in 1.4.3 Contrast minimum in WCAG 2.0.

 

People with low vision should be able to identify meaningful non-text controls and visual effects without relying on any color enhancing features or applications. The clear identification of selections, focus indications and hit areas even help those who have cognitive difficulties.

1.4.11 Non-text contrast required and exceptional elements

The following are some indicative elements and exceptions. On websites the list may be more.

  • Text embedded controls, graphics, text / placeholders in text boxes need 3 : 1 contrast ratio.
  • Developer defined focus indicators require 3 : 1 contrast ratio.
  • Actionable controls require 3 : 1 contrast ratio.
  • Visual effects to notify the selection need 3 : 1 contrast ratio.
  • A focus indicator required to have a contrast ratio of 3 : 1 with its adjacent background if the focus indicator is modified by the developer. If the  focus indicator is the default supplied by the browser, contrast is not required to be 3 : 1.
  • IF the state of a control is identified by means other than color change alone, the control and the visual selection identifier does not require 3 : 1 contrast ratio.
  • The visual boundary of any control that indicates the hit area is not a requirement of this success criteria 1.4.11 Non-text contrast, however if the visual boundary is the only way to identify the control when the user focus, then the visual boundary must have a 3 : 1 contrast ratio with the adjacent background color.
  • Inactive controls on the page such as a disabled button is not required to meet 3 : 1 contrast ratio.
  • Parts of graph, controls, text or icons are not required to meet the 3 : 1 contrast ratio if they have content available in another forms such as a table in addition to text on graph, if the graphics or icons are just for aesthetic purposes or that are part of logo / brand names.

 

Happy New Year 2019

Dear accessibility enthusiasts, well-wishers, subscribers and visitors of Maxability – On behalf of Maxability family we wish you a very prosperous and happy New year 2019.

2018 has been a wonderful year for Maxability. We had 30% additional visits compared to 2018 touching the visitors almost every corner of the world. We started the quarterly webinars in 2018 and will be continuing in 2019 too. The next webinar is scheduled on January 23rd, 2019 and the topic is “Web accessibility testing with screen readers, register here. We contributed to Mobile Accessibility practices for Indian Government Websites, these are published formally in the recent past. Our Youtube channel was also started in 2018.

 

Exciting thoughts are in the process for 2019, stay tuned for the updates.

Maxability highlights in 2018

  • We reached 156 countries in 2018 with highest visits from United States. This means we are able to touch almost every corner of the globe.
  • 57049 total visits in 2018 which is 30% more than 2017.
  • Average visits per day is 156 in 2018, in 2017 this is 122 average visits per day.
  • The total visitors to Maxability in 2018 was 36493 with 9000 additional visitors compared with 2017.
  • Almost 50 articles are published in 2018 that covered few best practices, WCAG 2.1 updates and ARIA 1.1 properties.

Thank you

Thank you for reading our blogs, applying the knowledge shared by us to make web a better place. We will continue sharing the knowledge through articles, webinars and any new methods all of us think appropriate in 2019 and beyond. If you wish to see any other initiatives, for feedback and suggestions drop a note through our contact form.

Please subscribe to our Youtube channel, like Maxability on facebook, follow Maxability on twitter and subscribe with your email to our blog. Thank you if you already are following us.

Once again, A Very Happy New Year 2019, let us together make web a better place for everyone.

 

 

 

NVDA 2018.4 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.4. The release include few new features, bug fixes and developer enhancements.

What’s new in NVDA 2018.4పాతఝ

  • Performance improvements are made in using NVDA with the recent versions of firefox.
  • NVDA is now able to read descriptions for emoji as well as other characters that are part of the Unicode Common Locale Data Repository.
  • Interacting with combo boxes on the web in Firefox, Chrome and Internet Explorer has been improved.
  • Moving the mouse to the navigator object will now much more accurately move the mouse to the browse mode position in Mozilla Firefox, Google Chrome and Acrobat Reader DC.
  • Performance improvements when navigating large pages with lots of dynamic changes in Mozilla Firefox.
  • In ARIA menus on the web, the Escape key will now be passed through to the menu and no longer turn off focus mode unconditionally.
  • NVDA no longer reports clickable multiple times in a row when navigating clickable content in Browse Mode.

A complete list of improvements, changes and bug fixes are available at What’s new in NVDA.

Download or update to NVDA 2018.4

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

updating to NVDA 2018.4

  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.

 

Web Accessibility Suits & Settlements in 2018

Maxability is bringing together the web accessibility suits and settlements since 2014. 5th year in a row, this article highlights some web accessibility suits and settlements in 2018.

Plaintiffs filed 4965 federal ADA Title III lawsuits in first 6 months of 2018. Among this large numbers are web accessibility suits and settlements. If the trend continues, it is expected to reach 10,000 cases with an approximate increase of 30% from 2017 according to  ADAtitleIII.com

The major web accessibility suits are reported on

  • clothing and apparel stores
  • telecommunications companies
  • restaurants
  • consumer goods
  • e-commerce stores

Web Accessibility suits and settlements in 2018

All the links below navigate to external websites.

Related links

Below are the links from past year on web Accessibility suits.

Webinar January 2019 -Web Accessibility Testing With screen Readers

We are excited to have our first webinar in 2019. The webinar is on “Web accessibility Testing With screen reader” scheduled on 22nd January, 2019. Thank you for supporting us and taking part in our last 2 webinars.

For this webinar we have Alan Smith, Web Accessibility Expert from Humana. Know more about Alan in the about the speaker section below and when you join the webinar.

Webinar Topic

Web accessibility testing with NVDA screen reader
Alan's picture in orange shirt

About the speaker Alan Smith

  • Over 25 years of software testing and management experience and 5 years in the field of accessibility.
  • Work full-time for Humana and part-time for Criterion 508 as an Accessibility Lead
  • World Wide Web Consortium (W3C) Invited Expert Taskforce member for Mobile, Low- Vision and Conformance Testing of the Web Content Accessibility Guidelines (WCAG) Working Group
  • Contributor to WCAG’s Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile located at: http://w3c.github.io/Mobile-A11y-TF-Note/
  • Recently hired by the University of North Carolina at Charlotte (UNCC) as an adjunct professor to do formal curriculum development and teaching on accessibility and help build their accessibility program
  • My relationship with UNCC started by my personally initiated outreach to the community through guest lecturing web and mobile accessibility sessions at the university for graduate and under-graduate classes
  • Created several online training courses covering WCAG 2.0 Testing and Repair Techniques, Accessibility for Designers and Using JAWS for Testing.

Connect with alan on linkedin.

Key take-aways from the webinar

  1. Learn how simple it is to use the screen reader
  2. Learn the few commands that you need to know
  3. Learn some simple settings for better usage
  4. Learn how to share what the screen reader announces

 

Webinar date and time

On January 22nd 2019. Between

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

Web Accessibility and autism

 

 

Autism is mainly a spectrum of neurodevelopmental disorders. So, autism is also referred as autism spectrum disorder  (ASD). The conditions characterized by challenges with social skills, repetitive behaviors, speech and nonverbal communication are commonly observed in people with autism.

 

Some Statistics of autism

According to Centers for Disease Control and Prevention (CDC), 1 in 59 or 1.7% children has autism spectrum disorder (ASD). This is a 2014 data collected in some parts of United States. The data was much higher than the earlier statistics. The data also reveals that male children are reported much higher than female children. The male to female ratio who have ASD is 4: 1. This is definitely an alarming concern for the world.

 

ASD is found regardless of raise, culture or economic background and of course everywhere in the world.

Symptoms of autism

Though the symptoms of ASD typically found between 12 to 24 months, they may be even earlier or later.

The two main categories of symptoms defined by DSM-5 are

  1. problems with communication and social interaction,
  2. restricted or repetitive patterns of behavior or activities.

 

Problems with communication and social interaction include:

  • issues with communication, including difficulties sharing emotions, sharing interests, or maintaining a back-and-forth conversation
  • issues with nonverbal communication, such as trouble maintaining eye contact or reading body language
  • difficulties developing and maintaining relationships

 

Restricted or repetitive patterns of behavior or activities include:

  • repetitive movements, motions, or speech patterns
  • rigid adherence to specific routines or behaviors
  • an increase or decrease in sensitivity to specific sensory information from their surroundings, such as a negative reaction to a specific sound
  • fixated interests or preoccupations

 

Web Accessibility for Autism Spectrum

 

Web is for all, people experiencing autism are part of this user base. How can you make sure that your digital content can be made comfortable for these set of users? The digital content here refers to websites, software and mobile apps.

The world Wide Web Consortium’s, WCAG Guidelines are the superset rules that try to ensure the web content is accessible to everyone regardless of their disabilities. Below are some guidelines from this  WCAG checklist  that meets the needs of people with autism.

 

  • Provide content that is not prone to have seizures.
  • Screens or pages should be consistently identified and have a consistent navigation mechanism.
  • Content should be substituted with pictures for easy understanding.
  • Do not use ambiguous terms or words that have more than one meanings.
  • Use simple and easily understandable sentences.
  • Screens should not be cluttered and busy. The busy and cluttered designs will be over whelming to users with autism.
  • Clearly differentiate the links and the text on the page. Users should not be guessing for the links.
  • Be careful with moving, blinking, scrolling and auto-updating content. There should be a mechanism to control them.
  • Provide clear labels and instructions while filling the forms.
  • Having features such as autofill , auto complete etc. helps while filling forms.

Related Links

aria-rowspan property

aria-rowspan property defines the number of rows a cell spanned within a table, grid or a treegrid. Use host attribute equivalent if available. If both the host language equivalent and aria-rowspan property are defined user agents have to pick the value expressed through the host language attribute and expose it to assistive technologies.

Content authors must set the value of aria-rowspan greater than or equal to 1 and less than or equal to total number of rows of the table. The exact value should be the number of rows the cell is spanned.

Aria-rowspan property used in roles

Values of aria-rowspan property

The value of aria-rowspan property should be an integer greater than or equal to 1 and less than or equal to total number of rows in the table, grid or treegrid. In other words the value should be equal to the total number of cells the author want to span.

Related Links

 

1.4.10 Reflow

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

Description

People with low vision typically enlarge the text to read the content on the screen. With a 100% scaled width to the content is usually displayed in 2 or 3 columns. When the user uses the browser zoom functionality to enlarge the text, the content reflows and is displayed in a single column. When the content reflows, users  will have difficulty to scroll both horizontally and vertically.

Allowing to scroll the page only in one direction even when browser zoom is set to 400%  will be helpful for low vision users. This success criteria 1.4.10 reflow exactly recommends it. Enlarging the text will allow the low vision users to clearly look at each character and reflow is useful to track the content they are reading. It will be often difficult for low vision users to get to the exact next line after reading through the end of previous line. With reflow enabled tracking becomes easy.

Responsive web design is similar to supporting reflow. The idea is to fit the content within the boundaries even when the user zoom to 400%. Allow the user to read the content scrolling only in one direction. The spacing and the placement of the elements  may be changed but the content or functionality must not be lost.

This is similar to a responsive design. When an URL is viewed on a desktop it may display all the navigation items but the same URL when viewed on a tab it may show the navigation items as accordion and on a mobile it may display as a hamburger menu.

 

Exceptions to 1.4.10 reflow

Few content elements loose the meaning when viewed only in one direction. Such situations and elements are exempted from this success criteria. Examples of content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content

 

Who benefits with 1.4.10 Reflow

Users with low vision benefit with content reflow.

Points to remember

  1. One direction scrolling does not always mean vertical scrolling. The content with language written vertically on the screen requires horizontal scrolling when the content reflows.
  2. The maximum zoom level to check for reflow in this success criteria is 400%.
  3. When user zooms up to 400% content should demand user to scroll only in one direction. The content should not be hidden or overlapped, functionality and elements on the page should not be missed.

More Information

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which are designed to scroll horizontally (e.g. with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024px at 400% zoom.

Related links

How To Make Live Chat Accessible

Live Chat is the buzz word in the modern communication system. It may be a  retail business that want to reach their customers or government department that want to solve its citizens problems. Any business or an organization that reaches the customers through phone and email goes a step further. The live chat is an instant and more convenient way to answer the customer queries.

The modern live chat services are not only the instant chatting systems but can also be majorly automated using predetermining the content + machine learning + artificial Intelligence. The human intervention can be largely minimized.

The wide platforms these live chats can be deployed is another opportunity to reach as many customers as possible. Apart from websites and mobile apps, the live chat data can also deployed on applications such as Google assistant, facebook messenger etc  . While the businesses consider reaching wider customers, it is also important to meet the customer’s requirements in using the live chat.

In this article we want to highlight the needs of commonly ignored customer base i.e. customers with disabilities. In other words, this article will highlight the best practices to make a live chat accessible to keyboard only, screen reader, low vision and various other users with disabilities.

Best practices to make a live chat accessible

Though not exhaustive list but here are few best practices to make a live chat accessible.

Choosing the platform

The high-level objective is to allow the content authors to customize the UI. Not all platforms allow to make customizing the UI of the chat widget. In case the platform supplied UI is not accessible, content authors should be able to tweak the code. May it be adding a proper heading structure or labeling the buttons. So, ensure that the platform you choose for the live chat allows the content developers to make relevant accessibility changes in the user-interphase.

Keyboard access

All the user interphase elements must be keyboard accessible. Users who depend only with a keyboard must be able to move between all actionable elements. These include the UI elements on the widget as well as the buttons or links that are part of the conversation. An automated chat bot may ask the user

“Bot says The next flight to LA from SFO is in an hour, do you want to know the details?


In the above message Yes and No are buttons and user should be able to move focus to those buttons with the keyboard and access them.

The other UI elements on the live chat widget may include “Send button”, email transcript, upload/ share, emojis etc.  Of course   the message text box also need to be operable with keyboard alone.

Proper labels

Users with assistive technologies such as screen readers need proper labels for all user-interface elements. If the platform does not provide accessible labels or labels themselves, content authors should provide them. The labels for the buttons convey the action associated with them. Having visible labels are useful for everyone, however if the usage of the element is conveyed in any other visual means to a sighted user, aria-label can be served as a substitute.

Proper labels or alternate text is required for other  features such as emoticons. The images shared by the bots also need proper alternate text. Providing a provision to add captions to the documents, images or videos uploaded by the user will be an added advantage.

Navigation

Majorly the user interacts in the chat history pane and the message text box. A screen reader user should be given an opportunity to switch between these two panes easily and quickly. It can be a simple tab and shift+  tab or by using access keys. Few chat bot developers also provide access keys to read recent messages for a screen reader user. Providing such access keys may not be harm or may not add much value as user should remember few more commands but can read the recent messages as many times as he need without navigating away from the message text box.

Screen reader users must be able to navigate as they need in the history pane. The text navigation commands such as left arrow, right arrow, control left arrow, control right arrow, up arrow, down arrow etc should work as usual in the history pane.

Reading the alerts and recent messages

Many dynamic changes happen from the time user initiates the live chat until the conversations is end. If the human agent is responding from the other side, user may have to wait in the queue for the agent. The  status of the queue will be dynamic, the agent may be typing or may stop typing, user would have received a message from the agent or automated bot. All these are the dynamic messages that are displayed on the screen. No matter where the screen reader users current focus is these dynamic changes and updates need to be informed to the user. Some of these changes may also be only visual changes but convey important information to the user.

Aria-live property can be added to the dynamic updates for the user to understand the changes in the live chat. The specific aria-live properties such as aria-live=”assertive” or aria-live=”polite” can specifically address many of these problems. The aria-label property can address labeling the visual changes that happen on the screen and convey the message to the user at the right time with aria-live.

Other considerations

  • Usually the agent name or the word bot will be appended before the message from the agent side and user name will be appended for the message from the user side separating with a : (Collen). It can be made more conversational with the words Agent name says, user name says (replace agent name and user name with the actual names).
  • Allow the user to switch off the time stamp. Many times the time stamp is not much important in the conversation but it adds lot of verbiage disturbance when the screen reader reads each message. If the user be able to switch off the time stamp , users who are not comfortable with that verbiage can benefit.
  • Visually differentiating the normal text and buttons  or links in the chat history. In modern chat bots agents or users can share links or the bot can do a conversation with simple questions such as yes , no. These actionable elements should be easily differentiated with its surrounding text in addition to the keyboard access to them.
  • Adhere all other applicable W3C WCAG  guidelines and chat bot best practices.

JAWS 2019 Download and What’s New

JAWS, Job Access With Speech is the popular and commercial screen reading software for Windows Operating System. JAWS being the old and reliable screen reader, it is preferred choice for many end users and also used for accessibility testing by many organizations. JAWS is a Freedom Scientific product.

JAWS 2019

JAWS 2019 is released in October 2018. Here are few new features in this release.

  • JAWS 2019 now collect anonymous usage information. Users can accept or deny the collection of such information used by Freedom scientific to enhance the user experience. Users can switch this on or off anytime from Setting center> Default settings > Miscellaneous> Submit Anonymous Usage Data.
  • The multiline edit field can now be announced in JAWS 2019. Enable it from Miscellaneous group under Setting Center.
  • Audio ducking is now available for Windows 10 spring 2018 creators update. This is not enabled by default. Enable it from  Speech settings page under Setting center.
  • JAWS 2019 now have improved support in Office 365 applications.
  • Here is the complete list of updates.

JAWS 2019 Download

From JAWS download page, you can download the latest version. The free version runs for 40 minutes and the computer need to be restarted to use it again. If you have purchased JAWS after September 2018, you will be eligible to receive JAWS 2019. Please contact Freedom Scientific to know how to upgrade your license.

What is FS Cast

Freedom scientific publishes a pod cast called the FS Caste every month. Download and listen. FS Cast 158 to know more information on JAWS 2019.

Remember all the JAWS licenses are for accessibility testing or commercial use. Look at the licenses page to find the right one for you.

 

Related Links