Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V8: Fix A & AA accessibility issues throughout the back-office #5277

Open
MMasey opened this issue Apr 16, 2019 · 8 comments

Comments

Projects
None yet
4 participants
@MMasey
Copy link
Contributor

commented Apr 16, 2019

There are currently a large number of accessibility and in tern usability issues throughout the back-office. One of the wonderful members of the PR team Danny Lancaster has created an accessibility audit, detailing each of the bugs found.

There are currently 151 known issues that need to be fixed. Rather than create an issue for each one, the idea is to do the following.

  1. Have a look through the table below and pick an issue that you'd like to fix
  2. Fix the issue 😄
  3. Submit a PR
  4. Leave a comment with a link to you PR here and either I, or someone from HQ will update the table below.

I've added some links to various articles and tools to help you on your way below. #5277 (comment)

If you have any questions you can reach out either here or on the Umbraco Community #accessibility Slack channel. You can join the community slack channel by going to umbracians.chat.

We have a Trello board with a list of resources and goals available at trello.com/b/MwD8xuz3/umbraco-accessibility

Edit: I've removed the link to the spreadsheet in favour of the table added below.

@MMasey

This comment has been minimized.

Copy link
Contributor Author

commented Apr 16, 2019

To make things easier I've moved the spreadsheet over to here 😄

Striked out issues mean that they have been completed.

image Umbraco V8 Accessibility Audit     
Issue Level Description Area PR Link
1 Level AA : 2.4.7 - Unclear focus area Tab states (focus) is insufficient or missing General  
2 Level A : 2.4.1 - Skip links No "skip navigation" links present General  
3 Level AA : 1.4.4 - Resizing text Fonts do not resize using the browser font size settings General  
4 Level AA : 2.4.7 - Unclear focus area Bottom publishing options ('Preview', 'Save', 'Save and publish') have insufficient focus (tab) state General #5320
5 Level A : 2.1.1 - Keyboard and screen reader Bottom publishing option "Save and publish" has a drop down that can't be accessed via keyboard General  
6 Level A : 2.1.1 - Keyboard and screen reader Unable to add child items to content tree (left hand) via keyboard General  
7 Level A : 2.1.1 - Keyboard and screen reader Unable to open 'links' options (create etc.) using keyboard General  
8 Level A : 2.4.4 - Unclear link/button text "Actions" is identified as a button, but behaves like a drop down - screen readers General  
9 Level A : 2.4.4 - Unclear link/button text "Actions" drop down options do not give context to the user. E.g. "Delete" - screen readers General  
 
10 Level A : 2.4.3 - Illogical focus order Should receive focus as first item on page (when open) Welcome to Umbraco (modal)  
11 Level A : 2.1.1 - Keyboard and screen reader Unable to navigate to close 'X' icon with keyboard Welcome to Umbraco (modal)  
12 Level A : 2.1.2 - Keyboard trap Modal is missing keyboard trap Welcome to Umbraco (modal)  
 
13 Level AA : 2.4.7 - Unclear focus area Menu items have insufficient focus (tab) states Top menu (Umbraco sections)  #5458
14 Level A : 2.1.1 - Keyboard and screen reader Unable to close search once open Top menu (Umbraco sections)  
15 Level AA : 2.4.7 - Unclear focus area No focus state present for the user icon (top right hand side) Top menu (Umbraco sections) #5249
16 Level A : 2.4.4 - Unclear link/button text Search icon and help (?) icon both identify as "link" - no context for screen readers Top menu (Umbraco sections)  
17 Level A : 2.4.4 - Unclear link/button text User account icon requires ARIA-hidden to give context to users - screen readers Top menu (Umbraco sections)  
18 Level A : 2.4.4 - Unclear link/button text Does not identify if child items are present for drop down - screen readers Top menu (Umbraco sections)  
 
19 Level AA : 2.4.7 - Unclear focus area No focus (tab) state present for the content tree items Left hand menu (content tree)  #5337
20 Level A : 2.1.1 - Keyboard and screen reader User can interact with content tree item, but is unable to open child items when applicable Left hand menu (content tree)  
21 Level A : 2.4.4 - Unclear link/button text Content link identified as "list with 1 item" but does not identify list for rest of content tree - screen readers Left hand menu (content tree)  
22 Level A : 2.4.4 - Unclear link/button text When 'DO SOMETHING ELSE' is interacted with (requires mouse to operate) the confirmation buttons need to give context - screen readers Left hand menu (content tree)  
 
