Looker

Developers

Looker

Developers

    Accessibility

    Best Practices

    • Buttons do not open a new page, use links instead
    • Buttons can open dialogs and menus, but should use the proper ARIA attributes

    Markup Expectations

    • Always use the <button> element. This solves most of the accessibly concerns for free.

    Labeling Expectations

    • Use clear and descriptive labels. By default this is the text inside the <Button> component.
    • Ambiguous labels like "click here", "run", "save" are ok for sighted users but can lack context for users using assistive technology. Use the aria-label attribute to provide an accessible label for all <Button> components with potentially ambiguous labels.
    • Icon only buttons must provide a descriptive label using the aria-label attribute.

    Focus Expectations

    • Buttons with :focus should have an outline and/or a visible change to show it has focus.

    Keyboard Expectations

    • Buttons with focus should be activated when user hits the ENTER and SPACEBAR keys
    • If button has focus, TAB and SHIFT+TAB should move focus to next focusable element.

    Related Aria Attributes

    aria-label

    Use this to provide more context and an accessible label for <Button> components. Must be used for buttons with ambiguous labels and icon only buttons.

    For example <Button aria-label="Save Dashboard">Save</Button> would be announced as "Save Dashboard Button" by a screen reader instead of just "Save Button".

    aria-haspopup

    Use this to indicate that when the buttons is pressed a popup is triggered. A popup can be a dialog or menu.

    For example say you have an icon-only button that reveals a set of options in a context menu when clicked, you would do the following:

    <Button aria-haspopup="true" aria-label="Look Settings">
    Settings
    </Button>

    This would be announced as "Look Settings popup button" by a screen reader.

    Keep up with Looker developer updates

    API

    OverviewGetting StartedInteractive ReferenceAdvanced UsageExamples & SamplesArticles & Tutorials

    Embedding

    OverviewGetting StartedEmbed SDKAdvanced EmbeddingTroubleshooting

    Actions

    OverviewGetting StartedWriting Custom ActionsExamples & Samples

    Extensions

    OverviewGetting StartedAPI ReferenceExamples & Samples

    Components

    OverviewGetting StartedInteractive ReferenceDesign FoundationsVisualization Components

    Marketplace

    OverviewGetting StartedVisit the Marketplace

    Community

    EventsForumsOpen Source

    © 2021 Looker Data Sciences, Inc.
    Privacy | Terms | Cookies