Digital A11y

Understanding SC 1.1.1 Non-text Content

Last Modified on by Leave a Comment

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
  • CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

This success criterion requires that any
non-text content that includes active images (imagelinks), area maps,
informative images, complex charts and graphs, 
CSS images, decorative images, input image controls, CAPTCHA and audio
and video contents must have text alternatives. Out of these non-text elements,
prerecorded audio and video, live audio and video are specifically handled in
SC guideline 1.2.

What types of images are we talking about here?

We are talking about:

  • Image links: images buried inside anchors and redirect you to destinations
  • Area maps: Areas that trigger different actions/different destinations
  • Informative images: images that are meant to inform users
  • Purely decorative: images that are here to decorate your pages and appeal to users
  • CSS images: Self explains Input type=”images”: That submits a form
  • CAPTCHAs: Confirms whether we are human
  • Audio and video file images: Images that play audio or video contents
  • Complex charts and graphs: explains themselves

How are we to fix them?

WCAG’s sufficient techniques are not exhaustive as new ways would emerge. Yet, we suggest you have a look at them.

But here are a few of the for you:

  • Alt attribute: Works on img tags; let the values be meaningful and impregnated with equivalent purpose of the image!
  • Role=”img” and aria-label: works on anchors, CSS images
  • Title attribute: Works on imagelinks
  • Role=”presentation” or alt=””: Works on decorative images
  • Value or name attribute: Works on input type=”image”.
  • Plane text on the page: Every media content would accept and would users far and wide.

Points to Ponder

  • Always provide alternative options like audio or OTP (one time password) for CAPTCHA.
  • Always provide textual summary or description for complex charts and graphs apart form shot alt text.
  • Always use title attribute for additional info while using alt attribute in image links.

References

Understanding Success Criterion 1.1.1

Continue reading Understanding SC 1.1.1 Non-text Content

Understanding SC 1.2.1 Audio-only and Video-only (Prerecorded)

Last Modified on by Leave a Comment

1.2.1 Audio-only and Video-only (Prerecorded): For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such: (Level A)

  • Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
  • Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.

This success criterion requires that audio-only & video-only content are provided with alternative method of conveying information. A text transcript can be provided for audio track & text transcript or audio track can be provided for a video that doesn’t have an audio. Transcripts help all kind of users like blind, hard of hearing, deaf & deaf blind to perceive content & understand it easily.
An example of audio-only content is podcast. A video-only content is a video that is silent.

Points to Remember

  • Provide text transcripts for audio tracks.
  • Provide either text transcript or an audio track for a silent video.
  • If an audio is provided for video then text transcript is not required. (Exception)

References

Understanding Success Criterion 1.2.1

Continue reading Understanding SC 1.2.1 Audio-only and Video-only (Prerecorded)

WAI-ARIA 1.1 Cheat Sheet

Last Modified on by 1 Comment

WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich Internet Applications. WAI-ARIA help achieve the accessibility of complex widgets & dynamic content developed with Java Script, HTML, Ajax & other related technologies. Since March 20th 2014 WAI-ARIA is a W3C recommendation & it is being adapted widely by the developer community.

You could think of ARIA as a suite of attributes to be included in your usual HTML code, these additional attributes will help the assistive technologies understand the relationships, states & properties in user interface components. In this way ARIA helps developers create applications that are usable by people with disability. ARIA attributes communicate the role, state & property symantics to assistive technologies via the accessibility API s implemented in browsers.

ARIA Roles

ARIA Roles
Roles  

Summary

 Reference