23 Level AA : 1.4.3 - Insufficient colour contrast Green buttons present (e.g. "Free 14 days trial of Umbraco 8 >>") has insufficient colour contrast (Fails AA + AAA) Information (Content)  
24 Level AA : 1.4.3 - Insufficient colour contrast Footer links (e.g. "Documentation", "Community" etc.) has insufficient colour contrast (Fails AA + AAA) Information (Content)  
25 Level A : 2.4.4 - Unclear link/button text Buttons with icon '>>' needs ARIA role as currently identifies as "Greater greater link" - screen readers Information (Content)  
 
26 Level AA : 2.4.7 - Unclear focus area No focus (tab) states present for form fields Login  #5304
27 Level A : 2.4.4 - Unclear link/button text Errors are not identified for screen reader users Login #5450 
28 Level A : 2.4.3 - Illogical focus order Show/hide password should focus user back to password field on tab (need to reverse tab) Login  #5304
 
29 Level A : 2.1.1 - Keyboard and screen reader Unable to navigate to 'Content' or 'Info' or drop down using keyboard (only 'Actions') Home (node)  
30 Level AA : 2.4.7 - Unclear focus area No focus (tab) states are present for any of the form fields Home (node)  
31 Level A : 2.4.3 - Illogical focus order When '+' interacted with to add more sections, focus should go to the top of that section Home (node)  
32 Level A : 2.4.4 - Unclear link/button text "+" icon is identified as "link" - screen readers Home (node)  
33 Level A : 2.1.1 - Keyboard and screen reader When '+' has been interacted with, the item section controls (pencil, move, bin) can not be navigated to via keyboard Home (node)  
34 Level A : 2.1.1 - Keyboard and screen reader Links components (e.g. 'Footer links') can not be tabbed to ('Edit', 'Remove') Home (node)  
35 Level A : 2.4.3 - Illogical focus order Links components (e.g. 'Footer links'), when 'Add' interacted with, focus should goes to the top of that overlay Home (node)  
36 Level A : 2.1.2 - Keyboard trap Links components (e.g. 'Footer links'), when 'Add' interacted with, overlay section should have keyboard trap Home (node)  
37 Level A : 2.4.4 - Unclear link/button text Links components (e.g. 'Footer links'), 'Add' is identfied as "Add link" but doesn't identify the label - screen readers Home (node)  
38 Level A : 2.1.1 - Keyboard and screen reader Meta keywords, more can be added (by typing and hitting enter), but unable to remove/interact with existing labels Home (node)  
39 Level A : 1.3.1 - Fieldset missing legend Only identifies the placeholder text, not the form label - screen readers Home (node)  
40 Level AA : 2.4.7 - Unclear focus area Toggle options have insufficient focus (tab) state Home (node)  
41 Level A : 2.4.4 - Unclear link/button text Toggle options are identified as "button" but behaves like a toggle option Home (node)  
42 Level A : 1.3.1 - Fieldset missing legend Toggle options are identified as "button" but does not identifiy label - screen readers Home (node)  
43 Level A : 1.3.1 - Fieldset missing legend "Enter a name" for page title, should be "Enter a page name" - screen readers Home (node)  
44 Level A : 2.4.4 - Unclear link/button text "Actions" is identified as a button, but behaves like a drop down - screen readers Home (node)  
45 Level A : 2.4.4 - Unclear link/button text "Actions" drop down options do not give context to the user. E.g. "Delete" - screen readers Home (node)  
46 Level A : 2.1.1 - Keyboard and screen reader Once new row has been added to page grid, unable to navigate to using keyboard Home (node)  
47 Level A : 2.1.2 - Keyboard trap Infinite editing - requires keyboard trap Home (node)  
48 Level A : 2.4.3 - Illogical focus order Infinite editing - Requires focus when open Home (node)  
49 Level A : 2.4.4 - Unclear link/button text Infinite editing - Add image - '+' in breadcrumb is identified as "link" - screen readers Home (node)  
50 Level A : 2.4.4 - Unclear link/button text Infinite editing - Add image - Search does not give context to the user - screen readers Home (node)  
51 Level A : 2.1.1 - Keyboard and screen reader Infinite editing - Add image - unable to navigate to already uploaded images using keyboard Home (node)  
52 Level AA : 2.4.7 - Unclear focus area Infinite editing - Add image - Upload doesn't have a very clear focus (tab) state Home (node)  
 
