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 Snippet
Ensures <img> elements have alternate text or a <img
role of none or presentation (image-alt) src="/content/svg-icons/CST_icon_reset.svg
" style="width: 16px; height:16px;">
Ensures <li> elements are used <li class="dropdown">
semantically (listitem)
Screen Reader users will not get to know the Examples:
headings, if visible headings are not -Visible headings should be provided with
programmatically defined as headings proper heading tags. "Customer Details",
"Credit Limit Details", "Tax Details" and
"Policies" headings should be given with h3
tags
Ensures every form element has a label (label) <input kendo-date-picker=""
id="startDatePicker" k-format="'MMM dd,
yyyy'" k-ng-
model="$[Link].
stime" k-on-change="$[Link]()"
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%;">
Low Vision users may loose some information At 400% Zooming "Billing Profile" page is not
and may not understand if the page is not completely visible. Content is overlapping
completely visible at 400% Zooming. and loss of information is there
Users with low vision or having dyslexia who On applying text spacing content under "Tax
applies text spacing will not be able to read the ID" and "Tax ID Type" gets overlapped.
lines if content gets overlapped
Users who use the application with browser At 125% and above browser zoom the
zoom will miss the content, if controls and controls in the top navigation bar are
content are not available at 125% and above missing
browser zoom
Keyboard Users will get difficult if the Keyboard Example:
focus is not going to all controls - The Keyboard focus is not going to the
Account Id under Menu .
Elements that have scrollable content should be accessible
<div class="pie-legend-container"
by keyboard (scrollable-region-focusable)
ng-
show="$[Link]">
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="!$[Link]"
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 <span title="" class="k-widget k-
name (aria-input-field-name) 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="$[Link]
e" k-on-change="$[Link]()" 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
[Link] Icon is not having sufficient contrast to
visible in High Contrast Black mode in Requests
page.
[Link] 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="$[Link]">
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="!$[Link]"
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