alert A message with important, and usually time-sensitive, information. Alert
alertdialog A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. alertdialog
application A region declared as a web application, as opposed to a web document. application
article A section of a page that consists of a composition that forms an independent part of a document, page, or site. article
banner A region that contains mostly site-oriented content, rather than page-specific content. banner
button An input that allows for user-triggered actions when clicked or pressed. button
cell A cell in a tabular container. cell
checkbox A checkable input that has three possible values: true, false, or mixed. checkbox
columnheader A cell containing header information for a column. columnheader
combobox A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. combobox
command A form of widget that performs an action but does not receive input data. command
complementary A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content. complementary
composite A widget that may contain navigable descendants or owned children. composite
contentinfo A large perceivable region that contains information about the parent document. contentinfo
definition A definition of a term or concept. definition
dialog An application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. dialog
directory A list of references to members of a group, such as a static table of contents. directory
document A region containing related information that is declared as document content, as opposed to a web application. document
feed A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list. feed
figure A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable. figure
form A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. form
grid An interactive control which contains cells of tabular data arranged in rows and columns, like a table. grid
gridcell A cell in a grid or treegrid. gridcell
group A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. group
heading A heading for a section of the page. heading
img A container for a collection of elements that form an image. img
input A generic type of widget that allows user input. input
landmark A region of the page intended as a navigational landmark. landmark
link An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. link
list A group of non-interactive list items. list
listbox that allows the user to select one or more items from a list of choices listbox
listitem A single item in a list or directory. listitem
log A type of live region where new information is added in meaningful order and old information may disappear. log
main The main content of a document. main
marquee A type of live region where non-essential information changes frequently marquee
math Content that represents a mathematical expression. math
menu A type of widget that offers a list of choices to the user. menu
menubar A presentation of menu that usually remains visible and is usually presented horizontally. menubar
menuitem An option in a set of choices contained by a menu or menubar. menuitem
menuitemcheckbox A menuitem with a checkable state whose possible values are true, false, or mixed. menuitemcheckbox
menuitemradio A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time. menuitemradio
navigation A collection of navigational elements (usually links) for navigating the document or related documents. navigation
note A section whose content is parenthetic or ancillary to the main content of the resource. note
option A selectable item in a select list. option
presentation An element whose implicit native role semantics will not be mapped to the accessibility API. presentation
progressbar An element that displays the progress status for tasks that take a long time. progressbar
radio A checkable input in a group of radio roles, only one of which can be checked at a time. radio
radiogroup A group of radio buttons. radiogroup
range An input representing a range of values that can be set by the user. range
region A large perceivable section of a web page or document, that is important enough to be included in a page summary or table of contents. region
roletype The base role from which all other roles in this taxonomy inherit. roletype
row A row of cells in a grid. row
rowgroup A group containing one or more row elements in a grid. rowgroup
rowheader A cell containing header information for a row in a grid. rowheader
scrollbar A graphical object that controls the scrolling of content within a viewing area. scrollbar
search A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. search
section A renderable structural containment unit in a document or application section
sectionhead A structure that labels or summarizes the topic of its related section. sectionhead
select A structure that labels or summarizes the topic of its related section. select
separator A divider that separates and distinguishes sections of content or groups of menu items separator
slider A user input where the user selects a value from within a given range. slider
spinbutton A form of range that expects the user to select from among discrete choices. spinbutton
status A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. status
structure A document structural element. structure
tab A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. tab
tablist A list of tab elements, which are references to tabpanel elements. tablist
tabpanel A container for the resources associated with a tab, where each tab is contained in a tablist. tabpanel
textbox Input that allows free-form text as its value. textbox
timer A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point. timer
toolbar A collection of commonly used function buttons or controls represented in compact visual form. toolbar
tooltip A contextual popup that displays a description for an element. tooltip
tree A type of list that may contain sub-level nested groups that can be collapsed and expanded. tree
treegrid A grid whose rows can be expanded and collapsed in the same manner as for a tree. treegrid
treeitem An option item of a tree treeitem
widget An interactive component of a graphical user interface (GUI). widget
window A browser or application window. window
none An element whose implicit native role semantics will not be mapped to the accessibility API. none
term A word or phrase with a corresponding definition. term

[Read more…] about WAI-ARIA 1.1 Cheat Sheet

Continue reading WAI-ARIA 1.1 Cheat Sheet

The WEBAIM One Million and The Accessibility Maturity of the Web World

Last Modified on by 2 Comments

Laws are in place; policies are published; subject matter experts are increasing every day; commercial and non-profit organizations are auditing, consulting and certifying. All are towards the one thing called web accessibility advocacy. Given these factors in 2019, has the accessibility of websites matured? Let’s find out!
The WebAIM One Million
In as recent as February 2019, WebAIM at www.webAIM.org published a study that specifically focused on evaluating the accessibility of one million home pages of a million sites mentioned in Majestic Millions List. This study was conducted using WebAIM’s Wave automation API and other tools. Despite automation tools being able to detect only 25% of accessibility errors as claimed in the study, the facts and the results are quite striking and interesting.

Interesting Facts from the Study