53 Level A : 2.1.1 - Keyboard and screen reader Unable to navigate to 'Main Image' using a keyboard About (content tree)  
54 Level A : 2.1.1 - Keyboard and screen reader Able to interact with '+' to bring up new grid line, but unable to interact with using keyboard About (content tree)  
55 Level A : 2.1.1 - Keyboard and screen reader Once grid line option has been selected (needs to be selected using a mouse), unable to interact with the grid options uisng keyboard About (content tree)  
56 Level A : 2.4.3 - Illogical focus order Once grid options has been selected (needs to be selected using a mouse), focus should go the grid options modal About (content tree)  
57 Level A : 2.1.2 - Keyboard trap Once grid options has been selected (needs to be selected using a mouse), grid options modal requires keyboard trap About (content tree)  
58 Level A : 2.4.4 - Unclear link/button text Reorder' button does not give context to the user (what are they reordering) - screen readers About (content tree)  
59 Level A : 2.4.4 - Unclear link/button text Reorder' button requires an ARIA-ALERT to identify when the options change to "I am done reordering" - screen readers About (content tree)  
60 Level A : 2.4.4 - Unclear link/button text "+" icon is identified as "link" - screen readers About (content tree)  
 
61 Level A : 2.1.1 - Keyboard and screen reader Create article' button can't be accessed via keyboard Blog (content tree)  
62 Level A : 2.1.1 - Keyboard and screen reader Search grid option drop down can't be accessed via keyboard Blog (content tree)  
63 Level A : 2.1.1 - Keyboard and screen reader Existing blogs can not be accessed via keyboard Blog (content tree)  
 
64 Level A : 2.1.1 - Keyboard and screen reader Meta keywords, more can be added (by typing and hitting enter), but unable to remove/interact with existing labels Contact (content tree)  
65 Level A : 1.3.1 - Fieldset missing legend Only identifies the placeholder text, not the form label - screen readers Contact (content tree)  
66 Level AA : 2.4.7 - Unclear focus area Toggle options have insufficient focus (tab) state Contact (content tree)  
67 Level A : 2.4.4 - Unclear link/button text Toggle options are identified as "button" but behaves like a toggle option Contact (content tree)  
68 Level A : 1.3.1 - Fieldset missing legend Toggle options are identified as "button" but does not identifiy label - screen readers Contact (content tree)  
69 Level A : 1.3.1 - Fieldset missing legend "Enter a name" for page title, should be "Enter a page name" - screen readers Contact (content tree)  
 
70 Level A : 2.1.1 - Keyboard and screen reader Meta keywords, more can be added (by typing and hitting enter), but unable to remove/interact with existing labels Search (content tree)  
71 Level A : 1.3.1 - Fieldset missing legend Only identifies the placeholder text, not the form label - screen readers Search (content tree)  
72 Level AA : 2.4.7 - Unclear focus area Toggle options have insufficient focus (tab) state Search (content tree)  
73 Level A : 2.4.4 - Unclear link/button text Toggle options are identified as "button" but behaves like a toggle option Search (content tree)  
74 Level A : 1.3.1 - Fieldset missing legend Toggle options are identified as "button" but does not identifiy label - screen readers Search (content tree)  
75 Level A : 1.3.1 - Fieldset missing legend "Enter a name" for page title, should be "Enter a page name" - screen readers Search (content tree)  
 
