Category MAS Rules Bugs

Logged
rule: image-alt MAS 1.1.1 - Non-Text Content 3

rule: listitem 1

Element: Text 1

rule: label MAS 1.3.1 - Info and Relationships; 1

MAS 4.1.2 – Name, Role, Value

Reflow MAS 1.4.10 - Reflow 1

Text Spacing MAS 1.4.12 – Text Spacing   2

Resize/Resize Text/zoom MAS 1.4.4 – Resize Text  5

Keyboard Focus MAS 2.1.1 – Keyboard 1

rule: scrollable-region- 1
focusable
TabStops MAS 2.1.1 – Keyboard ; 31
MAS 2.1.2 – No Keyboard Trap

Focus order MAS 2.4.3 – Focus Order 1

Headings and Labels MAS 2.4.6 – Headings and Labels  1

Focus Visible MAS 2.4.7 – Focus Visible 3

On Focus MAS 3.2.1 – On Focus 1

rule: button-name MAS 4.1.2 – Name, Role, Value 1

rule: aria-input-field- 1
name
aria-allowed-attr WCAG 4.1.2 2

aria-required-children WCAG 1.3.1 1

duplicate-id-aria WCAG 4.1.1 7

Issue Details
Ensures <img> elements have alternate text or a <img
role of none or presentation (image-alt)
Ensures <li> elements are used
semantically (listitem)
Screen Reader users will not get to know the
headings, if visible headings are not
programmatically defined as headings
Ensures every form element has a label (label)
Low Vision users may loose some information
and may not understand if the page is not
completely visible at 400% Zooming.
Users with low vision or having dyslexia who
applies text spacing will not be able to read the
lines if content gets overlapped
Users who use the application with browser
zoom will miss the content, if controls and
content are not available at 125% and above
browser zoom
Keyboard Users will get difficult if the Keyboard
focus is not going to all controls
Elements that have scrollable content should be accessible
Snippet
src="/content/svg-icons/CST_icon_reset.svg
" style="width: 16px; height:16px;">
<li class="dropdown">
Examples:
-Visible headings should be provided with
proper heading tags. "Customer Details",
"Credit Limit Details", "Tax Details" and
"Policies" headings should be given with h3
tags
<input kendo-date-picker=""
id="startDatePicker" k-format="'MMM dd,
yyyy'" k-ng-
model="$ctrl.commentsReadQueryRequest.
stime" k-on-change="$ctrl.startChange()"
data-role="datepicker" type="text" class="k-
input" role="combobox" aria-
expanded="false" aria-
owns="startDatePicker_dateview"
autocomplete="off" aria-disabled="false"
style="width: 100%;">
At 400% Zooming "Billing Profile" page is not
completely visible. Content is overlapping
and loss of information is there
On applying text spacing content under "Tax
ID" and "Tax ID Type" gets overlapped.
At 125% and above browser zoom the
controls in the top navigation bar are
missing
Example:
- The Keyboard focus is not going to the
Account Id under Menu .
<div class="pie-legend-container"
by keyboard (scrollable-region-focusable)
ng-
show="$ctrl.serviceChartDataLength">
Keyboard only users will not be able to access the Example::
application if all the controls are not accessible - Unable to access "Dunning Events" grid
using keyboard section using keyboard

Keyboard only users will have difficulty if there is -Keyboard trap observed at "calendar"
a keyboard trap observed at a control. User which is associated with Date Range label
should not be stuck at any point while navigating
through controls, user should be able to move to
next calendar control using tab or arrow keys

Low Vision users and Keyboard only users will Example:

have difficulty in accessing and tracking the exact 1. Keyboard focus should not go twice to
focus if Focus order is not correct "Learn more" and "Rate Now" controls
Keyboard focus should not go twice to a
particular control for the benefit of keyboard only
users and screen reader users

For any pop-up window like feedback, keyboard

focus should remain inside it

Disabled users will find difficult to understand Example:

about the page and its content if Headings are Heading level is not provided for "Account
not provided Identification", "Customer Profile", "Account
Information" and "Tax Information" under
account page.

Keyboard only users will not be able to know on Example:

which control the focus is, if keyboard focus is Focus is not visible on "Refresh" button in
not clearly visible on the controls Billing profile page.
Keyboard Users will face difficult if the Menu Example:
Buttons are automatically open Without pressing When we navigate the Site Menu
"enter" or "Space Key". Buttons ,they are automatically selected and
opened without using "Enter" or "Space
Key".

Ensures buttons have discernible text (button- <button ng-show="!$ctrl.hideDefaultButton"

name) class="c-button dialog-trigger ng-binding"
type="button" data-js-dialog-
show="sd071b31ac-5034-4130-bdc0-
00cb1a2af303"></button>

Ensures every ARIA input field has an accessible
name (aria-input-field-name)
<span title="" class="k-widget k-
dropdowntree" unselectable="on"
role="listbox" aria-haspopup="true" aria-
expanded="false" tabindex="1" aria-
disabled="false" style="width: 100%;
background-color: rgb(242, 242, 242);" data-
role="tooltip">
 <span unselectable="on" class="k-select"
aria-label="select"><span class="k-icon k-i-
arrow-60-down"></span></span>

<span title="AllTransactionsScopeTitle"
class="k-widget k-dropdowntree"
unselectable="on" role="listbox" aria-
haspopup="true" aria-expanded="false"
style="" tabindex="1" aria-disabled="false"
data-role="tooltip">

Ensures elements with an ARIA role that require <span id="close-blade-label"

child roles contain them (aria-required-children) hidden="">Close</span>
Dev Fixes

Fix ONE of the following:

- Element does not have an alt attribute
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist,
references elements that do not exist or
references elements that are empty
- Element has no title attribute

Fix the following:

- List item does not have a <ul>, <ol> parent
element
Headings should be given H3 tag

Fix ONE of the following:

- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist,
references elements that do not exist or
references elements that are empty

To Saurabh : What fix is done?

To Saurabh : What fix is done?

All the content and controls should be clearly

visible when user zooms the page

Keyboard focus should be visible on all the

controls using keyboard
To Saurabh : What fix is done?

Fix any of the following:

- Element should have focusable content
- Element should be focusable
User should be able to access all the controls
using keyboard with no trapping
To Saurabh : What fix is done?

To Saurabh : What fix is done?

To Saurabh : What fix is done?

To Saurabh : What fix is done?

To Saurabh : What fix is done?

Fix ONE of the following:

- Element does not have inner text that is visible
to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist,
references elements that do not exist or
references elements that are empty
- Element has no title attribute

Fix ONE of the following:

- aria-label attribute does not exist or is empty
Fix the following:
- ARIA attribute cannot be used, add a role
attribute or use a different element: aria-label

Fix the following:

- Required ARIA child role not present: option

Fix the following:

- Document has multiple elements referenced
with ARIA with the same id attribute: close-
blade-label
- Required ARIA child role not present: option
Category MAS Rules
rule: image-alt MAS 1.1.1 - Non-Text Content

Info And Relationships MAS 1.3.1 - Info and Relationships

Screen Reader
rule: listitem

Element: Text

rule: label MAS 1.3.1 - Info and Relationships;

MAS 4.1.2 – Name, Role, Value

Orientation MAS 1.3.4 – Orientation  

Reflow MAS 1.4.10 - Reflow

Non text contrast MAS 1.4.11 – Non-text Contrast

Text Spacing MAS 1.4.12 – Text Spacing  

High Contrast/HighContrast MAS 1.4.3 – Contrast (Minimum)

rule: color-contrast

Resize/Resize Text/zoom MAS 1.4.4 – Resize Text 

Keyboard Focus MAS 2.1.1 – Keyboard

rule: scrollable-region-focusable

TabStops MAS 2.1.1 – Keyboard ;

MAS 2.1.2 – No Keyboard Trap

rule: bypass MAS 2.4.1 - Bypass Blocks

Focus order MAS 2.4.3 – Focus Order

Headings and Labels MAS 2.4.6 – Headings and Labels 

Focus Visible MAS 2.4.7 – Focus Visible

On Focus MAS 3.2.1 – On Focus

rule: button-name MAS 4.1.2 – Name, Role, Value

rule: aria-input-field-name

aria-allowed-attr WCAG 4.1.2

aria-required-children WCAG 1.3.1

duplicate-id-aria WCAG 4.1.1

