Digital A11y

sathish kumar

Understanding SC 1.3.1 Info and Relationship

Last Modified on by Leave a Comment

Information, structure, and relationships conveyed through presentation can be
programmatically determined or are available in text. (Level A)

This success criterion requires that presentation cannot alone show the info, structure and relationship. Also, it stresses that the info, relationship and the presentation must be separated when creating websites.

What do we mean by presentation?

A large text which is bolded says “Chapter1: Introduction to Algebra” followed by a blank line and then texts. What does this signify here? The answer is, the text “Chapter1: Intro to Algebra” is visually styled as the section heading of the succeeding paragraphs. Does the screen reader user know this info and relationship?
On the left side, the label reads “User Name” and on the right side, there is an input field. Sighted users understand the purpose or the name of the field as “User Name” through the position. While tabbing to the same field, would a blind screen reader user know this?
This is the same case with a group of same type of elements or links that constitute a visual list or a group of fields that have a common purpose or an arrangement of data that constitutes a visual table.

What do we do now?

All that we need to do is while styling the contents visually to convey info and relationship, we must add the semantic markup that is available in the technology that we work on. To break it further:
Mark the headings that visually look like headings using either h1 to h6 tags in HTML or use ARIA role to do so. Where the data is arranged to indicate a tabular format, ensure appropriate table markup is used and row header and column header are properly marked up to establish the info and relationship between cells. Where there are visual lists of elements or contents, use ordered or unordered list markup respectively. Where there are group of related form controls, provide semantic grouping and label that is programmatically associated. Where there are form controls, programmatically associate their visible labels with them. Where there are quotations or highlighted texts, use appropriate semantic markup.

Points to ponder

  • Emphasis – Use <em> and <strong> instead of using Italics and Bold texts to highlight important texts; use <blockquote> to mark quotations
  • Headings – Provide hierarchically logical heading markup for the contents
  • Table – Provide HTML table markup and provide column headers for simple tables and column headers and row headers for complex tables
  • Table – When using nested tables, consider the possibility of breaking the content into logical individual tables instead of nested tables
  • Forms – Provide programmatic association of visible labels or appropriate accessible names to all the form elements
  • Lists – Markup the contents that logically fall into list as ordered or unordered list. Do not put huge text blocks which is otherwise are paragraphs ass lists
  • Grouping – Provide grouping and group level labels to mark a group of form elements like radio buttons or checkboxes; use <fieldset>  and legend to achieve grouping and group level association for native form elements; use ARIA to achieve the same where custom form controls are used
  • Use native semantic markup frequently and ARIA sparingly.

References

Understanding Success Criterion 1.3.1

Continue reading Understanding SC 1.3.1 Info and Relationship

Understanding SC 1.3.3 Sensory Characteristics

Last Modified on by Leave a Comment

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A)

This success criterion requires that instructions or information to understand or operate the web content do not use only visual or auditory clues. Such clues include shape, size, location, orientation and sound clues. This doesn’t mean use of shape and/or location is discouraged altogether as using shape and/or size is an effective way of providing information. Similarly, in some of the languages, ‘above’ and ‘below’ mean the immediate ‘previous’ or ‘after’ contents. In such cases, if the reading order is correct, then it is fine with statements like “Choose one of the options below”.
Note that this success criterion applies only to digital content and not to physical devices such as ATMs or check-in kiosks where the shape of the physical buttons (tactile clues) must be understood in their form.

For Whom it benefits

  • People who are blind or low vision who cannot see the shape, size or location
  • People with cognitive disabilities who cannot understand shape, size or location as clues
  • People who are deaf and deaf-blind who cannot understand audio clues.

Examples that would fail

  • A calendar widget where the current date and the selected date have a diamond shaped glyph alone to indicate so
  • In a shopping flow, the completed steps have an (X) icon alone to indicate so
  • In an online learning site, while doing exercises, completion of steps is conveyed with a sound of the bell alone
  • In an online survey, the instruction says “click the triangle button at the bottom right to go to the next page”

How do I address this?

To address this, simply use more than one clue to instruct or inform the users. Using a combination of shape/size/location/orientation along with color/text would take care of all the users’ needs.

Points to ponder

WCAG 2.1: What’s up with Accessibility Guidelines