76 Level A : 2.1.1 - Keyboard and screen reader Meta keywords, more can be added (by typing and hitting enter), but unable to remove/interact with existing labels Links (content tree)  
77 Level A : 1.3.1 - Fieldset missing legend Only identifies the placeholder text, not the form label - screen readers Links (content tree)  
78 Level AA : 2.4.7 - Unclear focus area Toggle options have insufficient focus (tab) state Links (content tree)  
79 Level A : 2.4.4 - Unclear link/button text Toggle options are identified as "button" but behaves like a toggle option Links (content tree)  
80 Level A : 1.3.1 - Fieldset missing legend Toggle options are identified as "button" but does not identifiy label - screen readers Links (content tree)  
81 Level A : 1.3.1 - Fieldset missing legend "Enter a name" for page title, should be "Enter a page name" - screen readers Links (content tree)  
 
82 Level A : 2.1.1 - Keyboard and screen reader Grid filter icon drop down can't be accessed via keyboard Recycle bin (content tree)  
83 Level A : 2.1.1 - Keyboard and screen reader Unable to navigate to previously deleted items Recycle bin (content tree)  
84 Level A : 2.4.4 - Unclear link/button text Does not advise which/how many of previously uploaded media is selected (needs to be selected using a mouse) Recycle bin (content tree)  
85 Level A : 2.4.4 - Unclear link/button text Once selected, user can then tab to additional options but does not give context to the user - screen readers Recycle bin (content tree)  
 
86 Level A : 2.1.1 - Keyboard and screen reader Create' drop down can't be accessed via keyboard Media (top menu)  
87 Level A : 2.1.1 - Keyboard and screen reader Grid filter icon drop down can't be accessed via keyboard Media (top menu)  
88 Level A : 2.1.1 - Keyboard and screen reader Media uploader widget can't be accessed via keyboard Media (top menu)  
89 Level A : 2.1.1 - Keyboard and screen reader Previously upload media can't be accessed via keyboard (only on left hand menu) Media (top menu)  
90 Level A : 2.4.4 - Unclear link/button text Does not advise which/how many of previously uploaded media is selected (needs to be selected using a mouse) Media (top menu)  
91 Level A : 2.4.4 - Unclear link/button text Once selected, user can then tab to additional options but does not give context to the user - screen readers Media (top menu)  
92 Level A : 2.4.3 - Illogical focus order When left hand menu interacted with (by hitting enter), focus should go to open media settings Media (top menu)  
93 Level A : 1.1.1 - Alternative text Open media - no option to add alternative text here? Media (top menu)  
94 Level A : 2.4.4 - Unclear link/button text Open media - "Remove files" can be tabbed to, but does not give context to the user - screen readers Media (top menu)  
 
95 Level A : 2.1.1 - Keyboard and screen reader Can't access any of the secondary menu items (Welcome, Examine Management etc.) via keyboard Settings (top menu)  
96 Level A : 2.4.4 - Unclear link/button text Examine Management - needs to give context - screen readers Settings (top menu)  
97 Level A : 2.4.4 - Unclear link/button text Published Status - needs to give context - screen readers Settings (top menu)  
98 Level A : 2.4.4 - Unclear link/button text Models Builder - Reload button needs to identify help tip to give context - screen readers Settings (top menu)  
99 Level A : 2.1.1 - Keyboard and screen reader Health Check - unable to navigate to additional options (Configuration, live environment etc.) via keyboard Settings (top menu)  
 
100 Level A : 2.1.1 - Keyboard and screen reader Secondary menu items (Packages, installed, install local etc.) can't be accessed via keyboard Packages (top menu)  
101 Level A : 2.4.3 - Illogical focus order When filter option (Collaborations, backoffice extensions etc.) has been interacted with, focus should go to options Packages (top menu)  
102 Level A : 2.1.1 - Keyboard and screen reader Screen reader only identifies the description text present on screen. Requires ARIA role to read full description and not amount of 'likes' Packages (top menu)  
103 Level A : 2.1.1 - Keyboard and screen reader Should identify section labels/headers when tabbing into new section - "New releases" - Screen readers Packages (top menu)  
104 Level A : 2.1.1 - Keyboard and screen reader Open Package - Identifies back button as "Left hand arrow back button" - screen readers Packages (top menu)  
105 Level A : 2.1.1 - Keyboard and screen reader Open Package - Can only tab to 'Back' and 'Install package' button - missing important content in package description (with interactive elements) Packages (top menu)  
 