Bugs Logged Issue Details
3 Ensures <img> elements have alternate text or a role of
none or presentation (image-alt)

1 Screen Reader user will find difficulty in understanding if

Narrator is not announcing error suggestion message.
- Disabled users will find difficult to understand about
the page and its content if Heading level is not provided.

11
1 Ensures <li> elements are used semantically (listitem)

1 Screen Reader users will not get to know the headings, if

visible headings are not programmatically defined as
headings

1 Ensures every form element has a label (label)

1 Users with motor disability will face the issue as, they are
unable to see the controls "Requests", "Support",
"Feedback", "Profile", "More Options" buttons in
Orientation.

1 Low Vision users may loose some information and may

not understand if the page is not completely visible at
400% Zooming.
2 Cognitive disabled users and Low Vision users will have
difficulty in accessing Search button if Color Contrast of
the dropdown button to its background is having the
contrast ratio of 2.5:1
 2 Users with low vision or having dyslexia who applies text
spacing will not be able to read the lines if content gets
overlapped
4 Users who use the application with high contrast mode
enabled will miss the content, if all the content and
controls are not clearly visible in high contrast mode

Users who use the application with high contrast mode

enabled may not get to know which columns are added
and which are not if there is no visual differentiation in
high contrast mode

Visually Impaired Users will not able to see the "Search

Icon" clearly if the Search Icon is not having sufficient
contrast  to visible  in High Contrast Black mode

Keyboard Users will find difficult to find the focus is in

which Element if keyboard focus is not visible for site
menu tabs.

3 Ensures the contrast between foreground and

background colors meets WCAG 2 AA contrast ratio
thresholds (color-contrast)

5 Users who use the application with browser zoom will

miss the content, if controls and content are not available
at 125% and above browser zoom
1 Keyboard Users will get difficult if the Keyboard focus is
not going to all controls