Last Modified on by 5 Comments

The fifth of June 2018 saw a lot of buzz in the world of digital accessibility, social media and in blogs. What was this all about? Well, many may know; if no, wake up to hear, read and see Web Content Accessibility Guidelines 2.1 becoming the published recommendation. Yes, on June 5, 2018, W3C published WCAG 2.1 as its recommendation. While accessibility professionals and disability advocates rejoice on this, the businesses and even professionals too may have so many questions. It’s just an attempt to clear the mystery.

How does WCAG 2.1 differ from WCAG 2.0?

WCAG 2.1 does not differ from WCAG 2.0 in so many counts. In fact, WCAG 2.1 has taken all the success criteria of WCAG 2.0 in verbatim (word by word) and holds them intact. The conformance levels (A) (AA) and (AAA) also remain the same. In other words, a website has to meet WCAG 2.0 in order to meet WCAG 2.1. But the new guidelines don’t stop there. WCAG 2.1 introduces 17 new success criteria in order to address the user needs of low vision, cognitive and mobile users.
The new success criteria are carefully drafted after an extensive research on user needs. So they all come up with personas for better understanding and implementation.

What’s behind this?

WCAG 2.0 will be completing its 10th anniversary this December as it became a recommendation on December 11, 2008. In these 10 years, many have felt that a lot has changed in the technology landscape and in the needs of the users too. For example, WCAG 2.0 did not address as many needs of users with low vision and users with cognitive disabilities as it addressed other user groups like screen reader users. Besides, the web has entered into our palm with the hand-held mobile devices and that has imposed a lot of challenges in the accessibility canvas. To address all these gaps, the Web Accessibility Initiative (WAI) of W3C with its task forces have brought out the minor top-up called WCAG 2.1.
WCAG being as explicit as ever has created this update in over a year and a half, publishing its first draft in Jan 2017, publishing its final draft in Jan 2018, making it a proposed recommendation in April 2018 and after an extensive review, finally declaring as the published recommendation on June 5, 2018. Even though it is a short span, WCAG 2.1 is strong enough in its technical explicitness and addressing user needs which are both futuristic and viable.

The following tables throw a glimpse of the new Success Criteria for our understanding and a quick reference:

 

1.3 Adaptable

Success Criterion Description For whom it’s meant Conformance Level
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. Wheelchair users who mount their mobile devices and view the content in one specific orientation AA
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.
 People with reading disabilities who cannot remember so much of numbers and data and type them out AA
1.3.6 – Identify Purpose In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined. People with cognitive disabilities such as language disabilities who use software to identify common navigation links with symbols AAA

 

1.4 Distinguishable

Success Criterion Description For whom it’s meant Conformance level
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.

 People with low vision who have to resize the text to 400% and still be able to read without having to scroll right/left to read each line or up and down. AA
1.4.11 – Non-text Contrast The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  •   User Interface Components: Visual information used to indicate states and boundaries of user interface components, 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.
 People who have contrast sensitivity and need to see icons, borders of the user interface and graphs even in the sunlight AA
1.4.12 – Text Spacing In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

  •  Line height (line spacing) to at least 1.5 times the font size
  • Spacing following paragraphs to at least 2 times the font size
  • Letter spacing (tracking) to at least 0.12 times the font size
  • Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can confirm using only the properties that exist for that combination of language and script.

 People with reading disabilities and need enough spacing between characters, words, paragraphs, and lines AA
1.4.13 – Content on hover or focus Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus unless the additional content communicates an input error or does not obscure or replace other content
  •   Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing
  •  Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is

 People with low vision who use magnification and need to move to the additional content and get away from it AA

 

2.1 Keyboard Accessible

Success Criterion Description For whom its meant Conformance Level
2.1.4 – Character Key Shortcuts If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:

  • Turn off: A mechanism is available to turn the shortcut off
  • Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc).
  • Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.
 People who use speech recognition software and dictate their tasks to the system d not activate something by saying the single letter keyboard shortcuts. A
