Google Cloud Platform (GCP) Accessibility and Usability Information

Poor magnification and reflow on several pages

Throughout the platform, many pages have poor magnification and reflow support. Most reflow issues found in testing occur at 200% zoom or higher. A common source of issue is fixed elements that take up half of the user’s viewport at 300–400% zoom and leave little room for scrolling or viewing content. 

Notable: There was one instance in testing where magnifying the viewport to 125% zoom caused a glitch that may have severe user impact. When viewing Storage Bucket Details at 125% with the Learn pane open, there seems to be a reflow glitch that causes elements to visually shift back and forth, resulting in rapid movement/blinking that could cause discomfort or potentially seizure for users with neurological disabilities.

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Web content can be enlarged without loss of information or functionality. (1.4.10)
• Operable: Avoid content that flashes, or keep it under thresholds. (WCAG 2.3.1)

Interactive elements in some tables are announced improperly by screen reader

In some tables with interactive elements (such as checkboxes, radio buttons, or links), occasionally one or all cells that contain an interactive element may be announced as a nonsensical string of text (numbers, words, characters). This could make it difficult for screen reader users to understand the information contained in the table or perform the appropriate actions. 

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Information about content structure is available via screen reader. (1.3.1)

Several help tooltips and buttons are not labeled contextually for screen reader use

Throughout the platform, several help tooltips and other buttons (such as Refresh buttons) are not labeled contextually for easy screen reader navigation. For example, a tooltip button next to a filtering element is announced as “Help with filtering” in most instances, but in some pages and workflows, several tooltip buttons are announced as just “Help button.” 

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Information about content structure is available via screen reader. (1.3.1)

Missing or inconsistent heading structure on some pages

Throughout the platform, there is some inconsistency in how heading structure is applied to different pages. Some pages have no headings (other than headings in navigation mega-menu); some pages have a few headings but still do not reflect the visual information hierarchy of the page. 

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Information about content structure is available via screen reader. (1.3.1)
• Operable: A page's content is described in headings and labels. (2.4.6)

Low contrast of Next, Back, and Done button text color (focus state) in guided tour modals

In any guided tour modal, the text color used for Next, Back, and Done buttons in focus state has a contrast ratio of 4:1 against the dark blue background color.

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Text has a contrast ratio of at least 4.5:1 against background color(s). (1.4.3)

Low contrast of Close button focus outline color in toast notifications

In any toast notification, the Close button focus outline color is dark blue, which has a 2.2:1 contrast ratio against the gray button background color. 

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Important visual cues have a contrast ratio of at least 3:1 against adjacent color(s). (1.4.11)

Help flyouts lack a visual label/heading

Throughout the platform, the flyouts that open upon activating a help tooltip lack a visual label or heading. A visual label or heading could make it clearer to users which concept/column header the tooltip is describing, especially for users with cognitive disabilities who may have memory difficulties or users with motor disabilities who may misclick. 

This barrier primarily relates to the following guidelines:

• Usability

Links lack descriptive visual text

Throughout the platform, most links just have “Learn more” as the visual link text. There is screen reader labeling that ensures a more contextual announcement for screen reader users, but it would still be helpful for visual users to have the benefit of more descriptive link text. Even if the visual link text weren’t as robust as the screen reader announcement, something like “Learn more about [topic]” would be an improvement.

This barrier primarily relates to the following guidelines:

• Usability

Number of errors is not clear when user errs while creating a bucket

Upon attempting to create a bucket with errors in some field(s), there is an error message that is both visually displayed at the top of the page and announced by a screen reader. However, the error message does not specify how many errors there are — it just says “Make sure all fields are correct. [...] Go to issues” with a jump link. If there is only one issue, that may not be clear to users. 

This barrier primarily relates to the following accessibility guidelines:

• Understandable: Users know which fields have errors and what each error is. (3.3.1)
• Usability

“Selected” screen reader announcement does not include info on how to access the action toolbar

Upon selecting a bucket from the table list, an action toolbar appears at the top of the page where the user can choose to delete the bucket or edit its permissions, tags, or labels. However, there are no screen reader instructions provided on how to access the toolbar (or even that the toolbar has appeared). 

This barrier primarily relates to the following accessibility guidelines:

• Understandable: Content can be operated more predictably. (3.2.2)
• Usability

Screen reader label for “DELETE” confirmation field is not descriptive enough

