diff --git a/packages/bar/src/Bar.tsx b/packages/bar/src/Bar.tsx
index 3a1540b9b8..b3620dd52a 100644
--- a/packages/bar/src/Bar.tsx
+++ b/packages/bar/src/Bar.tsx
@@ -1,13 +1,6 @@
 import { Axes, Grid } from '@nivo/axes'
 import { BarAnnotations } from './BarAnnotations'
-import {
-    BarDatum,
-    BarLayer,
-    BarLayerId,
-    BarSvgProps,
-    ComputedBarDatumWithValue,
-    LegendData,
-} from './types'
+import { BarDatum, BarLayer, BarLayerId, BarSvgProps, ComputedBarDatumWithValue } from './types'
 import { BarLegends } from './BarLegends'
 import {
     // @ts-ignore
@@ -18,15 +11,12 @@ import {
     bindDefs,
     useDimensions,
     useMotionConfig,
-    usePropertyAccessor,
     useTheme,
-    useValueFormatter,
 } from '@nivo/core'
-import { Fragment, ReactNode, createElement, useCallback, useMemo, useState } from 'react'
-import { generateGroupedBars, generateStackedBars, getLegendData } from './compute'
+import { Fragment, ReactNode, createElement, useMemo } from 'react'
 import { svgDefaultProps } from './props'
-import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
 import { useTransition } from '@react-spring/web'
+import { useBar } from './hooks'
 
 type InnerBarProps<RawDatum extends BarDatum> = Omit<
     BarSvgProps<RawDatum>,
@@ -35,24 +25,24 @@ type InnerBarProps<RawDatum extends BarDatum> = Omit<
 
 const InnerBar = <RawDatum extends BarDatum>({
     data,
-    indexBy = svgDefaultProps.indexBy,
-    keys = svgDefaultProps.keys,
+    indexBy,
+    keys,
 
     margin: partialMargin,
     width,
     height,
 
-    groupMode = svgDefaultProps.groupMode,
-    layout = svgDefaultProps.layout,
-    reverse = svgDefaultProps.reverse,
-    minValue = svgDefaultProps.minValue,
-    maxValue = svgDefaultProps.maxValue,
+    groupMode,
+    layout,
+    reverse,
+    minValue,
+    maxValue,
 
-    valueScale = svgDefaultProps.valueScale,
-    indexScale = svgDefaultProps.indexScale,
+    valueScale,
+    indexScale,
 
-    padding = svgDefaultProps.padding,
-    innerPadding = svgDefaultProps.innerPadding,
+    padding,
+    innerPadding,
 
     axisTop,
     axisRight,
@@ -66,26 +56,26 @@ const InnerBar = <RawDatum extends BarDatum>({
     layers = svgDefaultProps.layers as BarLayer<RawDatum>[],
     barComponent = svgDefaultProps.barComponent,
 
-    enableLabel = svgDefaultProps.enableLabel,
-    label = svgDefaultProps.label,
-    labelSkipWidth = svgDefaultProps.labelSkipWidth,
-    labelSkipHeight = svgDefaultProps.labelSkipHeight,
-    labelTextColor = svgDefaultProps.labelTextColor,
+    enableLabel,
+    label,
+    labelSkipWidth,
+    labelSkipHeight,
+    labelTextColor,
 
     markers,
 
-    colorBy = svgDefaultProps.colorBy,
-    colors = svgDefaultProps.colors,
+    colorBy,
+    colors,
     defs = svgDefaultProps.defs,
     fill = svgDefaultProps.fill,
     borderRadius = svgDefaultProps.borderRadius,
     borderWidth = svgDefaultProps.borderWidth,
-    borderColor = svgDefaultProps.borderColor,
+    borderColor,
 
     annotations = svgDefaultProps.annotations,
 
     legendLabel,
-    tooltipLabel = svgDefaultProps.tooltipLabel,
+    tooltipLabel,
 
     valueFormat,
 
@@ -95,19 +85,19 @@ const InnerBar = <RawDatum extends BarDatum>({
     onMouseEnter,
     onMouseLeave,
 
-    legends = svgDefaultProps.legends,
+    legends,
 
     role = svgDefaultProps.role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    isFocusable = svgDefaultProps.isFocusable,
+    barAriaLabel,
+    barAriaLabelledBy,
+    barAriaDescribedBy,
 
     initialHiddenIds,
 }: InnerBarProps<RawDatum>) => {
-    const [hiddenIds, setHiddenIds] = useState(initialHiddenIds ?? [])
-    const toggleSerie = useCallback(id => {
-        setHiddenIds(state =>
-            state.indexOf(id) > -1 ? state.filter(item => item !== id) : [...state, id]
-        )
-    }, [])
-
     const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
@@ -116,59 +106,49 @@ const InnerBar = <RawDatum extends BarDatum>({
         partialMargin
     )
 
-    const formatValue = useValueFormatter(valueFormat)
-    const getBorderColor = useInheritedColor<ComputedBarDatumWithValue<RawDatum>>(
+    const {
+        bars,
+        barsWithValue,
+        xScale,
+        yScale,
+        getLabel,
+        getTooltipLabel,
+        getBorderColor,
+        getLabelColor,
+        shouldRenderBarLabel,
+        toggleSerie,
+        legendsWithData,
+    } = useBar<RawDatum>({
+        indexBy,
+        label,
+        tooltipLabel,
+        valueFormat,
+        colors,
+        colorBy,
         borderColor,
-        theme
-    )
-    const getColor = useOrdinalColorScale(colors, colorBy)
-    const getIndex = usePropertyAccessor(indexBy)
-    const getLabel = usePropertyAccessor(label)
-    const getLabelColor = useInheritedColor<ComputedBarDatumWithValue<RawDatum>>(
         labelTextColor,
-        theme
-    )
-    const getTooltipLabel = usePropertyAccessor(tooltipLabel)
-
-    const generateBars = groupMode === 'grouped' ? generateGroupedBars : generateStackedBars
-    const result = generateBars({
+        groupMode,
         layout,
         reverse,
         data,
-        getIndex,
         keys,
         minValue,
         maxValue,
+        margin,
         width: innerWidth,
         height: innerHeight,
-        getColor,
         padding,
         innerPadding,
         valueScale,
         indexScale,
-        hiddenIds,
-        formatValue,
-        getTooltipLabel,
+        enableLabel,
+        labelSkipWidth,
+        labelSkipHeight,
+        legends,
+        legendLabel,
+        initialHiddenIds,
     })
 
-    const legendData = useMemo(
-        () =>
-            keys.map(key => {
-                const bar = result.bars.find(bar => bar.data.id === key)
-
-                return { ...bar, data: { id: key, ...bar?.data, hidden: hiddenIds.includes(key) } }
-            }),
-        [hiddenIds, keys, result.bars]
-    )
-
-    const barsWithValue = useMemo(
-        () =>
-            result.bars.filter(
-                (bar): bar is ComputedBarDatumWithValue<RawDatum> => bar.data.value !== null
-            ),
-        [result.bars]
-    )
-
     const transition = useTransition<
         ComputedBarDatumWithValue<RawDatum>,
         {
@@ -249,16 +229,6 @@ const InnerBar = <RawDatum extends BarDatum>({
         immediate: !animate,
     })
 
-    const shouldRenderLabel = useCallback(
-        ({ width, height }: { height: number; width: number }) => {
-            if (!enableLabel) return false
-            if (labelSkipWidth > 0 && width < labelSkipWidth) return false
-            if (labelSkipHeight > 0 && height < labelSkipHeight) return false
-            return true
-        },
-        [enableLabel, labelSkipHeight, labelSkipWidth]
-    )
-
     const commonProps = useMemo(
         () => ({
             borderRadius,
@@ -272,6 +242,10 @@ const InnerBar = <RawDatum extends BarDatum>({
             onMouseLeave,
             getTooltipLabel,
             tooltip,
+            isFocusable,
+            ariaLabel: barAriaLabel,
+            ariaLabelledBy: barAriaLabelledBy,
+            ariaDescribedBy: barAriaDescribedBy,
         }),
         [
             borderRadius,
@@ -285,10 +259,14 @@ const InnerBar = <RawDatum extends BarDatum>({
             onMouseEnter,
             onMouseLeave,
             tooltip,
+            isFocusable,
+            barAriaLabel,
+            barAriaLabelledBy,
+            barAriaDescribedBy,
         ]
     )
 
-    const boundDefs = bindDefs(defs, result.bars, fill, {
+    const boundDefs = bindDefs(defs, bars, fill, {
         dataKey: 'data',
         targetKey: 'data.fill',
     })
@@ -304,7 +282,7 @@ const InnerBar = <RawDatum extends BarDatum>({
 
     if (layers.includes('annotations')) {
         layerById.annotations = (
-            <BarAnnotations key="annotations" bars={result.bars} annotations={annotations} />
+            <BarAnnotations key="annotations" bars={bars} annotations={annotations} />
         )
     }
 
@@ -312,8 +290,8 @@ const InnerBar = <RawDatum extends BarDatum>({
         layerById.axes = (
             <Axes
                 key="axes"
-                xScale={result.xScale as any}
-                yScale={result.yScale as any}
+                xScale={xScale as any}
+                yScale={yScale as any}
                 width={innerWidth}
                 height={innerHeight}
                 top={axisTop}
@@ -332,7 +310,7 @@ const InnerBar = <RawDatum extends BarDatum>({
                         ...commonProps,
                         bar,
                         style,
-                        shouldRenderLabel: shouldRenderLabel(bar),
+                        shouldRenderLabel: shouldRenderBarLabel(bar),
                         label: getLabel(bar.data),
                     })
                 )}
@@ -346,8 +324,8 @@ const InnerBar = <RawDatum extends BarDatum>({
                 key="grid"
                 width={innerWidth}
                 height={innerHeight}
-                xScale={enableGridX ? (result.xScale as any) : null}
-                yScale={enableGridY ? (result.yScale as any) : null}
+                xScale={enableGridX ? (xScale as any) : null}
+                yScale={enableGridY ? (yScale as any) : null}
                 xValues={gridXValues}
                 yValues={gridYValues}
             />
@@ -355,27 +333,12 @@ const InnerBar = <RawDatum extends BarDatum>({
     }
 
     if (layers.includes('legends')) {
-        const data = ([] as LegendData[]).concat(
-            ...legends.map(legend =>
-                getLegendData({
-                    bars: legend.dataFrom === 'keys' ? legendData : result.bars,
-                    direction: legend.direction,
-                    from: legend.dataFrom,
-                    groupMode,
-                    layout,
-                    legendLabel,
-                    reverse,
-                })
-            )
-        )
-
         layerById.legends = (
             <BarLegends
                 key="legends"
                 width={innerWidth}
                 height={innerHeight}
-                data={data}
-                legends={legends}
+                legends={legendsWithData}
                 toggleSerie={toggleSerie}
             />
         )
@@ -388,8 +351,8 @@ const InnerBar = <RawDatum extends BarDatum>({
                 markers={markers}
                 width={innerWidth}
                 height={innerHeight}
-                xScale={result.xScale}
-                yScale={result.yScale}
+                xScale={xScale}
+                yScale={yScale}
                 theme={theme}
             />
         )
@@ -404,9 +367,11 @@ const InnerBar = <RawDatum extends BarDatum>({
             innerHeight,
             width,
             height,
-            ...result,
+            bars,
+            xScale,
+            yScale,
         }),
-        [commonProps, height, innerHeight, innerWidth, margin, result, width]
+        [commonProps, margin, innerWidth, innerHeight, width, height, bars, xScale, yScale]
     )
 
     return (
@@ -416,6 +381,10 @@ const InnerBar = <RawDatum extends BarDatum>({
             margin={margin}
             defs={boundDefs}
             role={role}
+            ariaLabel={ariaLabel}
+            ariaLabelledBy={ariaLabelledBy}
+            ariaDescribedBy={ariaDescribedBy}
+            isFocusable={isFocusable}
         >
             {layers.map((layer, i) => {
                 if (typeof layer === 'function') {
diff --git a/packages/bar/src/BarCanvas.tsx b/packages/bar/src/BarCanvas.tsx
index adb44cb654..a6e677ef1c 100644
--- a/packages/bar/src/BarCanvas.tsx
+++ b/packages/bar/src/BarCanvas.tsx
@@ -1,19 +1,11 @@
-import {
-    BarCanvasLayer,
-    BarCanvasProps,
-    BarDatum,
-    ComputedBarDatum,
-    ComputedBarDatumWithValue,
-} from './types'
+import { BarCanvasLayer, BarCanvasProps, BarDatum, ComputedBarDatum } from './types'
 import {
     Container,
     Margin,
     getRelativeCursor,
     isCursorInRect,
     useDimensions,
-    usePropertyAccessor,
     useTheme,
-    useValueFormatter,
 } from '@nivo/core'
 import {
     ForwardedRef,
@@ -25,7 +17,6 @@ import {
     useRef,
 } from 'react'
 import { canvasDefaultProps } from './props'
-import { generateGroupedBars, generateStackedBars, getLegendData } from './compute'
 import {
     renderAnnotationsToCanvas,
     useAnnotations,
@@ -33,8 +24,8 @@ import {
 } from '@nivo/annotations'
 import { renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
 import { renderLegendToCanvas } from '@nivo/legends'
-import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
 import { useTooltip } from '@nivo/tooltip'
+import { useBar } from './hooks'
 
 declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/ban-types
@@ -64,24 +55,24 @@ const isNumber = (value: unknown): value is number => typeof value === 'number'
 
 const InnerBarCanvas = <RawDatum extends BarDatum>({
     data,
-    indexBy = canvasDefaultProps.indexBy,
-    keys = canvasDefaultProps.keys,
+    indexBy,
+    keys,
 
     margin: partialMargin,
     width,
     height,
 
-    groupMode = canvasDefaultProps.groupMode,
-    layout = canvasDefaultProps.layout,
-    reverse = canvasDefaultProps.reverse,
-    minValue = canvasDefaultProps.minValue,
-    maxValue = canvasDefaultProps.maxValue,
+    groupMode,
+    layout,
+    reverse,
+    minValue,
+    maxValue,
 
-    valueScale = canvasDefaultProps.valueScale,
-    indexScale = canvasDefaultProps.indexScale,
+    valueScale,
+    indexScale,
 
-    padding = canvasDefaultProps.padding,
-    innerPadding = canvasDefaultProps.innerPadding,
+    padding,
+    innerPadding,
 
     axisTop,
     axisRight,
@@ -146,22 +137,22 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         }
     },
 
-    enableLabel = canvasDefaultProps.enableLabel,
-    label = canvasDefaultProps.label,
-    labelSkipWidth = canvasDefaultProps.labelSkipWidth,
-    labelSkipHeight = canvasDefaultProps.labelSkipHeight,
-    labelTextColor = canvasDefaultProps.labelTextColor,
+    enableLabel,
+    label,
+    labelSkipWidth,
+    labelSkipHeight,
+    labelTextColor,
 
-    colorBy = canvasDefaultProps.colorBy,
-    colors = canvasDefaultProps.colors,
+    colorBy,
+    colors,
     borderRadius = canvasDefaultProps.borderRadius,
     borderWidth = canvasDefaultProps.borderWidth,
-    borderColor = canvasDefaultProps.borderColor,
+    borderColor,
 
     annotations = canvasDefaultProps.annotations,
 
     legendLabel,
-    tooltipLabel = canvasDefaultProps.tooltipLabel,
+    tooltipLabel,
 
     valueFormat,
 
@@ -171,7 +162,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
     onMouseEnter,
     onMouseLeave,
 
-    legends = canvasDefaultProps.legends,
+    legends,
 
     pixelRatio = canvasDefaultProps.pixelRatio,
 
@@ -186,76 +177,53 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         partialMargin
     )
 
-    const { showTooltipFromEvent, hideTooltip } = useTooltip()
-
-    const formatValue = useValueFormatter(valueFormat)
-    const getBorderColor = useInheritedColor<ComputedBarDatumWithValue<RawDatum>>(
+    const {
+        bars,
+        barsWithValue,
+        xScale,
+        yScale,
+        getLabel,
+        getTooltipLabel,
+        getBorderColor,
+        getLabelColor,
+        shouldRenderBarLabel,
+        legendsWithData,
+    } = useBar<RawDatum>({
+        indexBy,
+        label,
+        tooltipLabel,
+        valueFormat,
+        colors,
+        colorBy,
         borderColor,
-        theme
-    )
-    const getColor = useOrdinalColorScale(colors, colorBy)
-    const getIndex = usePropertyAccessor(indexBy)
-    const getLabel = usePropertyAccessor(label)
-    const getLabelColor = useInheritedColor<ComputedBarDatumWithValue<RawDatum>>(
         labelTextColor,
-        theme
-    )
-    const getTooltipLabel = usePropertyAccessor(tooltipLabel)
-
-    const options = {
+        groupMode,
         layout,
         reverse,
         data,
-        getIndex,
         keys,
         minValue,
         maxValue,
+        margin,
         width: innerWidth,
         height: innerHeight,
-        getColor,
         padding,
         innerPadding,
         valueScale,
         indexScale,
-        formatValue,
-        getTooltipLabel,
-    }
-
-    const result =
-        groupMode === 'grouped' ? generateGroupedBars(options) : generateStackedBars(options)
-
-    const legendData = useMemo(
-        () =>
-            keys.map(key => {
-                const bar = result.bars.find(bar => bar.data.id === key)
-
-                return { ...bar, data: { id: key, ...bar?.data, hidden: false } }
-            }),
-        [keys, result.bars]
-    )
-
-    const barsWithValue = useMemo(
-        () =>
-            result.bars.filter(
-                (bar): bar is ComputedBarDatumWithValue<RawDatum> => bar.data.value !== null
-            ),
-        [result.bars]
-    )
+        enableLabel,
+        labelSkipWidth,
+        labelSkipHeight,
+        legends,
+        legendLabel,
+    })
 
-    const shouldRenderLabel = useCallback(
-        ({ width, height }: { height: number; width: number }) => {
-            if (!enableLabel) return false
-            if (labelSkipWidth > 0 && width < labelSkipWidth) return false
-            if (labelSkipHeight > 0 && height < labelSkipHeight) return false
-            return true
-        },
-        [enableLabel, labelSkipHeight, labelSkipWidth]
-    )
+    const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     // Using any because return type isn't correct
     const boundAnnotations: any = useComputedAnnotations({
         annotations: useAnnotations({
-            data: result.bars,
+            data: bars,
             annotations,
             getPosition: node => ({
                 x: node.x,
@@ -288,7 +256,9 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
             innerHeight,
             width,
             height,
-            ...result,
+            bars,
+            xScale,
+            yScale,
         }),
         [
             borderRadius,
@@ -305,7 +275,9 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
             onClick,
             onMouseEnter,
             onMouseLeave,
-            result,
+            bars,
+            xScale,
+            yScale,
             tooltip,
             width,
         ]
@@ -336,7 +308,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                         renderGridLinesToCanvas<string | number>(ctx, {
                             width,
                             height,
-                            scale: result.xScale as any,
+                            scale: xScale as any,
                             axis: 'x',
                             values: gridXValues,
                         })
@@ -346,7 +318,7 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                         renderGridLinesToCanvas<string | number>(ctx, {
                             width,
                             height,
-                            scale: result.yScale as any,
+                            scale: yScale as any,
                             axis: 'y',
                             values: gridYValues,
                         })
@@ -354,8 +326,8 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                 }
             } else if (layer === 'axes') {
                 renderAxesToCanvas(ctx, {
-                    xScale: result.xScale as any,
-                    yScale: result.yScale as any,
+                    xScale: xScale as any,
+                    yScale: yScale as any,
                     width: innerWidth,
                     height: innerHeight,
                     top: axisTop,
@@ -373,21 +345,11 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                         borderWidth,
                         label: getLabel(bar.data),
                         labelColor: getLabelColor(bar) as string,
-                        shouldRenderLabel: shouldRenderLabel(bar),
+                        shouldRenderLabel: shouldRenderBarLabel(bar),
                     })
                 })
             } else if (layer === 'legends') {
-                legends.forEach(legend => {
-                    const data = getLegendData({
-                        bars: legendData,
-                        direction: legend.direction,
-                        from: legend.dataFrom,
-                        groupMode,
-                        layout,
-                        legendLabel,
-                        reverse,
-                    })
-
+                legendsWithData.forEach(([legend, data]) => {
                     renderLegendToCanvas(ctx, {
                         ...legend,
                         data,
@@ -427,30 +389,28 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
         layerContext,
         layers,
         layout,
-        legendData,
-        legendLabel,
-        legends,
+        legendsWithData,
         margin.left,
         margin.top,
         outerHeight,
         outerWidth,
         pixelRatio,
         renderBar,
-        result.xScale,
-        result.yScale,
+        xScale,
+        yScale,
         reverse,
-        shouldRenderLabel,
+        shouldRenderBarLabel,
         theme,
         width,
     ])
 
     const handleMouseHover = useCallback(
         (event: React.MouseEvent<HTMLCanvasElement>) => {
-            if (!result.bars) return
+            if (!bars) return
             if (!canvasEl.current) return
 
             const [x, y] = getRelativeCursor(canvasEl.current, event)
-            const bar = findBarUnderCursor(result.bars, margin, x, y)
+            const bar = findBarUnderCursor(bars, margin, x, y)
 
             if (bar !== undefined) {
                 showTooltipFromEvent(
@@ -470,39 +430,39 @@ const InnerBarCanvas = <RawDatum extends BarDatum>({
                 hideTooltip()
             }
         },
-        [hideTooltip, margin, onMouseEnter, result.bars, showTooltipFromEvent, tooltip]
+        [hideTooltip, margin, onMouseEnter, bars, showTooltipFromEvent, tooltip]
     )
 
     const handleMouseLeave = useCallback(
         (event: React.MouseEvent<HTMLCanvasElement>) => {
-            if (!result.bars) return
+            if (!bars) return
             if (!canvasEl.current) return
 
             hideTooltip()
 
             const [x, y] = getRelativeCursor(canvasEl.current, event)
-            const bar = findBarUnderCursor(result.bars, margin, x, y)
+            const bar = findBarUnderCursor(bars, margin, x, y)
 
             if (bar) {
                 onMouseLeave?.(bar.data, event)
             }
         },
-        [hideTooltip, margin, onMouseLeave, result.bars]
+        [hideTooltip, margin, onMouseLeave, bars]
     )
 
     const handleClick = useCallback(
         (event: React.MouseEvent<HTMLCanvasElement>) => {
-            if (!result.bars) return
+            if (!bars) return
             if (!canvasEl.current) return
 
             const [x, y] = getRelativeCursor(canvasEl.current, event)
-            const bar = findBarUnderCursor(result.bars, margin, x, y)
+            const bar = findBarUnderCursor(bars, margin, x, y)
 
             if (bar !== undefined) {
                 onClick?.({ ...bar.data, color: bar.color }, event)
             }
         },
-        [margin, onClick, result.bars]
+        [margin, onClick, bars]
     )
 
     return (
diff --git a/packages/bar/src/BarItem.tsx b/packages/bar/src/BarItem.tsx
index 6c4221c396..a84fec3930 100644
--- a/packages/bar/src/BarItem.tsx
+++ b/packages/bar/src/BarItem.tsx
@@ -1,8 +1,8 @@
-import { BarDatum, BarItemProps } from './types'
+import { createElement, MouseEvent, useCallback, useMemo } from 'react'
 import { animated, to } from '@react-spring/web'
-import { createElement, useCallback } from 'react'
 import { useTheme } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
+import { BarDatum, BarItemProps } from './types'
 
 export const BarItem = <RawDatum extends BarDatum>({
     bar: { data, ...bar },
@@ -31,36 +31,54 @@ export const BarItem = <RawDatum extends BarDatum>({
     onMouseLeave,
 
     tooltip,
+
+    isFocusable,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
 }: BarItemProps<RawDatum>) => {
     const theme = useTheme()
-    const { showTooltipFromEvent, hideTooltip } = useTooltip()
+    const { showTooltipFromEvent, showTooltipAt, hideTooltip } = useTooltip()
+
+    const renderTooltip = useMemo(() => () => createElement(tooltip, { ...bar, ...data }), [
+        tooltip,
+        bar,
+        data,
+    ])
 
     const handleClick = useCallback(
-        (event: React.MouseEvent<SVGRectElement>) => {
+        (event: MouseEvent<SVGRectElement>) => {
             onClick?.({ color: bar.color, ...data }, event)
         },
         [bar, data, onClick]
     )
     const handleTooltip = useCallback(
-        (event: React.MouseEvent<SVGRectElement>) =>
-            showTooltipFromEvent(createElement(tooltip, { ...bar, ...data }), event),
-        [bar, data, showTooltipFromEvent, tooltip]
+        (event: MouseEvent<SVGRectElement>) => showTooltipFromEvent(renderTooltip(), event),
+        [showTooltipFromEvent, renderTooltip]
     )
     const handleMouseEnter = useCallback(
-        (event: React.MouseEvent<SVGRectElement>) => {
+        (event: MouseEvent<SVGRectElement>) => {
             onMouseEnter?.(data, event)
-            showTooltipFromEvent(createElement(tooltip, { ...bar, ...data }), event)
+            showTooltipFromEvent(renderTooltip(), event)
         },
-        [bar, data, onMouseEnter, showTooltipFromEvent, tooltip]
+        [data, onMouseEnter, showTooltipFromEvent, renderTooltip]
     )
     const handleMouseLeave = useCallback(
-        (event: React.MouseEvent<SVGRectElement>) => {
+        (event: MouseEvent<SVGRectElement>) => {
             onMouseLeave?.(data, event)
             hideTooltip()
         },
         [data, hideTooltip, onMouseLeave]
     )
 
+    // extra handlers to allow keyboard navigation
+    const handleFocus = useCallback(() => {
+        showTooltipAt(renderTooltip(), [bar.absX + bar.width / 2, bar.absY])
+    }, [showTooltipAt, renderTooltip, bar])
+    const handleBlur = useCallback(() => {
+        hideTooltip()
+    }, [hideTooltip])
+
     return (
         <animated.g transform={transform}>
             <animated.rect
@@ -71,10 +89,17 @@ export const BarItem = <RawDatum extends BarDatum>({
                 fill={data.fill ?? color}
                 strokeWidth={borderWidth}
                 stroke={borderColor}
+                focusable={isFocusable}
+                tabIndex={isFocusable ? 0 : undefined}
+                aria-label={ariaLabel ? ariaLabel(data) : undefined}
+                aria-labelledby={ariaLabelledBy ? ariaLabelledBy(data) : undefined}
+                aria-describedby={ariaDescribedBy ? ariaDescribedBy(data) : undefined}
                 onMouseEnter={isInteractive ? handleMouseEnter : undefined}
                 onMouseMove={isInteractive ? handleTooltip : undefined}
                 onMouseLeave={isInteractive ? handleMouseLeave : undefined}
                 onClick={isInteractive ? handleClick : undefined}
+                onFocus={isInteractive && isFocusable ? handleFocus : undefined}
+                onBlur={isInteractive && isFocusable ? handleBlur : undefined}
             />
             {shouldRenderLabel && (
                 <animated.text
diff --git a/packages/bar/src/BarLegends.tsx b/packages/bar/src/BarLegends.tsx
index a5d312fbf3..9ef4a73bcd 100644
--- a/packages/bar/src/BarLegends.tsx
+++ b/packages/bar/src/BarLegends.tsx
@@ -1,35 +1,26 @@
 import { BoxLegendSvg } from '@nivo/legends'
-import { BarCommonProps, LegendData } from './types'
+import { BarLegendProps, LegendData } from './types'
 
-interface BarLegendsProps<RawDatum> {
+interface BarLegendsProps {
     width: number
     height: number
-    legends: BarCommonProps<RawDatum>['legends']
-    data: LegendData[]
+    legends: [BarLegendProps, LegendData[]][]
     toggleSerie: (id: string | number) => void
 }
 
-export const BarLegends = <RawDatum,>({
-    width,
-    height,
-    legends,
-    data,
-    toggleSerie,
-}: BarLegendsProps<RawDatum>) => {
-    return (
-        <>
-            {legends.map((legend, i) => (
-                <BoxLegendSvg
-                    key={i}
-                    {...legend}
-                    containerWidth={width}
-                    containerHeight={height}
-                    data={legend.data ?? data}
-                    toggleSerie={
-                        legend.toggleSerie && legend.dataFrom === 'keys' ? toggleSerie : undefined
-                    }
-                />
-            ))}
-        </>
-    )
-}
+export const BarLegends = ({ width, height, legends, toggleSerie }: BarLegendsProps) => (
+    <>
+        {legends.map(([legend, data], i) => (
+            <BoxLegendSvg
+                key={i}
+                {...legend}
+                containerWidth={width}
+                containerHeight={height}
+                data={legend.data ?? data}
+                toggleSerie={
+                    legend.toggleSerie && legend.dataFrom === 'keys' ? toggleSerie : undefined
+                }
+            />
+        ))}
+    </>
+)
diff --git a/packages/bar/src/compute/grouped.ts b/packages/bar/src/compute/grouped.ts
index 9d3d125959..ce7cf216eb 100644
--- a/packages/bar/src/compute/grouped.ts
+++ b/packages/bar/src/compute/grouped.ts
@@ -1,8 +1,8 @@
-import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
+import { Margin } from '@nivo/core'
 import { OrdinalColorScale } from '@nivo/colors'
-import { Scale, ScaleBand } from '@nivo/scales'
+import { Scale, ScaleBand, computeScale } from '@nivo/scales'
+import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
 import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
-import { computeScale } from '@nivo/scales'
 
 type Params<RawDatum, XScaleInput, YScaleInput> = {
     data: RawDatum[]
@@ -14,12 +14,12 @@ type Params<RawDatum, XScaleInput, YScaleInput> = {
     keys: string[]
     xScale: XScaleInput extends string ? ScaleBand<XScaleInput> : Scale<XScaleInput, number>
     yScale: YScaleInput extends string ? ScaleBand<YScaleInput> : Scale<YScaleInput, number>
+    margin: Margin
 }
 
 const gt = (value: number, other: number) => value > other
 const lt = (value: number, other: number) => value < other
 
-const flatten = <T>(array: T[][]) => ([] as T[]).concat(...array)
 const range = (start: number, end: number) =>
     Array.from(' '.repeat(end - start), (_, index) => start + index)
 
@@ -40,46 +40,49 @@ const generateVerticalGroupedBars = <RawDatum extends Record<string, unknown>>(
         keys,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, string, number>,
     barWidth: number,
     reverse: boolean,
     yRef: number
-) => {
+): ComputedBarDatum<RawDatum>[] => {
     const compare = reverse ? lt : gt
     const getY = (d: number) => (compare(d, 0) ? yScale(d) ?? 0 : yRef)
     const getHeight = (d: number, y: number) => (compare(d, 0) ? yRef - y : (yScale(d) ?? 0) - yRef)
     const cleanedData = data.map(filterNullValues)
 
-    const bars = flatten(
-        keys.map((key, i) =>
-            range(0, xScale.domain().length).map(index => {
-                const [rawValue, value] = coerceValue(data[index][key])
-                const indexValue = getIndex(data[index])
-                const x = (xScale(indexValue) ?? 0) + barWidth * i + innerPadding * i
-                const y = getY(value)
-                const barHeight = getHeight(value, y)
-                const barData = {
-                    id: key,
-                    value: rawValue === null ? rawValue : value,
-                    formattedValue: formatValue(value),
-                    hidden: false,
-                    index,
-                    indexValue,
-                    data: cleanedData[index],
-                }
-
-                return {
-                    key: `${key}.${barData.indexValue}`,
-                    data: barData,
-                    x,
-                    y,
-                    width: barWidth,
-                    height: barHeight,
-                    color: getColor(barData),
-                    label: getTooltipLabel(barData),
-                }
+    const bars: ComputedBarDatum<RawDatum>[] = []
+    keys.forEach((key, i) =>
+        range(0, xScale.domain().length).forEach(index => {
+            const [rawValue, value] = coerceValue(data[index][key])
+            const indexValue = getIndex(data[index])
+            const x = (xScale(indexValue) ?? 0) + barWidth * i + innerPadding * i
+            const y = getY(value)
+            const barHeight = getHeight(value, y)
+            const barData: ComputedDatum<RawDatum> = {
+                id: key,
+                value: rawValue === null ? rawValue : value,
+                formattedValue: formatValue(value),
+                hidden: false,
+                index,
+                indexValue,
+                data: cleanedData[index],
+            }
+
+            bars.push({
+                key: `${key}.${barData.indexValue}`,
+                index: bars.length,
+                data: barData,
+                x,
+                y,
+                absX: margin.left + x,
+                absY: margin.top + y,
+                width: barWidth,
+                height: barHeight,
+                color: getColor(barData),
+                label: getTooltipLabel(barData),
             })
-        )
+        })
     )
 
     return bars
@@ -99,46 +102,49 @@ const generateHorizontalGroupedBars = <RawDatum extends Record<string, unknown>>
         innerPadding = 0,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, number, string>,
     barHeight: number,
     reverse: boolean,
     xRef: number
-) => {
+): ComputedBarDatum<RawDatum>[] => {
     const compare = reverse ? lt : gt
     const getX = (d: number) => (compare(d, 0) ? xRef : xScale(d) ?? 0)
     const getWidth = (d: number, x: number) => (compare(d, 0) ? (xScale(d) ?? 0) - xRef : xRef - x)
     const cleanedData = data.map(filterNullValues)
 
-    const bars = flatten(
-        keys.map((key, i) =>
-            range(0, yScale.domain().length).map(index => {
-                const [rawValue, value] = coerceValue(data[index][key])
-                const indexValue = getIndex(data[index])
-                const x = getX(value)
-                const y = (yScale(indexValue) ?? 0) + barHeight * i + innerPadding * i
-                const barWidth = getWidth(value, x)
-                const barData = {
-                    id: key,
-                    value: rawValue === null ? rawValue : value,
-                    formattedValue: formatValue(value),
-                    hidden: false,
-                    index,
-                    indexValue,
-                    data: cleanedData[index],
-                }
-
-                return {
-                    key: `${key}.${barData.indexValue}`,
-                    data: barData,
-                    x,
-                    y,
-                    width: barWidth,
-                    height: barHeight,
-                    color: getColor(barData),
-                    label: getTooltipLabel(barData),
-                }
+    const bars: ComputedBarDatum<RawDatum>[] = []
+    keys.forEach((key, i) =>
+        range(0, yScale.domain().length).forEach(index => {
+            const [rawValue, value] = coerceValue(data[index][key])
+            const indexValue = getIndex(data[index])
+            const x = getX(value)
+            const y = (yScale(indexValue) ?? 0) + barHeight * i + innerPadding * i
+            const barWidth = getWidth(value, x)
+            const barData: ComputedDatum<RawDatum> = {
+                id: key,
+                value: rawValue === null ? rawValue : value,
+                formattedValue: formatValue(value),
+                hidden: false,
+                index,
+                indexValue,
+                data: cleanedData[index],
+            }
+
+            bars.push({
+                key: `${key}.${barData.indexValue}`,
+                index: bars.length,
+                data: barData,
+                x,
+                y,
+                absX: margin.left + x,
+                absY: margin.top + y,
+                width: barWidth,
+                height: barHeight,
+                color: getColor(barData),
+                label: getTooltipLabel(barData),
             })
-        )
+        })
     )
 
     return bars
@@ -179,6 +185,7 @@ export const generateGroupedBars = <RawDatum extends BarDatum>({
     getColor: OrdinalColorScale<ComputedDatum<RawDatum>>
     getIndex: (datum: RawDatum) => string
     getTooltipLabel: (datum: ComputedDatum<RawDatum>) => string
+    margin: Margin
     hiddenIds?: string[]
 }) => {
     const keys = props.keys.filter(key => !hiddenIds.includes(key))
diff --git a/packages/bar/src/compute/legends.ts b/packages/bar/src/compute/legends.ts
index 93d5925d1d..0a4fade185 100644
--- a/packages/bar/src/compute/legends.ts
+++ b/packages/bar/src/compute/legends.ts
@@ -1,4 +1,11 @@
-import { BarDatum, BarLegendProps, BarSvgProps, BarsWithHidden, LegendLabelDatum } from '../types'
+import {
+    BarDatum,
+    BarLegendProps,
+    BarSvgProps,
+    BarsWithHidden,
+    LegendData,
+    LegendLabelDatum,
+} from '../types'
 import { getPropertyAccessor } from '@nivo/core'
 import { uniqBy } from 'lodash'
 
@@ -9,7 +16,7 @@ export const getLegendDataForKeys = <RawDatum extends BarDatum>(
     groupMode: NonNullable<BarSvgProps<RawDatum>['groupMode']>,
     reverse: boolean,
     getLegendLabel: (datum: LegendLabelDatum<RawDatum>) => string
-) => {
+): LegendData[] => {
     const data = uniqBy(
         bars.map(bar => ({
             id: bar.data.id,
@@ -37,7 +44,7 @@ export const getLegendDataForIndexes = <RawDatum extends BarDatum>(
     bars: BarsWithHidden<RawDatum>,
     layout: NonNullable<BarSvgProps<RawDatum>['layout']>,
     getLegendLabel: (datum: LegendLabelDatum<RawDatum>) => string
-) => {
+): LegendData[] => {
     const data = uniqBy(
         bars.map(bar => ({
             id: bar.data.indexValue ?? '',
diff --git a/packages/bar/src/compute/stacked.ts b/packages/bar/src/compute/stacked.ts
index b8aa438b0f..cbf14f1469 100644
--- a/packages/bar/src/compute/stacked.ts
+++ b/packages/bar/src/compute/stacked.ts
@@ -1,7 +1,8 @@
-import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
+import { Margin } from '@nivo/core'
 import { OrdinalColorScale } from '@nivo/colors'
 import { Scale, ScaleBand, computeScale } from '@nivo/scales'
 import { Series, SeriesPoint, stack, stackOffsetDiverging } from 'd3-shape'
+import { BarDatum, BarSvgProps, ComputedBarDatum, ComputedDatum } from '../types'
 import { coerceValue, filterNullValues, getIndexScale, normalizeData } from './common'
 
 type StackDatum<RawDatum> = SeriesPoint<RawDatum>
@@ -15,6 +16,7 @@ type Params<RawDatum, XScaleInput, YScaleInput> = {
     stackedData: Series<RawDatum, string>[]
     xScale: XScaleInput extends string ? ScaleBand<XScaleInput> : Scale<XScaleInput, number>
     yScale: YScaleInput extends string ? ScaleBand<YScaleInput> : Scale<YScaleInput, number>
+    margin: Margin
 }
 
 const flattenDeep = <T>(arr: T[]): T =>
@@ -36,44 +38,47 @@ const generateVerticalStackedBars = <RawDatum extends Record<string, unknown>>(
         stackedData,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, string, number>,
     barWidth: number,
     reverse: boolean
-) => {
+): ComputedBarDatum<RawDatum>[] => {
     const getY = (d: StackDatum<RawDatum>) => yScale(d[reverse ? 0 : 1])
     const getHeight = (d: StackDatum<RawDatum>, y: number) => (yScale(d[reverse ? 1 : 0]) ?? 0) - y
 
-    const bars = flattenDeep(
-        stackedData.map(stackedDataItem =>
-            xScale.domain().map((index, i) => {
-                const d = stackedDataItem[i]
-                const x = xScale(getIndex(d.data)) ?? 0
-                const y = (getY(d) ?? 0) + innerPadding * 0.5
-                const barHeight = getHeight(d, y) - innerPadding
-                const [rawValue, value] = coerceValue(d.data[stackedDataItem.key])
-
-                const barData = {
-                    id: stackedDataItem.key,
-                    value: rawValue === null ? rawValue : value,
-                    formattedValue: formatValue(value),
-                    hidden: false,
-                    index: i,
-                    indexValue: index,
-                    data: filterNullValues(d.data),
-                }
-
-                return {
-                    key: `${stackedDataItem.key}.${index}`,
-                    data: barData,
-                    x,
-                    y,
-                    width: barWidth,
-                    height: barHeight,
-                    color: getColor(barData),
-                    label: getTooltipLabel(barData),
-                }
+    const bars: ComputedBarDatum<RawDatum>[] = []
+    stackedData.forEach(stackedDataItem =>
+        xScale.domain().forEach((index, i) => {
+            const d = stackedDataItem[i]
+            const x = xScale(getIndex(d.data)) ?? 0
+            const y = (getY(d) ?? 0) + innerPadding * 0.5
+            const barHeight = getHeight(d, y) - innerPadding
+            const [rawValue, value] = coerceValue(d.data[stackedDataItem.key])
+
+            const barData: ComputedDatum<RawDatum> = {
+                id: stackedDataItem.key,
+                value: rawValue === null ? rawValue : value,
+                formattedValue: formatValue(value),
+                hidden: false,
+                index: i,
+                indexValue: index,
+                data: filterNullValues(d.data),
+            }
+
+            bars.push({
+                key: `${stackedDataItem.key}.${index}`,
+                index: bars.length,
+                data: barData,
+                x,
+                y,
+                absX: margin.left + x,
+                absY: margin.top + y,
+                width: barWidth,
+                height: barHeight,
+                color: getColor(barData),
+                label: getTooltipLabel(barData),
             })
-        )
+        })
     )
 
     return bars
@@ -92,44 +97,47 @@ const generateHorizontalStackedBars = <RawDatum extends Record<string, unknown>>
         stackedData,
         xScale,
         yScale,
+        margin,
     }: Params<RawDatum, number, string>,
     barHeight: number,
     reverse: boolean
-) => {
+): ComputedBarDatum<RawDatum>[] => {
     const getX = (d: StackDatum<RawDatum>) => xScale(d[reverse ? 1 : 0])
     const getWidth = (d: StackDatum<RawDatum>, x: number) => (xScale(d[reverse ? 0 : 1]) ?? 0) - x
 
-    const bars = flattenDeep(
-        stackedData.map(stackedDataItem =>
-            yScale.domain().map((index, i) => {
-                const d = stackedDataItem[i]
-                const y = yScale(getIndex(d.data)) ?? 0
-                const x = (getX(d) ?? 0) + innerPadding * 0.5
-                const barWidth = getWidth(d, x) - innerPadding
-                const [rawValue, value] = coerceValue(d.data[stackedDataItem.key])
-
-                const barData = {
-                    id: stackedDataItem.key,
-                    value: rawValue === null ? rawValue : value,
-                    formattedValue: formatValue(value),
-                    hidden: false,
-                    index: i,
-                    indexValue: index,
-                    data: filterNullValues(d.data),
-                }
-
-                return {
-                    key: `${stackedDataItem.key}.${index}`,
-                    data: barData,
-                    x,
-                    y,
-                    width: barWidth,
-                    height: barHeight,
-                    color: getColor(barData),
-                    label: getTooltipLabel(barData),
-                }
+    const bars: ComputedBarDatum<RawDatum>[] = []
+    stackedData.forEach(stackedDataItem =>
+        yScale.domain().forEach((index, i) => {
+            const d = stackedDataItem[i]
+            const y = yScale(getIndex(d.data)) ?? 0
+            const x = (getX(d) ?? 0) + innerPadding * 0.5
+            const barWidth = getWidth(d, x) - innerPadding
+            const [rawValue, value] = coerceValue(d.data[stackedDataItem.key])
+
+            const barData: ComputedDatum<RawDatum> = {
+                id: stackedDataItem.key,
+                value: rawValue === null ? rawValue : value,
+                formattedValue: formatValue(value),
+                hidden: false,
+                index: i,
+                indexValue: index,
+                data: filterNullValues(d.data),
+            }
+
+            bars.push({
+                key: `${stackedDataItem.key}.${index}`,
+                index: bars.length,
+                data: barData,
+                x,
+                y,
+                absX: margin.left + x,
+                absY: margin.top + y,
+                width: barWidth,
+                height: barHeight,
+                color: getColor(barData),
+                label: getTooltipLabel(barData),
             })
-        )
+        })
     )
 
     return bars
@@ -170,6 +178,7 @@ export const generateStackedBars = <RawDatum extends BarDatum>({
     getColor: OrdinalColorScale<ComputedDatum<RawDatum>>
     getIndex: (datum: RawDatum) => string
     getTooltipLabel: (datum: ComputedDatum<RawDatum>) => string
+    margin: Margin
     hiddenIds?: string[]
 }) => {
     const keys = props.keys.filter(key => !hiddenIds.includes(key))
diff --git a/packages/bar/src/hooks.ts b/packages/bar/src/hooks.ts
new file mode 100644
index 0000000000..2dba5cef8c
--- /dev/null
+++ b/packages/bar/src/hooks.ts
@@ -0,0 +1,187 @@
+import { useCallback, useMemo, useState } from 'react'
+import { useInheritedColor, useOrdinalColorScale } from '@nivo/colors'
+import { usePropertyAccessor, useTheme, useValueFormatter, Margin } from '@nivo/core'
+import {
+    DataProps,
+    BarCommonProps,
+    BarDatum,
+    ComputedBarDatumWithValue,
+    LegendData,
+    BarLegendProps,
+} from './types'
+import { defaultProps } from './props'
+import { generateGroupedBars, generateStackedBars, getLegendData } from './compute'
+
+export const useBar = <RawDatum extends BarDatum>({
+    indexBy = defaultProps.indexBy,
+    keys = defaultProps.keys,
+    label = defaultProps.label,
+    tooltipLabel = defaultProps.tooltipLabel,
+    valueFormat,
+    colors = defaultProps.colors,
+    colorBy = defaultProps.colorBy,
+    borderColor = defaultProps.borderColor,
+    labelTextColor = defaultProps.labelTextColor,
+    groupMode = defaultProps.groupMode,
+    layout = defaultProps.layout,
+    reverse = defaultProps.reverse,
+    data,
+    minValue = defaultProps.minValue,
+    maxValue = defaultProps.maxValue,
+    margin,
+    width,
+    height,
+    padding = defaultProps.padding,
+    innerPadding = defaultProps.innerPadding,
+    valueScale = defaultProps.valueScale,
+    indexScale = defaultProps.indexScale,
+    initialHiddenIds = defaultProps.initialHiddenIds,
+    enableLabel = defaultProps.enableLabel,
+    labelSkipWidth = defaultProps.labelSkipWidth,
+    labelSkipHeight = defaultProps.labelSkipHeight,
+    legends = defaultProps.legends,
+    legendLabel,
+}: {
+    indexBy?: BarCommonProps<RawDatum>['indexBy']
+    label?: BarCommonProps<RawDatum>['label']
+    tooltipLabel?: BarCommonProps<RawDatum>['tooltipLabel']
+    valueFormat?: BarCommonProps<RawDatum>['valueFormat']
+    colors?: BarCommonProps<RawDatum>['colors']
+    colorBy?: BarCommonProps<RawDatum>['colorBy']
+    borderColor?: BarCommonProps<RawDatum>['borderColor']
+    labelTextColor?: BarCommonProps<RawDatum>['labelTextColor']
+    groupMode?: BarCommonProps<RawDatum>['groupMode']
+    layout?: BarCommonProps<RawDatum>['layout']
+    reverse?: BarCommonProps<RawDatum>['reverse']
+    data: DataProps<RawDatum>['data']
+    keys?: BarCommonProps<RawDatum>['keys']
+    minValue?: BarCommonProps<RawDatum>['minValue']
+    maxValue?: BarCommonProps<RawDatum>['maxValue']
+    margin: Margin
+    width: number
+    height: number
+    padding?: BarCommonProps<RawDatum>['padding']
+    innerPadding?: BarCommonProps<RawDatum>['innerPadding']
+    valueScale?: BarCommonProps<RawDatum>['valueScale']
+    indexScale?: BarCommonProps<RawDatum>['indexScale']
+    initialHiddenIds?: BarCommonProps<RawDatum>['initialHiddenIds']
+    enableLabel?: BarCommonProps<RawDatum>['enableLabel']
+    labelSkipWidth?: BarCommonProps<RawDatum>['labelSkipWidth']
+    labelSkipHeight?: BarCommonProps<RawDatum>['labelSkipHeight']
+    legends?: BarCommonProps<RawDatum>['legends']
+    legendLabel?: BarCommonProps<RawDatum>['legendLabel']
+}) => {
+    const [hiddenIds, setHiddenIds] = useState(initialHiddenIds ?? [])
+    const toggleSerie = useCallback(id => {
+        setHiddenIds(state =>
+            state.indexOf(id) > -1 ? state.filter(item => item !== id) : [...state, id]
+        )
+    }, [])
+
+    const getIndex = usePropertyAccessor(indexBy)
+    const getLabel = usePropertyAccessor(label)
+    const getTooltipLabel = usePropertyAccessor(tooltipLabel)
+    const formatValue = useValueFormatter(valueFormat)
+
+    const theme = useTheme()
+    const getColor = useOrdinalColorScale(colors, colorBy)
+    const getBorderColor = useInheritedColor<ComputedBarDatumWithValue<RawDatum>>(
+        borderColor,
+        theme
+    )
+    const getLabelColor = useInheritedColor<ComputedBarDatumWithValue<RawDatum>>(
+        labelTextColor,
+        theme
+    )
+
+    const generateBars = groupMode === 'grouped' ? generateGroupedBars : generateStackedBars
+    const { bars, xScale, yScale } = generateBars({
+        layout,
+        reverse,
+        data,
+        getIndex,
+        keys,
+        minValue,
+        maxValue,
+        width,
+        height,
+        getColor,
+        padding,
+        innerPadding,
+        valueScale,
+        indexScale,
+        hiddenIds,
+        formatValue,
+        getTooltipLabel,
+        margin,
+    })
+
+    const barsWithValue = useMemo(
+        () =>
+            bars
+                .filter(
+                    (bar): bar is ComputedBarDatumWithValue<RawDatum> => bar.data.value !== null
+                )
+                .map((bar, index) => ({
+                    ...bar,
+                    index,
+                })),
+        [bars]
+    )
+
+    const shouldRenderBarLabel = useCallback(
+        ({ width, height }: { height: number; width: number }) => {
+            if (!enableLabel) return false
+            if (labelSkipWidth > 0 && width < labelSkipWidth) return false
+            if (labelSkipHeight > 0 && height < labelSkipHeight) return false
+            return true
+        },
+        [enableLabel, labelSkipWidth, labelSkipHeight]
+    )
+
+    const legendData = useMemo(
+        () =>
+            keys.map(key => {
+                const bar = bars.find(bar => bar.data.id === key)
+
+                return { ...bar, data: { id: key, ...bar?.data, hidden: hiddenIds.includes(key) } }
+            }),
+        [hiddenIds, keys, bars]
+    )
+
+    const legendsWithData: [BarLegendProps, LegendData[]][] = useMemo(
+        () =>
+            legends.map(legend => {
+                const data = getLegendData({
+                    bars: legend.dataFrom === 'keys' ? legendData : bars,
+                    direction: legend.direction,
+                    from: legend.dataFrom,
+                    groupMode,
+                    layout,
+                    legendLabel,
+                    reverse,
+                })
+
+                return [legend, data]
+            }),
+        [legends, legendData, bars, groupMode, layout, legendLabel, reverse]
+    )
+
+    return {
+        bars,
+        barsWithValue,
+        xScale,
+        yScale,
+        getIndex,
+        getLabel,
+        getTooltipLabel,
+        formatValue,
+        getColor,
+        getBorderColor,
+        getLabelColor,
+        shouldRenderBarLabel,
+        hiddenIds,
+        toggleSerie,
+        legendsWithData,
+    }
+}
diff --git a/packages/bar/src/props.ts b/packages/bar/src/props.ts
index a0176968fb..265b9cf077 100644
--- a/packages/bar/src/props.ts
+++ b/packages/bar/src/props.ts
@@ -44,7 +44,7 @@ export const defaultProps = {
     tooltipLabel: <RawDatum>(datum: ComputedDatum<RawDatum>) => `${datum.id} - ${datum.indexValue}`,
 
     legends: [],
-
+    initialHiddenIds: [],
     annotations: [],
 }
 
@@ -60,6 +60,7 @@ export const svgDefaultProps = {
     motionConfig: 'default',
 
     role: 'img',
+    isFocusable: false,
 }
 
 export const canvasDefaultProps = {
diff --git a/packages/bar/src/types.ts b/packages/bar/src/types.ts
index f08888dbbc..05c7459766 100644
--- a/packages/bar/src/types.ts
+++ b/packages/bar/src/types.ts
@@ -48,9 +48,12 @@ export type ComputedBarDatumWithValue<RawDatum> = ComputedBarDatum<RawDatum> & {
 
 export type ComputedBarDatum<RawDatum> = {
     key: string
+    index: number
     data: ComputedDatum<RawDatum>
     x: number
     y: number
+    absX: number
+    absY: number
     width: number
     height: number
     color: string
@@ -131,7 +134,7 @@ export type BarCanvasLayer<RawDatum> =
     | BarCanvasCustomLayer<RawDatum>
 export type BarLayer<RawDatum> = BarLayerId | BarCustomLayer<RawDatum>
 
-export interface BarItemProps<RawDatum>
+export interface BarItemProps<RawDatum extends BarDatum>
     extends Pick<
             BarCommonProps<RawDatum>,
             'borderRadius' | 'borderWidth' | 'isInteractive' | 'tooltip'
@@ -158,11 +161,22 @@ export interface BarItemProps<RawDatum>
 
     label: string
     shouldRenderLabel: boolean
+
+    isFocusable: boolean
+    ariaLabel?: BarSvgProps<RawDatum>['barAriaLabel']
+    ariaLabelledBy?: BarSvgProps<RawDatum>['barAriaLabelledBy']
+    ariaDescribedBy?: BarSvgProps<RawDatum>['barAriaDescribedBy']
 }
 
-export type RenderBarProps<RawDatum> = Omit<
+export type RenderBarProps<RawDatum extends BarDatum> = Omit<
     BarItemProps<RawDatum>,
-    'isInteractive' | 'style' | 'tooltip'
+    | 'isInteractive'
+    | 'style'
+    | 'tooltip'
+    | 'isFocusable'
+    | 'ariaLabel'
+    | 'ariaLabelledBy'
+    | 'ariaDescribedBy'
 > & {
     borderColor: string
     labelColor: string
@@ -234,6 +248,8 @@ export type BarCommonProps<RawDatum> = {
     legends: BarLegendProps[]
 
     renderWrapper?: boolean
+
+    initialHiddenIds: string[]
 }
 
 export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawDatum>> &
@@ -252,9 +268,20 @@ export type BarSvgProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawD
 
         markers: CartesianMarkerProps[]
 
-        initialHiddenIds: string[]
         layers: BarLayer<RawDatum>[]
+
         role: string
+        ariaLabel?: React.AriaAttributes['aria-label']
+        ariaLabelledBy?: React.AriaAttributes['aria-labelledby']
+        ariaDescribedBy?: React.AriaAttributes['aria-describedby']
+        isFocusable?: boolean
+        barAriaLabel?: (data: ComputedDatum<RawDatum>) => React.AriaAttributes['aria-label']
+        barAriaLabelledBy?: (
+            data: ComputedDatum<RawDatum>
+        ) => React.AriaAttributes['aria-labelledby']
+        barAriaDescribedBy?: (
+            data: ComputedDatum<RawDatum>
+        ) => React.AriaAttributes['aria-describedby']
     }>
 
 export type BarCanvasProps<RawDatum extends BarDatum> = Partial<BarCommonProps<RawDatum>> &
diff --git a/packages/bar/tests/Bar.test.tsx b/packages/bar/tests/Bar.test.tsx
index 59a6000c1a..e7efa96fb3 100644
--- a/packages/bar/tests/Bar.test.tsx
+++ b/packages/bar/tests/Bar.test.tsx
@@ -393,10 +393,13 @@ it(`should generate grouped bars correctly when keys are mismatched`, () => {
         },
         height: 300,
         key: 'A.one',
+        index: 0,
         label: 'A - one',
         width: 71.33333333333333,
         x: 24,
         y: 0,
+        absX: 24,
+        absY: 0,
     })
 
     expect(bars.at(1).prop('bar')).toEqual({
@@ -412,10 +415,13 @@ it(`should generate grouped bars correctly when keys are mismatched`, () => {
         },
         height: 270,
         key: 'B.two',
+        index: 1,
         label: 'B - two',
         width: 71.33333333333333,
         x: 333.3333333333333,
         y: 30,
+        absX: 333.3333333333333,
+        absY: 30,
     })
 
     expect(bars.at(2).prop('bar')).toEqual({
@@ -431,10 +437,13 @@ it(`should generate grouped bars correctly when keys are mismatched`, () => {
         },
         height: 90,
         key: 'C.one',
+        index: 2,
         label: 'C - one',
         width: 71.33333333333333,
         x: 166.66666666666666,
         y: 210,
+        absX: 166.66666666666666,
+        absY: 210,
     })
 })
 
@@ -469,10 +478,13 @@ it(`should generate stacked bars correctly when keys are mismatched`, () => {
         },
         height: 231,
         key: 'A.one',
+        index: 0,
         label: 'A - one',
         width: 214,
         x: 24,
         y: 69,
+        absX: 24,
+        absY: 69,
     })
 
     expect(bars.at(1).prop('bar')).toEqual({
@@ -488,10 +500,13 @@ it(`should generate stacked bars correctly when keys are mismatched`, () => {
         },
         height: 208,
         key: 'B.two',
+        index: 1,
         label: 'B - two',
         width: 214,
         x: 262,
         y: 92,
+        absX: 262,
+        absY: 92,
     })
 
     expect(bars.at(2).prop('bar')).toEqual({
@@ -507,10 +522,13 @@ it(`should generate stacked bars correctly when keys are mismatched`, () => {
         },
         height: 69,
         key: 'C.one',
+        index: 2,
         label: 'C - one',
         width: 214,
         x: 24,
         y: 0,
+        absX: 24,
+        absY: 0,
     })
 })
 
@@ -630,3 +648,56 @@ describe('tooltip', () => {
         expect(wrapper.find(CustomTooltip).exists()).toBeTruthy()
     })
 })
+
+describe('accessibility', () => {
+    it('should forward root aria properties to the SVG element', () => {
+        const wrapper = mount(
+            <Bar
+                width={500}
+                height={300}
+                data={[
+                    { id: 'one', A: 10, B: 13 },
+                    { id: 'two', A: 12, B: 9 },
+                ]}
+                keys={['A', 'B']}
+                animate={false}
+                ariaLabel="AriaLabel"
+                ariaLabelledBy="AriaLabelledBy"
+                ariaDescribedBy="AriaDescribedBy"
+            />
+        )
+
+        const svg = wrapper.find('svg')
+
+        expect(svg.prop('aria-label')).toBe('AriaLabel')
+        expect(svg.prop('aria-labelledby')).toBe('AriaLabelledBy')
+        expect(svg.prop('aria-describedby')).toBe('AriaDescribedBy')
+    })
+
+    it('should add an aria attributes to bars', () => {
+        const wrapper = mount(
+            <Bar
+                width={500}
+                height={300}
+                data={[
+                    { id: 'one', A: 10, B: 13 },
+                    { id: 'two', A: 12, B: 9 },
+                ]}
+                keys={['A', 'B']}
+                animate={false}
+                barAriaLabel={() => 'BarAriaLabel'}
+                barAriaLabelledBy={() => 'BarAriaLabelledBy'}
+                barAriaDescribedBy={() => 'BarAriaDescribedBy'}
+            />
+        )
+
+        wrapper
+            .find('BarItem')
+            .find('rect')
+            .forEach(bar => {
+                expect(bar.prop('aria-label')).toBe('BarAriaLabel')
+                expect(bar.prop('aria-labelledby')).toBe('BarAriaLabelledBy')
+                expect(bar.prop('aria-describedby')).toBe('BarAriaDescribedBy')
+            })
+    })
+})
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
index 32ac58cdbe..4eedf61065 100644
--- a/packages/core/index.d.ts
+++ b/packages/core/index.d.ts
@@ -348,6 +348,10 @@ declare module '@nivo/core' {
             margin: Margin
             defs?: any
             role?: string
+            ariaLabel?: React.AriaAttributes['aria-label']
+            ariaLabelledBy?: React.AriaAttributes['aria-labelledby']
+            ariaDescribedBy?: React.AriaAttributes['aria-describedby']
+            isFocusable?: boolean
         }>
     ) => JSX.Element
     export const SvgWrapper: SvgWrapperType
diff --git a/packages/core/src/components/SvgWrapper.js b/packages/core/src/components/SvgWrapper.js
index a5683bb333..99e9e12b5a 100644
--- a/packages/core/src/components/SvgWrapper.js
+++ b/packages/core/src/components/SvgWrapper.js
@@ -1,20 +1,33 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import PropTypes from 'prop-types'
 import { Defs } from './defs'
 import { useTheme } from '../theming'
 
-const SvgWrapper = ({ width, height, margin, defs, children, role }) => {
+const SvgWrapper = ({
+    width,
+    height,
+    margin,
+    defs,
+    children,
+    role,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    isFocusable,
+}) => {
     const theme = useTheme()
 
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" role={role} width={width} height={height}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={width}
+            height={height}
+            role={role}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledBy}
+            aria-describedby={ariaDescribedBy}
+            focusable={isFocusable}
+            tabIndex={isFocusable ? 0 : undefined}
+        >
             <Defs defs={defs} />
             <rect width={width} height={height} fill={theme.background} />
             <g transform={`translate(${margin.left},${margin.top})`}>{children}</g>
@@ -32,6 +45,10 @@ SvgWrapper.propTypes = {
     defs: PropTypes.array,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     role: PropTypes.string,
+    isFocusable: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    ariaLabelledBy: PropTypes.string,
+    ariaDescribedBy: PropTypes.string,
 }
 
 export default SvgWrapper
diff --git a/packages/core/src/components/defs/Defs.js b/packages/core/src/components/defs/Defs.js
index b1e8810ca3..40f677c22b 100644
--- a/packages/core/src/components/defs/Defs.js
+++ b/packages/core/src/components/defs/Defs.js
@@ -20,7 +20,7 @@ const Defs = ({ defs: definitions }) => {
     if (!definitions || definitions.length < 1) return null
 
     return (
-        <defs>
+        <defs aria-hidden={true}>
             {definitions.map(({ type, ...def }) => {
                 if (defsMapping[type])
                     return createElement(defsMapping[type], { key: def.id, ...def })
diff --git a/website/src/components/Markdown.js b/website/src/components/Markdown.js
index 07f4f66d20..a148077d28 100644
--- a/website/src/components/Markdown.js
+++ b/website/src/components/Markdown.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
@@ -26,7 +18,7 @@ const linkRenderer = ({ href, children }) => {
     }
 
     return (
-        <a href={uri} target="_blank" rel="noopener noreferrer">
+        <a href={uri} rel="noopener noreferrer">
             {children}
         </a>
     )
diff --git a/website/src/components/components/ComponentTabs.js b/website/src/components/components/ComponentTabs.js
index 43b30e72f4..42a30bcd0e 100644
--- a/website/src/components/components/ComponentTabs.js
+++ b/website/src/components/components/ComponentTabs.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
@@ -38,10 +30,14 @@ const ComponentTabs = ({
 
     let content
     if (currentTab === 'chart') {
-        content = <Content id="chart">{children}</Content>
+        content = (
+            <Content id="chart" role="tabpanel">
+                {children}
+            </Content>
+        )
     } else if (currentTab === 'code') {
         content = (
-            <Code>
+            <Code role="tabpanel">
                 <Highlight code={code} language="jsx" />
             </Code>
         )
@@ -55,8 +51,8 @@ const ComponentTabs = ({
 
     return (
         <Wrapper className={`chart-tabs--${currentTab}`}>
-            <Nav>
-                {availableTabs.map(tab => {
+            <Nav role="tablist">
+                {availableTabs.map((tab, index) => {
                     const isCurrent = tab === currentTab
                     const icon = tab === 'chart' ? chartClass : tab
                     const iconColors = isCurrent || hoverTab === tab ? 'colored' : 'neutral'
@@ -64,6 +60,11 @@ const ComponentTabs = ({
                     return (
                         <NavItem
                             key={tab}
+                            role="tab"
+                            tabIndex={0}
+                            aria-setsize={availableTabs.length}
+                            aria-posinset={index + 1}
+                            aria-selected={isCurrent}
                             className="no-select"
                             isCurrent={isCurrent}
                             onClick={() => setCurrentTab(tab)}
@@ -76,7 +77,12 @@ const ComponentTabs = ({
                     )
                 })}
                 {diceRoll && (
-                    <DiceRollButton className="no-select" onClick={diceRoll}>
+                    <DiceRollButton
+                        className="no-select"
+                        onClick={diceRoll}
+                        role="button"
+                        tabIndex={0}
+                    >
                         roll the dice
                     </DiceRollButton>
                 )}
diff --git a/website/src/components/controls/AngleControl.js b/website/src/components/controls/AngleControl.js
index 9bcefe4677..6566135a20 100644
--- a/website/src/components/controls/AngleControl.js
+++ b/website/src/components/controls/AngleControl.js
@@ -1,18 +1,10 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const size = 36
 const center = size / 2
diff --git a/website/src/components/controls/ArrayControl.js b/website/src/components/controls/ArrayControl.js
index e6e4f0f8a9..e40966c566 100644
--- a/website/src/components/controls/ArrayControl.js
+++ b/website/src/components/controls/ArrayControl.js
@@ -1,17 +1,10 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, Fragment, useMemo, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import PropertyHeader from './PropertyHeader'
 import ControlsGroup from './ControlsGroup'
-import { Cell, Toggle, Help } from './styled'
+import { Cell, Toggle } from './styled'
+import { Help } from './Help'
 
 const ArrayControl = memo(
     ({
diff --git a/website/src/components/controls/BoxAnchorControl.js b/website/src/components/controls/BoxAnchorControl.js
index f9aec0b21f..b49538c672 100644
--- a/website/src/components/controls/BoxAnchorControl.js
+++ b/website/src/components/controls/BoxAnchorControl.js
@@ -1,16 +1,8 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React from 'react'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const boxWidth = 80
 const boxHeight = 50
diff --git a/website/src/components/controls/ChoicesControl.js b/website/src/components/controls/ChoicesControl.js
index a98224f5d2..a5841d0298 100644
--- a/website/src/components/controls/ChoicesControl.js
+++ b/website/src/components/controls/ChoicesControl.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Control from './Control'
 import Select from './Select'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const ChoicesControl = memo(
     ({ id, property, flavors, currentFlavor, value: _value, options, onChange }) => {
diff --git a/website/src/components/controls/ColorPickerControl.js b/website/src/components/controls/ColorPickerControl.js
index bc298e11db..b49ee8129e 100644
--- a/website/src/components/controls/ColorPickerControl.js
+++ b/website/src/components/controls/ColorPickerControl.js
@@ -1,16 +1,8 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 class ColorPickerControl extends Component {
     handleChange = e => {
diff --git a/website/src/components/controls/ColorsControl.js b/website/src/components/controls/ColorsControl.js
index aeec400218..992dec7d04 100644
--- a/website/src/components/controls/ColorsControl.js
+++ b/website/src/components/controls/ColorsControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { PureComponent } from 'react'
 import range from 'lodash/range'
 import PropTypes from 'prop-types'
@@ -19,7 +11,7 @@ import { components } from 'react-select'
 import ColorsControlItem from './ColorsControlItem'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Select from './Select'
 
 const colors = colorSchemeIds.map(id => ({
diff --git a/website/src/components/controls/Control.js b/website/src/components/controls/Control.js
index bf8a93b02a..a9c386f3c8 100644
--- a/website/src/components/controls/Control.js
+++ b/website/src/components/controls/Control.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { useState, useCallback } from 'react'
 import intersection from 'lodash/intersection'
 import PropTypes from 'prop-types'
@@ -60,7 +52,6 @@ export default Control
 
 const Container = styled(Cell)`
     border-bottom: 1px solid ${({ theme }) => theme.colors.borderLight};
-    // opacity: ${({ isPropertySupported }) => (isPropertySupported ? 1 : 0.5)};
 
     &:last-child {
         border-bottom-width: 0;
@@ -70,7 +61,6 @@ const Container = styled(Cell)`
 const Toggle = styled.span`
     display: block;
     position: absolute;
-    background: red;
     width: 20px;
     top: 0;
     bottom: 0;
diff --git a/website/src/components/controls/Help.js b/website/src/components/controls/Help.js
new file mode 100644
index 0000000000..dfb7d1a897
--- /dev/null
+++ b/website/src/components/controls/Help.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import styled from 'styled-components'
+import dedent from 'dedent-js'
+import Markdown from '../Markdown'
+
+export const Container = styled.div`
+    display: inline;
+    font-size: 0.8rem;
+    color: ${({ theme }) => theme.colors.textLight};
+    
+    p {
+        display: inline;
+    }
+    
+    a {
+        color: ${({ theme }) => theme.colors.text};
+    }
+`
+
+export const Help = ({ children }) => (
+    <Container>
+        <Markdown source={dedent(children)} />
+    </Container>
+)
diff --git a/website/src/components/controls/InheritedColorControl.js b/website/src/components/controls/InheritedColorControl.js
index e45be4ce36..1364d17388 100644
--- a/website/src/components/controls/InheritedColorControl.js
+++ b/website/src/components/controls/InheritedColorControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { useState, useCallback } from 'react'
 import isString from 'lodash/isString'
 import isPlainObject from 'lodash/isPlainObject'
@@ -14,7 +6,7 @@ import styled from 'styled-components'
 import { inheritedColorPropType } from '@nivo/colors'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Select from './Select'
 import InheritedColorModifierControl from './InheritedColorModifierControl'
 
diff --git a/website/src/components/controls/LineWidthControl.js b/website/src/components/controls/LineWidthControl.js
index a98dcfe191..68bf0c765e 100644
--- a/website/src/components/controls/LineWidthControl.js
+++ b/website/src/components/controls/LineWidthControl.js
@@ -1,17 +1,9 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback } from 'react'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const size = 24
 
diff --git a/website/src/components/controls/MarginControl.js b/website/src/components/controls/MarginControl.js
index 6d341b818f..3e50bd03af 100644
--- a/website/src/components/controls/MarginControl.js
+++ b/website/src/components/controls/MarginControl.js
@@ -1,18 +1,10 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const Grid = styled.div`
     display: grid;
diff --git a/website/src/components/controls/MotionConfigControl.js b/website/src/components/controls/MotionConfigControl.js
index b0cbeb0307..13a34877a8 100644
--- a/website/src/components/controls/MotionConfigControl.js
+++ b/website/src/components/controls/MotionConfigControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback, useState } from 'react'
 import { config as springConfig } from '@react-spring/web'
 import { isString } from 'lodash'
@@ -15,7 +7,7 @@ import PropertyHeader from './PropertyHeader'
 import Radio from './Radio'
 import Select from './Select'
 import Switch from './Switch'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const Row = styled.div`
     display: grid;
diff --git a/website/src/components/controls/NumberArrayControl.js b/website/src/components/controls/NumberArrayControl.js
index 62eb822251..62f9f93b93 100644
--- a/website/src/components/controls/NumberArrayControl.js
+++ b/website/src/components/controls/NumberArrayControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { Fragment, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
@@ -13,7 +5,7 @@ import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import Label from './Label'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const Range = styled.input`
     max-width: 160px;
diff --git a/website/src/components/controls/ObjectControl.js b/website/src/components/controls/ObjectControl.js
index 38c5152e30..d51945877f 100644
--- a/website/src/components/controls/ObjectControl.js
+++ b/website/src/components/controls/ObjectControl.js
@@ -1,17 +1,10 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useMemo, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import ControlsGroup from './ControlsGroup'
 import PropertyHeader from './PropertyHeader'
-import { Cell, Toggle, Help } from './styled'
+import { Cell, Toggle } from './styled'
+import { Help } from './Help'
 
 const ObjectControl = memo(
     ({
diff --git a/website/src/components/controls/OpacityControl.js b/website/src/components/controls/OpacityControl.js
index d42e8087f2..98c4190c62 100644
--- a/website/src/components/controls/OpacityControl.js
+++ b/website/src/components/controls/OpacityControl.js
@@ -1,18 +1,10 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 import { useTheme } from '../../theming/context'
 
 const size = 24
diff --git a/website/src/components/controls/OrdinalColorsControl.js b/website/src/components/controls/OrdinalColorsControl.js
index df39c8e6c7..ff33d7a8e7 100644
--- a/website/src/components/controls/OrdinalColorsControl.js
+++ b/website/src/components/controls/OrdinalColorsControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
@@ -20,7 +12,7 @@ import { components } from 'react-select'
 import ColorsControlItem from './ColorsControlItem'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Select from './Select'
 
 const Value = styled.div`
diff --git a/website/src/components/controls/PropertyDocumentation.js b/website/src/components/controls/PropertyDocumentation.js
index 4abff54f66..36545d8afd 100644
--- a/website/src/components/controls/PropertyDocumentation.js
+++ b/website/src/components/controls/PropertyDocumentation.js
@@ -1,16 +1,8 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React from 'react'
 import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const PropertyDocumentation = ({ id, property, flavors, currentFlavor }) => {
     return (
diff --git a/website/src/components/controls/QuantizeColorsControl.js b/website/src/components/controls/QuantizeColorsControl.js
index 9a88af187c..0e73d4dd39 100644
--- a/website/src/components/controls/QuantizeColorsControl.js
+++ b/website/src/components/controls/QuantizeColorsControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { quantizeColorScales } from '@nivo/core'
@@ -13,7 +5,7 @@ import Select from './Select'
 import ColorsControlItem from './ColorsControlItem'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const options = Object.keys(quantizeColorScales).map(id => ({
     id,
diff --git a/website/src/components/controls/RadioControl.js b/website/src/components/controls/RadioControl.js
index 00fee18545..1c7b8b55dd 100644
--- a/website/src/components/controls/RadioControl.js
+++ b/website/src/components/controls/RadioControl.js
@@ -1,16 +1,8 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Radio from './Radio'
 
 const RadioControl = memo(({ id, property, flavors, currentFlavor, options, value, onChange }) => {
diff --git a/website/src/components/controls/RangeControl.js b/website/src/components/controls/RangeControl.js
index 166cf0e812..2527763a5b 100644
--- a/website/src/components/controls/RangeControl.js
+++ b/website/src/components/controls/RangeControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
@@ -13,7 +5,7 @@ import pick from 'lodash/pick'
 import Control from './Control'
 import TextInput from './TextInput'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const RangeControl = memo(({ id, property, flavors, currentFlavor, options, value, onChange }) => {
     const handleChange = useCallback(event => onChange(Number(event.target.value)), [onChange])
diff --git a/website/src/components/controls/Switch.js b/website/src/components/controls/Switch.js
index 072da4fa8a..73a26ff78c 100644
--- a/website/src/components/controls/Switch.js
+++ b/website/src/components/controls/Switch.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
diff --git a/website/src/components/controls/SwitchControl.js b/website/src/components/controls/SwitchControl.js
index c47bf81041..bcd3ad4a10 100644
--- a/website/src/components/controls/SwitchControl.js
+++ b/website/src/components/controls/SwitchControl.js
@@ -1,16 +1,8 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-import React, { memo, useCallback } from 'react'
+import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Switch from './Switch'
 
 const SwitchControl = memo(({ id, property, flavors, currentFlavor, value, onChange }) => {
diff --git a/website/src/components/controls/SwitchableRangeControl.js b/website/src/components/controls/SwitchableRangeControl.js
index 72566f8762..e0a5bb231e 100644
--- a/website/src/components/controls/SwitchableRangeControl.js
+++ b/website/src/components/controls/SwitchableRangeControl.js
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import pick from 'lodash/pick'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import TextInput from './TextInput'
 import Switch from './Switch'
 
diff --git a/website/src/components/controls/TextControl.js b/website/src/components/controls/TextControl.js
index 0f5b198a4c..c54926fd23 100644
--- a/website/src/components/controls/TextControl.js
+++ b/website/src/components/controls/TextControl.js
@@ -1,17 +1,9 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const TextControl = memo(({ id, property, flavors, currentFlavor, value, onChange, options }) => {
     const handleUpdate = useCallback(event => onChange(event.target.value), [onChange])
diff --git a/website/src/components/controls/ValueFormatControl.js b/website/src/components/controls/ValueFormatControl.js
index 0805af67ea..7f6848164d 100644
--- a/website/src/components/controls/ValueFormatControl.js
+++ b/website/src/components/controls/ValueFormatControl.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback, useMemo, useState } from 'react'
 import styled from 'styled-components'
 import { formatSpecifier as parseFormat, FormatSpecifier } from 'd3-format'
@@ -15,7 +7,7 @@ import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
 import Switch from './Switch'
 import Select from './Select'
-import { Help } from './styled'
+import { Help } from './Help'
 import CollapseIcon from 'react-icons/lib/fa/chevron-up'
 import ExpandIcon from 'react-icons/lib/fa/chevron-down'
 
diff --git a/website/src/components/controls/styled.js b/website/src/components/controls/styled.js
index 8c80954381..13bf0660b3 100644
--- a/website/src/components/controls/styled.js
+++ b/website/src/components/controls/styled.js
@@ -1,22 +1,9 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React from 'react'
 import styled from 'styled-components'
 import RightIcon from 'react-icons/lib/md/keyboard-arrow-right'
 import DownIcon from 'react-icons/lib/md/keyboard-arrow-down'
 import media from '../../theming/mediaQueries'
 
-export const Help = styled.span`
-    font-size: 0.8rem;
-    color: ${({ theme }) => theme.colors.textLight};
-`
-
 export const ToggleWrapper = styled.div`
     position: absolute;
     width: 26px;
@@ -25,7 +12,6 @@ export const ToggleWrapper = styled.div`
     top: 50%;
     margin-top: -13px;
     right: 30px;
-    background: red;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -82,11 +68,9 @@ export const Cell = styled.div`
     }
 `
 
-export const Toggle = ({ isOpened }) => {
-    return (
-        <ToggleWrapper>
-            {isOpened && <DownIcon size={18} />}
-            {!isOpened && <RightIcon size={18} />}
-        </ToggleWrapper>
-    )
-}
+export const Toggle = ({ isOpened }) => (
+    <ToggleWrapper>
+        {isOpened && <DownIcon size={18} />}
+        {!isOpened && <RightIcon size={18} />}
+    </ToggleWrapper>
+)
diff --git a/website/src/data/components/bar/props.js b/website/src/data/components/bar/props.js
index 59ccc11656..28de9024d0 100644
--- a/website/src/data/components/bar/props.js
+++ b/website/src/data/components/bar/props.js
@@ -1,11 +1,3 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import { svgDefaultProps } from '@nivo/bar'
 import {
     themeProperty,
@@ -590,6 +582,63 @@ const props = [
         },
     },
     ...motionProperties(['svg'], svgDefaultProps, 'react-spring'),
+    {
+        key: 'isFocusable',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: 'Make the root SVG element and each bar item focusable, for keyboard navigation.',
+        description: `
+            If enabled, focusing will also reveal the tooltip if \`isInteractive\` is \`true\`,
+            when a bar gains focus and hide it on blur.
+            
+            Also note that if this option is enabled, focusing a bar will reposition the tooltip
+            at a fixed location.
+        `,
+        type: 'boolean',
+        controlType: 'switch',
+    },
+    {
+        key: 'ariaLabel',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: 'Main element [aria-label](https://www.w3.org/TR/wai-aria/#aria-label).',
+        type: 'string',
+    },
+    {
+        key: 'ariaLabelledBy',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: 'Main element [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby).',
+        type: 'string',
+    },
+    {
+        key: 'ariaDescribedBy',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: 'Main element [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby).',
+        type: 'string',
+    },
+    {
+        key: 'barAriaLabel',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: '[aria-label](https://www.w3.org/TR/wai-aria/#aria-label) for bar items.',
+        type: '(data) => string',
+    },
+    {
+        key: 'barAriaLabelledBy',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: '[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) for bar items.',
+        type: '(data) => string',
+    },
+    {
+        key: 'barAriaDescribedBy',
+        flavors: ['svg'],
+        group: 'Accessibility',
+        help: '[aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) for bar items.',
+        type: '(data) => string',
+    },
 ]
 
 export const groups = groupProperties(props)
diff --git a/website/src/pages/bar/index.js b/website/src/pages/bar/index.js
index 5505e566bf..5636bc4241 100644
--- a/website/src/pages/bar/index.js
+++ b/website/src/pages/bar/index.js
@@ -151,6 +151,11 @@ const initialProperties = {
 
     animate: true,
     motionConfig: 'default',
+
+    role: 'application',
+    isFocusable: false,
+    ariaLabel: 'Nivo bar chart demo',
+    barAriaLabel: data => `${data.id}: ${data.formattedValue} in country: ${data.indexValue}`,
 }
 
 const Bar = () => {
diff --git a/yarn.lock b/yarn.lock
index 608f1480c5..8c334a23a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8425,20 +8425,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001154:
-  version "1.0.30001156"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001156.tgz#75c20937b6012fe2b02ab58b30d475bf0718de97"
-  integrity sha512-z7qztybA2eFZTB6Z3yvaQBIoJpQtsewRD74adw2UbRWwsRq3jIPvgrQGawBMbfafekQaD21FWuXNcywtTDGGCw==
-
-caniuse-lite@^1.0.30001035:
-  version "1.0.30001148"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz#dc97c7ed918ab33bf8706ddd5e387287e015d637"
-  integrity sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw==
-
-caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001084:
-  version "1.0.30001084"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz#00e471931eaefbeef54f46aa2203914d3c165669"
-  integrity sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001084, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001154:
+  version "1.0.30001251"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz"
+  integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==
 
 capture-exit@^2.0.0:
   version "2.0.0"