As mentioned earlier, the study used Wave automation API to detect accessibility errors based on WCAG 2.0 AA conformance. The study chose the home pages as they are ‘Gateway into the sites’ and a home page can tell you a lot of the rest of the site.
When it comes to WCAG failures, here are the results in short:

  • 85% of the home pages fail color contrast
  • 68% pages fail missing alternative text for images
  • 58% fail empty links
  • 52.8% of pages fail missing form labels
  • 33.1% pages are missing document language
  • 25% of pages fail empty buttons.

The facts do not end here. The study predicts that the users with disabilities would encounter error in one in every 13 elements that they engage with in the home pages themselves.
Further narrowing the results, the pages were categorized using their domains and thus narrowing down to the countries. In this, sites with .gov, .edu, .us which are affiliated to the federal government fair better as they are monitored continuously. .org fairs much better than .com(s). Also, the study suggests that the sites from countries like Germany, Japan, Netherlands, Australia and Canada stand out better than their counterparts like Russia and Italy.

ARIA

In general, the use of ARIA outpaces the use of native HTML elements like images and headings. But this doesn’t mean that the home pages are accessible. On the contrary, the home pages that use ARIA extensively average 11.2 more detectable errors than their counterparts. This is not to blame the presence of ARIA but the misuse or the abuse of it.

Conclusion

All in all, the study presents an abysmal state of the web accessibility maturity of the web world. The haunting fact is that 97.8% of home pages have detectable errors which are likely to be WCAG 2.0 failures. If this the state that faces us just out of automation, one could imagine how it would be if the manual test results come out.
The fact that 85% of pages fail color contrast suggests that the designers and style guide creators never concentrate on readability and viewability of their home pages which is far from accessibility. Then there are other factors like missing alternative texts, meaningless alt texts, unstructured headings, keyboard navigation and above all the use of ARIA replacing the native HTML mark up. This concludes that organizations are not yet ready to bake in accessibility in their web pages, web apps and their products. Even if they do so, the designers don’t design with accessibility in mind; further, developers don’t use semantically appropriate language markups; testing for accessibility errors is not part of SDLC and to top it all all of these entities lack the awareness of accessibility itself.
To conclude, the woods are not lovely but dark and deep. In the maturity of accessibility, there are miles to go before all of us sleep!

Read the complete study here: WebAIM Million

Related Articles

Continue reading The WEBAIM One Million and The Accessibility Maturity of the Web World

Understanding SC 1.2.2 Captions (Prerecorded)

Last Modified on by Leave a Comment

1.2.2 Captions (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. (Level A)

This success criterion intends to provide captions for all the videos that have audio in the form of dialogues, voiceover and other sound clues that combinedly convey information or help to understand the video. Captions, also known as subtitles or CC (Closed caption) in abbreviated form are most helpful for deaf, hard of hearing, deaf blind & users who don’t follow the video and depend on captions. Captions include not only the dialogue but also information such as speaker & non-speech information conveyed through sound which is meaningful like the claps of audience and laughter.

Points to Remember

  • Provide captions for the video that has audio.
  • If video is the alternative for text content then it doesn’t need captions. (Exception)
  • If possible provide captions in multiple languages as this helps users to choose the language they can follow.

References

Understanding Success Criterion 1.2.2

Continue reading Understanding SC 1.2.2 Captions (Prerecorded)

Axe Enters into new forays

Last Modified on by Leave a Comment

If you ever wonder when the a11y community would have a standard rule set for native Android and iOS apps, well, you may rejoice now!
In a recent joint press release at CSUN 2019, Deque Systems and Microsoft have announced their partnership to release Axe for Android and iOS. As Axe for native apps are going to provide a standard ruleset for native a11y testing, it is open source too. Further, this move enables the entire accessibility community to review, modify and come up with innovative a11y tools in the days to come.
The news does not end here. Adopting Axe into its fold, Microsoft has gone ahead to create a powerful a11y testing tool Insights. Now, Microsoft also has announced that its a11y tools based on axe-core named Axe for Windows as open source. Both these announcements have brought the mission of accessibility one step closer with the powerful contribution from the community.
Axe has evolved to be adopted by many tech giants like Google and Microsoft as part of their accessibility suite. Now that Axe for Windows and Axe for native apps are seeing the day light, what with Microsoft and Deque joining hands to collaborate alongside the community, let’s wait and see how these unfold new tools that make building accessible apps and websites easier and robust!

Continue reading Axe Enters into new forays