In the delete confirmation dialog, the field that requires the user to manually enter “DELETE” only announces “Delete” as its screen reader label. Ideally, the field’s label should be “Confirm deletion by entering ‘DELETE’ below.” 

This barrier primarily relates to the following accessibility guidelines:

• Operable: A page's content is properly described in headings and labels. (2.4.6)

Lack of consistent, clear, and prompt screen reader announcements

Throughout the Compute Engine workflow, there are various instances where tasks are either lacking confirmation announcements via screen reader, or the announcement is unclear or not prompt. Examples include: 

• Upon refreshing the Overview page, the confirmation screen reader announcement (“showing x–x of xx”) is referring to a data table that lists unprotected regions near the bottom of the page. This may not be clear to screen reader users because the announcement is just numbers without context. 

• When using Gemini to generate Machine Type suggestions while creating a new VM instance, there is no confirmation or “finished loading” announcement when the results are displayed. 

• Upon successfully creating a VM instance, there is no confirmation announcement. 

• Upon deleting a VM instance, the “Deleting…” toast notification is promptly announced, but the “Deleted” toast notification that confirms deletion is not immediately announced upon its appearance. The “Deleted” toast notification is only announced after everything else on the page is read. 

This barrier primarily relates to the following accessibility guidelines:

• Robust: Make users aware of important changes in content. (4.1.3)

Save As and Cancel buttons are part of action toolbar, which makes navigating to them more difficult via screen reader

In the Explore Data window, the Save As and Cancel buttons are part of the action toolbar at the top of the page, which makes navigating to them more tedious and difficult, especially by screen reader. Buttons that are this important should ideally each receive a distinct tab stop in the page’s tab order, instead of being grouped as part of a tabbed content component. 

This barrier primarily relates to the following accessibility guidelines:

• Usability

Misconfigurations visualization is not interactive by keyboard or screen reader

Data points (bars) within the Misconfigurations visualization reveal additional information on mouse hover, but these tooltips cannot be triggered when navigating via keyboard or screen reader. Though similar data is available in table format in the “By resource type” and “By category” tabs, this is not clear to screen reader users. 

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Ensure access to text alternatives for visual and auditory content. (1.1.1)
• Operable: Ensure mouse pointer actions have a keyboard equivalent. (2.1.1)

‘All Risk’ button to open collapsed menu (at high magnification) lacks visible focus outline

When risk category buttons collapse into a dropdown menu at 200% zoom or higher, the “All Risk” toggle button to open the menu lacks a visible keyboard focus outline. 

This barrier primarily relates to the following accessibility guidelines:

• Operable: Users know which element has keyboard focus. (2.4.7)

No dynamic announcement upon adjusting time range filter for Threats histogram

Upon adjusting the time range filter for the Threats histogram, the information displayed visually changes, but there is no dynamic screen reader announcement to let the user know what has changed. 

This barrier primarily relates to the following accessibility guidelines:

• Robust: Make users aware of important changes in content. (4.1.3)

‘Popover’ tooltip in Threats histogram is not interactive by keyboard or screen reader

Data points (bars) within the Threats histogram reveal additional information on mouse hover. While these tooltips can be triggered when navigating via keyboard or screen reader, there is interactive content within the tooltip region (“popover”) that cannot be accessed by keyboard or screen reader. 

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Ensure access to text alternatives for visual and auditory content. (1.1.1)
• Operable: Ensure mouse pointer actions have a keyboard equivalent. (2.1.1)

Billing account combobox selector is mislabeled as ‘section’

In the navigation pane, the Billing account combobox selector is announced as “section” without further context. It seems to be mislabeled. 

This barrier primarily relates to the following accessibility guidelines:

• Operable: A page's content is properly described in headings and labels. (2.4.6)

Low contrast of blue focus outline against blue bars in visualization

When navigating the Billing Account Overview visualization by keyboard, the focus indicator for each bar within the graph is blue, but the bar fill color is also blue, making it extremely difficult for users to identify where their focus is.

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Important visual cues have a contrast ratio of at least 3:1 against adjacent color(s). (1.4.11)

Low contrast of focus styling for Billing Reports filter buttons

When viewing a Billing Report, all of the filter buttons have a focus state of slight shading/text darkening that is barely visible against the page background color. 

This barrier primarily relates to the following accessibility guidelines:

• Perceivable: Important visual cues have a contrast ratio of at least 3:1 against adjacent color(s). (1.4.11)