diff --git a/core/templates/components/ck-editor-helpers/ck-editor-4-rte.component.ts b/core/templates/components/ck-editor-helpers/ck-editor-4-rte.component.ts
index 9f3e5a73eb7e..e9bcac6576aa 100644
--- a/core/templates/components/ck-editor-helpers/ck-editor-4-rte.component.ts
+++ b/core/templates/components/ck-editor-helpers/ck-editor-4-rte.component.ts
@@ -386,10 +386,6 @@ export class CkEditor4RteComponent implements AfterViewInit, OnChanges,
       (
         this.elementRef.nativeElement as HTMLElement
       ).setAttribute('style', 'display: block');
-      // Focus on the CK editor text box.
-      (
-        this.elementRef.nativeElement.children[0].children[1] as HTMLElement
-      ).focus();
       // Remove the loading text.
       this.elementRef.nativeElement.parentElement.removeChild(loadingDiv);
       // Set the css and icons for each toolbar button.
diff --git a/core/templates/components/forms/custom-forms-directives/audio-file-uploader.component.html b/core/templates/components/forms/custom-forms-directives/audio-file-uploader.component.html
index 08f23817848a..f033c8308ecb 100644
--- a/core/templates/components/forms/custom-forms-directives/audio-file-uploader.component.html
+++ b/core/templates/components/forms/custom-forms-directives/audio-file-uploader.component.html
@@ -5,7 +5,7 @@
            (change)="this.addAudio($event)"
            #fileInput>
   </form>
-  <div class="license-warning">
+  <div class="license-warning" tabindex="0">
     Please only upload audio files that you created yourself and that you are willing to license under the site's
     <a href="/license"
        [smartRouterLink]="'/' + licenseUrl"
diff --git a/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html b/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html
index 108a6c979bfc..5247f8c95c72 100644
--- a/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html
+++ b/core/templates/components/forms/schema-based-editors/schema-based-float-editor.component.html
@@ -11,12 +11,11 @@
              class="form-control display-inline oppia-float-form-input e2e-test-float-form-input"
              name="floatValue"
              attr.placeholder="{{'I18N_FORMS_TYPE_NUMBER' | translate}}"
-             [oppiaFocusOn]="labelForFocusTarget"
              (keypress)="onKeypress($event)"
              applyValidation [validators]="validators"
              (blur)="onBlur()" (focus)="onFocus()"
              inputmode="numeric">
-      <span *ngIf="errorStringI18nKey" class="oppia-form-error oppia-numeric-input-error">
+      <span *ngIf="errorStringI18nKey" class="oppia-form-error oppia-numeric-input-error" tabindex="0">
         {{ errorStringI18nKey | translate }}
       </span>
       <span *ngIf="hasLoaded && !userIsCurrentlyTyping && userHasFocusedAtLeastOnce"
diff --git a/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html b/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html
index 5752e3823625..99f41a81e89c 100644
--- a/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html
+++ b/core/templates/components/forms/schema-based-editors/schema-based-int-editor.component.html
@@ -8,7 +8,6 @@
              [disabled]="disabled"
              required="!notRequired"
              applyValidation [validators]="validators"
-             [oppiaFocusOn]="labelForFocusTarget"
              (blur)="inputBlur.emit()"
              (focus)="inputFocus.emit()">
     </mat-form-field>
diff --git a/core/templates/components/state-directives/answer-group-editor/answer-group-editor.component.html b/core/templates/components/state-directives/answer-group-editor/answer-group-editor.component.html
index 691e63b40c28..1e092b8cc71b 100644
--- a/core/templates/components/state-directives/answer-group-editor/answer-group-editor.component.html
+++ b/core/templates/components/state-directives/answer-group-editor/answer-group-editor.component.html
@@ -1,12 +1,12 @@
 <div class="h-100">
   <!-- For the default answer group, 'rules' is null. Otherwise, 'rules' is a list of rules. -->
   <div *ngIf="rules">
-    <strong class="oppia-answer-group-heading">
+    <strong class="oppia-answer-group-heading" tabindex="0">
       If the learner's answer...
     </strong>
     <ul class="nav oppia-option-list nav-stacked nav-pills" role="tablist">
       <li *ngFor="let rule of rules;  let index = index;let last = last;" [ngClass]="{'active': activeRuleIndex === index, 'oppia-answer-rule-block': last}" class="mt-0 oppia-rule-block oppia-sortable-rule-block e2e-test-rule-block">
-        <a (click)="openRuleEditor(index)" [hidden]="activeRuleIndex === index" class="oppia-rule-tab e2e-test-answer-tab" [ngClass]="{'oppia-rule-tab-disabled': !isEditable}">
+        <a (click)="openRuleEditor(index)" tabindex="0" (keydown.enter)="openRuleEditor(index)" [hidden]="activeRuleIndex === index" class="oppia-rule-tab e2e-test-answer-tab" [ngClass]="{'oppia-rule-tab-disabled': !isEditable}">
           <div class="oppia-rule-header">
             <span *ngIf="index > 0">or</span>
             <span *ngIf="getCurrentInteractionId() !== 'MultipleChoiceInput' && index !== activeRuleIndex">
diff --git a/core/templates/components/state-directives/hint-editor/hint-editor.component.html b/core/templates/components/state-directives/hint-editor/hint-editor.component.html
index 1d4fd56375f9..f995c1b1fdd2 100644
--- a/core/templates/components/state-directives/hint-editor/hint-editor.component.html
+++ b/core/templates/components/state-directives/hint-editor/hint-editor.component.html
@@ -8,13 +8,16 @@
         <div class="oppia-click-to-start-editing e2e-test-open-hint-editor"
              *ngIf="isEditable" (click)="openHintEditor()">
           <i *ngIf="isEditable"
+             tabindex="0"
+             (keydown.enter)="openHintEditor()"
+             aria-label="edit hint"
              class="fas fa-pen oppia-editor-edit-icon float-right"
              title="Edit Hint">
           </i>
         </div>
 
-        <strong>Hint #{{indexPlusOne}} is...</strong>
-        <span>
+        <strong tabindex="0">Hint #{{indexPlusOne}} is...</strong>
+        <span tabindex="0">
           <oppia-rte-output-display class="oppia-rte-editor"
                                     [rteString]="hint.hintContent.html">
           </oppia-rte-output-display>
@@ -26,7 +29,7 @@
   <div *ngIf="isEditable && hintEditorIsOpen">
     <div class="form-inline">
       <div class="oppia-rule-details-header">
-        <strong>Hint # {{indexPlusOne}} is...</strong>
+        <strong tabindex="0">Hint # {{indexPlusOne}} is...</strong>
         <!-- TODO(sll): Find a way to do this without resorting to private properties like _html -->
         <schema-based-editor [schema]="getSchema()"
                              [localValue]="hint.hintContent._html"
@@ -35,7 +38,7 @@
       </div>
     </div>
 
-    <div *ngIf="isHintLengthExceeded()" class="oppia-length-validation-error">
+    <div *ngIf="isHintLengthExceeded()" class="oppia-length-validation-error" tabindex="0">
       The hint length is too long. Please use at most 500 characters.
     </div>
 
diff --git a/core/templates/components/state-directives/outcome-editor/outcome-destination-editor.component.html b/core/templates/components/state-directives/outcome-editor/outcome-destination-editor.component.html
index 9bb2738c607d..2b8de1767a09 100644
--- a/core/templates/components/state-directives/outcome-editor/outcome-destination-editor.component.html
+++ b/core/templates/components/state-directives/outcome-editor/outcome-destination-editor.component.html
@@ -1,7 +1,7 @@
 <div class="form-inline oppia-form-inline e2e-test-dest-bubble">
   <div class="oppia-rule-details-header">
-    <strong *ngIf="outcomeHasFeedback">And afterwards, directs the learner to...</strong>
-    <strong *ngIf="!outcomeHasFeedback">Oppia directs the learner to...</strong>
+    <strong *ngIf="outcomeHasFeedback" tabindex="0">And afterwards, directs the learner to...</strong>
+    <strong *ngIf="!outcomeHasFeedback" tabindex="0">Oppia directs the learner to...</strong>
   </div>
   <div class="form-group oppia-form-group">
     <span>
@@ -26,7 +26,7 @@
              [attr.aria-invalid]="false" required>
     </span>
   </form>
-  <p [hidden]="newStateNameForm.form.valid ||  outcomeNewStateName === undefined" class="form-text oppia-form-error oppia-form-error-text">Please pick a card name consisting of alphanumeric characters, spaces and/or hyphens.</p>
+  <p [hidden]="newStateNameForm.form.valid ||  outcomeNewStateName === undefined" class="form-text oppia-form-error oppia-form-error-text" tabindex="0">Please pick a card name consisting of alphanumeric characters, spaces and/or hyphens.</p>
 
   <div *ngIf="isSelfLoop() && canEditRefresherExplorationId && !!outcome.refresherExplorationId" class="oppia-id-text">
     <b>Refresher exploration ID (optional):</b>
diff --git a/core/templates/components/state-directives/outcome-editor/outcome-editor.component.html b/core/templates/components/state-directives/outcome-editor/outcome-editor.component.html
index 532ce38f7ead..e4ed1002b3bd 100644
--- a/core/templates/components/state-directives/outcome-editor/outcome-editor.component.html
+++ b/core/templates/components/state-directives/outcome-editor/outcome-editor.component.html
@@ -55,24 +55,25 @@
       <!-- Desktop -->
       <div class="oppia-click-to-start-editing e2e-test-open-outcome-feedback-editor"
            *ngIf="!onMobile && isEditable" (click)="openFeedbackEditor()">
-        <i *ngIf="isEditable" class="fas fa-pen oppia-editor-edit-icon float-right"
-           title="Edit Feedback">
+        <i *ngIf="isEditable" tabindex="0" (keydown.enter)="openFeedbackEditor()"
+           class="fas fa-pen oppia-editor-edit-icon float-right"
+           title="Edit Feedback" type="button">
         </i>
       </div>
 
-      <strong class="oppia-outcome-heading">Oppia tells the learner...</strong>
+      <strong class="oppia-outcome-heading" tabindex="0">Oppia tells the learner...</strong>
       <div class="position-relative">
         <span *ngIf="isSelfLoopWithNoFeedback(outcome) && !areWarningsSuppressed">
-          <span class="oppia-confusing-outcome-warning-text">
+          <span class="oppia-confusing-outcome-warning-text" tabindex="0">
             <i class="material-icons">&#xE002;</i>
             Please give Oppia something useful to say here.
           </span>
         </span>
         <span *ngIf="(outcome && !isSelfLoopWithNoFeedback(outcome) && !outcome.hasNonemptyFeedback()) || (isSelfLoopWithNoFeedback(outcome) && areWarningsSuppressed)"
               class="oppia-nothing-text">
-          <em>Nothing</em>
+          <em tabindex="0">Nothing</em>
         </span>
-        <span *ngIf="outcome && outcome.hasNonemptyFeedback()" class="oppia-non-empty-feedback-text">
+        <span *ngIf="outcome && outcome.hasNonemptyFeedback()" class="oppia-non-empty-feedback-text" tabindex="0">
           <oppia-rte-output-display class="oppia-rte-editor" [rteString]="outcome.feedback.html">
           </oppia-rte-output-display>
         </span>
@@ -91,7 +92,7 @@
     </oppia-outcome-feedback-editor>
   </form>
 
-  <div *ngIf="isFeedbackLengthExceeded()" class="oppia-length-validation-error">
+  <div *ngIf="isFeedbackLengthExceeded()" class="oppia-length-validation-error" tabindex="0">
     The feedback length is too long. Please use at most 500 characters.
   </div>
 
@@ -124,25 +125,25 @@
     <div class="oppia-rule-preview oppia-transition-200">
       <div class="oppia-click-to-start-editing e2e-test-open-outcome-dest-editor"
            *ngIf="isEditable" (click)="openDestinationEditor()">
-        <i *ngIf="isEditable" class="fas fa-pen oppia-editor-edit-icon float-right"
-           title="Edit Destination">
+        <i *ngIf="isEditable" tabindex="0" class="fas fa-pen oppia-editor-edit-icon float-right"
+           title="Edit Destination" (keydown.enter)="openDestinationEditor()">
         </i>
       </div>
 
       <div>
-        <strong class="oppia-outcome-heading" *ngIf="displayFeedback">And afterwards, directs the learner
+        <strong class="oppia-outcome-heading" *ngIf="displayFeedback" tabindex="0">And afterwards, directs the learner
         to...</strong>
-        <strong class="oppia-outcome-heading" *ngIf="!displayFeedback">Oppia directs the learner to...</strong>
-        <span *ngIf="outcome && !isSelfLoop(outcome)" class="position-relative">
+        <strong class="oppia-outcome-heading" *ngIf="!displayFeedback" tabindex="0">Oppia directs the learner to...</strong>
+        <span *ngIf="outcome && !isSelfLoop(outcome)" class="position-relative" tabindex="0">
           {{ outcome.dest }}
         </span>
-        <span *ngIf="isSelfLoop(outcome)" class="position-relative">
+        <span tabindex="0" *ngIf="isSelfLoop(outcome)" class="position-relative">
           <span *ngIf="!outcome.refresherExplorationId">(try again)</span>
           <span *ngIf="outcome.refresherExplorationId">
             (try again, with refresher exploration "{{ outcome.refresherExplorationId }}")
           </span>
         </span>
-        <div class="oppia-prerequisite-skill-text" *ngIf="outcome && outcome.missingPrerequisiteSkillId && canAddPrerequisiteSkill">
+        <div tabindex="0" class="oppia-prerequisite-skill-text" *ngIf="outcome && outcome.missingPrerequisiteSkillId && canAddPrerequisiteSkill">
           <strong class="oppia-outcome-heading"> Attached prerequisite skill for the current state: </strong>
           {{ outcome.missingPrerequisiteSkillId }}
         </div>
@@ -189,18 +190,18 @@
     <div class="oppia-rule-preview oppia-transition-200">
       <div class="oppia-click-to-start-editing protractor-test-open-outcome-dest-if-stuck-editor"
            *ngIf="isEditable" (click)="openDestinationIfStuckEditor()">
-        <i *ngIf="isEditable" class="fas fa-pen oppia-editor-edit-icon float-right"
-           title="Edit If Stuck Destination">
+        <i *ngIf="isEditable" (keydown.enter)="openDestinationIfStuckEditor()" class="fas fa-pen oppia-editor-edit-icon float-right"
+           title="Edit If Stuck Destination" tabindex="0">
         </i>
       </div>
 
       <div>
-        <strong *ngIf="displayFeedback">(Optional) If the learner is really stuck, direct them to</strong>
-        <strong *ngIf="!displayFeedback">(Optional) Oppia directs the stuck learner to...</strong>
-        <span *ngIf="outcome && outcome.destIfReallyStuck !== null" class="position-relative">
+        <strong *ngIf="displayFeedback" tabindex="0">(Optional) If the learner is really stuck, direct them to</strong>
+        <strong *ngIf="!displayFeedback" tabindex="0">(Optional) Oppia directs the stuck learner to...</strong>
+        <span tabindex="0" *ngIf="outcome && outcome.destIfReallyStuck !== null" class="position-relative">
           {{ outcome.destIfReallyStuck }}
         </span>
-        <span *ngIf="!outcome || outcome.destIfReallyStuck === null" class="position-relative"></span>
+        <span tabindex="0" *ngIf="!outcome || outcome.destIfReallyStuck === null" class="position-relative"></span>
       </div>
     </div>
   </div>
diff --git a/core/templates/components/state-directives/outcome-editor/outcome-if-stuck-destination-editor.component.html b/core/templates/components/state-directives/outcome-editor/outcome-if-stuck-destination-editor.component.html
index 551eae0d7290..e027f0443a44 100644
--- a/core/templates/components/state-directives/outcome-editor/outcome-if-stuck-destination-editor.component.html
+++ b/core/templates/components/state-directives/outcome-editor/outcome-if-stuck-destination-editor.component.html
@@ -1,7 +1,9 @@
 <div class="form-inline oppia-form-inline protractor-test-dest-if-stuck-bubble">
   <div class="oppia-rule-details-header">