2.2.6 – Timeouts Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions. People with cognitive disabilities, blind and low vision who take time to read. AAA
2.3.3 – Animation Triggered by Interaction Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed. People who have cognitive, neural disorders and experience dizziness and nausea due to motion animation. AAA
2.5.1 – Pointer gestures All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. People with limited finger movements, who use large cursors and who have low vision A
2.5.2 – Pointer Cancellation For functionality that can be operated using a single pointer, at least one of the following is true:

  • No Down-Event: The down-event of the pointer is not used to execute any part of the function
  • Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion
  • Up Reversal: The up-event reverses any outcome of the preceding down-event
  • Essential: Completing the function on the down-event is essential.
 People with motor disabilities who may trigger actions accidentally by touching an element. A
2.5.3 – Label in Name For user interface components with labels that include text or images of text, the name contains the text that is presented visually. People who use speech recognition software and would activate elements based on the text label visible on the screen. A
2.5.4 – Motion Actuation Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:

  • Supported Interface: The motion is used to operate functionality through an accessibility supported interface
  • Essential: The motion is essential for the function and doing so would invalidate the activity.
 People who have motor disabilities and cannot interact with functionalities through motion. A
2.5.5 – Target Size The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

  • Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels
  • Inline: The target is in a sentence or block of text
  • User Agent Control: The size of the target is determined by the user agent and is not modified by the author
  • Essential: A particular presentation of the target is essential to the information being conveyed.
 People with motor disabilities like hand tremor need a bigger target size or clickable area. AAA
2.5.6 – Concurrent Input Mechanisms Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings. People with repetitive stress injury who need to use different input devices like keyboard or styles as and when they want. AAA

 

4.1 Compatible

 

Success Criterion Description For Whom It’s Meant Conformance Level
4.1.3 – Status Messages In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus. People who are blind and low vision and use screen reader need to know the status updates that are visual and textual without moving the focus. AA

WCAG 2.1 is futuristic than ever before that some of the requirements need the development of technologies and more specifically within the markup languages. So how it is going to turn the a11y table around is something we all have to wait and watch.
Who Knows! The scope of assistive technology may be extended further to assist people with disabilities in a robust way. With all these requirements and evolving assistive technology combined with the power of AI, the accessibility may spread its wings into hitherto un-flown skies. Let’s hope for the best!

Continue reading WCAG 2.1: What’s up with Accessibility Guidelines

Understanding SC 1.4.3 – Contrast Minimum

Last Modified on by 1 Comment

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text
    Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental
    Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes
    Text that is part of a logo or brand name has no contrast requirement.

This success criterion requires that the texts and image of texts that are regular in size meet the color contrast ratio of 4.5:1 against their background color. For the large or large scale texts, this SC mandates at least 3:1 against their background. This requirement solely relies on the content authors, designers and the developers and the user agents or contrast enhancing assistive technology, be it at the system level or independent.

Differentiators for the regular/large text

Based on different research and books, WCAG defines a large text which uses 18 PT font or 14 PT bold text. To put into CSS pixels, 1 PT=1.333 CSS PX and therefore, 14 PT bold and 18 PT are 18.5 PX and 24 PX approximately. Anything below these font size requirement is considered regular text and therefore must meet 4.5:1 ratio.
These specificities are arrived at so that it covers people with moderately low vision who don’t use any assistive technology to enhance the contrast and people who have color deficiency too. Moreover, large texts are easily readable in lower contrast.

Exceptions

The contrast minimum
Excludes the following in meeting the contrast requirements:

  • Incidental or decorative texts that are part of inactive components or invisible to users
  • Brand names and logo type images
  • Texts that are part of pictures that contain most visuals. (the sign of the painter on a painting)

Points to ponder

  • Develop the style guide in such a way that all the texts that are crucial meet the minimum contrast
  • Choose color schemes that are contrastive enough for everyone to see and read
  • Provide a “Contrast” mode with the help of alternative CSS if you can’t
    Design and develop the content with the minimum contrast requirement.

Let your site be a feast to the eyes and not a strain!

References

Understanding Success Criterion 1.4.3

Continue reading Understanding SC 1.4.3 – Contrast Minimum

Our Take Away from WebAIM’s Web Accessibility Practitioners Survey #2 Results

Last Modified on by Leave a Comment

In April 2018, WebAIM conducted the Survey of Web Accessibility Practitioners and published the results in the beginning of June. This is a follow-up survey to the one conducted in 2014. The results are quite surprising and in some ways, healthy too. We’ll discuss the results and our take-away in general.