106 Level AA : 2.4.7 - Unclear focus area "Create user" doesn't have a very clear focus (tab) state Users (top menu)  
107 Level A : 2.1.1 - Keyboard and screen reader Unable to navigate to search filter icon drop down using keyboard Users (top menu)  
108 Level A : 2.1.1 - Keyboard and screen reader Unable to navigate to 'Groups' icon filter Users (top menu)  
109 Level A : 2.1.1 - Keyboard and screen reader Filter users drop downs do not identify as drop downs (open/close) - screen readers Users (top menu)  
110 Level A : 2.1.1 - Keyboard and screen reader Unable to navigate to user cards via keyboard Users (top menu)  
111 Level A : 2.1.1 - Keyboard and screen reader Open User Details - Back icon arrow is identified as "Umbraco link" - screen readers Users (top menu)  
112 Level A : 1.3.1 - Fieldset missing legend Open User Details - Language drop down does not identify form label - screen readers Users (top menu)  
113 Level AA : 2.4.7 - Unclear focus area Open User Details - 'Change password' button does not have sufficient tab state Users (top menu)  
114 Level A : 1.3.1 - Fieldset missing legend Open User Details - 'Change password' fields are all missing form labels - screen readers Users (top menu)  
115 Level AA : 2.4.7 - Unclear focus area Open User Details - 'Cancel' button has no focus (tab) state present Users (top menu)  
116 Level AA : 2.4.7 - Unclear focus area Open User Details - 'Save' button has no focus (tab) state present Users (top menu)  
117 Level A : 2.1.1 - Keyboard and screen reader Create user - Identifies back button as "Left hand arrow back button" - screen readers Users (top menu)  
118 Level A : 1.3.1 - Fieldset missing legend Create user - It is identifying the placeholder text, but not the actual form label - screen readers Users (top menu)  
119 Level A : 2.4.4 - Unclear link/button text Create user - User group 'Add' button doesn't give context to the user - screen readers Users (top menu)  
120 Level A : 3.3.1 - Unclear error messages Create user - Errors are not identified - screen readers Users (top menu)  
121 Level A : 2.4.3 - Illogical focus order Create user - Errors should retain focus when submit occurs Users (top menu)  
122 Level A : 1.1.1 - Alternative text No alt text on any icons Users (top menu)  
 
123 Level AA : 2.4.7 - Unclear focus area Create members - form fields missing focus (tab) states Members (top menu)  
124 Level A : 2.4.4 - Unclear link/button text Create members - "Enter name" but should context for username - screen readers Members (top menu)  
125 Level A : 2.4.4 - Unclear link/button text Create members - 'Is approved' toggle is identified as "button" - screen readers Members (top menu)  
126 Level A : 2.4.4 - Unclear link/button text Create members - Password fields do not identify with any form label so no context available - screen readers Members (top menu)  
127 Level A : 2.4.4 - Unclear link/button text Create members - Member group add button doesn't give any context to the user - screen readers Members (top menu)  
128 Level A : 3.3.1 - Unclear error messages Create members - Errors are not identified - screen readers Members (top menu)  
129 Level A : 2.4.3 - Illogical focus order Create members - Errors should retain focus when submit occurs Members (top menu)  
130 Level A : 2.4.4 - Unclear link/button text Create members - 'Password Answer' + 'Password Question' don't appear to do anything? Members (top menu)  
131 Level A : 2.1.1 - Keyboard and screen reader Create members - Requires ARIA-ALERT when user saved to advise information has updated/user been created - screen readers Members (top menu)  
132 Level AA : 2.4.7 - Unclear focus area Members list - No focus (tab) states present for any header filters Members (top menu)  
133 Level A : 2.4.4 - Unclear link/button text Members list - Checkbox has no form label so identifies as "check box" which gives no context - screen readers Members (top menu)  
134 Level A : 2.1.1 - Keyboard and screen reader Members list - Does not advise if filter is already applied (e.g. sorted by email acsending) - screen readers Members (top menu)  
135 Level AA : 2.4.7 - Unclear focus area Members list - Existing users have no focus (tab) states present Members (top menu)  
 