-    <strong>(Optional) If the learner is really stuck, direct them to</strong>
+    <strong tabindex="0">(Optional) If the learner is really stuck, direct them to</strong>
     <div ngbTooltip="{{ 'I18N_DEST_IF_STUCK_INFO_TOOLTIP' | translate }}"
+         tabindex="0"
+         data-container="body"
          placement="right"
          class="dest-if-stuck-tooltip">
       <strong>&#x24D8;</strong>
@@ -30,7 +32,7 @@
              [attr.aria-invalid]="false" required>
     </span>
   </form>
-  <p [hidden]="newStateNameForm.form.valid ||  outcomeNewStateName === undefined" class="form-text oppia-form-error oppia-form-error-text">Please pick a card name consisting of alphanumeric characters, spaces and/or hyphens.</p>
+  <p [hidden]="newStateNameForm.form.valid ||  outcomeNewStateName === undefined" class="form-text oppia-form-error oppia-form-error-text" tabindex="0">Please pick a card name consisting of alphanumeric characters, spaces and/or hyphens.</p>
 </div>
 
 <style>
diff --git a/core/templates/components/state-directives/response-header/response-header.component.html b/core/templates/components/state-directives/response-header/response-header.component.html
index d9c5bfd576ab..91780f695d1f 100644
--- a/core/templates/components/state-directives/response-header/response-header.component.html
+++ b/core/templates/components/state-directives/response-header/response-header.component.html
@@ -44,6 +44,10 @@
 
 <span class="oppia-delete-response-button oppia-transition-200 e2e-test-delete-response"
       *ngIf="editabilityService.isEditable() && !defaultOutcome && !outcome"
+      (keydown.enter)="deleteResponse($event)"
+      tabindex="0"
+      role="button"
+      aria-label="delete response"
       (click)="deleteResponse($event)">
   <i class="material-icons md-18">&#xE5CD;</i>
 </span>
diff --git a/core/templates/components/state-directives/solution-editor/solution-editor.component.html b/core/templates/components/state-directives/solution-editor/solution-editor.component.html
index 7eac935fa14c..dc38786cd727 100644
--- a/core/templates/components/state-directives/solution-editor/solution-editor.component.html
+++ b/core/templates/components/state-directives/solution-editor/solution-editor.component.html
@@ -8,13 +8,17 @@
              class="oppia-click-to-start-editing"
              (click)="openEditorModal()">
           <i class="material-icons oppia-editor-edit-icon float-right"
+             tabindex="0"
+             (keydown.enter)="openEditorModal()"
+             aria-label="Edit Solution"
+             role="button"
              title="Edit Solution">&#xE254;
           </i>
         </div>
-        <strong>
+        <strong tabindex="0">
           {{stateSolutionService.savedMemento.answerIsExclusive ? 'The only' : 'One'}} solution is...
         </strong>
-        <span>
+        <span tabindex="0">
           <oppia-interaction-display [htmlData]="getAnswerHtml()">
           </oppia-interaction-display>
         </span>
diff --git a/core/templates/components/state-directives/solution-editor/solution-explanation-editor.component.html b/core/templates/components/state-directives/solution-editor/solution-explanation-editor.component.html
index 48d4b973293d..b92cdc4ae3bc 100644
--- a/core/templates/components/state-directives/solution-editor/solution-explanation-editor.component.html
+++ b/core/templates/components/state-directives/solution-editor/solution-explanation-editor.component.html
@@ -8,11 +8,14 @@
         <div class="oppia-click-to-start-editing"
              *ngIf="isEditable" (click)="openExplanationEditor()">
           <i class="material-icons oppia-editor-edit-icon float-right"
+             (keydown.enter)="openExplanationEditor()"
+             tabindex="0"
+             aria-label="Edit Explanation"
              title="Edit Explanation">&#xE254;
           </i>
         </div>
-        <strong>Explanation:</strong>
-        <span>
+        <strong tabindex="0">Explanation:</strong>
+        <span tabindex="0">
           <oppia-rte-output-display class="oppia-rte-editor" [rteString]="stateSolutionService.savedMemento.explanation.html">
           </oppia-rte-output-display>
         </span>
@@ -22,7 +25,7 @@
 
   <div *ngIf="isEditable && explanationEditorIsOpen">
     <div class="oppia-rule-details-header">
-      <strong>Explanation:</strong>
+      <strong tabindex="0">Explanation:</strong>
       <!-- TODO(sll): Find a way to do this without resorting to private properties like _html -->
       <schema-based-editor [schema]="getSchema()"
                            [localValue]="stateSolutionService.displayed.explanation._html"
@@ -30,7 +33,7 @@
       </schema-based-editor>
     </div>
 
-    <div *ngIf="isSolutionExplanationLengthExceeded()" class="oppia-length-validation-error">
+    <div *ngIf="isSolutionExplanationLengthExceeded()" class="oppia-length-validation-error" tabindex="0">
       The solution explanation is too long. Please use at most 1000 characters.
     </div>
 
diff --git a/core/templates/components/state-editor/state-content-editor/state-content-editor.component.html b/core/templates/components/state-editor/state-content-editor/state-content-editor.component.html
index aaf26b53ab78..2a380e7fff52 100644
--- a/core/templates/components/state-editor/state-content-editor/state-content-editor.component.html
+++ b/core/templates/components/state-editor/state-content-editor/state-content-editor.component.html
@@ -22,11 +22,12 @@
     <button class="fas fa-pen oppia-editor-edit-icon oppia-editor-edit-icon-position e2e-test-edit-content-pencil-button" title="Edit Card Content"></button>
     <div class="oppia-prevent-selection oppia-state-content-display oppia-transition-200"
          title="Card Content">
-      <span [hidden]="!stateContentService.savedMemento.isEmpty()" class="oppia-placeholder">
+      <span [hidden]="!stateContentService.savedMemento.isEmpty()" tabindex="0" class="oppia-placeholder">
         {{ stateContentPlaceholder }}
       </span>
       <span>
         <oppia-rte-output-display [rteString]="stateContentService.savedMemento.html"
+                                  tabindex="0"
                                   class="oppia-rte-editor e2e-test-state-content-display">
         </oppia-rte-output-display>
       </span>
@@ -38,6 +39,7 @@
   <div *ngIf="!isContentEditable()"
        class="e2e-test-edit-content">
     <div class="oppia-prevent-selection oppia-state-content-display oppia-transition-200"
+         tabindex="0"
          title="Card Content">
       <span [hidden]="!stateContentService.savedMemento.isEmpty()" class="oppia-placeholder">
         {{ stateContentPlaceholder }}
diff --git a/core/templates/components/state-editor/state-hints-editor/state-hints-editor.component.html b/core/templates/components/state-editor/state-hints-editor/state-hints-editor.component.html
index febd2aa428c2..e5551b1ef5af 100644
--- a/core/templates/components/state-editor/state-hints-editor/state-hints-editor.component.html
+++ b/core/templates/components/state-editor/state-hints-editor/state-hints-editor.component.html
@@ -6,19 +6,19 @@
              (click)="toggleHintCard()"
              (keydown.enter)="toggleHintCard()">
           <div class="state-hints-header">
-            <h3 class="oppia-exp-hints-card-header">Hints</h3>
+            <h3 class="oppia-exp-hints-card-header" tabindex="0">Hints</h3>
             <i class="fa fa-caret-down"
                *ngIf="!hintCardIsShown"
                tabindex="0"
                role="button"
-               aria-label="Expand interaction"
+               aria-label="Expand hint card"
                [attr.aria-hidden]="hintCardIsShown ? 'true' : 'false'">
             </i>
             <i class="fa fa-caret-up"
                *ngIf="hintCardIsShown"
                tabindex="0"
                role="button"
-               aria-label="collapse interaction"
+               aria-label="collapse hint card"
                [attr.aria-hidden]="hintCardIsShown ? 'false' : 'true'">
             </i>
           </div>
@@ -27,6 +27,7 @@ <h3 class="oppia-exp-hints-card-header">Hints</h3>
           <div class="oppia-add-hint-button-container">
             <div *ngIf="editabilityService.isEditableOutsideTutorialMode() && editabilityService.isEditable()">
               <button type="button"
+                      aria-label="Add hint"
                       class="btn btn-primary oppia-add-hint-button e2e-test-oppia-add-hint-button"
                       (click)="openAddHintModal()"
                       [disabled]="stateHintsService.displayed.length >= 5">
@@ -53,6 +54,8 @@ <h3 class="oppia-exp-hints-card-header">Hints</h3>
                   </picture>
                 </span>
                 <a (click)="changeActiveHintIndex(index)"
+                   tabindex="0"
+                   (keydown.enter)="changeActiveHintIndex(index)"
                    class="oppia-rule-tab e2e-test-hint-tab"
                    ngClass="{'oppia-rule-tab-active': stateHintsService.getActiveHintIndex() === index}">
                   <oppia-response-header class="oppia-response-header-center"
diff --git a/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.html b/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.html
index 4a6c25f6bee1..ac7d29930f6f 100644
--- a/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.html
+++ b/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.html
@@ -15,14 +15,14 @@ <h3 class="oppia-exp-interaction-card-header">
            *ngIf="!interactionEditorIsShown"
            tabindex="0"
            role="button"
-           aria-label="Expand interaction"
+           aria-label="Expand interaction card"
            [attr.aria-hidden]="interactionEditorIsShown ? 'true' : 'false'">
         </i>
         <i class="fa fa-caret-up"
            *ngIf="interactionEditorIsShown"
            tabindex="0"
            role="button"
-           aria-label="collapse answers and responses"
+           aria-label="collapse interaction card"
            [attr.aria-hidden]="interactionEditorIsShown ? 'false' : 'true'">
         </i>
       </div>
@@ -32,6 +32,7 @@ <h3 class="oppia-exp-interaction-card-header">
       <button type="button"
               class="btn btn-secondary oppia-add-interaction-button e2e-test-open-add-interaction-modal"
               (click)="openInteractionCustomizerModal()"
+              aria-label="Add interaction"
               *ngIf="editabilityService.isEditable()">
         + ADD INTERACTION
       </button>
diff --git a/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.spec.ts b/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.spec.ts
index 36055999cbb4..29f6fec6f0f8 100644
--- a/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.spec.ts
+++ b/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.spec.ts
@@ -298,6 +298,9 @@ describe('State Interaction component', () => {
       document.createElement('button'));
     component.customizeInteractionButton =
       customizeInteractionButtonRef;
+    spyOn(component, 'getCurrentInteractionName')
+      .and.returnValue('Introduction');
+    component.interactionEditorIsShown = true;
     spyOn(customizeInteractionButtonRef.nativeElement, 'focus');
 
     component.focusOnCustomizeInteraction(event);
diff --git a/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.ts b/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.ts
index 0b8c78f53ab3..bd7e5e582209 100644
--- a/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.ts
+++ b/core/templates/components/state-editor/state-interaction-editor/state-interaction-editor.component.ts
@@ -163,8 +163,11 @@ export class StateInteractionEditorComponent
   }
 
   focusOnCustomizeInteraction(event: KeyboardEvent): void {
-    event.preventDefault();
-    this.customizeInteractionButton.nativeElement.focus();
+    if (this.getCurrentInteractionName() !== '' &&
+      this.interactionEditorIsShown) {
+      event.preventDefault();
+      this.customizeInteractionButton.nativeElement.focus();
+    }
   }
 
   focusOnCollapseAnswersAndResponses(event: KeyboardEvent): void {
diff --git a/core/templates/components/state-editor/state-responses-editor/state-responses.component.html b/core/templates/components/state-editor/state-responses-editor/state-responses.component.html
index 7176df7f0f9b..1dec575145ed 100644
--- a/core/templates/components/state-editor/state-responses-editor/state-responses.component.html
+++ b/core/templates/components/state-editor/state-responses-editor/state-responses.component.html
@@ -5,7 +5,7 @@
         <div class="state-responses-header"
              (click)="toggleResponseCard()"
              (keydown.enter)="toggleResponseCard()">
-          <h3 class="oppia-exp-answer-card-header">Learner's Answers and Oppia's Responses</h3>
+          <h3 class="oppia-exp-answer-card-header" tabindex="0">Learner's Answers and Oppia's Responses</h3>
           <i class="fa fa-caret-down"
              *ngIf="!responseCardIsShown"
              tabindex="0"
@@ -41,13 +41,14 @@ <h3 class="oppia-exp-answer-card-header">Learner's Answers and Oppia's Responses
 
               <div class="oppia-rule-header-warning-placement" *ngIf="isSelfLoopThatIsMarkedCorrect(answerGroup.outcome) || isSelfLoopWithNoFeedback(answerGroup.outcome)" (click)="changeActiveAnswerGroupIndex(index)"
                    ngbTooltip="{{getOutcomeTooltip(answerGroup.outcome)}}"
+                   tabindex="0"
                    data-container="body"
                    placement="auto">
                 <div class="oppia-rule-header-warning-style">
                   ⚠
                 </div>
               </div>
-              <a (click)="changeActiveAnswerGroupIndex(index)" class="oppia-rule-tab e2e-test-response-tab" [ngClass]="{'oppia-rule-tab-active': activeAnswerGroupIndex === index}">
+              <a (click)="changeActiveAnswerGroupIndex(index)" (keydown.enter)="changeActiveAnswerGroupIndex(index)" tabindex="0" class="oppia-rule-tab e2e-test-response-tab" [ngClass]="{'oppia-rule-tab-active': activeAnswerGroupIndex === index}">
                 <oppia-response-header [index]="index"
                                        [summary]="summarizeAnswerGroup(answerGroup, getCurrentInteractionId(), getAnswerChoices(), false)"
                                        [shortSummary]="summarizeAnswerGroup(answerGroup, getCurrentInteractionId(), getAnswerChoices(), true)"
@@ -101,12 +102,15 @@ <h3 class="oppia-exp-answer-card-header">Learner's Answers and Oppia's Responses
                    *ngIf="isSelfLoopThatIsMarkedCorrect(defaultOutcome) || (isSelfLoopWithNoFeedback(defaultOutcome))"
                    (click)="changeActiveAnswerGroupIndex(answerGroups.length)"
                    ngbTooltip="{{getOutcomeTooltip(defaultOutcome)}}"
+                   tabindex="0"
                    placement="auto">
                 <div class="oppia-rule-header-warning-style" >
                   ⚠
                 </div>
               </div>
               <a (click)="changeActiveAnswerGroupIndex(answerGroups.length)"
+                 tabindex="0"
+                 (keydown.enter)="changeActiveAnswerGroupIndex(answerGroups.length)"
                  class="oppia-sortable-rule-block oppia-rule-tab oppia-default-rule-tab e2e-test-default-response-tab"
                  [ngClass]="{'oppia-rule-tab-active': activeAnswerGroupIndex == answerGroups.length}">
                 <oppia-response-header [index]="index"
@@ -243,6 +247,11 @@ <h4 class="pl-3" *ngIf="containsOptionalMisconceptions">Optional</h4>
     width: 100%;
   }
 