Practitioners’ demography

724 practitioners and accessibility professionals participated in this survey. The survey shows the trend of accessibility professionals who are older, well-paid and educated than that of the people working in other broader fields that include web design and development. When it comes to gender, men outnumber women in general but women professionals are more (39.5%in accessibility space than that of any other fields (6%) around us.

Practitioners with disabilities

Though the practitioners without disabilities (73.6%) outnumber the practitioners with disabilities (26.4%) in numbers, the accessibility space shows more number of people with disabilities as practitioners than that of any technical field. WebAIM also notes that the percentage of people with disabilities has risen from 21.8% in 2014 to 26.4 in 2018.

Salary

The result shows that the men are paid better than the women in the field although this gap has decreased. Notably, the women are paid better in accessibility field than their men counterparts in other fields. When it comes to the payment to people with disabilities, they are still underpaid compared to their non-disabled counterparts despite the gap decreasing.

Browsers and Operating Systems

As per the result, the captured data shows that as many as 52.5 respondents used Chrome to take the survey which shows Chrome as a likely winner. But when it comes to people with disabilities, the usage of Chrome is still less even though it has grown 38% when compared to 16% in 2014. Windows is the likely winner in the OS category both among practitioners with and without disabilities despite Mac gaining its momentum slowly.

Screen Readers

When it comes to testing with screen readers, NVDA, VoiceOver and JAWS hold the respective ranks. But practitioners with disabilities still prefer JAWS over NVDA and VoiceOver despite the popularity of JAWS decreasing or the popularity of NVDA and VoiceOver increasing among them.
To know more about browsers and screen readers combination, read our post

Automation tools

Wave, aXe, online color contrast checkers, bookmarklets and scripts are among the wide variety of tools used by the practitioners. Notably, they are all free tools.

Other interesting facts

There are some other interesting facts:

  • While individuals feel that accessibility is “the right thing to do”, organizations feel different
  • Accessibility is not taught in the mainstream education as widely as other fields
  • As Individual respondents, all feel the positive impact that they create on the lives of people with disabilities.

Our Take Away

The field of accessibility is by far the most inclusive space compare to other industries and technology spaces. The participation of women and people with disabilities has made this possible. Yet, here too women and people with disabilities are not at par with their counterparts in terms of payment. This equality must be realized sooner by the organizations and businesses when they engage these segments. On the other hand, the survey gives us a positive note that the websites are becoming accessible day by day whether it is for a moral reason or a business reason. This success can be attributed to the combined workforce of people with and without disabilities.
As the survey indicates, The awareness of accessibility must be imparted at an early stage like formal schooling. Only then, the future innovations and products would be inclusive and accessible at their incubation itself. Also, AT vendors and other device/OS developers have to make their products more robust, accessible and usable so as to increase the productivity of people with disabilities in all walks of life.

For complete survey results please refer WebAIM: Survey of Web Accessibility Practitioners #2 Results

Continue reading Our Take Away from WebAIM’s Web Accessibility Practitioners Survey #2 Results

Understanding SC 1.4.4 Resize Text

Last Modified on by Leave a Comment

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA).

This success criterion requires that the text – both static and that are part of user interface components that are visible to the users must be resizable (scalable) to 200% without the help of any assistive technologies like screen magnifiers. Even though the user agents like the browsers that meet UAG (User Agent Guidelines) 1.0 bear the responsibility of scaling or zooming the text up to 200%, it is the authors responsible for providing that support to the browsers.

What do I do as the content author?

The authors or developers have to ensure:

  • The content is scalable to 200% without any loss of information or functionality
  • The content or texts do not overlap or become not available to the users
  • The user interface components do not become unusable or inactive.

Who Benefits?

Users with low vision or limited vision who consume the content without any assistive technology but use browsers’ zoom functionality alone.

Points to ponder

  • Where browsers do not support or provide zoom functionality (IE6 as an example), provide alternative CSS for scaling purpose
  • When zoomed to 200%, ensure there is no much of horizontal scrolling ( a best practice)
  • Where lengthy user interface components or content like subject line of an email is there, truncate and provide ways along with the instructions to access the content.
Continue reading Understanding SC 1.4.4 Resize Text