Skip to main content

Posted in

June

2018

Accessibility inspector is now available in Firefox Developer Tools

Starting version 61, Mozilla Firefox comes with Accessibility Inspector within developer tools. However, Accessibility Inspector is not enabled by default reason being shown that as of now while accessibility inspector is turned on, users are experiencing some performance issues using other developer tools.

It would be a great friend to developers to see what information gets exposed to assistive technologies and what is missing. So that developers would know instantly what they would need to fix. Here is what is said in the announcement on .

The accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what’s missing or otherwise needs attention.

As mentioned earlier, accessibility inspector is not active by default and here is how to activate the same.

  • Open Tools menu -> Web Developer -> Inspector
  • Choose three dots button on the right side top or using F1 key; this will minimise DevTools and open help menu
  • Choose Settings
  • Under Default Developer Tools section, Check “Accessibility” checkbox.
  • Now user will see “Accessibility” in the inspector tabs with a message saying “Accessibility inspector is not active by default and causes some performance issues. Turn off Accessibility inspector before using other DevTools” with a button “Turn ON Accessibility inspector
  • Activate the button

That’s it; now Accessibility inspector is now available to use.

Features of Accessibility Inspector

Screenshot of Firefox Accessibility Inspector

On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:

  • Role — the role this item has on the page (e.g., pushbutton, or footer). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA role attribute.
  • Name — the name this item has on the page. Where this comes from depends on the element; for example, the name of most text elements is simply their textContent, whereas form elements’ names are the contents of their associated <label>.

On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:

  • name — the item’s name, as described above.
  • role — the item’s role, as described above.
  • actions — a list of the actions that can be performed on the item, for example a pushbutton would have “Press” listed, while a link would have “Jump” listed.
  • value — the value of the item. This can mean different things depending on the type of item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link’s value would be the URL in the corresponding <a> element’s href.
  • DOMNode — the type of DOM node that the item in the accessibility tree represents. You can click on the “target” icon that comes after it to select the node in the Page Inspector. Hovering over the “target” icon highlights the DOM node in the page content.
    DOMNode property in accessibility inspector with target icon highlighted
  • description — any further description provided on the element, usually by the content of a title attribute.
  • help — this is not implemented in Gecko, so it always returns an empty string. This will be removed from the inspector in Firefox 62 (bug 1467643).
  • keyboardShortcut — any keyboard shortcut that is available to activate the element, as specified in an accessKey attribute. Note that this works correctly as of Firefox 62 (bug 1467381).
  • childCount — the number of child items the current item has in the accessibility tree hierarchy.
  • indexInParent — an index value indicating what number child the item is, inside its parent. If the item is the first item inside its parent, it has a value of 0. If it is the second, it has a value of 1. And so on.
  • states — a list of the different accessibility-relevant states that can apply to the current item. For example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. For a full list of internal states, see Gecko states.
  • attributes — a list of all the accessibility-relevant attributes that are applied to the item. This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). For a full list of possible attributes, see Gecko object attributes.

Note: The exposed information is the same across all platforms — the inspector exposes Gecko’s accessibility tree, rather than information from the platform accessibility layer.

The Accessibility tab is fully keyboard-accessible:

  • You can tab between the Turn Off Accessibility Features button and left and right panels.
  • When one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).

In addition, a new context menu option is available to inspect accessibility inspector for an element. Read Mozilla Developer Network blog post for more details.

So dear Developers, now you have one more helping hand to consider accessibility right from the development stage.

Accessibility – a game changer: Presented at IBM

Recently I got an opportunity to present as part of Design Thinking series at IBM. Thanks to my good friend Suresh and his colleague Ajay for having invited me. Below is the deck that was presented.

Participants were pretty enthusiastic and shown a keen interest to start their journey into accessibility. We have discussed importance of accessibility, business case and a few things to care about accessibility. We have also made a few hands-on exercises such as browsing a few websites using keyboard alone, with screen reader and using assistive technologies on mobile devices.

Thanks again IBM team for having me. Good luck to your accessibility journey. Of course, for IBM this is not a beginning. they have been doing a fantastic work for many years.

Twitter for WordPress vs Accessible Twitter for WP plugins

While we are playing to re-build our website, we wanted to be sure we address accessibility to the best possible extent. Well, we are still working on it; there are still some challenges! This post is to illustrate how replacing one plugin has made a huge difference from color contrast prospective.

We always believe in using native products of a company as much as possible. So to display our our Twitter timeline, we have opted to use widget code generated by Twitter Developer Tools and added widget our side bar. When we ran aXe by Deque on our website, we found 49 colour contrast issues and 38 of them are causing from Twitter widget. It was very hard to fix all of those issues.

Then we have opted for WP Accessible Twitter Feed and though it has some less features like we cannot engage our visitors directly from website by letting them use features like Reply, Retweet, Like etc., it has solved the issues of colour contrast. One additional thing we had to do is add authentication keys in settings.

We wish Twitter’s own widgets include accessibility at some point.

Accessibility Review: IRCTC Next Generation Ticketing System portal