136 Level A : 2.1.1 - Keyboard and screen reader Top icons (Design + Settings) can not be accessed via keyboard Forms (top menu)  
137 Level A : 2.4.4 - Unclear link/button text Icons in question type (Cog + Bin + lock) are identified as "link" - screen reader Forms (top menu)  
138 Level A : 2.4.4 - Unclear link/button text ARIA-Hidden required for flow information to give better context to the user - screen reader Forms (top menu)  
139 Level A : 2.4.3 - Illogical focus order Adding question - Infinite editing - Focus does not go to top layer Forms (top menu)  
140 Level A : 2.1.2 - Keyboard trap Adding question - Infinite editing - No keyboard trap present Forms (top menu)  
141 Level A : 2.4.3 - Illogical focus order Adding question - when selection made, focus does not return to flow (goes to top of page) Forms (top menu)  
142 Level A : 1.3.1 - Fieldset missing legend Add question - 'Default value' + 'placeholder' - missing form label - identified as "Edit blank" - screen reader Forms (top menu)  
143 Level A : 3.3.2 - Form fields missing associated form labels Add question - 'Validation' drop down is missing form label - "Combo box collapsed" Forms (top menu)  
 
144 Level A : 3.3.2 - Form fields missing associated form labels When activate - Left hand menu - Top item changes to "English (United States) drop down - identified as "List with 1 item heading level 5" - screen reader Duel language  
145 Level A : 2.4.4 - Unclear link/button text Language drop downs do not advise as drop downs - screen readers Duel language  
146 Level A : 2.4.4 - Unclear link/button text Close 'X' icon next to language drop down is identified as "link" - screen reader Duel language  
147 Level A : 2.1.1 - Keyboard and screen reader Although one side is dimmed out/unable to click in with mouse, the RTE area and the '+' icon can be tabbed to and interacted with Duel language  
148 Level A : 2.1.1 - Keyboard and screen reader Dimmed content may benefit from ARIA-Hidden role to advise user to use other column to edit both - screen reader Duel language  
149 Level A : 2.1.1 - Keyboard and screen reader Reorder' button is displaying about title and appearing twice - seems inconsistent Duel language  
150 Level A : 2.1.1 - Keyboard and screen reader Reorder button is repeated Duel language  
151 Level A : 3.3.2 - Form fields missing associated form labels Missing many form labels Duel language  
@MMasey

This comment has been minimized.

Copy link
Contributor Author

commented Apr 16, 2019

Here are some links to various tools and reference materiel should you require any help 🙂

Websites & Articles

Tools

Activate built in screen reader

  • Mac - toggle Voice Over by pressing Command-F5
  • PC- toggle Narrator by pressing Ctrl + Winkey +Enter
@MMasey

This comment has been minimized.

Copy link
Contributor Author

commented Apr 20, 2019

PR for addressing 26 & 28 - #5304

@shane-sigma

This comment has been minimized.

Copy link
Contributor

commented Apr 23, 2019

PR for 4 - #5320

@shane-sigma

This comment has been minimized.

Copy link
Contributor

commented Apr 24, 2019

PR for 11 - #5333

@shane-sigma

This comment has been minimized.

Copy link
Contributor

commented Apr 24, 2019

PR for 19 - #5334

It's worth noting that many of these focus state bugs are related to there being specific outline:0 rules in the CSS.
From an accessibility POV, these should not be present without an alternate focus state/style - which isn't generally present from what I have seen - it would be good to completely remove all of these rules but I am unsure of why they were added in the first place, it's also worth considering any knock-on effect that the removal of these styles might cause.

@MMasey

This comment has been minimized.

Copy link
Contributor Author

commented Apr 24, 2019

PR for 19 - #5334

It's worth noting that many of these focus state bugs are related to there being specific outline:0 rules in the CSS.
From an accessibility POV, these should not be present without an alternate focus state/style - which isn't generally present from what I have seen - it would be good to completely remove all of these rules but I am unsure of why they were added in the first place, it's also worth considering any knock-on effect that the removal of these styles might cause.

Thanks for the great work Shane, as per the comments in your PR, I've updated the table with the PR submitted by @nielslyngsoe for 19.

@Matthew-Wise

This comment has been minimized.

Copy link
Contributor

commented May 11, 2019

PR for 27 #5450

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.