1 Elements that have scrollable content should be accessible by keyboard (scrolla

31 Keyboard only users will not be able to access the

application if all the controls are not accessible using
keyboard
Keyboard only users will have difficulty if there is a
keyboard trap observed at a control. User should not be
stuck at any point while navigating through controls, user
should be able to move to next calendar control using tab
or arrow keys

1 Ensures each page has at least one mechanism for a user to bypass navigation a
1 Low Vision users and Keyboard only users will have
difficulty in accessing and tracking the exact focus if
Focus order is not correct

Keyboard focus should not go twice to a particular

control for the benefit of keyboard only users and screen
reader users

For any pop-up window like feedback, keyboard focus

should remain inside it

1 Disabled users will find difficult to understand about the

page and its content if Headings are not provided

3 Keyboard only users will not be able to know on which

control the focus is, if keyboard focus is not clearly visible
on the controls
1 Keyboard Users will face difficult if the Menu Buttons are
automatically open Without pressing "enter" or "Space
Key".

1 Ensures buttons have discernible text (button-name)

1 Ensures every ARIA input field has an accessible

name (aria-input-field-name)

7 Ensures elements with an ARIA role that require child

roles contain them (aria-required-children)
Snippet
<img
src="/content/svg-icons/CST_icon_reset.svg"
style="width: 16px; height:16px;">

Examples:
- When we enter invalid Account Id, Narrator is
not announcing error suggestion message of
Account Id.
- Heading level is not provided for feedback
page.

<li class="dropdown">

Examples:
-Visible headings should be provided with
proper heading tags. "Customer Details", "Credit
Limit Details", "Tax Details" and "Policies"
headings should be given with h3 tags

<input kendo-date-picker=""
id="startDatePicker" k-format="'MMM dd,
yyyy'" k-ng-
model="$ctrl.commentsReadQueryRequest.stim
e" k-on-change="$ctrl.startChange()" data-
role="datepicker" type="text" class="k-input"
role="combobox" aria-expanded="false" aria-
owns="startDatePicker_dateview"
autocomplete="off" aria-disabled="false"
style="width: 100%;">

Example:
User is not able to view the "Requests",
"Support", "Feedback", "Profile", "More
Options" buttons in Orientation.

At 400% Zooming "Billing Profile" page is not

completely visible. Content is overlapping and
loss of information is there
Color Contrast of the "dropdown button" to its
background is having the contrast ratio of 2.6:1
On applying text spacing content under "Tax ID"
and "Tax ID Type" gets overlapped.

Examples:
1. Visually Impaired Users will not able to see
the Feedback Rating in High contrast Black and
White mode
2. Controls in the top navigation bar (versions,
notifications, support, feedback etc.) and Search
icon are not visible in High contrast white mode
3. User is not able to visually differentiate
between already added columns and not added
columns in high contrast black and high contrast
white mode
4.Search Icon is not having sufficient contrast to
visible in High Contrast Black mode in Requests
page.
5.Search Icon is not having sufficient contrast to
visible in High Contrast Black mode in
Subscription+Usage Page
6. In high contrast mode, keyboard focus
should visible for site menu tabs when we
navigate through site menu tabs.

<span class="ng-scope">Learn more.. </span>

At 125% and above browser zoom the controls

in the top navigation bar are missing

Example:
- The Keyboard focus is not going to the
Account Id under Menu .
<div class="pie-legend-container" ng-
show="$ctrl.serviceChartDataLength">

Example::
- Unable to access "Dunning Events" grid section
using keyboard
-Keyboard trap observed at "calendar" which is
associated with Date Range label

<html lang="en" dir="ltr" class="k-webkit k-

webkit91">
Example:
1. Keyboard focus should not go twice to "Learn
more" and "Rate Now" controls

Example:
Heading level is not provided for "Account
Identification", "Customer Profile", "Account
Information" and "Tax Information" under
account page.

Example:
Focus is not visible on "Refresh" button in Billing
profile page.
Example:
When we navigate the Site Menu Buttons ,they
are automatically selected and opened without
using "Enter" or "Space Key".

<button ng-show="!$ctrl.hideDefaultButton"
class="c-button dialog-trigger ng-binding"
type="button" data-js-dialog-
show="sd071b31ac-5034-4130-bdc0-
00cb1a2af303"></button>

<span title="" class="k-widget k-dropdowntree"

unselectable="on" role="listbox" aria-
haspopup="true" aria-expanded="false"
tabindex="1" aria-disabled="false" style="width:
100%; background-color: rgb(242, 242, 242);"
data-role="tooltip">

<span unselectable="on" class="k-select" aria-

label="select"><span class="k-icon k-i-arrow-60-
down"></span></span>
<span title="AllTransactionsScopeTitle" class="k-
widget k-dropdowntree" unselectable="on"
role="listbox" aria-haspopup="true" aria-
expanded="false" style="" tabindex="1" aria-
disabled="false" data-role="tooltip">

<span id="close-blade-label"
hidden="">Close</span>
Dev Fixes
Fix ONE of the following:
- Element does not have an alt attribute
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or
references elements that are empty
- Element has no title attribute

To Abhinav : What fix is done?

To Abhinav : What fix is done?

Fix the following:
- List item does not have a <ul>, <ol> parent element
Headings should be given H3 tag

Fix ONE of the following:

- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or
references elements that are empty

To Saurabh : What fix is done?

To Saurabh : What fix is done?

To Abhinav : What fix is done?

To Saurabh : What fix is done?

Fix any of the following:

- Element has insufficient color contrast of 4.32. Expected contrast ratio of 4.5:1

To Saurabh : What fix is done?

All the content and controls should be clearly visible when user zooms the page

Keyboard focus should be visible on all the controls using keyboard

To Saurabh : What fix is done?

Fix any of the following:
- Element should have focusable content
- Element should be focusable
User should be able to access all the controls using keyboard with no trapping
To Saurabh : What fix is done?

Fix any of the following:

- No valid skip link found
- Page does not have a heading
- Page does not have a landmark region
To Saurabh : What fix is done?

To Saurabh : What fix is done?

To Saurabh : What fix is done?

To Saurabh : What fix is done?

Fix ONE of the following:

- Element does not have inner text that is visible to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or
references elements that are empty
- Element has no title attribute

Fix ONE of the following:

- aria-label attribute does not exist or is empty

Fix the following:

- ARIA attribute cannot be used, add a role attribute or use a different element: aria-
label
Fix the following:
- Required ARIA child role not present: option

Fix the following:

- Document has multiple elements referenced with ARIA with the same id attribute:
close-blade-label
- Required ARIA child role not present: option