diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js
index a705a098..0cf77843 100644
--- a/client/modules/IDE/components/Preferences.js
+++ b/client/modules/IDE/components/Preferences.js
@@ -38,38 +38,7 @@ class Preferences extends React.Component {
       preferences: true,
       'preferences--selected': this.props.isVisible
     });
-    let preferencesTabOptionClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.isTabIndent
-    });
-    let preferencesSpaceOptionClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.isTabIndent
-    });
-    let autosaveOnClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.autosave
-    });
-    let autosaveOffClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.autosave
-    });
-    let lintWarningOnClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.lintWarning
-    });
-    let lintWarningOffClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.lintWarning
-    });
-    let textOutputOnClass = classNames({
-      preference__option: true,
-      'preference__option--selected': this.props.textOutput
-    });
-    let textOutputOffClass = classNames({
-      preference__option: true,
-      'preference__option--selected': !this.props.textOutput
-    });
+
     return (
       <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
         <div className="preferences__heading">
@@ -143,54 +112,112 @@ class Preferences extends React.Component {
             <h6 className="preference__label">Increase</h6>
           </button>
           <div className="preference__vertical-list">
-            <button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
-            <button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
+            <input
+              type="radio"
+              onChange={this.props.indentWithSpace}
+              aria-label="indentation with space"
+              name="indentation"
+              id="indentation-space"
+              className="preference__radio-button"
+              value="Spaces"
+              checked={!this.props.isTabIndent}
+            />
+            <label htmlFor="indentation-space" className="preference__option">Spaces</label>
+            <input
+              type="radio"
+              onChange={this.props.indentWithTab}
+              aria-label="indentation with tab"
+              name="indentation"
+              id="indentation-tab"
+              className="preference__radio-button"
+              value="Tabs"
+              checked={this.props.isTabIndent}
+            />
+            <label htmlFor="indentation-tab" className="preference__option">Tabs</label>
           </div>
         </div>
         <div className="preference">
           <h4 className="preference__title">Autosave</h4>
           <div className="preference__options">
-            <button
-              className={autosaveOnClass}
-              onClick={() => this.props.setAutosave(true)}
+            <input
+              type="radio"
+              onChange={() => this.props.setAutosave(true)}
               aria-label="autosave on"
-            >On</button>
-            <button
-              className={autosaveOffClass}
-              onClick={() => this.props.setAutosave(false)}
+              name="autosave"
+              id="autosave-on"
+              className="preference__radio-button"
+              value="On"
+              checked={this.props.autosave}
+            />
+            <label htmlFor="autosave-on" className="preference__option">On</label>
+            <input
+              type="radio"
+              onChange={() => this.props.setAutosave(false)}
               aria-label="autosave off"
-            >Off</button>
+              name="autosave"
+              id="autosave-off"
+              className="preference__radio-button"
+              value="Off"
+              checked={!this.props.autosave}
+            />
+            <label htmlFor="autosave-off" className="preference__option">Off</label>
           </div>
         </div>
         <div className="preference">
           <h4 className="preference__title">Lint Warning Sound</h4>
           <div className="preference__options">
-            <button
-              className={lintWarningOnClass}
-              onClick={() => this.props.setLintWarning(true)}
+            <input
+              type="radio"
+              onChange={() => this.props.setLintWarning(true)}
               aria-label="lint warning on"
-            >On</button>
-            <button
-              className={lintWarningOffClass}
-              onClick={() => this.props.setLintWarning(false)}
+              name="lint warning"
+              id="lint-warning-on"
+              className="preference__radio-button"
+              value="On"
+              checked={this.props.lintWarning}
+            />
+            <label htmlFor="lint-warning-on" className="preference__option">On</label>
+            <input
+              type="radio"
+              onChange={() => this.props.setLintWarning(false)}
               aria-label="lint warning off"
-            >Off</button>
+              name="lint warning"
+              id="lint-warning-off"
+              className="preference__radio-button"
+              value="Off"
+              checked={!this.props.lintWarning}
+            />
+            <label htmlFor="lint-warning-off" className="preference__option">Off</label>
           </div>
         </div>
         <div className="preference">
           <h4 className="preference__title">Accessible Text-based Canvas</h4>
           <h6 className="preference__subtitle">Used with screen reader</h6>
+
           <div className="preference__options">
-            <button
-              className={textOutputOnClass}
-              onClick={() => this.props.setTextOutput(true)}
+            <input
+              type="radio"
+              onChange={() => this.props.setTextOutput(true)}
               aria-label="text output on"
-            >On</button>
-            <button
-              className={textOutputOffClass}
-              onClick={() => this.props.setTextOutput(false)}
+              name="text output"
+              id="text-output-on"
+              className="preference__radio-button"
+              value="On"
+              checked={this.props.textOutput}
+            />
+            <label htmlFor="text-output-on" className="preference__option">On</label>
+            <input
+              type="radio"
+              onChange={() => this.props.setTextOutput(false)}
               aria-label="text output off"
-            >Off</button>
+              name="text output"
+              id="text-output-off"
+              className="preference__radio-button"
+              value="Off"
+              checked={!this.props.textOutput}
+            />
+            <label htmlFor="text-output-off" className="preference__option">Off</label>
+
           </div>
         </div>
       </section>
diff --git a/client/modules/IDE/components/Toolbar.js b/client/modules/IDE/components/Toolbar.js
index 79226d70..74e78b6a 100644
--- a/client/modules/IDE/components/Toolbar.js
+++ b/client/modules/IDE/components/Toolbar.js
@@ -51,15 +51,15 @@ class Toolbar extends React.Component {
     return (
       <div className="toolbar">
         <img className="toolbar__logo" src={logoUrl} alt="p5js Logo" />
-        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play sketch">
-          <InlineSVG src={playUrl} alt="Play Sketch" />
-        </button>
         <button
           className="toolbar__play-sketch-button"
           onClick={() => { this.props.startTextOutput(); this.props.startSketch(); }}
-          aria-label="play sketch with output text"
+          aria-label="play sketch"
         >
-          <InlineSVG src={playUrl} alt="Play Sketch with output text" />
+          <InlineSVG src={playUrl} alt="Play Sketch" />
+        </button>
+        <button className={playButtonClass} onClick={this.props.startSketch} aria-label="play only visual sketch">
+          <InlineSVG src={playUrl} alt="Play only visual Sketch" />
         </button>
         <button
           className={stopButtonClass}
@@ -102,9 +102,9 @@ class Toolbar extends React.Component {
         <button
           className={preferencesButtonClass}
           onClick={this.props.openPreferences}
-          aria-label="open preferences"
+          aria-label="preferences"
         >
-          <InlineSVG src={preferencesUrl} alt="Show Preferences" />
+          <InlineSVG src={preferencesUrl} alt="Preferences" />
         </button>
       </div>
     );
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index aa8c9f39..dadf6267 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -104,9 +104,6 @@
 	&:hover {
 		color: $light-primary-text-color;
 	}
-	&--selected {
-    color: $light-primary-text-color;
-  }
 }
 
 %modal {
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 06ca4b70..d33c355c 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -81,13 +81,15 @@
 	padding-left: #{28 / $base-font-size}rem;
 }
 
+.preference__radio-button {
+	@extend %hidden-element;
+}
+
 .preference__option {
 	@extend %preference-option;
 	list-style-type: none;
 	padding: 0;
-	&--selected {
-		@extend %preference-option--selected;
-	}
+	color: $light-inactive-text-color;
 }
 
 .preference__options {
@@ -96,6 +98,10 @@
 	width: #{70 / $base-font-size}rem;
 }
 
+.preference__radio-button:checked + .preference__option {
+    color: $light-primary-text-color;
+}
+
 .preference--hidden {
 	@extend %hidden-element;
 }