+  .oppia-sortable-rule-block:focus,
+  .oppia-rule-tab:focus {
+    outline: 1px solid #000;
+  }
+
   .oppia-rule-sort-handle {
     padding-right: 2px;
     position: absolute;
diff --git a/core/templates/components/state-editor/state-solution-editor/state-solution-editor.component.html b/core/templates/components/state-editor/state-solution-editor/state-solution-editor.component.html
index 095214dd7f66..f71c6d331e38 100644
--- a/core/templates/components/state-editor/state-solution-editor/state-solution-editor.component.html
+++ b/core/templates/components/state-editor/state-solution-editor/state-solution-editor.component.html
@@ -6,19 +6,19 @@
              (click)="toggleSolutionCard()"
              (keydown.enter)="toggleSolutionCard()">
           <div class="state-solution-header oppia-mobile-collapsible-card-header">
-            <h3 class="oppia-exp-solution-card-header">Solution</h3>
+            <h3 class="oppia-exp-solution-card-header" tabindex="0">Solution</h3>
             <i class="fa fa-caret-down"
                *ngIf="!solutionCardIsShown"
                tabindex="0"
                role="button"
-               aria-label="Expand answers and responses"
+               aria-label="Expand solutions card"
                [attr.aria-hidden]="solutionCardIsShown ? 'true' : 'false'">
             </i>
             <i class="fa fa-caret-up"
                *ngIf="solutionCardIsShown"
                tabindex="0"
                role="button"
-               aria-label="collapse answers and responses"
+               aria-label="collapse solutions card"
                [attr.aria-hidden]="solutionCardIsShown ? 'false' : 'true'">
             </i>
           </div>
@@ -28,6 +28,7 @@ <h3 class="oppia-exp-solution-card-header">Solution</h3>
             <div *ngIf="isEditable()">
               <button *ngIf="!savedMemento()"
                       type="button"
+                      aria-label="Add solution"
                       class="btn btn-secondary oppia-add-hint-button e2e-test-oppia-add-solution-button"
                       (click)="openAddOrUpdateSolutionModal()">
                 + ADD SOLUTION
@@ -43,12 +44,15 @@ <h3 class="oppia-exp-solution-card-header">Solution</h3>
                    *ngIf="!isSolutionValid()"
                    (click)="toggleInlineSolutionEditorIsActive()"
                    [ngbTooltip]="getInvalidSolutionTooltip()"
+                   tabindex="0"
                    placement="auto">
                 <div class="oppia-rule-header-warning-style">
                   ⚠
                 </div>
               </div>
               <a (click)="toggleInlineSolutionEditorIsActive()"
+                 (keydown.enter)="toggleInlineSolutionEditorIsActive()"
+                 tabindex="0"
                  class="oppia-rule-tab e2e-test-oppia-solution-tab">
                 <oppia-response-header [summary]="getSolutionSummary()"
                                        [defaultOutcome]="false"
@@ -68,7 +72,7 @@ <h3 class="oppia-exp-solution-card-header">Solution</h3>
           </ul>
           <div *ngIf="!savedMemento()" class="oppia-empty-solution-warning">
             <i class="material-icons oppia-empty-solution-warning-icon">&#xe002;</i>
-            <span [innerHTML]="'I18N_EMPTY_SOLUTION_MESSAGE' | translate"></span>
+            <span [innerHTML]="'I18N_EMPTY_SOLUTION_MESSAGE' | translate" tabindex="0"></span>
           </div>
         </div>
       </div>
diff --git a/core/templates/css/oppia.css b/core/templates/css/oppia.css
index 98a6b122aea2..898b254477a7 100644
--- a/core/templates/css/oppia.css
+++ b/core/templates/css/oppia.css
@@ -1640,7 +1640,7 @@ pre.oppia-pre-wrapped-text {
   color: #009688;
 }
 .btn:focus, .btn:active:focus {
-  outline: 0;
+  outline: 1px solid #000;
 }
 .skipBtn {
   height: 25px;
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html b/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
index 85a839f8acdd..933cd46429c6 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/exploration-editor-tab.component.html
@@ -70,7 +70,7 @@ <h4>Now for the fun part...</h4>
       <oppia-unresolved-answers-overview></oppia-unresolved-answers-overview>
     </div>
     <div class="exp-state-version-history">
-      <div><strong>Version History</strong></div>
+      <div tabindex="0"><strong>Version History</strong></div>
       <oppia-state-version-history [validationErrorIsShown]="validationErrorIsShown"></oppia-state-version-history>
     </div>
   </div>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/exploration-graph.component.html b/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/exploration-graph.component.html
index 29ac33d52043..b5bba3293f7e 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/exploration-graph.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/exploration-graph.component.html
@@ -1,7 +1,7 @@
 <div [hidden]="!isGraphShown()" class="oppia-state-graph-animate-show">
   <div class="oppia-exp-graph-overview">
     <span class="oppia-exploration-overview-text">
-      <strong>Exploration Overview</strong>
+      <strong tabindex="0">Exploration Overview</strong>
     </span>
     <div>
       <span *ngIf="!showCheckpointCountWarningSign()">&#11088;</span>
@@ -10,7 +10,7 @@
             *ngIf="showCheckpointCountWarningSign()">
         <strong class="clickable">⚠️</strong>
       </span>
-      <span [ngClass]="{'checkpoint-count-error': showCheckpointCountWarningSign()}">
+      <span [ngClass]="{'checkpoint-count-error': showCheckpointCountWarningSign()}" tabindex="0">
         {{ getCheckpointCount() }}
         <span *ngIf="getCheckpointCount() <= 1">
           Checkpoint
@@ -21,6 +21,7 @@
       </span>
       <span ngbTooltip="Learners start at their last saved checkpoint when returning back from the lesson."
             placement="right-top"
+            tabindex="0"
             class="clickable">
         <strong>&#x24D8;</strong>
       </span>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/state-graph-visualization.component.html b/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/state-graph-visualization.component.html
index fd558b8233bc..b81ddfe1edd1 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/state-graph-visualization.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/graph-directives/state-graph-visualization.component.html
@@ -30,6 +30,8 @@
                     [attr.x]="node.x0" [attr.y]="node.y0"
                     [ngClass]="{'clickable': canNavigateToNode(node.id)}"
                     [attr.style]="node.style"
+                    tabindex="0"
+                    (keydown.enter)="sendOnClickFunctionData(node.id)"
                     (click)="sendOnClickFunctionData(node.id)"
                     role="button"
                     [attr.aria-label]="'Switch to ' + getNodeTitle(node) + 'Card'">
@@ -65,10 +67,10 @@
                       [attr.x]="node.x0 + node.width" [attr.y]="node.y0"
                       transform="translate(0, -15)"
                       class="clickable oppia-node-delete"
-                      (click)="onNodeDeletionClick(node.id)"
-                      [attr.aria-label]="'Delete' + getNodeTitle(node) + 'card'">
+                      (click)="onNodeDeletionClick(node.id)">
                 </rect>
-                <text [attr.dx]="node.x0 + node.width" [attr.dy]="node.y0" text-anchor="right">
+                <text [attr.aria-label]="'Delete ' + getNodeTitle(node) + ' card'" (keydown.enter)="onNodeDeletionClick(node.id)"
+                      tabindex="0" [attr.dx]="node.x0 + node.width" [attr.dy]="node.y0" text-anchor="right">
                   x
                 </text>
               </g>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/state-name-editor/state-name-editor.component.html b/core/templates/pages/exploration-editor-page/editor-tab/state-name-editor/state-name-editor.component.html
index 4daa07229ee0..91bb0cca2ae3 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/state-name-editor/state-name-editor.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/state-name-editor/state-name-editor.component.html
@@ -2,15 +2,17 @@
   <span class="e2e-test-state-name-container">
     <span *ngIf="editabilityService.isEditable()">
       <span *ngIf="!stateNameService.isStateNameEditorShown()" (click)="openStateNameEditor()" class="oppia-editable-section">
-        <strong class="oppia-state-name-text e2e-test-state-name-text">{{stateEditorService.getActiveStateName()}}</strong>
+        <strong tabindex="0" [attr.aria-label]="'State name: ' + stateEditorService.getActiveStateName()" class="oppia-state-name-text e2e-test-state-name-text">{{stateEditorService.getActiveStateName()}}</strong>
         <button *ngIf="editabilityService.isEditable()" class="fas fa-pen oppia-editor-edit-icon oppia-autofocus"
+                (keydown.enter)="openStateNameEditor()"
+                aria-label="Edit State Name"
                 title="Edit State Name">&#xE254;
         </button>
       </span>
 
       <span *ngIf="stateNameService.isStateNameEditorShown()">
         <form class="form-horizontal" role="form" #f="ngForm" (ngSubmit)="saveStateNameAndRefresh(tmpStateName)">
-          <input type="text" name="tmpStateName" [(ngModel)]="tmpStateName" [maxlength]="maxLen" (focus)="stateNameEditorOpened" class="e2e-test-state-name-input">
+          <input type="text" name="tmpStateName" [(ngModel)]="tmpStateName" [maxlength]="maxLen" (focus)="stateNameEditorOpened" autofocus class="e2e-test-state-name-input">
           <button type="submit" class="btn btn-success btn-sm e2e-test-state-name-submit">Save</button>
         </form>
       </span>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/state-version-history/state-version-history.component.html b/core/templates/pages/exploration-editor-page/editor-tab/state-version-history/state-version-history.component.html
index 64711e690484..64702681818b 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/state-version-history/state-version-history.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/state-version-history/state-version-history.component.html
@@ -1,12 +1,12 @@
 <div *ngIf="canShowExploreVersionHistoryButton();" class="explore-version-history-container">
-  <div>
+  <div tabindex="0">
     This card was last edited by <strong>{{ getLastEditedCommitterUsername() }}</strong> at <strong>version {{ getLastEditedVersionNumber() + 1 }}</strong> of the exploration.
-    <a class="text-primary explore-version-history-button" (click)="onClickExploreVersionHistoryButton()">See commit history</a>.
+    <a class="text-primary explore-version-history-button" tabindex="0" (keydown.enter)="onClickExploreVersionHistoryButton()" (click)="onClickExploreVersionHistoryButton()">See commit history</a>.
   </div>
 </div>
 <div *ngIf="!canShowExploreVersionHistoryButton()" class="explore-version-history-container">
-  <span *ngIf="!validationErrorIsShown">No changes have been made after the initial commit to this state.</span>
-  <span *ngIf="validationErrorIsShown" class="error-message">
+  <span *ngIf="!validationErrorIsShown" tabindex="0">No changes have been made after the initial commit to this state.</span>
+  <span *ngIf="validationErrorIsShown" class="error-message" tabindex="0">
     Unable to display the version history due to an error loading the exploration data.
   </span>
 </div>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.html b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.html
index 65d57575e974..51c0a6d289fc 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header e2e-test-add-response-modal-header" ngbAutofocus>
-  <h3 tabindex="0">Add Response</h3>
+  <h3 tabindex="0" #addResponse>Add Response</h3>
   <i class="fa fa-times" tabindex="0" role="button" (keydown.enter)="cancel()" (click)="cancel()"></i>
 </div>
 
@@ -22,10 +22,10 @@ <h3 tabindex="0">Add Response</h3>
          title="Edit feedback" class="oppia-edit-feedback">
       <div class="oppia-rule-details-header oppia-editable-section">
         <div class="oppia-rule-preview oppia-transition-200">
+          <strong tabindex="0">Oppia tells the learner...</strong>
           <div class="oppia-click-to-start-editing" (click)="openFeedbackEditor()">
             <i class="fa fa-pen oppia-editor-edit-icon e2e-test-open-feedback-editor" (keydown.enter)="openFeedbackEditor()" aria-label="edit feedback button" tabindex="0" title="Edit Feedback">&#xE254;</i>
           </div>
-          <strong>Oppia tells the learner...</strong>
           <div class="position-relative">
             <span class="oppia-nothing-text">
               <em>Nothing</em>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.spec.ts b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.spec.ts
index cc24d1300ce9..18d4503fb7ce 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.spec.ts
+++ b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.spec.ts
@@ -25,7 +25,7 @@ import { Subscription } from 'rxjs';
 import { EventBusGroup, EventBusService } from 'app-events/event-bus.service';
 import { ObjectFormValidityChangeEvent } from 'app-events/app-events';
 import { AddAnswerGroupModalComponent } from './add-answer-group-modal.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, ElementRef } from '@angular/core';
 import { SubtitledHtml } from 'domain/exploration/subtitled-html.model';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -177,6 +177,17 @@ describe('Add Answer Group Modal Component', () => {
     expect(component.isFeedbackLengthExceeded(outcome2)).toBe(true);
   });
 
+  it('should focus on the header after loading', () => {
+    const addResponseRef = new ElementRef(
+      document.createElement('h4'));
+    component.addResponseRef = addResponseRef;
+    spyOn(addResponseRef.nativeElement, 'focus');
+
+    component.ngAfterViewInit();
+
+    expect(addResponseRef.nativeElement.focus).toHaveBeenCalled();
+  });
+
   it('should save answer group response when closing the modal', () => {
     component.saveResponse(false);
     component.updateState('update');
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.ts b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.ts
index 74b82410d093..883fea041d80 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.ts
+++ b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-answer-group-modal.component.ts
@@ -18,7 +18,7 @@
 
 import { EventBusGroup, EventBusService, Newable } from 'app-events/event-bus.service';
 import { ObjectFormValidityChangeEvent } from 'app-events/app-events';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
 import { downgradeComponent } from '@angular/upgrade/static';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { UrlInterpolationService } from 'domain/utilities/url-interpolation.service';
@@ -59,6 +59,7 @@ export class AddAnswerGroupModalComponent
    // https://github.com/oppia/oppia/wiki/Guide-on-defining-types#ts-7-1
    @Input() currentInteractionId!: string;
    @Input() stateName!: string;
+   @ViewChild('addResponse',) addResponseRef!: ElementRef;
 
    eventBusGroup!: EventBusGroup;
    tmpRule!: Rule;
@@ -193,6 +194,10 @@ export class AddAnswerGroupModalComponent
      this.tmpOutcome.feedback = outcome.feedback;
    }
 
+   ngAfterViewInit(): void {
+     this.addResponseRef.nativeElement.focus();
+   }
+
    ngOnDestroy(): void {
      this.eventBusGroup.unsubscribe();
    }
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.html b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.html
index 7b70d5decb9b..7296a7edb3b0 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-hint-modal.component.html
@@ -1,9 +1,9 @@
 <div class="modal-header e2e-test-hint-modal">
-  <h3>Add Hint</h3>
-  <i class="fa fa-times" (click)="cancel()"></i>
+  <h3 tabindex="0">Add Hint</h3>
+  <i class="fa fa-times" tabindex="0" aria-label="close" role="button" (keydown.enter)="cancel()" (click)="cancel()"></i>
 </div>
 
-<div class="modal-body">
+<div class="modal-body" tabindex="0">
   <h4>
     Provide a helpful hint to the learner. For example, you could show how to break the question into smaller sub-problems, show how to solve a sub-problem, or relate this question to a previous one.
   </h4>
@@ -12,7 +12,7 @@ <h4>
 <div class="modal-body">
   <form class="form-inline">
     <div class="oppia-rule-details-header">
-      <strong>Hint #{{ hintIndex }} is...</strong>
+      <strong tabindex="0">Hint #{{ hintIndex }} is...</strong>
       <schema-based-editor class="e2e-test-hint-text"
                            [schema]="getSchema()"
                            [localValue]="this.tmpHint"
@@ -20,7 +20,7 @@ <h4>
       </schema-based-editor>
     </div>
   </form>
-  <div *ngIf="isHintLengthExceeded(tmpHint)" class="oppia-length-validation-error">
+  <div *ngIf="isHintLengthExceeded(tmpHint)" class="oppia-length-validation-error" tabindex="0">
     The hint length is too long. Please use at most 500 characters.
   </div>
 </div>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-or-update-solution-modal.component.html b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-or-update-solution-modal.component.html
index 68fab7b2a313..fa85d2221b1b 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-or-update-solution-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/add-or-update-solution-modal.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header e2e-test-add-or-update-solution-modal">
-  <h3>{{ solutionType !== null ? 'Update Solution' : 'Add Solution' }}</h3>
+  <h3 tabindex="0">{{ solutionType !== null ? 'Update Solution' : 'Add Solution' }}</h3>
 </div>
 
 <div class="modal-body">
@@ -11,7 +11,7 @@ <h3>{{ solutionType !== null ? 'Update Solution' : 'Add Solution' }}</h3>
         <option *ngFor="let item of ansOptions">
           {{ item }}
         </option>
-      </select> <strong> solution is...</strong>
+      </select> <strong tabindex="0"> solution is...</strong>
       <br>
       <br>
       <div>
@@ -29,7 +29,7 @@ <h3>{{ solutionType !== null ? 'Update Solution' : 'Add Solution' }}</h3>
       </button>
       <br>
       <div [hidden]="data.correctAnswer === undefined">
-        <strong>Explanation:</strong>
+        <strong tabindex="0">Explanation:</strong>
         <schema-based-editor class="e2e-test-explanation-textarea"
                              [schema]="EXPLANATION_FORM_SCHEMA"
                              [(localValue)]="data.explanationHtml">
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/customize-interaction-modal.component.html b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/customize-interaction-modal.component.html
index 9910c91e4576..7560720f7613 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/customize-interaction-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/customize-interaction-modal.component.html
@@ -64,12 +64,14 @@ <h3 tabindex="0" *ngIf="!stateInteractionIdService.displayed" [oppiaFocusOn]="ch
                            [(ngModel)]="stateCustomizationArgsService.displayed[customizationArgSpec.name].value">
       </schema-based-editor>
       <div *ngIf="customizationArgSpec.schema.type === 'bool'"
+           tabindex="0"
            class="oppia-interaction-customization-label">
         {{ customizationArgSpec.description }}
       </div>
       <div class="oppia-interaction-customization-label-container"></div>
     </div>
     <div *ngIf="getCustomizationArgsWarningMessage()"
+         tabindex="0"
          class="alert alert-danger oppia-units-input-error">
       {{ getCustomizationArgsWarningMessage() }}
     </div>
diff --git a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/delete-answer-group-modal.component.html b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/delete-answer-group-modal.component.html
index 2ee899e53f4d..23829b1a3d84 100644
--- a/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/delete-answer-group-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/editor-tab/templates/modal-templates/delete-answer-group-modal.component.html
@@ -1,8 +1,8 @@
 <div class="modal-header">
-  <h3>Delete Response</h3>
+  <h3 tabindex="0" #deleteResponseHeader>Delete Response</h3>
 </div>
 
-<div class="modal-body">
+<div class="modal-body" tabindex="0">
   <p>
     Are you sure you want to delete this response?
   </p>
diff --git a/core/templates/pages/exploration-editor-page/exploration-editor-page.component.html b/core/templates/pages/exploration-editor-page/exploration-editor-page.component.html
index c105e363d7d3..baa59d62955c 100644
--- a/core/templates/pages/exploration-editor-page/exploration-editor-page.component.html
+++ b/core/templates/pages/exploration-editor-page/exploration-editor-page.component.html
@@ -30,10 +30,11 @@ <h1>{{ getNavbarText() }}</h1>
           <i class="fas fa-pen navbar-tab-icon" [ngClass]="{'navbar-tab-active-icon': getActiveTabName() === 'main'}"></i>
         </a>
         <div [hidden]="!(countWarnings())" class="oppia-editor-warnings-indicator"
+             tabindex="0"
              (mouseover)="isWarningsAreShown(true)"
              (mouseleave)="isWarningsAreShown(false)"
              [ngClass]="{'oppia-editor-warnings-critical-color': hasCriticalWarnings(), 'oppia-editor-warnings-error-color': !hasCriticalWarnings()}">
-          <span class="oppia-editor-warnings-count">
+          <span class="oppia-editor-warnings-count" [attr.aria-label]="generateAriaLabelForWarnings()">
             {{ countWarnings() }}
           </span>
           <ul class="uib-dropdown-menu oppia-editor-warnings-box dropdown-menu exploration-editor-warning-box" *ngIf="warningsAreShown">
diff --git a/core/templates/pages/exploration-editor-page/exploration-editor-page.component.spec.ts b/core/templates/pages/exploration-editor-page/exploration-editor-page.component.spec.ts
index d3bc6390c2db..d3ab2f5d4b05 100644
--- a/core/templates/pages/exploration-editor-page/exploration-editor-page.component.spec.ts
+++ b/core/templates/pages/exploration-editor-page/exploration-editor-page.component.spec.ts
@@ -595,6 +595,23 @@ describe('Exploration editor page component', () => {
       expect(focusSpy).toHaveBeenCalled();
     });
 
+    it('should generate the aria label correctly', () => {
+      const mockWarnings = [
+        { message: 'Warning 1' },
+        { message: 'Warning 2' },
+        { message: 'Warning 3' },
+      ];
+
+      spyOn(component, 'getWarnings').and.returnValue(mockWarnings);
+      spyOn(component, 'countWarnings').and.returnValue(mockWarnings.length);
+
+      const ariaLabel = component.generateAriaLabelForWarnings();
+
+      expect(ariaLabel).toBe(
+        'Total warnings: 3. Warning 1: Warning 1. Warning 2: ' +
+        'Warning 2. Warning 3: Warning 3');
+    });
+
     it('should show the user help modal for editor tutorial', fakeAsync(() => {
       spyOn(ngbModal, 'open').and.returnValue(
           {
diff --git a/core/templates/pages/exploration-editor-page/exploration-editor-page.component.ts b/core/templates/pages/exploration-editor-page/exploration-editor-page.component.ts
index 6d64258ffc5d..f79cf1925c32 100644
--- a/core/templates/pages/exploration-editor-page/exploration-editor-page.component.ts
+++ b/core/templates/pages/exploration-editor-page/exploration-editor-page.component.ts
@@ -429,6 +429,15 @@ export class ExplorationEditorPageComponent implements OnInit, OnDestroy {
     }
   }
 
+  generateAriaLabelForWarnings(): string {
+    const warnings = this.getWarnings() as { message: string }[];
+    const warningLabels = warnings.map(
+      (warning, index) => 'Warning ' + (index + 1) + ': ' + warning.message)
+      .join('. ');
+
+    return 'Total warnings: ' + this.countWarnings() + '. ' + warningLabels;
+  }
+
   getNavbarText(): string {
     return 'Exploration Editor';
   }
diff --git a/core/templates/pages/exploration-editor-page/exploration-objective-editor/exploration-objective-editor.component.html b/core/templates/pages/exploration-editor-page/exploration-objective-editor/exploration-objective-editor.component.html
index aed4968a4e8f..5ed39c8a4f47 100644
--- a/core/templates/pages/exploration-editor-page/exploration-objective-editor/exploration-objective-editor.component.html
+++ b/core/templates/pages/exploration-editor-page/exploration-objective-editor/exploration-objective-editor.component.html
@@ -1,4 +1,5 @@
 <p [ngClass]="{'has-error': (explorationObjective.dirty || explorationObjective.touched) && (!explorationObjectiveService.displayed || explorationObjectiveService.displayed.length < 15 || explorationObjectiveService.displayed.length > 100)}">
+  <span [attr.aria-label]="'Add a goal: what does the exploration help people to do? In a complete sentence, tell people what they\'ll learn from this exploration.'" tabindex="0" class="sr-only"></span>
   <mat-form-field class="example-full-width" appearance="fill">
     <mat-label>{{ labelText }}</mat-label>
     <input matInput
diff --git a/core/templates/pages/exploration-editor-page/exploration-title-editor/exploration-title-editor.component.html b/core/templates/pages/exploration-editor-page/exploration-title-editor/exploration-title-editor.component.html
index e7091d86ae54..d34d847f29be 100644
--- a/core/templates/pages/exploration-editor-page/exploration-title-editor/exploration-title-editor.component.html
+++ b/core/templates/pages/exploration-editor-page/exploration-title-editor/exploration-title-editor.component.html
@@ -1,4 +1,5 @@
 <div [ngClass]="{'has-error': (explorationTitle.dirty || explorationTitle.touched) && !(explorationTitleService.displayed.length > 0)}">
+  <span [attr.aria-label]="'Choose a title for your exploration. (Please use at most ' + MAX_CHARS_IN_EXPLORATION_TITLE + ' characters, so that this fits in the summary card.)'" tabindex="0" class="sr-only"></span>
   <mat-form-field appearance="fill">
     <mat-label>{{ labelText }}</mat-label>
     <input matInput
diff --git a/core/templates/pages/exploration-editor-page/feedback-tab/feedback-tab.component.html b/core/templates/pages/exploration-editor-page/feedback-tab/feedback-tab.component.html
index 48c9a019c1a8..41f96eb515e4 100644
--- a/core/templates/pages/exploration-editor-page/feedback-tab/feedback-tab.component.html
+++ b/core/templates/pages/exploration-editor-page/feedback-tab/feedback-tab.component.html
@@ -9,11 +9,11 @@
       </button>
     </div>
 
-    <h2>Exploration Feedback</h2>
+    <h2 tabindex="0">Exploration Feedback</h2>
 
     <div class="oppia-clear"></div>
 
-    <div *ngIf="threadData && threadData.feedbackThreads && threadData.feedbackThreads.length === 0">
+    <div *ngIf="threadData && threadData.feedbackThreads && threadData.feedbackThreads.length === 0" tabindex="0">
       <em>No feedback has been given for this exploration yet.</em>
     </div>
     <br>
@@ -22,7 +22,7 @@ <h2>Exploration Feedback</h2>
                         (rowClick)="setActiveThread($event)">
     </oppia-thread-table>
 
-    <em *ngIf="!userIsLoggedIn">
+    <em *ngIf="!userIsLoggedIn" tabindex="0">
       To create a new feedback thread, please log in.
     </em>
   </div>
diff --git a/core/templates/pages/exploration-editor-page/feedback-tab/templates/create-feedback-thread-modal.component.html b/core/templates/pages/exploration-editor-page/feedback-tab/templates/create-feedback-thread-modal.component.html
index 76f38f699833..b97bca200ee3 100644
--- a/core/templates/pages/exploration-editor-page/feedback-tab/templates/create-feedback-thread-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/feedback-tab/templates/create-feedback-thread-modal.component.html
@@ -1,10 +1,10 @@
 <div class="modal-header">
-  <h3>Start New Feedback Thread</h3>
+  <h3 tabindex="0">Start New Feedback Thread</h3>
 </div>
 
 <div class="modal-body">
-  <p>Thread subject: <input class="oppia-feedback-modal-input oppia-autofocus" type="text" [(ngModel)]="newThreadSubject" autofocus></p>
-  <p>Message text <textarea class="oppia-feedback-modal-textarea" [(ngModel)]="newThreadText" rows="6"></textarea></p>
+  <p>Thread subject: <input aria-label="Thread subject" class="oppia-feedback-modal-input oppia-autofocus" type="text" [(ngModel)]="newThreadSubject"></p>
+  <p>Message text <textarea aria-label="Message text" class="oppia-feedback-modal-textarea" [(ngModel)]="newThreadText" rows="6"></textarea></p>
 </div>
 
 <div class="modal-footer">
diff --git a/core/templates/pages/exploration-editor-page/feedback-tab/thread-table/thread-table.component.html b/core/templates/pages/exploration-editor-page/feedback-tab/thread-table/thread-table.component.html
index ce321a3922a3..c1be5c4a5163 100644
--- a/core/templates/pages/exploration-editor-page/feedback-tab/thread-table/thread-table.component.html
+++ b/core/templates/pages/exploration-editor-page/feedback-tab/thread-table/thread-table.component.html
@@ -17,16 +17,16 @@
   </thead>
   <tr *ngFor="let thread of this.threads" (click)="onRowClick(thread.threadId)" class="oppia-feedback-tab-row e2e-test-oppia-feedback-tab-row">
     <td width="15%">
-      <span [ngClass]="getLabelClass(thread.status)">{{ getHumanReadableStatus(thread.status)}}</span>
+      <span tabindex="0" [attr.aria-label]="'Status' + getHumanReadableStatus(thread.status)" [ngClass]="getLabelClass(thread.status)">{{ getHumanReadableStatus(thread.status)}}</span>
     </td>
     <td width="45%">
-      <div class="e2e-test-exploration-feedback-subject">{{thread.subject | truncate:40 }}</div>
+      <div class="e2e-test-exploration-feedback-subject" tabindex="0" [attr.aria-label]="'Subject' + thread.subject">{{thread.subject | truncate:40 }}</div>
     </td>
     <td width="20%">
-      <span *ngIf="thread.originalAuthorName">{{thread.originalAuthorName}}</span>
+      <span tabindex="0" [attr.aria-label]="'Original author' + thread.originalAuthorName" *ngIf="thread.originalAuthorName">{{thread.originalAuthorName}}</span>
     </td>
     <td width="20%">
-      <span>{{getLocaleAbbreviatedDateTimeString(thread.lastUpdatedMsecs)}}</span>
+      <span tabindex="0" [attr.aria-label]="'Last updated' + getLocaleAbbreviatedDateTimeString(thread.lastUpdatedMsecs)">{{getLocaleAbbreviatedDateTimeString(thread.lastUpdatedMsecs)}}</span>
     </td>
   </tr>
 </table>
diff --git a/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.html b/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.html
index b0bb3fbfdb38..4d3c13421186 100644
--- a/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.html
@@ -1,9 +1,9 @@
 <div class="modal-header">
-  <h4 class="modal-title">
+  <h4 class="modal-title" tabindex="0" #confirmHeader>
     Confirmation Required
   </h4>
 </div>
-<div class="modal-body">
+<div class="modal-body" tabindex="0">
   <p>
     All <b>unsaved</b> changes will be lost if you exit this window. Are you sure you want to
     leave?
diff --git a/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.spec.ts b/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.spec.ts
index d470bc9dbe0c..b157dbdbeba9 100644
--- a/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.spec.ts
+++ b/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.spec.ts
@@ -16,7 +16,7 @@
  * @fileoverview Unit tests for confirm leave modal component.
  */
 
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, ElementRef } from '@angular/core';
 import { ComponentFixture, waitForAsync, TestBed } from '@angular/core/testing';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ConfirmLeaveModalComponent } from './confirm-leave-modal.component';
@@ -45,4 +45,15 @@ describe('Confirm Leave Modal Component', function() {
   it('should check component is initialized', () => {
     expect(component).toBeDefined();
   });
+
+  it('should focus on the header after loading', () => {
+    const confirmHeaderRef = new ElementRef(
+      document.createElement('h4'));
+    component.confirmHeaderRef = confirmHeaderRef;
+    spyOn(confirmHeaderRef.nativeElement, 'focus');
+
+    component.ngAfterViewInit();
+
+    expect(confirmHeaderRef.nativeElement.focus).toHaveBeenCalled();
+  });
 });
diff --git a/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.ts b/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.ts
index ecf1a7191109..c1c4f121badb 100644
--- a/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.ts
+++ b/core/templates/pages/exploration-editor-page/modal-templates/confirm-leave-modal.component.ts
@@ -16,7 +16,7 @@
  * @fileoverview Component for confirm leave modal.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewChild, ElementRef } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { ConfirmOrCancelModal } from 'components/common-layout-directives/common-elements/confirm-or-cancel-modal.component';
 
@@ -27,9 +27,14 @@ import { ConfirmOrCancelModal } from 'components/common-layout-directives/common
 
 export class ConfirmLeaveModalComponent
   extends ConfirmOrCancelModal {
+  @ViewChild('confirmHeader',) confirmHeaderRef!: ElementRef;
   constructor(
     private ngbActiveModal: NgbActiveModal
   ) {
     super(ngbActiveModal);
   }
+
+  ngAfterViewInit(): void {
+    this.confirmHeaderRef.nativeElement.focus();
+  }
 }
diff --git a/core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.html b/core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.html
index 9daa613c0fe0..ba34215c22f5 100644
--- a/core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/modal-templates/exploration-metadata-modal.component.html
@@ -1,9 +1,9 @@
 <div class="modal-header e2e-test-metadata-modal-header">
-  <h3>Add Some Details</h3>
+  <h3 tabindex="0">Add Some Details</h3>
 </div>
 
 <div class="modal-body oppia-long-text" *ngIf="isValueHasbeenUpdated">
-  <p>
+  <p tabindex="0">
     Just a few more things before you publish:
   </p>
   <oppia-exploration-title-editor *ngIf="requireTitleToBeSpecified"
diff --git a/core/templates/pages/exploration-editor-page/modal-templates/exploration-publish-modal.component.html b/core/templates/pages/exploration-editor-page/modal-templates/exploration-publish-modal.component.html
index d97f84ff1b11..a3329c5af727 100644
--- a/core/templates/pages/exploration-editor-page/modal-templates/exploration-publish-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/modal-templates/exploration-publish-modal.component.html
@@ -1,8 +1,8 @@
 <div class="modal-header">
-  <h3>Publish Exploration</h3>
+  <h3 tabindex="0">Publish Exploration</h3>
 </div>
 
-<div class="modal-body oppia-long-text">
+<div class="modal-body oppia-long-text" tabindex="0">
   <p>
       Congratulations, you're about to publish an exploration!
   </p>
diff --git a/core/templates/pages/exploration-editor-page/modal-templates/exploration-save-modal.component.html b/core/templates/pages/exploration-editor-page/modal-templates/exploration-save-modal.component.html
index ed96d2442d7c..6deaefb10eb3 100644
--- a/core/templates/pages/exploration-editor-page/modal-templates/exploration-save-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/modal-templates/exploration-save-modal.component.html
@@ -1,15 +1,15 @@
 <div [ngClass]="{'oppia-save-exploration-wide-modal':showDiff}">
   <div class="modal-header">
     <h3>
-      <span *ngIf="isExplorationPrivate">Save Draft</span>
-      <span *ngIf="!isExplorationPrivate">Publish Changes</span>
+      <span *ngIf="isExplorationPrivate" tabindex="0">Save Draft</span>
+      <span *ngIf="!isExplorationPrivate" tabindex="0">Publish Changes</span>
     </h3>
   </div>
   <div class="modal-body oppia-long-text">
     <p class="e2e-test-exploration-save-modal">
-      <span *ngIf="isExplorationPrivate">(Optional)</span>
-      <label for="commitMessage">Please enter a brief description of what you have changed:</label>
-      <textarea id="commitMessage" rows="3" cols="50" [maxlength]="MAX_COMMIT_MESSAGE_LENGTH" [(ngModel)]="commitMessage" class="oppia-commit-message-input e2e-test-commit-message-input" autofocus></textarea>
+      <span *ngIf="isExplorationPrivate" tabindex="0">(Optional)</span>
+      <span tabindex="0">Please enter a brief description of what you have changed:</span>
+      <textarea rows="3" cols="50" [maxlength]="MAX_COMMIT_MESSAGE_LENGTH" [(ngModel)]="commitMessage" class="oppia-commit-message-input e2e-test-commit-message-input"></textarea>
     </p>
     <button class="btn btn-secondary" (click)="onClickToggleDiffButton()">
       <span *ngIf="!showDiff">Show Changes</span>
diff --git a/core/templates/pages/exploration-editor-page/modal-templates/post-publish-modal.component.html b/core/templates/pages/exploration-editor-page/modal-templates/post-publish-modal.component.html
index 26a55fce3b4a..e994149f5906 100644
--- a/core/templates/pages/exploration-editor-page/modal-templates/post-publish-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/modal-templates/post-publish-modal.component.html
@@ -1,17 +1,17 @@
 <div class="oppia-share-publish-modal e2e-test-share-publish-modal">
   <div class="modal-header oppia-share-publish-header">
     <img [src]="congratsImgUrl">
-    <h3>Awesome!</h3>
+    <h3 tabindex="0">Awesome!</h3>
   </div>
 
   <div class="modal-body oppia-long-text oppia-share-publish-body">
-    <p>
+    <p tabindex="0">
       Now that you're a published Oppia teacher, you can share your creation.
     </p>
     <div class="oppia-share-publish-link">
-      <p>Here's your exploration link:</p>
+      <p tabindex="0">Here's your exploration link:</p>
     </div>
-    <oppia-copy-url [urlToCopy]="explorationLink"></oppia-copy-url>
+    <oppia-copy-url tabindex="0" [urlToCopy]="explorationLink"></oppia-copy-url>
     <sharing-links layoutType="row post-publish-modal-sharing-links"
                    layoutAlignType="center center"
                    shareType="exploration"
diff --git a/core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.html b/core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.html
index 4d849fd29000..bd3a795e5fe1 100644
--- a/core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.html
+++ b/core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.html
@@ -1,7 +1,7 @@
 <div class="oppia-settings-container">
   <mat-card class="oppia-editor-card oppia-settings-card-container oppia-basic-settings-card oppia-mobile-collapsible-card">
     <div class="oppia-basic-settings-header oppia-mobile-collapsible-card-header" (click)="toggleCards('settings')">
-      <h3 class="e2e-test-settings-container">Basic Settings</h3>
+      <h3 class="e2e-test-settings-container" tabindex="0">Basic Settings</h3>
       <i class="fa fa-caret-down"
          *ngIf="!basicSettingIsShown"
          aria-hidden="true">
@@ -70,7 +70,7 @@ <h3 class="e2e-test-settings-container">Basic Settings</h3>
                   </mat-select>
                 </mat-form-field>
                 <div>
-                  <span class="form-text secondary-info-text">
+                  <span class="form-text secondary-info-text" tabindex="0">
                     <em>
                       Don't see the language you want? <a href="https://github.com/oppia/oppia/issues/new?title=Please%20add%20a%20new%20language%20choice%20to%20the%20exploration%20settings%20tab&body=Please%20add%20the%20language%20choice%20%7B%7BYOUR_LANGUAGE_HERE%7D%7D%20to%20the%20exploration%20settings%20tab.%0A%0AHere%20is%20a%20link%20to%20an%20exploration%20that%20uses%20it:%20%7B%7BINSERT_LINK_HERE%7D%7D" target="_blank" rel="noopener">Tell us.</a>
                     </em>
@@ -107,6 +107,7 @@ <h3 class="e2e-test-settings-container">Basic Settings</h3>
                     <mat-form-field appearance="fill">
                       <mat-label for="explorationTags" class="d-block">Tags</mat-label>
                       <mat-chip-list #chipList>
+                        <span class="sr-only" tabindex="0">Tags help learners discover your exploration when searching.</span>
                         <mat-chip *ngFor="let tags of explorationTags" (removed)="remove(tags)">
                           {{ tags }}
                           <mat-icon matChipRemove class="update-cross-icon">cancel</mat-icon>
@@ -120,7 +121,7 @@ <h3 class="e2e-test-settings-container">Basic Settings</h3>
                                [matChipInputAddOnBlur]="addOnBlur"
                                (matChipInputTokenEnd)="add($event)">
                       </mat-chip-list>
-                      <mat-hint *ngIf="explorationTags.length >= 10" class="oppia-settings-tab-error-message">Can only contain 10 tags max</mat-hint>
+                      <mat-hint *ngIf="explorationTags.length >= 10" class="oppia-settings-tab-error-message" tabindex="0">Can only contain 10 tags max</mat-hint>
                     </mat-form-field>
                   </div>
                 </div>
@@ -205,7 +206,7 @@ <h3 class="e2e-test-settings-container">Basic Settings</h3>
 
   <mat-card class="oppia-settings-card-container oppia-advanced-features-card oppia-editor-card oppia-mobile-collapsible-card" *ngIf="editabilityService.isEditable()">
     <div class="oppia-basic-settings-header oppia-mobile-collapsible-card-header" (click)="toggleCards('advanced_features')">
-      <h3>Advanced Features</h3>
+      <h3 tabindex="0">Advanced Features</h3>
       <i class="fa fa-caret-down"
          *ngIf="!advancedFeaturesIsShown"
          aria-hidden="true">
@@ -250,7 +251,9 @@ <h3>Advanced Features</h3>
               </label>
               <div>
                 <div class="oppia-on-off-switch">
+                  <input type="checkbox" class="sr-only" *ngIf="isAutomaticTextToSpeechEnabled()" (click)="toggleAutomaticTextToSpeech()" aria-label="Automatic Text-to-speech" tabindex="0" (keydown.enter)="toggleAutomaticTextToSpeech()" checked>
                   <input type="checkbox" *ngIf="isAutomaticTextToSpeechEnabled()" class="oppia-on-off-switch-checkbox" id="text-speech-switch" (click)="toggleAutomaticTextToSpeech()" checked>
+                  <input type="checkbox" class="sr-only" *ngIf="!isAutomaticTextToSpeechEnabled()" (click)="toggleAutomaticTextToSpeech()" aria-label="Automatic Text-to-speech" tabindex="0" (keydown.enter)="toggleAutomaticTextToSpeech()">
                   <input type="checkbox" *ngIf="!isAutomaticTextToSpeechEnabled()" class="oppia-on-off-switch-checkbox" id="text-speech-switch" (click)="toggleAutomaticTextToSpeech()">
                   <label class="oppia-on-off-switch-label" for="text-speech-switch">
                     <span class="oppia-on-off-switch-inner"></span>
@@ -259,7 +262,7 @@ <h3>Advanced Features</h3>
                 </div>
               </div>
             </div>
-            <span class="form-text secondary-info-text">
+            <span class="form-text secondary-info-text" tabindex="0">
               Automatic text-to-speech generates audio from your content for learners to listen to. It is recommended that you disable this feature if creating an exploration whose content consists of multiple languages.
             </span>
           </div>
@@ -273,7 +276,9 @@ <h3>Advanced Features</h3>
           </label>
           <div>
             <div class="oppia-on-off-switch">
+              <input type="checkbox" class="sr-only" *ngIf="!isCorrectnessFeedbackEnabled()" (click)="toggleCorrectnessFeedback()" aria-label="Correctness feedback" tabindex="0" (keydown.enter)="toggleCorrectnessFeedback()">
               <input type="checkbox" *ngIf="!isCorrectnessFeedbackEnabled()" class="oppia-on-off-switch-checkbox" id="correctness-switch" (click)="toggleCorrectnessFeedback()">
+              <input type="checkbox" class="sr-only" *ngIf="isCorrectnessFeedbackEnabled()" (click)="toggleCorrectnessFeedback()" aria-label="Correctness feedback" tabindex="0" (keydown.enter)="toggleCorrectnessFeedback()" checked>
               <input type="checkbox" *ngIf="isCorrectnessFeedbackEnabled()" [disabled]="explorationIsLinkedToStory" class="oppia-on-off-switch-checkbox" id="correctness-switch" (click)="toggleCorrectnessFeedback()" checked>
               <label class="oppia-on-off-switch-label e2e-test-enable-mark-correctness-feedback" for="correctness-switch">
                 <span class="oppia-on-off-switch-inner"></span>
@@ -282,10 +287,10 @@ <h3>Advanced Features</h3>
             </div>
           </div>
         </div>
-        <span class="form-text secondary-info-text">
+        <span class="form-text secondary-info-text" tabindex="0">
           Correctness feedback allows the user to categorise answer groups as correct or incorrect.
         </span>
-        <span class="form-text secondary-info-text" *ngIf="explorationIsLinkedToStory && isCorrectnessFeedbackEnabled()">
+        <span class="form-text secondary-info-text" *ngIf="explorationIsLinkedToStory && isCorrectnessFeedbackEnabled()" tabindex="0">
           Correctness feedback cannot be disabled for an exploration linked to a story.
         </span>
       </div>
@@ -297,7 +302,7 @@ <h3>Advanced Features</h3>
             class="oppia-settings-card-container oppia-editor-card oppia-roles-editor-card oppia-mobile-collapsible-card">
     <div class="oppia-roles-container">
       <div class="oppia-basic-settings-header oppia-mobile-collapsible-card-header" (click)="toggleCards('roles')">
-        <h3>Roles</h3>
+        <h3 tabindex="0">Roles</h3>
         <i class="fa fa-caret-down"
            *ngIf="!rolesCardIsShown"
            aria-hidden="true">
@@ -315,12 +320,12 @@ <h3>Roles</h3>
         </div>
 
         <div [hidden]="!(explorationRightsService.ownerNames && explorationRightsService.ownerNames.length > 0)">
-          <strong>Managers</strong>
+          <strong tabindex="0">Managers</strong>
           <ul>
             <li *ngFor="let ownerName of explorationRightsService.ownerNames; let index = index">
               <div class="oppia-user-list-item e2e-test-owner-role-names">
-                <span>{{ ownerName }}</span>
-                <span [hidden]="!isRolesFormOpen || ownerName === loggedInUser" [ngbTooltip]="'Remove user'" type="button" class="far fa-times-circle" (click)="removeRole(ownerName, 'Managers')">
+                <span tabindex="0">{{ ownerName }}</span>
+                <span [hidden]="!isRolesFormOpen || ownerName === loggedInUser" [ngbTooltip]="'Remove user'" type="button" class="far fa-times-circle" tabindex="0" (keydown.enter)="removeRole(ownerName, 'Managers')" aria-label="Remove user" role="button" (click)="removeRole(ownerName, 'Managers')">
                 </span>
               </div>
             </li>
@@ -328,12 +333,12 @@ <h3>Roles</h3>
         </div>
 
         <div [hidden]="!(explorationRightsService.editorNames && explorationRightsService.editorNames.length > 0)">
-          <strong>Collaborators</strong>
+          <strong tabindex="0">Collaborators</strong>
           <ul>
             <li *ngFor="let editorName of explorationRightsService.editorNames; let index = index">
               <div  class="oppia-user-list-item e2e-test-editor-role-names">
-                <span>{{ editorName }}</span>
-                <span [hidden]="!isRolesFormOpen" type="button" [ngbTooltip]="'Remove user'" class="far fa-times-circle" (click)="removeRole(editorName, 'Collaborators')">
+                <span tabindex="0">{{ editorName }}</span>
+                <span [hidden]="!isRolesFormOpen" type="button" [ngbTooltip]="'Remove user'" class="far fa-times-circle" tabindex="0" role="button" (keydown.enter)="removeRole(editorName, 'Collaborators')" aria-label="remove user" (click)="removeRole(editorName, 'Collaborators')">
                 </span>
               </div>
             </li>
@@ -341,12 +346,12 @@ <h3>Roles</h3>
         </div>
 
         <div [hidden]="!(explorationRightsService.viewerNames && explorationRightsService.viewerNames.length > 0)">
-          <strong>Playtesters</strong>
+          <strong tabindex="0">Playtesters</strong>
           <ul>
             <li *ngFor="let viewerName of explorationRightsService.viewerNames; let index = index">
               <div class="oppia-user-list-item e2e-test-viewer-role-names">
-                <span>{{ viewerName }}</span>
-                <span [hidden]="!isRolesFormOpen" type="button" [ngbTooltip]="'Remove user'" class="far fa-times-circle" (click)="removeRole(viewerName, 'Playtesters')">
+                <span tabindex="0">{{ viewerName }}</span>
+                <span [hidden]="!isRolesFormOpen" type="button" [ngbTooltip]="'Remove user'" class="far fa-times-circle" tabindex="0" role="button" (keydown.enter)="removeRole(viewerName, 'Playtesters')" (click)="removeRole(viewerName, 'Playtesters')">
                 </span>
               </div>
             </li>
@@ -365,7 +370,7 @@ <h3>Roles</h3>
                 </mat-form-field>
               </div>
               <br>
-              <label for="newMemberRole">Role of invited user</label>
+              <label for="newMemberRole" tabindex="0">Role of invited user</label>
               <div>
                 <mat-form-field appearance="fill">
                   <mat-select class="e2e-test-role-select" [(ngModel)]="newMemberRole" name="newMemberRole">
@@ -376,7 +381,7 @@ <h3>Roles</h3>
                     </mat-option>
                   </mat-select>
                 </mat-form-field>
-                <span class="form-text">
+                <span class="form-text" tabindex="0">
                   <p>Note that managers also have the permissions of collaborators, collaborators also have the permissions of playtesters, and playtesters also have the permissions of viewers.</p>
                 </span>
               </div>
@@ -385,7 +390,7 @@ <h3>Roles</h3>
               <button type="button" class="btn btn-secondary" (click)="closeEditRolesForm()" [hidden]="!(isRolesFormOpen)">
                 Cancel
               </button>
-              <p [hidden]="rolesSaveButtonEnabled" class="text-danger e2e-test-title-warning">{{ errorMessage }}</p>
+              <p [hidden]="rolesSaveButtonEnabled" tabindex="0" class="text-danger e2e-test-title-warning">{{ errorMessage }}</p>
             </form>
           </div>
         </div>
@@ -397,7 +402,7 @@ <h3>Roles</h3>
             class="oppia-settings-card-container oppia-editor-card oppia-roles-editor-card oppia-mobile-collapsible-card">
     <div class="oppia-roles-container">
       <div class="oppia-basic-settings-header oppia-mobile-collapsible-card-header" (click)="toggleCards('voice_artists')">
-        <h3>Voice Artists</h3>
+        <h3 tabindex="0">Voice Artists</h3>
         <i class="fa fa-caret-down"
            *ngIf="!voiceArtistsCardIsShown"
            aria-hidden="true">
@@ -409,7 +414,7 @@ <h3>Voice Artists</h3>
       </div>
       <div class="oppia-mobile-collapsible-card-content" *ngIf="voiceArtistsCardIsShown">
         <div>
-          <div [hidden]="isVoiceoverFormOpen" class="oppia-no-voice-artist-message" *ngIf="!(explorationRightsService.voiceArtistNames && explorationRightsService.voiceArtistNames.length)">
+          <div [hidden]="isVoiceoverFormOpen" tabindex="0" class="oppia-no-voice-artist-message" *ngIf="!(explorationRightsService.voiceArtistNames && explorationRightsService.voiceArtistNames.length)">
             No voice artists are assigned to this exploration.
           </div>
           <div *ngIf="canManageVoiceArtist" [hidden]="isVoiceoverFormOpen" class="oppia-edit-roles-btn-container">
@@ -423,8 +428,8 @@ <h3>Voice Artists</h3>
           <ul>
             <li *ngFor="let voiceArtistName of explorationRightsService.voiceArtistNames; let index = index">
               <div class="oppia-user-list-item .e2e-test-voiceArtist-role-names e2e-test-voice-artist-{{voiceArtistName}}">
-                <span>{{voiceArtistName}}</span>
-                <span [hidden]="!(isVoiceoverFormOpen)" type="button" [ngbTooltip]="'Remove user'" class="far fa-times-circle" (click)="removeVoiceArtist(voiceArtistName)">
+                <span tabindex="0">{{voiceArtistName}}</span>
+                <span [hidden]="!(isVoiceoverFormOpen)" type="button" [ngbTooltip]="'Remove user'" class="far fa-times-circle" tabindex="0" aria-label="remove user" role="button" (keydown.enter)="removeVoiceArtist(voiceArtistName)" (click)="removeVoiceArtist(voiceArtistName)">
                 </span>
               </div>
             </li>
@@ -459,7 +464,7 @@ <h3>Voice Artists</h3>
   <mat-card class="oppia-settings-card-container oppia-editor-card oppia-permissions-card oppia-mobile-collapsible-card">
     <div>
       <div class="oppia-basic-settings-header oppia-mobile-collapsible-card-header" (click)="toggleCards('permissions')">
-        <h3>Permissions</h3>
+        <h3 tabindex="0">Permissions</h3>
         <i class="fa fa-caret-down"
            *ngIf="!permissionsCardIsShown"
            aria-hidden="true">
@@ -470,34 +475,34 @@ <h3>Permissions</h3>
         </i>
       </div>
       <div class="oppia-mobile-collapsible-card-content" *ngIf="permissionsCardIsShown">
-        <p *ngIf="explorationRightsService.isPrivate() && explorationRightsService.viewableIfPrivate()">
+        <p *ngIf="explorationRightsService.isPrivate() && explorationRightsService.viewableIfPrivate()" tabindex="0">
           This exploration is <strong>private</strong>. Anyone with the link can access it.
         </p>
-        <p *ngIf="explorationRightsService.isPrivate() && !explorationRightsService.viewableIfPrivate()">
+        <p *ngIf="explorationRightsService.isPrivate() && !explorationRightsService.viewableIfPrivate()" tabindex="0">
           This exploration is <strong>private</strong>. Only invited users, moderators and site admins can
           access it.
         </p>
-        <p *ngIf="!explorationRightsService.isPrivate()">
+        <p *ngIf="!explorationRightsService.isPrivate()" tabindex="0">
           This exploration is <strong>public</strong>: anyone can access it.
         </p>
 
         <p *ngIf="!explorationRightsService.isPrivate() || explorationRightsService.viewableIfPrivate()">
-          <em>Link to share:</em>
+          <em tabindex="0">Link to share:</em>
           <input class="form-control" type="text" value="{{getExplorePageUrl(explorationId)}}" readonly="readonly" onClick="this.select();">
         </p>
 
         <br>
 
-        <p *ngIf="explorationRightsService.isPrivate()">
+        <p *ngIf="explorationRightsService.isPrivate()" tabindex="0">
           It is <strong>not shown</strong> in the Oppia library.
         </p>
-        <p *ngIf="!explorationRightsService.isPrivate()">
+        <p *ngIf="!explorationRightsService.isPrivate()" tabindex="0">
           It is <strong>available</strong> in the Oppia library.
         </p>
 
         <div *ngIf="(explorationRightsService.ownerNames && explorationRightsService.ownerNames.length === 0) && !explorationRightsService.isCloned()">
-          <h3>Permissions</h3>
-          <div class="e2e-test-is-community-owned">
+          <h3 tabindex="0">Permissions</h3>
+          <div class="e2e-test-is-community-owned" tabindex="0">
             This exploration is <strong>public</strong> and <strong>community-editable</strong>.
             <p *ngIf="!explorationRightsService.isPrivate()">
               It is <strong>available</strong> in the Oppia library.
@@ -505,7 +510,7 @@ <h3>Permissions</h3>
           </div>
         </div>
 
-        <div *ngIf="explorationRightsService.isCloned()">
+        <div *ngIf="explorationRightsService.isCloned()" tabindex="0">
           <h3>Status</h3>
           <div>
             This exploration was <strong>cloned</strong> from another exploration.
@@ -517,7 +522,7 @@ <h3>Status</h3>
 
   <mat-card class="oppia-settings-card-container oppia-editor-card oppia-feedback-card oppia-mobile-collapsible-card" *ngIf="editabilityService.isEditable()">
     <div class="oppia-basic-settings-header oppia-mobile-collapsible-card-header" (click)="toggleCards('feedback')">
-      <h3>Feedback/Suggestion Email Preferences</h3>
+      <h3 tabindex="0">Feedback/Suggestion Email Preferences</h3>
       <i class="fa fa-caret-down"
          *ngIf="!feedbackCardIsShown"
          aria-hidden="true">
@@ -535,7 +540,9 @@ <h3>Feedback/Suggestion Email Preferences</h3>
           </label>
           <div>
             <div class="oppia-on-off-switch">
+              <input *ngIf="userEmailPreferencesService.areFeedbackNotificationsMuted()" aria-label="feedback email" type="checkbox" class="sr-only" (click)="unmuteFeedbackNotifications()">
               <input span *ngIf="userEmailPreferencesService.areFeedbackNotificationsMuted()" type="checkbox" class="oppia-on-off-switch-checkbox" id="feedback-switch" (click)="unmuteFeedbackNotifications()">
+              <input *ngIf="!userEmailPreferencesService.areFeedbackNotificationsMuted()" type="checkbox" class="sr-only" checked (click)="muteFeedbackNotifications()">
               <input span *ngIf="!userEmailPreferencesService.areFeedbackNotificationsMuted()" type="checkbox" class="oppia-on-off-switch-checkbox" id="feedback-switch" checked (click)="muteFeedbackNotifications()">
               <label class="oppia-on-off-switch-label e2e-test-enable-fallbacks" for="feedback-switch">
                 <span class="oppia-on-off-switch-inner"></span>
@@ -544,10 +551,10 @@ <h3>Feedback/Suggestion Email Preferences</h3>
             </div>
           </div>
         </div>
-        <span class="form-text secondary-info-text" *ngIf="!userEmailPreferencesService.areFeedbackNotificationsMuted()">
+        <span class="form-text secondary-info-text" *ngIf="!userEmailPreferencesService.areFeedbackNotificationsMuted()" tabindex="0">
           You are currently receiving notifications of new feedback for this exploration.
         </span>
-        <span class="form-text secondary-info-text" *ngIf="userEmailPreferencesService.areFeedbackNotificationsMuted()">
+        <span class="form-text secondary-info-text" *ngIf="userEmailPreferencesService.areFeedbackNotificationsMuted()" tabindex="0">
           You have muted feedback notifications for this exploration. You will not receive an email when new feedback is submitted.
         </span>
       </div>
@@ -559,7 +566,9 @@ <h3>Feedback/Suggestion Email Preferences</h3>
           </label>
           <div>
             <div class="oppia-on-off-switch">
+              <input *ngIf="userEmailPreferencesService.areSuggestionNotificationsMuted()" type="checkbox" class="sr-only" aria-label="Suggestion emails" (click)="unmuteSuggestionNotifications()">
               <input span *ngIf="userEmailPreferencesService.areSuggestionNotificationsMuted()" type="checkbox" class="oppia-on-off-switch-checkbox e2e-test-enable-fallbacks" id="suggestion-switch" (click)="unmuteSuggestionNotifications()">
+              <input *ngIf="!userEmailPreferencesService.areSuggestionNotificationsMuted()" type="checkbox" class="sr-only" checked aria-label="Suggestion emails" (click)="muteSuggestionNotifications()">
               <input span *ngIf="!userEmailPreferencesService.areSuggestionNotificationsMuted()" type="checkbox" class="oppia-on-off-switch-checkbox e2e-test-enable-fallbacks" id="suggestion-switch" checked (click)="muteSuggestionNotifications()">
               <label class="oppia-on-off-switch-label" for="suggestion-switch">
                 <span class="oppia-on-off-switch-inner"></span>
@@ -568,10 +577,10 @@ <h3>Feedback/Suggestion Email Preferences</h3>
             </div>
           </div>
         </div>
-        <span class="form-text secondary-info-text" *ngIf="!userEmailPreferencesService.areSuggestionNotificationsMuted()">
+        <span class="form-text secondary-info-text" *ngIf="!userEmailPreferencesService.areSuggestionNotificationsMuted()" tabindex="0">
           You are currently receiving notifications of new suggestions for this exploration.
         </span>
-        <span class="form-text secondary-info-text" *ngIf="userEmailPreferencesService.areSuggestionNotificationsMuted()">
+        <span class="form-text secondary-info-text" *ngIf="userEmailPreferencesService.areSuggestionNotificationsMuted()" tabindex="0">
           You have muted suggestion notifications for this exploration. You will not receive an email when new suggestion is submitted.
         </span>
       </div>
@@ -581,7 +590,7 @@ <h3>Feedback/Suggestion Email Preferences</h3>
 
   <mat-card class="oppia-settings-card-container oppia-editor-card oppia-mobile-collapsible-card" *ngIf="canDelete || canReleaseOwnership">
     <div class="oppia-basic-settings-header oppia-mobile-collapsible-card-header" (click)="toggleCards('controls')">
-      <h3>Controls</h3>
+      <h3 tabindex="0">Controls</h3>
       <i class="fa fa-caret-down"
          *ngIf="!controlsCardIsShown"
          aria-hidden="true">
@@ -596,7 +605,7 @@ <h3>Controls</h3>
         <button type="button" class="btn btn-secondary" (click)="showTransferExplorationOwnershipModal()" [disabled]="isExplorationLockedForEditing()">
           Transfer ownership to the community
         </button>
-        <span *ngIf="isExplorationLockedForEditing()">
+        <span *ngIf="isExplorationLockedForEditing()" tabindex="0">
           <br>
           Please save your changes first.
         </span>
@@ -611,7 +620,7 @@ <h3>Controls</h3>
     </div>
 
     <div class="col-lg-6 col-md-6 col-sm-6" *ngIf="currentUserIsCurriculumAdmin || currentUserIsModerator">
-      <h3>Admin Controls</h3>
+      <h3 tabindex="0">Admin Controls</h3>
 
       <p *ngIf="canUnpublish" class="oppia-exploration-ctrl oppia-exploration-ctrl-admin" [hidden]="!(explorationRightsService.isPublic())">
         <button type="button" class="btn btn-secondary" (click)="unpublishExplorationAsModerator()" [disabled]="isExplorationLockedForEditing()">
@@ -638,7 +647,9 @@ <h3>Admin Controls</h3>
         </label>
         <div>
           <div class="oppia-on-off-switch">
+            <input *ngIf="isExplorationEditable()" type="checkbox" class="sr-only" aria-label="allow edits to exploration" checked (click)="disableEdits()">
             <input span *ngIf="isExplorationEditable()" type="checkbox" class="oppia-on-off-switch-checkbox" id="edits-switch" checked (click)="disableEdits()">
+            <input *ngIf="!isExplorationEditable()" type="checkbox" class="sr-only" (click)="enableEdits()" aria-label="allow edits to exploration">
             <input span *ngIf="!isExplorationEditable()" type="checkbox" class="oppia-on-off-switch-checkbox" id="edits-switch" (click)="enableEdits()">
             <label class="oppia-on-off-switch-label" for="edits-switch">
               <span class="oppia-on-off-switch-inner"></span>
@@ -646,10 +657,10 @@ <h3>Admin Controls</h3>
             </label>
           </div>
         </div>
-        <span class="form-text secondary-info-text" *ngIf="isExplorationEditable()">
+        <span class="form-text secondary-info-text" *ngIf="isExplorationEditable()" tabindex="0">
           Further edits to the exploration are currently allowed.
         </span>
-        <span class="form-text secondary-info-text" *ngIf="!isExplorationEditable()">
+        <span class="form-text secondary-info-text" *ngIf="!isExplorationEditable()" tabindex="0">
           Further edits to the exploration are no longer allowed.
         </span>
       </div>
@@ -691,11 +702,11 @@ <h3>
   </mat-card>
 
   <mat-card class="oppia-settings-card-container oppia-editor-card">
-    <div *ngIf="canShowExploreVersionHistoryButton();">
+    <div *ngIf="canShowExploreVersionHistoryButton();" tabindex="0">
       Metadata last changed by <strong>{{ getLastEditedCommitterUsername() }}</strong> at <strong>version {{ getLastEditedVersionNumber() + 1 }} of the exploration</strong>.
-      <a class="text-primary explore-version-history-button" (click)="onClickExploreVersionHistoryButton()"> More details</a>.
+      <a class="text-primary explore-version-history-button" tabindex="0" (keydown.enter)="onClickExploreVersionHistoryButton()" (click)="onClickExploreVersionHistoryButton()"> More details</a>.
     </div>
-    <div *ngIf="!canShowExploreVersionHistoryButton();">
+    <div *ngIf="!canShowExploreVersionHistoryButton();" tabindex="0">
       <span *ngIf="!validationErrorIsShown">No changes have been made to the exploration metadata after the initial creation of the exploration.</span>
       <span *ngIf="validationErrorIsShown" class="error-message">
         Unable to display the metadata version history due to an error loading the exploration data.
diff --git a/core/templates/pages/exploration-editor-page/settings-tab/templates/preview-summary-tile-modal.component.html b/core/templates/pages/exploration-editor-page/settings-tab/templates/preview-summary-tile-modal.component.html
index 15d4736da8d4..ac7d62b0001a 100644
--- a/core/templates/pages/exploration-editor-page/settings-tab/templates/preview-summary-tile-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/settings-tab/templates/preview-summary-tile-modal.component.html
@@ -1,10 +1,11 @@
 <div class="modal-header">
-  <h3>Preview Summary Card</h3>
+  <h3 tabindex="0">Preview Summary Card</h3>
 </div>
 
 <div class="modal-body text-center">
-  This is how your activity will appear to learners in search results
-  or the library.
+  <span tabindex="0">
+    This is how your activity will appear to learners in search results or the library.
+  </span>
   <oppia-exploration-summary-tile class="e2e-test-exploration-summary-tile"
                                   [explorationTitle]="getExplorationTitle()"
                                   [objective]="getExplorationObjective()"
diff --git a/core/templates/pages/exploration-editor-page/statistics-tab/statistics-tab.component.html b/core/templates/pages/exploration-editor-page/statistics-tab/statistics-tab.component.html
index 0eb8c31d9fd2..21988a364283 100644
--- a/core/templates/pages/exploration-editor-page/statistics-tab/statistics-tab.component.html
+++ b/core/templates/pages/exploration-editor-page/statistics-tab/statistics-tab.component.html
@@ -2,12 +2,12 @@
   <mat-card class="oppia-editor-card">
     <div *ngIf="explorationHasBeenVisited">
       <div class="oppia-statistics-display">
-        <h3>Exploration Completion Rate</h3>
+        <h3 tabindex="0">Exploration Completion Rate</h3>
         <oppia-pie-chart *ngIf="pieChartData && pieChartOptions"
                          [data]="pieChartData"
                          [options]="pieChartOptions">
         </oppia-pie-chart>
-        <p class="text-center">
+        <p class="text-center" tabindex="0">
           <span *ngIf="numPassersby"
                 class="e2e-test-num-passersby font-weight-bold">
             {{ numPassersby }} learners browsed this exploration. They left before reaching the second card.
@@ -17,7 +17,7 @@ <h3>Exploration Completion Rate</h3>
           </span>
         </p>
 
-        <h3>Card statistics</h3>
+        <h3 tabindex="0">Card statistics</h3>
         <div class="container">
           <div class="row">
             <div class="col-lg-12 col-md-12 col-sm-12">
@@ -30,7 +30,7 @@ <h3>Card statistics</h3>
         </div>
       </div>
     </div>
-    <div *ngIf="!explorationHasBeenVisited">
+    <div *ngIf="!explorationHasBeenVisited" tabindex="0">
       <em>
         This exploration has not been visited by anyone yet, so there are no statistics to display.
       </em>
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/audio-translation-bar/audio-translation-bar.component.html b/core/templates/pages/exploration-editor-page/translation-tab/audio-translation-bar/audio-translation-bar.component.html
index b204fd4c5366..7a6cfd49661d 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/audio-translation-bar/audio-translation-bar.component.html
+++ b/core/templates/pages/exploration-editor-page/translation-tab/audio-translation-bar/audio-translation-bar.component.html
@@ -82,7 +82,7 @@
   </div>
   <div class="oppia-content-wrapper oppia-flex-1-wrapper">
     <div class="oppia-audio-visualiser">
-      <div class="oppia-mp3-converting" *ngIf="voiceoverRecorder.status().isRecording">
+      <div class="oppia-mp3-converting" *ngIf="voiceoverRecorder.status().isRecording" tabindex="0">
         Recording audio<loading-dots></loading-dots>
       </div>
       <div id="visualized" #visualized class="oppia-audio-wave-view" *ngIf="!voiceoverRecorder.status().isRecording && !audioIsCurrentlyBeingSaved">
@@ -90,7 +90,7 @@
     </div>
   </div>
   <div class="oppia-content-wrapper" *ngIf="voiceoverRecorder.status().isRecording">
-    <div class="oppia-recording-timer">
+    <div class="oppia-recording-timer" tabindex="0">
       {{ recordingDate | formatTime }} / {{ recordingTimeLimit | formatTime }}
     </div>
   </div>
@@ -164,7 +164,7 @@
       </oppia-audio-slider>
     </div>
   </div>
-  <div class="oppia-content-wrapper oppia-recording-timer">
+  <div class="oppia-content-wrapper oppia-recording-timer" tabindex="0">
     <div *ngIf="isAudioAvailable && audioIsLoading">
       {{ startingDuration | formatTime }} / {{ durationSecs | formatTime }}
     </div>
@@ -212,13 +212,13 @@
     </button>
   </div>
 </div>
-<div class="oppia-translation-bottom-right-container" *ngIf="showRecorderWarning">
+<div class="oppia-translation-bottom-right-container" *ngIf="showRecorderWarning" tabindex="0">
   <span>
     <strong>Warning: </strong>Don't navigate to other tabs of this page before saving recorded audio, otherwise the recorded audio will be lost.
   </span>
 </div>
 <div class="oppia-translation-bottom-proTip" *ngIf="canVoiceover && !showRecorderWarning && !audioBlob && !isAudioAvailable">
-  <div class="alert alert-secondary">
+  <div class="alert alert-secondary" tabindex="0">
     <strong>ProTips</strong>
     <div>Use the "R" key to start/stop recording.</div>
     <div>Use a dedicated microphone for best results.</div>
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/add-audio-translation-modal.component.html b/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/add-audio-translation-modal.component.html
index 6393f5155cbe..12bbe1cebe95 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/add-audio-translation-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/add-audio-translation-modal.component.html
@@ -1,5 +1,5 @@
 <div class="modal-header">
-  <h3>Add Audio Translation</h3>
+  <h3 tabindex="0">Add Audio Translation</h3>
 </div>
 
 <div class="modal-body">
@@ -7,7 +7,10 @@ <h3>Add Audio Translation</h3>
     <div class="col-lg-12 col-md-12 col-sm-12">
       <div role="form" class="form-horizontal">
         <div class="form-group">
-          <label for="audioTranslationFileField" class="col-lg-2 col-md-2 col-sm-2 float-left">Audio File</label>
+          <label for="audioTranslationFileField"
+                 class="col-lg-2 col-md-2 col-sm-2 float-left"
+                 tabindex="0">Audio File
+          </label>
           <div class="col-lg-10 col-md-10 col-sm-10">
             <oppia-audio-file-uploader id="audioTranslationFileField"
                                        [droppedFile]="droppedFile"
@@ -15,7 +18,7 @@ <h3>Add Audio Translation</h3>
                                        (fileClear)="clearUploadedFile()">
             </oppia-audio-file-uploader>
             <div *ngIf="isAudioAvailable"
-                 class="oppia-updated-audio-file-upload-message">
+                 class="oppia-updated-audio-file-upload-message" tabindex="0">
               <strong>Note:</strong> Uploading a new audio file will replace the existing audio file.
             </div>
             <div *ngIf="errorMessage"
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.html b/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.html
index 3c1530f045ff..94a80ecbb576 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.html
+++ b/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.html
@@ -1,7 +1,7 @@
 <div class="modal-body oppia-long-text e2e-test-translation-tab-welcome-modal">
   <div class="row">
     <div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
-      <h1 class="oppia-welcome-modal-h1">Welcome!</h1>
+      <h1 class="oppia-welcome-modal-h1" tabindex="0" >Welcome!</h1>
       <p class="oppia-welcome-modal-p">
         It looks like you're new to translating explorations.
       </p>
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.ts b/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.ts
index b1e1f14e7a46..bb7c0d41afc3 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.ts
+++ b/core/templates/pages/exploration-editor-page/translation-tab/modal-templates/welcome-translation-modal.component.ts
@@ -16,7 +16,7 @@
  * @fileoverview Component for the welcome translation modal.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { UrlInterpolationService } from 'domain/utilities/url-interpolation.service';
 import { ContextService } from 'services/context.service';
@@ -35,6 +35,7 @@ export class WelcomeTranslationModalComponent
   // https://github.com/oppia/oppia/wiki/Guide-on-defining-types#ts-7-1
   explorationId!: string;
   translationWelcomeImgUrl!: string;
+  @ViewChild('welcome') welcomeHeading!: ElementRef;
 
   constructor(
     private ngbActiveModal: NgbActiveModal,
@@ -51,5 +52,6 @@ export class WelcomeTranslationModalComponent
       this.explorationId);
     this.translationWelcomeImgUrl = this.urlInterpolationService
       .getStaticImageUrl('/general/editor_welcome.svg');
+    this.welcomeHeading?.nativeElement.focus();
   }
 }
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/state-translation-status-graph/state-translation-status-graph.component.html b/core/templates/pages/exploration-editor-page/translation-tab/state-translation-status-graph/state-translation-status-graph.component.html
index da347fee5e8b..80299860596c 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/state-translation-status-graph/state-translation-status-graph.component.html
+++ b/core/templates/pages/exploration-editor-page/translation-tab/state-translation-status-graph/state-translation-status-graph.component.html
@@ -1,4 +1,4 @@
-<span class="oppia-exploration-overview-text">
+<span class="oppia-exploration-overview-text" tabindex="0">
   <strong>Exploration Overview</strong>
 </span>
 
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/state-translation/state-translation.component.html b/core/templates/pages/exploration-editor-page/translation-tab/state-translation/state-translation.component.html
index e3ad3d25a1a7..9c4abe7ab217 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/state-translation/state-translation.component.html
+++ b/core/templates/pages/exploration-editor-page/translation-tab/state-translation/state-translation.component.html
@@ -1,13 +1,13 @@
 <ng-template #TranslationTabCardOptions>
-  <h3 class="e2e-test-joyride-title">Choose a Part of the Card to Translate</h3>
-  <p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Choose a Part of the Card to Translate</h3>
+  <p tabindex="0">
     Next, choose a part of the lesson card to translate. This menu at the top lists all the translatable parts of the card. Within each tab, multiple sections may be available for translating.
   </p>
 </ng-template>
 
 <ng-template #TranslationTabTutorialComplete>
-  <h3 class="e2e-test-joyride-title">Tutorial Complete</h3>
-  <p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Tutorial Complete</h3>
+  <p tabindex="0">
     Now, you are ready to begin adding translations
     to your explorations!
     This marks the end of this tour.
@@ -22,8 +22,8 @@ <h3 class="e2e-test-joyride-title">Tutorial Complete</h3>
 </ng-template>
 
 <ng-template #TranslationTabReRecordingOverview>
-  <h3 class="e2e-test-joyride-title">Re-record/Re-upload audio</h3>
-  <div>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Re-record/Re-upload audio</h3>
+  <div tabindex="0">
     <p>The audio recording also has options related to updating and deleting translations.</p>
     <ul>
       <li>
@@ -48,14 +48,14 @@ <h3 class="e2e-test-joyride-title">Re-record/Re-upload audio</h3>
 </ng-template>
 
 <ng-template #TranslationTabRecordingOverview>
-  <h3 class="e2e-test-joyride-title">Recording Audio</h3>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Recording Audio</h3>
   <div>
-    <p>To create audio translations in Oppia, we recommend using the <i class="material-icons oppia-state-translation-icons">&#xE2C6;</i>
+    <p tabindex="0">To create audio translations in Oppia, we recommend using the <i class="material-icons oppia-state-translation-icons">&#xE2C6;</i>
     button to <b>upload</b> audio files from your computer.</p>
-    <p>You can also record via your browser, but that may lead to degraded audio quality. If you would like to do so anyway,
+    <p tabindex="0">You can also record via your browser, but that may lead to degraded audio quality. If you would like to do so anyway,
        simply follow these 3 steps:
     </p>
-    <ol>
+    <ol tabindex="0">
       <li>
         To start <b>recording</b>, click the
         <i class="material-icons oppia-state-translation-icons">mic</i> button.
@@ -77,49 +77,55 @@ <h3 class="e2e-test-joyride-title">Recording Audio</h3>
 </ng-template>
 
 <div class="oppia-translation-page-statename">
-  <strong>{{ stateName }}</strong>
+  <strong tabindex="0" [attr.aria-label]="'State name:' + stateName">{{ stateName }}</strong>
 </div>
 <div class="oppia-page-card oppia-state-translation-page">
   <div class="translation-nav" joyrideStep="translationTabCardOptions" [stepContent]="TranslationTabCardOptions">
     <ul id="tutorialTranslationState" class="oppia-translation-tabs">
       <li [ngClass]="{'oppia-active-translation-tab e2e-test-active-translation-tab': isActive(TAB_ID_CONTENT)}" class="e2e-test-accessibility-translation-content" aria-label="Content of the card" role="button">
-        <div (click)="onTabClick(TAB_ID_CONTENT)" [ngStyle]="tabStatusColorStyle(TAB_ID_CONTENT)" class="oppia-translation-tabs-text e2e-test-translation-content-tab">
+        <div (click)="onTabClick(TAB_ID_CONTENT)" tabindex="0" (keydown.enter)="onTabClick(TAB_ID_CONTENT)" [ngStyle]="tabStatusColorStyle(TAB_ID_CONTENT)" class="oppia-translation-tabs-text e2e-test-translation-content-tab">
           <span [hidden]="!tabNeedUpdatesStatus(TAB_ID_CONTENT)" class="oppia-tab-needs-update"
+                tabindex="0"
                 [ngbTooltip]="needsUpdateTooltipMessage" placement="top">⚠
           </span>Content
         </div>
       </li>
       <li [ngClass]="{'oppia-active-translation-tab e2e-test-active-translation-tab': isActive(TAB_ID_CUSTOMIZATION_ARGS), 'oppia-disabled-translation-tab': isDisabled(TAB_ID_CUSTOMIZATION_ARGS)}" aria-label="Interaction content" role="button">
-        <div (click)="onTabClick(TAB_ID_CUSTOMIZATION_ARGS)" [ngStyle]="tabStatusColorStyle(TAB_ID_CUSTOMIZATION_ARGS)" class="oppia-translation-tabs-text">
+        <div (click)="onTabClick(TAB_ID_CUSTOMIZATION_ARGS)" [attr.tabindex]="!isDisabled(TAB_ID_CUSTOMIZATION_ARGS) ? '0' : '-1'" (keydown.enter)="onTabClick(TAB_ID_CUSTOMIZATION_ARGS)" [ngStyle]="tabStatusColorStyle(TAB_ID_CUSTOMIZATION_ARGS)" class="oppia-translation-tabs-text">
           <span [hidden]="!tabNeedUpdatesStatus(TAB_ID_CUSTOMIZATION_ARGS)" class="oppia-tab-needs-update"
+                tabindex="0"
                 [ngbTooltip]="needsUpdateTooltipMessage" placement="top">⚠
           </span>Interaction
         </div>
       </li>
       <li *ngIf="!isVoiceoverModeActive()" [ngClass]="{'oppia-active-translation-tab e2e-test-active-translation-tab': isActive(TAB_ID_RULE_INPUTS), 'oppia-disabled-translation-tab': isDisabled(TAB_ID_RULE_INPUTS)}" aria-label="Rule Inputs" role="button">
-        <div (click)="onTabClick(TAB_ID_RULE_INPUTS)" [ngStyle]="tabStatusColorStyle(TAB_ID_RULE_INPUTS)" class="oppia-translation-tabs-text">
+        <div (click)="onTabClick(TAB_ID_RULE_INPUTS)" [attr.tabindex]="!isDisabled(TAB_ID_RULE_INPUTS) ? '0' : '-1'" (keydown.enter)="onTabClick(TAB_ID_RULE_INPUTS)" [ngStyle]="tabStatusColorStyle(TAB_ID_RULE_INPUTS)" class="oppia-translation-tabs-text">
           <span [hidden]="!tabNeedUpdatesStatus(TAB_ID_RULE_INPUTS)" class="oppia-tab-needs-update"
+                tabindex="0"
                 [ngbTooltip]="needsUpdateTooltipMessage" placement="top">⚠
           </span>Rules
         </div>
       </li>
       <li [ngClass]="{'oppia-active-translation-tab e2e-test-active-translation-tab': isActive(TAB_ID_FEEDBACK), 'oppia-disabled-translation-tab': isDisabled(TAB_ID_FEEDBACK)}" class="e2e-test-accessibility-translation-feedback" aria-label="Feedback responses for answer groups" role="button">
-        <div (click)="onTabClick(TAB_ID_FEEDBACK)" [ngStyle]="tabStatusColorStyle(TAB_ID_FEEDBACK)" class="oppia-translation-tabs-text e2e-test-translation-feedback-tab">
+        <div (click)="onTabClick(TAB_ID_FEEDBACK)" [attr.tabindex]="!isDisabled(TAB_ID_FEEDBACK) ? '0' : '-1'" (keydown.enter)="onTabClick(TAB_ID_FEEDBACK)" [ngStyle]="tabStatusColorStyle(TAB_ID_FEEDBACK)" class="oppia-translation-tabs-text e2e-test-translation-feedback-tab">
           <span [hidden]="!tabNeedUpdatesStatus(TAB_ID_FEEDBACK)" class="oppia-tab-needs-update"
+                tabindex="0"
                 [ngbTooltip]="needsUpdateTooltipMessage" placement="top">⚠
           </span>Feedback
         </div>
       </li>
       <li [ngClass]="{'oppia-active-translation-tab e2e-test-active-translation-tab': isActive(TAB_ID_HINTS), 'oppia-disabled-translation-tab': isDisabled(TAB_ID_HINTS)}" class="e2e-test-accessibility-translation-hint" aria-label="Hints for the state" role="button">
-        <div (click)="onTabClick(TAB_ID_HINTS)" [ngStyle]="tabStatusColorStyle(TAB_ID_HINTS)" class="oppia-translation-tabs-text e2e-test-translation-hints-tab">
+        <div (click)="onTabClick(TAB_ID_HINTS)" [attr.tabindex]="!isDisabled(TAB_ID_HINTS) ? '0' : '-1'" (keydown.enter)="onTabClick(TAB_ID_HINTS)" [ngStyle]="tabStatusColorStyle(TAB_ID_HINTS)" class="oppia-translation-tabs-text e2e-test-translation-hints-tab">
           <span [hidden]="!tabNeedUpdatesStatus(TAB_ID_HINTS)" class="oppia-tab-needs-update"
+                tabindex="0"
                 [ngbTooltip]="needsUpdateTooltipMessage" placement="top">⚠
           </span>Hints
         </div>
       </li>
       <li [ngClass]="{'oppia-active-translation-tab e2e-test-active-translation-tab': isActive(TAB_ID_SOLUTION), 'oppia-disabled-translation-tab': isDisabled(TAB_ID_SOLUTION)}" class="e2e-test-accessibility-translation-solution" aria-label="Solutions for the state" role="button">
-        <div (click)="onTabClick(TAB_ID_SOLUTION)" [ngStyle]="tabStatusColorStyle(TAB_ID_SOLUTION)" class="oppia-translation-tabs-text e2e-test-translation-solution-tab" >
+        <div (click)="onTabClick(TAB_ID_SOLUTION)" [attr.tabindex]="!isDisabled(TAB_ID_SOLUTION) ? '0' : '-1'" (keydown.enter)="onTabClick(TAB_ID_SOLUTION)" [ngStyle]="tabStatusColorStyle(TAB_ID_SOLUTION)" class="oppia-translation-tabs-text e2e-test-translation-solution-tab" >
           <span [hidden]="!tabNeedUpdatesStatus(TAB_ID_SOLUTION)" class="oppia-tab-needs-update"
+                tabindex="0"
                 [ngbTooltip]="needsUpdateTooltipMessage" placement="top">⚠
           </span>Solution
         </div>
@@ -131,10 +137,10 @@ <h3 class="e2e-test-joyride-title">Recording Audio</h3>
   <div class="translation-state-contents">
     <div *ngIf="isActive(TAB_ID_CONTENT)" class="translation-state-content e2e-test-content-text">
       <span>
-        <span *ngIf="!getRequiredHtml(stateContent)" class="oppia-placeholder">
+        <span *ngIf="!getRequiredHtml(stateContent)" class="oppia-placeholder" tabindex="0">
           {{ getEmptyContentMessage() }}
         </span>
-        <span>
+        <span tabindex="0">
           <oppia-rte-output-display [rteString]="getRequiredHtml(stateContent)"
                                     [ngClass]="{'oppia-rte-editor-focused': isCopyModeActive()}"
                                     (click)="onContentClick($event)"
@@ -144,15 +150,17 @@ <h3 class="e2e-test-joyride-title">Recording Audio</h3>
       </span>
     </div>
     <div *ngIf="isActive(TAB_ID_CUSTOMIZATION_ARGS)" class="translation-state-content">
-      <h3>Preview - {{INTERACTION_SPECS[stateInteractionId].name}}</h3>
+      <h3 tabindex="0">Preview - {{INTERACTION_SPECS[stateInteractionId].name}}</h3>
       <oppia-rte-output-display class="oppia-translation-state-content-html-data" [rteString]="interactionPreviewHtml">
       </oppia-rte-output-display>
-      <h3>Content</h3>
+      <h3 tabindex="0">Content</h3>
       <ul class="oppia-translation-preview oppia-option-list nav-stacked nav-pills" role="tablist">
         <li class="oppia-rule-block mt-0"
             *ngFor="let caContent of interactionCustomizationArgTranslatableContent; index as index"
             [ngClass]="{'active': activeCustomizationArgContentIndex === index}">
           <a (click)="changeActiveCustomizationArgContentIndex(index)"
+             (keydown.enter)="changeActiveCustomizationArgContentIndex(index)"
+             tabindex="0"
              class="oppia-rule-tab oppia-translation-preview-list"
              [ngClass]="{'oppia-rule-tab-active': activeHintIndex === index}"
              [ngStyle]="contentIdStatusColorStyle(caContent.content.contentId)">
@@ -166,23 +174,25 @@ <h3>Content</h3>
           </a>
           <div *ngIf="activeCustomizationArgContentIndex === index">
             <div class="oppia-editor-card-section" *ngIf="caContent.content._html">
-              <span *ngIf="!getRequiredHtml(caContent.content)" class="oppia-placeholder">
+              <span *ngIf="!getRequiredHtml(caContent.content)" class="oppia-placeholder" tabindex="0">
                 {{ getEmptyContentMessage() }}
               </span>
               <span>
                 <oppia-rte-output-display [ngClass]="{'oppia-rte-editor-focused': isCopyModeActive()}"
                                           (click)="onContentClick($event)"
+                                          (keydown.enter)="onContentClick($event)"
+                                          tabindex="0"
                                           class="oppia-rte-editor"
                                           [rteString]="getRequiredHtml(caContent.content)">
                 </oppia-rte-output-display>
               </span>
             </div>
             <div class="oppia-editor-card-section" *ngIf="caContent.content._unicode">
-              <span *ngIf="!caContent.content.unicode" class="oppia-placeholder">
+              <span *ngIf="!caContent.content.unicode" class="oppia-placeholder" tabindex="0">
                 {{ getEmptyContentMessage() }}
               </span>
               <span>
-                <p>{{ caContent.content.unicode }}</p>
+                <p tabindex="0">{{ caContent.content.unicode }}</p>
               </span>
             </div>
           </div>
@@ -196,6 +206,8 @@ <h3>Content</h3>
               *ngFor="let ruleContent of interactionRuleTranslatableContents; index as index"
               [ngClass]="{'active': activeRuleContentIndex === index}">
             <a class="oppia-rule-tab e2e-test-feedback-{{ index }} oppia-translation-preview-list"
+               tabindex="0"
+               (keydown.enter)="changeActiveRuleContentIndex(index)"
                (click)="changeActiveRuleContentIndex(index)"
                [ngClass]="{'oppia-rule-tab-active': activeRuleContentIndex === index}"
                [ngStyle]="contentIdStatusColorStyle(ruleContent.contentId)">
@@ -203,7 +215,7 @@ <h3>Content</h3>
             </a>
             <div *ngIf="activeRuleContentIndex === index">
               <div class="oppia-editor-card-section">
-                <div class="oppia-rule-body-container">
+                <div class="oppia-rule-body-container" tabindex="0">
                   <span>
                     {{ getHumanReadableRuleInputValues(ruleContent.rule.inputs[ruleContent.inputName], ruleContent.rule.inputTypes[ruleContent.inputName]) }}
                   </span>
@@ -221,6 +233,8 @@ <h3>Content</h3>
               *ngFor="let answerGroup of stateAnswerGroups; index as index"
               [ngClass]="{'active': activeAnswerGroupIndex === index}">
             <a class="oppia-rule-tab e2e-test-feedback-{{ index }} oppia-translation-preview-list"
+               tabindex="0"
+               (keydown.enter)="changeActiveAnswerGroupIndex(index)"
                (click)="changeActiveAnswerGroupIndex(index)"
                [ngClass]="{'oppia-rule-tab-active': activeAnswerGroupIndex === index}"
                [ngStyle]="contentIdStatusColorStyle(answerGroup.outcome.feedback.contentId)">
@@ -239,7 +253,7 @@ <h3>Content</h3>
             </a>
             <div *ngIf="activeAnswerGroupIndex === index">
               <div class="oppia-editor-card-section e2e-test-feedback-{{ index }}-text">
-                <div class="oppia-rule-body-container">
+                <div class="oppia-rule-body-container" tabindex="0">
                   <span *ngIf="!getRequiredHtml(answerGroup.outcome.feedback)" class="oppia-placeholder">
                     {{ getEmptyContentMessage() }}
                   </span>
@@ -264,6 +278,8 @@ <h3>Content</h3>
               class="oppia-rule-block e2e-test-translation-feedback">
             <a class="oppia-rule-tab oppia-default-rule-tab e2e-test-feedback-{{ stateAnswerGroups.length }} oppia-translation-preview-list"
                (click)="changeActiveAnswerGroupIndex(stateAnswerGroups.length)"
+               tabindex="0"
+               (keydown.enter)="changeActiveAnswerGroupIndex(stateAnswerGroups.length)"
                [ngClass]="{'oppia-rule-tab-active': activeAnswerGroupIndex == stateAnswerGroups.length}"
                [ngStyle]="contentIdStatusColorStyle(stateDefaultOutcome.feedback.contentId)">
               <oppia-response-header [index]="index"
@@ -280,7 +296,7 @@ <h3>Content</h3>
             </a>
             <div *ngIf="activeAnswerGroupIndex === stateAnswerGroups.length">
               <div class="oppia-editor-card-section e2e-test-feedback-{{ stateAnswerGroups.length }}-text">
-                <div class="oppia-rule-body-container">
+                <div class="oppia-rule-body-container" tabindex="0">
                   <oppia-rte-output-display [ngClass]="{'oppia-rte-editor-focused': isCopyModeActive()}"
                                             (click)="onContentClick($event)"
                                             [rteString]="getRequiredHtml(stateDefaultOutcome.feedback)"
@@ -299,6 +315,8 @@ <h3>Content</h3>
             *ngFor="let hint of stateHints; index as index"
             [ngClass]="{'active': activeHintIndex === index}">
           <a (click)="changeActiveHintIndex(index)"
+             (keydown.enter)="changeActiveHintIndex(index)"
+             tabindex="0"
              class="oppia-rule-tab e2e-test-hint-{{ index }} oppia-translation-preview-list"
              [ngClass]="{'oppia-rule-tab-active': activeHintIndex === index}"
              [ngStyle]="contentIdStatusColorStyle(hint.hintContent.contentId)">
@@ -311,7 +329,7 @@ <h3>Content</h3>
             </oppia-response-header>
           </a>
           <div *ngIf="activeHintIndex === index">
-            <div class="oppia-editor-card-section e2e-test-hint-{{ index }}-text">
+            <div class="oppia-editor-card-section e2e-test-hint-{{ index }}-text" tabindex="0">
               <span *ngIf="!getRequiredHtml(hint.hintContent)" class="oppia-placeholder">
                 {{ getEmptyContentMessage() }}
               </span>
@@ -329,10 +347,10 @@ <h3>Content</h3>
     </div>
 
     <div *ngIf="isActive(TAB_ID_SOLUTION)" class="translation-state-content e2e-test-solution-text">
-      <span *ngIf="!getRequiredHtml(stateSolution.explanation)" class="oppia-placeholder">
+      <span *ngIf="!getRequiredHtml(stateSolution.explanation)" class="oppia-placeholder" tabindex="0">
         {{ getEmptyContentMessage() }}
       </span>
-      <span>
+      <span tabindex="0">
         <oppia-rte-output-display [ngClass]="{'oppia-rte-editor-focused': isCopyModeActive()}"
                                   (click)="onContentClick($event)"
                                   [rteString]="getRequiredHtml(stateSolution.explanation)"
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/translation-tab.component.html b/core/templates/pages/exploration-editor-page/translation-tab/translation-tab.component.html
index 289a1d4c6476..bae20f6b0ed6 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/translation-tab.component.html
+++ b/core/templates/pages/exploration-editor-page/translation-tab/translation-tab.component.html
@@ -1,20 +1,20 @@
 <ng-template #TranslationTabTourContainer>
-  <h3 class="e2e-test-joyride-title">Translations In Oppia</h3>
-  <p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Translations In Oppia</h3>
+  <p tabindex="0">
     Hello, welcome to the Translation Tab! This tour will walk you through the translation page. Hit the "Next" button to begin.
   </p>
 </ng-template>
 
 <ng-template #TranslationTabOverview>
-  <h3 class="e2e-test-joyride-title">Choose Language</h3>
-  <p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Choose Language</h3>
+  <p tabindex="0">
     Start your translation by choosing the language that you want to translate to.
   </p>
 </ng-template>
 
 <ng-template #TranslationTabStatusGraph>
-  <h3 class="e2e-test-joyride-title">Choose a Card to Translate</h3>
-  <p>
+  <h3 class="e2e-test-joyride-title" tabindex="0">Choose a Card to Translate</h3>
+  <p tabindex="0">
     Then, choose a card from the exploration overview by clicking on the card. The selected card will have a bold border. Cards with missing translations are coloured yellow or red. These are good places to start.
   </p>
 </ng-template>
diff --git a/core/templates/pages/exploration-editor-page/translation-tab/translator-overview/translator-overview.component.html b/core/templates/pages/exploration-editor-page/translation-tab/translator-overview/translator-overview.component.html
index b9d7ac03428a..fff20b13a7b9 100644
--- a/core/templates/pages/exploration-editor-page/translation-tab/translator-overview/translator-overview.component.html
+++ b/core/templates/pages/exploration-editor-page/translation-tab/translator-overview/translator-overview.component.html
@@ -9,6 +9,7 @@
       </span>
       <select id="audioTranslationLanguageCodeField"
               class="oppia-translation-language-selector e2e-test-translation-language-selector oppia-autofocus"
+              [attr.aria-label]="inVoiceoverMode ? 'Voiceover language selector' : 'Translation language selector'"
               (change)="changeTranslationLanguage()"
               [(ngModel)]="languageCode">
         <option *ngFor="let language of languageCodesAndDescriptions" [value]="language.id" (focus)="audioTranslationLanguageCodeField">
@@ -41,7 +42,7 @@
     <div class="progress oppia-translation-progress-bar">
       <div class="progress-bar bg-success" role="progressbar" [ngStyle]="getTranslationProgressStyle()"></div>
     </div>
-    <span [attr.aria-label]="getTranslationProgressAriaLabel()" role="status" class="oppia-numerical-progress-status e2e-test-translation-numerical-status">({{ numberOfRequiredAudio - numberOfAudioNotAvailable }}/{{ numberOfRequiredAudio }})</span>
+    <span tabindex="0" [attr.aria-label]="getTranslationProgressAriaLabel()" role="status" class="oppia-numerical-progress-status e2e-test-translation-numerical-status">({{ numberOfRequiredAudio - numberOfAudioNotAvailable }}/{{ numberOfRequiredAudio }})</span>
   </div>
 </div>