IRCTC (Indian Railways Catering and Tourism Corporation) has recently revamped it’s portal and good news is that users do not require to login to check availability of tickets, search trains etc., Here is a quick review from accessibility prospective.

As the site loads, a banner appears talking about 48 months of NDA government but keyboard focus does not get to this banner and remains on IRCTC home page. However, using esc key closes the banner.

Looks like semantics are used as appropriate as possible. Buttons are marked up using correct attributes and have accessible names.

IRCTC Logo, Login, Register and icons to change font size are not operable using the keyboard.

There are several links with “More info” that are not descriptive

Focus indicator is missing for several elements such as Flights, stay, cab etc.,

It’s not recommended to use upper case letters as screen readers may consider them as acronyms.

There are several color contrast issues on the page; several images do not have alternate text. This is just a very quick text to see if accessibility has taken into consideration at all when re-designing the portal. While there was attempt to improve performance, IRCTC did not really considered improving accessibility. It’s time we the accessibility enthusiasts collectively reach out to them and have them address accessibility problems.

Web Content Accessibility Guidelines (WCAG) 2.1 is now official

On 5th June, 2018 Web Accessibilty Initiative of World Wide Web Consortium has announced that Web Content Accessibility Guidelines (WCAG) 2.1 has become official recommendation as standard. There has been tremendous efforts by Accessibility Guidelines Working Group which includes task forces for Cognitive, Low Vision and Mobile users. This is an evolution of W3C’s accessibility guidance, including expansion of mobile, low vision, and cognitive and learning provisions. It maintains W3C’s accessibility guidance, while maintaining W3C’s standard of implementable, technology neutral, objectively testable and universally applicable accessibility guidance.

New Support in WCAG 2.1

For users of mobile devices, WCAG 2.1 provides updated guidance including support for user interactions using touch, handling more complex gestures, and for avoiding unintended activation of an interface. For users with low vision, WCAG 2.1 extends contrast requirements to graphics, and introduces new requirements for text and layout customization to support better visual perception of web content and controls. For users with cognitive, language, and learning disabilities, WCAG 2.1 improvements include a requirement to provide information about the specific purpose of input controls, as well as additional requirements to support timeouts due to inactivity. This can help many users better understand web content and how to successfully interact with it.

As with WCAG 2.0, following these guidelines will continue to make content more accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and learning disabilities and cognitive limitations. Following these guidelines can also make websites more usable for all users.

Read the complete blog post by Andrew and Micheal on W3C Blog

Here are list of New Success Criterions in WCAG 2.1

Guideline 1.3 Adaptable

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

1.3.4 Orientation (Level AA)

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.

Comic with cerebral palsy who uses a wheelchair:

  • Problem:I can’t rotate my tablet — it’s attached to my wheelchair.
  • Works well:The application works whether I attach my tablet horizontally or vertically.

Understanding Orientation

1.3.5 Identify Input Purpose (AA)

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

Supermarket assistant with dyslexia and dyscalculia:

  • Problem:My address is so complicated. There’s lots of numbers and long words. It’s hard to type it all without making mistakes.
  • Works well:I love websites that can automatically fill it all in for me. Then I don’t have to work so hard to get the numbers and spelling right.
    Note: This works because the fields use autocomplete.

Understanding Identify Input Purpose

1.3.6 Identify Purpose (AAA)

In content implemented using markup languages, the purpose of User Interface Components, icons, and regionscan be programmatically determined.

Gamer with language processing disability:

  • Problem:I have software that changes the words in the navigation into symbols. It doesn’t work at all with some websites.
  • Works well:It works pretty good with some websites.

Understanding Identify Purpose

Guideline 1.4 Distinguishable

Make it easier for users to see and hear content including separating foreground from background.

1.4.10 Reflow (AA)

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.

Parent with low vision – 20/400:

  • Problem:It’s nearly impossible to read text if I have to scroll right and left to read each line. It’s disorienting and I lose my place. It makes it hard to understand what I’m reading.
  • Works well:I increase the text size 400% and it reflowed within the width of the window. I can read it easily without scrolling back and forth.

Understanding Reflow

1.4.11 Non-Text Contrast (AA)

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.

Retiree with low contrast sensitivity:

  • Problem:I couldn’t use the “Order Form” — there were no text boxes. After a long call with customer service, I learned there were text box borders that were too light for me to see.
  • Works well:It’s easy for me to see all the icons and buttons and everything — even in the sunlight.

Understanding Non-text Contrast

1.4.12 Text Spacing (AA)

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 conform using only the properties that exist for that combination of language and script.

Student with dyslexia:
and Retiree with low vision:

  • Problem:Most text is hard to read. It’s so cluttered I can’t keep my focus. Just increasing the space between lines makes all the difference. When I’m really tired, I also increase the space between words.
  • Works well:OK, I know I’m a bit of a geek, but I’ve perfected a user style sheet to make text spacing just right for me. It’s a relief when websites work with my CSS.

Understanding Text Spacing

1.4.13 Content on Hover or Focus (AA)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Dismissable
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 not modified by the author.

