diff --git a/src/common/components/sidebar/outline-view.js b/src/common/components/sidebar/outline-view.js
index 5e118847..f6fca142 100644
--- a/src/common/components/sidebar/outline-view.js
+++ b/src/common/components/sidebar/outline-view.js
@@ -102,7 +102,7 @@ function OutlineView({ outline, onNavigate, onOpenLink, onUpdate}) {
 	}
 
 	return (
-		<div className={cx('outline-view', { loading: outline === null })} data-tabstop="1">
+		<div className={cx('outline-view', { loading: outline === null })} data-tabstop="1" id="outlineView" role="tabpanel" aria-labelledby="viewOutline">
 			{outline === null ? <div className="spinner"/> : renderItems(outline)}
 		</div>
 	);
diff --git a/src/common/components/sidebar/sidebar.js b/src/common/components/sidebar/sidebar.js
index 05974e31..65e9f599 100644
--- a/src/common/components/sidebar/sidebar.js
+++ b/src/common/components/sidebar/sidebar.js
@@ -21,13 +21,16 @@ function Sidebar(props) {
 	return (
 		<div id="sidebarContainer" className="sidebarOpen">
 			<div className="sidebar-toolbar">
-				<div className="start" data-tabstop={1}>
+				<div className="start" data-tabstop={1} role="tablist">
 					{props.type === 'pdf' &&
 						<button
 							id="viewThumbnail"
 							className={cx('toolbar-button', { active: props.view === 'thumbnails' })}
 							title="Show Thumbnails" tabIndex={-1}
 							onClick={() => props.onChangeView('thumbnails')}
+							role="tab"
+							aria-selected={props.view === 'thumbnails' }
+							aria-controls='thumbnailsView'
 						><IconThumbnails/></button>
 					}
 					<button
@@ -36,6 +39,9 @@ function Sidebar(props) {
 						title="Show Annotations"
 						tabIndex={-1}
 						onClick={() => props.onChangeView('annotations')}
+						role="tab"
+						aria-selected={props.view === 'annotations' }
+						aria-controls='annotationsView'
 					><IconAnnotations/></button>
 					<button
 						id="viewOutline"
@@ -43,6 +49,9 @@ function Sidebar(props) {
 						title="Show Document Outline (double-click to expand/collapse all items)"
 						tabIndex={-1}
 						onClick={() => props.onChangeView('outline')}
+						role="tab"
+						aria-selected={props.view === 'outline' }
+						aria-controls='outlineView'
 					><IconOutline/></button>
 				</div>
 				<div className="end">
@@ -57,7 +66,7 @@ function Sidebar(props) {
 			</div>
 			<div id="sidebarContent" className="sidebar-content">
 				{props.view === 'thumbnails' && props.thumbnailsView}
-				{props.view === 'annotations' && <div id="annotationsView">{props.annotationsView}</div>}
+				{props.view === 'annotations' && <div id="annotationsView" role="tabpanel" aria-labelledby='viewAnnotations'>{props.annotationsView}</div>}
 				{props.view === 'outline' && props.outlineView}
 			</div>
 		</div>
diff --git a/src/common/components/sidebar/thumbnails-view.js b/src/common/components/sidebar/thumbnails-view.js
index bf60d791..6ad416a5 100644
--- a/src/common/components/sidebar/thumbnails-view.js
+++ b/src/common/components/sidebar/thumbnails-view.js
@@ -203,7 +203,7 @@ function ThumbnailsView(props) {
 	}, [onOpenThumbnailContextMenu, selected]);
 
 	return (
-		<div className="thumbnails-view">
+		<div id="thumbnailsView" className="thumbnails-view" role="tabpanel" aria-labelledby="viewThumbnail">
 			{platform === 'web' && (
 				<div className="thumbnails-header">
 					<FormattedMessage id="pdfReader.selectedPages" values={ { count: selected.length }} />