Teacher with low vision who uses screen magnification software:

  • Problem:I was moving my mouse around to track what I was looking at on a web page. It helps me keep focused. Then -boom- this little box popped up. It covered what I was trying to read and I couldn’t get it to go away.
  • Works well:I hovered over a word and a box popped up with the definition, but it was mostly off the screen with my magnification. I moved my mouse pointer to the definition box and scrolled the magnified area over to the definition box and it stayed popped up so I could read it.

Understanding Content on Hover or Focus

Guideline 2.1 Keyboard Accessible

Make all functionality available from a keyboard.

2.1.4 Character Key Shortcuts (A)

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
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.

Reporter with repetitive stress injury who uses voice recognition software:

  • Problem:When I was using my mail app with voice commands, it kept deleting the messages instead of opening them.
    Note: There was a shortcut key for delete that was triggered by something he was saying, and no way to turn off the shortcut keys.
  • Works well:In my spreadsheet application, there’s a setting to turn off or modify character key shortcuts.

Understanding Character Key Shortcuts

Guideline 2.2 Enough Time

Provide users enough time to read and use content.

2.2.6 Timeouts (AAA)

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.

School playground aide with cognitive disabilities:

  • Problem:I was selecting my Employee Benefits and was comparing the different plans. When I went back to select the Health Plan, it had timed out and lost all the information I had already entered.
  • Works well:When I started the Employee Benefits app, it told me how many minutes I had to complete the forms.

Understanding Timeouts

Guideline 2.3 Seizures and Physical Reactions

Do not design content in a way that is known to cause seizures or physical reactions.

2.3.3 Animation from Interactions (AAA)

Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.

Artist with vestibular disorder:

  • Problem:In the online tax app, as I move my mouse around or tab to different fields, this little bubble with the current balance follows me around the screen. Makes me dizzy and nauseous.
  • Works well:I was so glad there was an option to turn off animations.

Understanding Animation from Interactions

Guideline 2.5 Input Modalities

Make it easier for users to operate functionality through various inputs beyond keyboard.

2.5.1 Pointer Gestures (A)

All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointerwithout a path-based gesture, unless a multipoint or path-based gesture is essential.

Comic with cerebral palsy who has limited movement in fingers:

  • Problem:I can’t move my fingers like that. I need another way to zoom in the map.
  • Works well:Good thing there are buttons to zoom in and out.

Understanding Pointer Gestures

2.5.2 Pointer Cancellation (A)

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.

Politician with motor disabilities and low vision:

  • Problem:I went to hit the “Mute” button and accidentally touched the “End Call” button instead. It hung up immediately.
  • Works well:In another web conferencing application, if I accidentally touch the “End Call” button, I can just slide my finger off the “End Call” button and it won’t end the call.

Understanding Pointer Cancellation

2.5.3 Label in Name (A)

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Reporter with repetitive stress injury who uses voice recognition software:

  • Problem:It understood most of my voice commands until I got to the Send button. I kept saying ‘Send’ and it didn’t work.
    Note: It was visually labelled ‘send’ but the ‘name’ in the code was ‘submit’. It would have worked if the ‘name’ started with ‘send’.

Understanding Label in Name

2.5.4 Motion Actuation (A)

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.

Comic with cerebral palsy who uses a wheelchair:

  • Problem:I can’t shake my phone; it’s connected to my wheelchair. So there needs to be another way to activate that feature, like a button.
  • Problem:I have tremors, so I need to turn off motion activation — and then be able to do stuff without motion actuation.
  • Works well:My friend has this cool application that looks like a physical spin lock. She rotates the phone to turn to the combination. I can use the same application by typing the numbers directly.

Understanding Motion Actuation

2.5.5 Target Size (AAA)

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.

Retiree with hand tremor (and big fingers):

  • Problem:The buttons are so small, I hit “Cancel” when going for “Submit”. Then I have to start all over again.
  • Works well:This website buttons are big enough that I don’t hit the wrong button even when I’m riding on the bumpy bus.

Understanding Target Size

2.5.6 Concurrent Input Mechanisms (AAA)

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.

Reporter with repetitive stress injury who uses voice recognition software:

  • Problem:When my RSI acts up, I switch back and forth a lot between keyboard, mouse, stylus, voice. This application doesn’t let me use the stylus when I have a keyboard plugged in.

Understanding Concurrent Input Mechanisms

Guideline 4.1 Compatible

Maximize compatibility with current and future user agents, including assistive technologies.

4.1.3 Status Messages (AA)

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.

Accountant who is blind and uses a screen reader:

  • Problem:I selected a class for the conference, but I can’t tell if it got added to my schedule.
  • Works well:When I add a meeting to my calendar, I hear a confirmation.

Understanding Status Messages

Above details are reproduced from What’s new in WCAG 2.1 on WAI Website.

ServeOM Inclusion will be happy to assist community in understanding WCAG 2.1, testing products against WCAG 2.1. Do contact us to have a conversation.

Gratitude to everyone involved in building these standards.