From cf00fefa6b0e4b0a2755551b5609913022259c70 Mon Sep 17 00:00:00 2001
From: cutls <web-pro@cutls.com>
Date: Tue, 21 Apr 2020 23:56:04 +0900
Subject: [PATCH] Accessibility

---
 app/css/master.css                  |  15 +++-
 app/js/common/keyshortcut.js        |   7 ++
 app/js/tl/directory.js              |   2 +-
 app/js/tl/filter.js                 |   2 +-
 app/js/tl/list.js                   |   2 +-
 app/js/tl/parse.js                  |  82 +++++++++++----------
 app/js/tl/src.js                    |   2 +-
 app/js/ui/layout.js                 |  22 +++---
 app/js/ui/menu.js                   |   3 +-
 app/js/ui/sort.js                   |   2 +-
 app/view/make/acct.sample.html      |   5 +-
 app/view/make/index.sample.html     | 108 ++++++++++++++--------------
 app/view/make/language/en/acct.json |   1 +
 app/view/make/language/en/main.json |   1 +
 app/view/make/language/ja/acct.json |   1 +
 app/view/make/language/ja/main.json |   1 +
 16 files changed, 145 insertions(+), 111 deletions(-)

diff --git a/app/css/master.css b/app/css/master.css
index 2e37af9a..4c90049b 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -342,21 +342,22 @@ blockquote:before,
 #left-menu {
 	width: 230px;
 }
-#left-menu div {
+#left-menu a {
 	padding-left: 5px;
 	width: 100%;
 	height: 50px;
 	display: flex;
 	align-items: center;
 	cursor: pointer;
+	color: var(--color);
 }
-#left-menu div:hover {
+#left-menu a:hover {
 	background-color: var(--beforehover);
 }
 #left-menu span {
 	margin-left: 5px;
 }
-#left-menu div.active {
+#left-menu a.active {
 	background-color: var(--emphasized);
 }
 #right-menu {
@@ -376,6 +377,7 @@ blockquote:before,
 	width: 170px;
 	height: 40px;
 	cursor: pointer;
+	color: var(--color);
 }
 #tltype .type span {
 	width: calc(100% - 30px);
@@ -514,6 +516,13 @@ textarea {
 #pageSrcInput {
   width: 160px;
 }
+.voice {
+	clip: rect(1px, 1px, 1px, 1px);
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+}
 
 @media (max-width: 500px) {
 	#pageSrc {
diff --git a/app/js/common/keyshortcut.js b/app/js/common/keyshortcut.js
index b09fbce6..07722f61 100644
--- a/app/js/common/keyshortcut.js
+++ b/app/js/common/keyshortcut.js
@@ -115,6 +115,13 @@ $(function($) {
 					return false
 				}
 			}
+			//Ctrl+K:メニュー開閉
+			if (event.metaKey || event.ctrlKey) {
+				if (e.keyCode === 75) {
+					menu()
+					return false
+				}
+			}
 			//Ctrl+Space:読み込み
 			if (event.metaKey || event.ctrlKey) {
 				if (e.keyCode === 32) {
diff --git a/app/js/tl/directory.js b/app/js/tl/directory.js
index 85470633..e7d81d50 100644
--- a/app/js/tl/directory.js
+++ b/app/js/tl/directory.js
@@ -3,7 +3,7 @@
 function dirMenu() {
 	$("#dir-contents").html("");
 	directory();
-	$("#left-menu div").removeClass("active");
+	$("#left-menu a").removeClass("active");
 	$("#dirMenu").addClass("active");
 	$(".menu-content").addClass("hide");
 	$("#dir-box").removeClass("hide");
diff --git a/app/js/tl/filter.js b/app/js/tl/filter.js
index 61878950..d1eb29b4 100644
--- a/app/js/tl/filter.js
+++ b/app/js/tl/filter.js
@@ -101,7 +101,7 @@ function delreset(tlid) {
 }
 /*ワードフィルター機能*/
 function filterMenu() {
-	$('#left-menu div').removeClass('active')
+	$('#left-menu a').removeClass('active')
 	$('#filterMenu').addClass('active')
 	$('.menu-content').addClass('hide')
 	$('#filter-box').removeClass('hide')
diff --git a/app/js/tl/list.js b/app/js/tl/list.js
index 579bbfcb..c30bad4a 100644
--- a/app/js/tl/list.js
+++ b/app/js/tl/list.js
@@ -1,5 +1,5 @@
 function listMenu() {
-	$('#left-menu div').removeClass('active')
+	$('#left-menu a').removeClass('active')
 	$('#listMenu').addClass('active')
 	$('.menu-content').addClass('hide')
 	$('#list-box').removeClass('hide')
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index 607b1212..636bb5ce 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -241,7 +241,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				noticeavatar = toot.account.avatar_static
 			}
 			noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="udg">
-					<img draggable="false" src="${noticeavatar}" width="20" class="notf-icon prof-img" user="${toot.account.acct}">
+					<img draggable="false" src="${noticeavatar}" width="20" class="notf-icon prof-img" user="${toot.account.acct}" alt="">
 				</a>`
 			if (toot.type == 'mention') {
 				var what = lang.lang_parse_mentioned
@@ -268,15 +268,15 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			} else {
 				var notfFilHide = ''
 			}
-			var noticetext = `<i class="fas fa-filter pointer big-text ${notfFilHide}" 
-					onclick="notfFilter('${toot.account.id}','${tlid}');" title="${lang.lang_parse_notffilter}">
-				</i>
+			var noticetext = `<span onclick="notfFilter('${toot.account.id}','${tlid}');" class=" pointer big-text ${notfFilHide}"><i class="fas fa-filter" 
+					 title="${lang.lang_parse_notffilter}">
+				</i><span class="voice">${lang.lang_parse_notffilter}</span></span>
 				<span class="cbadge cbadge-hover" title="${date(toot.created_at, 'absolute')}(${
 				lang.lang_parse_notftime
-			})">
-					<i class="far fa-clock"></i>
+			})" aria-hidden="true"><i class="far fa-clock"></i>
 					${date(toot.created_at, datetype)}
 				</span>
+				<span class="voice">${date(toot.created_at, 'absolute')}(${lang.lang_parse_notftime})</span>
 				<i class="big-text fas ${icon}"></i>
 				<a onclick="udg('${toot.account.id}','${acct_id}')" class="pointer grey-text">
 					${dis_name}(@${toot.account.acct})
@@ -393,7 +393,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				} else {
 					noticeavatar = toot.account.avatar_static
 				}
-				noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="notf-icon udg">
+				noticeavatar = `<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="notf-icon udg" aria-hidden="true">
 						<img draggable="false" src="${noticeavatar}" width="20" class="prof-img" 
 							user="${toot.account.acct}" onerror="this.src=\'../../img/loading.svg\'">
 					</a>`
@@ -518,7 +518,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				var spoil = escapeHTML(toot.spoiler_text)
 				var spoiler = 'cw cw_hide'
 				var api_spoil = 'gray'
-				var spoiler_show = `<a href="#" onclick="cw_show(this)" class="nex parsed cw_btn">${lang.lang_parse_cwshow}</a><br>`
+				var spoiler_show = `<a href="#" onclick="cw_show(this)" class="nex parsed cw_btn">${lang.lang_parse_cwshow}<span class="voice">${lang.lang_parse_cwshow_acc}</span></a><br>`
 			} else {
 				if (content) {
 					var ct1 = content.split('</p>').length + content.split('<br />').length - 2
@@ -576,7 +576,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			}
 
 			if (urls) {
-				var analyze = `<a onclick="additionalIndv('${tlid}','${acct_id}','${id}')" class="add-show pointer">
+				var analyze = `<a onclick="additionalIndv('${tlid}','${acct_id}','${id}')" class="add-show pointer" aria-hidden="true">
 						${lang.lang_parse_url}
 					</a><br>`
 			} else {
@@ -621,7 +621,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 							viewer +
 							`<a onclick="imgv('${id}','${key2}','${acct_id}')" id="${id}'-image-${key2}" 
 								data-url="${url}" data-type="video" class="img-parsed">
-									<video src="${purl}" class="${sense} toot-img pointer" style="max-width:100%;" loop="true">
+									<video src="${purl}" class="${sense} toot-img pointer" style="max-width:100%;" loop="true" alt="attached media">
 							</a></span>`
 					} else {
 						if (media.type == 'unknown') {
@@ -634,7 +634,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 								viewer +
 								'<audio src="' +
 								url +
-								'" class="pointer" style="width:100%;" controls></span>'
+								'" class="pointer" style="width:100%;" controls alt="attached media"></span>'
 						} else {
 							if (media.description) {
 								var desc = media.description
@@ -652,7 +652,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 										id="${id}-image-${key2}" data-url="${url}" data-original="${remote_url}" data-type="${media.type}" 
 										class="img-parsed img-link" style="width:calc(${cwdt}% - 1px); height:${imh};">
 									<img draggable="false" src="${purl}" class="${sense} toot-img pointer" 
-										onerror="this.src=\'../../img/loading.svg\'" title="${escapeHTML(desc)}">
+										onerror="this.src=\'../../img/loading.svg\'" title="${escapeHTML(desc)}" alt="${escapeHTML(desc)}">
 									${nsfwmes}
 								</a>`
 						}
@@ -683,7 +683,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 						if (toot.account.acct != mention.acct) {
 							mentions =
 								mentions +
-								`<a onclick="udg('${mention.id}',' ${acct_id}')" class="pointer">@${mention.acct}</a> `
+								`<a onclick="udg('${mention.id}',' ${acct_id}')" class="pointer" aria-hidden="true">@${mention.acct}</a> `
 							to_mention.push(mention.acct)
 						}
 					}
@@ -724,7 +724,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 						)}
 						">Pin</a>${featured}</span> `
 				})
-				tags = '<div style="float:right">' + tags + '</div>'
+				tags = '<div style="float:right" aria-hidden="true">' + tags + '</div>'
 			}
 			//リプ数
 			if (toot.replies_count || toot.replies_count === 0) {
@@ -739,29 +739,29 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			var vis = ''
 			var visen = toot.visibility
 			if (visen == 'public') {
-				var vis = `<i class="text-darken-3 material-icons gray sml vis-data pointer" 
-						title="${lang.lang_parse_public}(${lang.lang_parse_clickcopy})" data-vis="public" onclick="staCopy('${id}')">
+				var vis = `<span onclick="staCopy('${id}')"><i class="text-darken-3 material-icons gray sml vis-data pointer" 
+						title="${lang.lang_parse_public}(${lang.lang_parse_clickcopy})" data-vis="public" aria-hidden="true">
 						public
-					</i>`
+					</i><span class="voice">${lang.lang_parse_public} ${lang.lang_toot}(${lang.lang_parse_clickcopy})</span></span>`
 				var can_rt = ''
 			} else if (visen == 'unlisted') {
-				var vis = `<i class="text-darken-3 material-icons blue-text sml vis-data pointer" 
-						title="${lang.lang_parse_unlisted}(${lang.lang_parse_clickcopy})" data-vis="public" onclick="staCopy('${id}')">
+				var vis = `<span onclick="staCopy('${id}')"><i class="text-darken-3 material-icons blue-text sml vis-data pointer" 
+						title="${lang.lang_parse_unlisted}(${lang.lang_parse_clickcopy})" data-vis="public" aria-hidden="true">
 						lock_open
-					</i>`
+					</i><span class="voice">${lang.lang_parse_unlisted} ${lang.lang_toot}(${lang.lang_parse_clickcopy})</span></span>`
 				var can_rt = ''
 			} else if (visen == 'private') {
-				var vis = `<i class="text-darken-3 material-icons orange-text sml vis-data pointer" 
-						title="${lang.lang_parse_private}(${lang.lang_parse_clickcopy})" data-vis="public" onclick="staCopy('${id}')">
+				var vis = `<span onclick="staCopy('${id}')"><i class="text-darken-3 material-icons orange-text sml vis-data pointer" 
+						title="${lang.lang_parse_private}(${lang.lang_parse_clickcopy})" data-vis="public" aria-hidden="true">
 						lock
-					</i>`
+					</i><span class="voice">${lang.lang_parse_private} ${lang.lang_toot}(${lang.lang_parse_clickcopy})</span></span>`
 
 				var can_rt = 'unvisible'
 			} else if (visen == 'direct') {
-				var vis = `<i class="text-darken-3 material-icons red-text sml vis-data pointer" 
-						title="${lang.lang_parse_direct}(${lang.lang_parse_clickcopy})" data-vis="public" onclick="staCopy('${id}')">
+				var vis = `<span onclick="staCopy('${id}')"><i class="text-darken-3 material-icons red-text sml vis-data pointer" 
+						title="${lang.lang_parse_direct}(${lang.lang_parse_clickcopy})" data-vis="public" aria-hidden="true">
 						mail
-					</i>`
+					</i><span class="voice">${lang.lang_parse_direct} ${lang.lang_toot}(${lang.lang_parse_clickcopy})</span></span>`
 				var can_rt = 'unvisible'
 			}
 			if (toot.account.acct == localStorage.getItem('user_' + acct_id)) {
@@ -904,7 +904,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				var trans = `<div class="">
 						<a onclick="trans('${toot.language}','${lang.language}', $(this))" 
 							class="waves-effect waves-dark btn-flat actct" style="padding:0">
-								<i class="material-icons">g_translate</i>${lang.lang_parse_trans}
+								<i class="material-icons" aria-hidden="true">g_translate</i>${lang.lang_parse_trans}
 						</a>
 					</div>`
 			} else {
@@ -929,7 +929,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					for (var i = 0; i < tickerdata.length; i++) {
 						var value = tickerdata[i]
 						if (value.domain == thisdomain) {
-							var tickerdom = `<div style="user-select:none;cursor:default;background:linear-gradient(90deg, ${
+							var tickerdom = `<div aria-hidden="true" style="user-select:none;cursor:default;background:linear-gradient(90deg, ${
 								value.bg
 							}, transparent 96%) !important; color:${
 								value.text
@@ -1007,7 +1007,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				<div class="area-icon grid">
 					<a onclick="udg('${toot.account.id}','${acct_id}');" user="${toot.account.acct}" class="udg">
 						<img draggable="false" src="${avatar}" width="40" class="prof-img"
-							user="${toot.account.acct}" onerror="this.src='../../img/loading.svg'"/>
+							user="${toot.account.acct}" onerror="this.src='../../img/loading.svg'" alt="" />
 					</a>
 					${noticeavatar}
 				</div>
@@ -1021,7 +1021,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					<div class="flex-time">
 						<span class="cbadge cbadge-hover pointer waves-effect" onclick="tootUriCopy('${toot.url}');"
 							title="${date(toot.created_at, 'absolute')}(${lang.lang_parse_clickcopyurl})">
-							<i class="far fa-clock"></i>${date(toot.created_at, datetype)}
+							<i class="far fa-clock"></i><span class="voice">posted at </span>${date(toot.created_at, datetype)}
 						</span>
 					</div>
 				</div>
@@ -1056,6 +1056,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 							class="waves-effect waves-dark btn-flat actct rep-btn"
 							data-men="${to_mention}" data-visen="${visen}" style="padding:0" title="${lang.lang_parse_replyto}">
 								<i class="fas fa-share"></i>
+								<span class="voice">${lang.lang_parse_replyto} </span>
 								<span class="rep_ct">${replyct}</span>
 						</a>
 					</div>
@@ -1065,6 +1066,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 						}','${acct_id}','${tlid}')" class="waves-effect waves-dark btn-flat actct bt-btn"
 							style="padding:0" title="${lang.lang_parse_bt}">
 							<i class="fas fa-retweet ${if_rt} rt_${toot.id}"></i>
+							<span class="voice">${lang.lang_parse_bt} </span>
 							<span class="rt_ct">${toot.reblogs_count}</span>
 						</a>
 					</div>
@@ -1072,6 +1074,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 						<a onclick="qt('${toot.id}','${acct_id}','${toot.account.acct}','${toot.url}')" 
 							class="waves-effect waves-dark btn-flat actct" style="padding:0" title="${lang.lang_parse_quote}">
 							<i class="text-darken-3 fas fa-quote-right"></i>
+							<span class="voice">${lang.lang_parse_quote} </span>
 						</a>
 					</div>
 					<div class="action ${disp['bkm']} ${noauth} ${bkmClass}">
@@ -1079,6 +1082,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 							class="waves-effect waves-dark btn-flat actct bkm-btn" style="padding:0"
 							title="${lang.lang_parse_bookmark}">
 							<i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>
+							<span class="voice">${lang.lang_parse_bookmark} </span>
 					</a>
 					</div>
 					<div class="action ${disp['fav']} ${noauth}">
@@ -1087,6 +1091,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 							title="${lang.lang_parse_fav}">
 							<i class="fas text-darken-3 fa-star${if_fav} fav_${uniqueid}"></i>
 							<span class="fav_ct">${toot.favourites_count}</span>
+							<span class="voice">${lang.lang_parse_fav} </span>
 						</a>
 					</div>
 				</div>
@@ -1094,14 +1099,16 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					<div class="action ${noauth}">
 						<a onclick="toggleAction($(this), ${menuct * 39 + 6})" 
 							class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0">
-							<i class="text-darken-3 material-icons act-icon">expand_more</i>
+							<i class="text-darken-3 material-icons act-icon" aria-hidden="true">expand_more</i>
+							<span class="voice">Other actions</span>
 						</a>
 					</div>
 					<div class="action ${noauth}">
 						<a onclick="details('${toot.id}','${acct_id}','${tlid}','normal')"
 							class="waves-effect waves-dark btn-flat details ${dmHide}" style="padding:0"
 							title="${lang.lang_parse_detail}">
-						<i class="text-darken-3 material-icons">menu_open</i></a>
+						<i class="text-darken-3 material-icons" aria-hidden="true">menu_open</i></a>
+						<span class="voice">${lang.lang_parse_detail}</span>
 					</div>
 				</div>
 				<div class="contextMenu hide z-depth-4">
@@ -1131,7 +1138,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 					<div class="${if_mine}">
 						<button onclick="redraft('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct"
 							style="padding:0">
-							<i class="material-icons">redo</i>${lang.lang_parse_redraft}
+							<i class="material-icons" aria-hidden="true">redo</i>${lang.lang_parse_redraft}
 						</button>
 					</div>
 					${trans}
@@ -1185,10 +1192,10 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 					var locked = ''
 				}
 				if (auth == 'request') {
-					var authhtml = `<i class="material-icons gray pointer" onclick="request('${toot.id}','authorize','${acct_id}')" title="Accept">
+					var authhtml = `<i class="material-icons gray pointer" onclick="request('${toot.id}','authorize','${acct_id}')" title="Accept" aria-hidden="true">
 							person_add
-						</i>　
-						<i class="material-icons gray pointer" onclick="request('${toot.id}','reject','${acct_id}')" title="Reject">
+						</i>
+						<i class="material-icons gray pointer" onclick="request('${toot.id}','reject','${acct_id}')" title="Reject" aria-hidden="true">
 							person_add_disabled
 						</i>`
 				} else {
@@ -1279,7 +1286,7 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 				}
 				var latest = date(toot.last_status_at, 'relative')
 				if (toot.last_status_at) {
-					var latesthtml = `<div class="cbadge" style="width:100px;">Last:${latest}</div>`
+					var latesthtml = `<div class="cbadge" style="width:100px;">Last <span class="voice">toot</span>: ${latest}</div>`
 				} else {
 					var latesthtml = ''
 				}
@@ -1296,6 +1303,7 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 							class="prof-img"
 							user="${toot.acct}"
 							onerror="this.src='../../img/loading.svg'"
+							alt=""
 						/>
 					</a></div>
 					<div class="area-display_name">
diff --git a/app/js/tl/src.js b/app/js/tl/src.js
index 595fef95..ccb363c4 100644
--- a/app/js/tl/src.js
+++ b/app/js/tl/src.js
@@ -3,7 +3,7 @@
 function searchMenu() {
 	$('#src-contents').html('')
 	trend()
-	$('#left-menu div').removeClass('active')
+	$('#left-menu a').removeClass('active')
 	$('#searchMenu').addClass('active')
 	$('.menu-content').addClass('hide')
 	$('#src-box').removeClass('hide')
diff --git a/app/js/ui/layout.js b/app/js/ui/layout.js
index 3fe7581e..7e47feff 100644
--- a/app/js/ui/layout.js
+++ b/app/js/ui/layout.js
@@ -8,7 +8,7 @@ var websocketNotf = []
 
 //カラム追加ボックストグル
 function addColumnMenu() {
-	$('#left-menu div').removeClass('active')
+	$('#left-menu a').removeClass('active')
 	$('#addColumnMenu').addClass('active')
 	$('.menu-content').addClass('hide')
 	$('#add-box').removeClass('hide')
@@ -357,7 +357,7 @@ function parseColumn(target, dontclose) {
 							<i class="material-icons waves-effect ${isMisRed}" id="notice_icon_${key}" ${notf_attr}
 								 style="font-size:40px; padding-top:25%;" 
 								 onclick="checkStr('${acct.type}','${data}','${acct.domain}', '${key}', '${delc}','${voice}',null)"
-							 	 title="${lang.lang_layout_gotop}">
+							 	 title="${lang.lang_layout_gotop}" aria-hidden="true">
 							</i>
 						</div>
 					<div class="area-notice_name">
@@ -366,29 +366,33 @@ function parseColumn(target, dontclose) {
 					<div class="area-a1">
 						<a onclick="notfToggle('${acct.domain}','${key}')" class="setting nex ${if_notf}" 
 							title="${unique_notf}" ${icnsert}>
-							<i class="material-icons waves-effect nex notf-icon_${acct.domain}">notifications</i>
+							<i class="material-icons waves-effect nex notf-icon_${acct.domain}" aria-hidden="true">notifications</i>
+							<span class="voice">${unique_notf}</span>
 						</a>
 						<span class="cbadge hide notf-announ_${acct.domain}" style="margin-right:0" 
 							onclick="notfToggle('${acct.domain}','${key}')" title="${lang.lang_layout_announ}">
 							<i class="fas fa-bullhorn"></i>
 							<span class="notf-announ_${acct.domain}_ct"></span>
+							<span class="voice">${lang.lang_layout_announ}</span>
 						</span>
 						${if_tag_btn}
 					</div>
 					<div class="area-sta">
-						<span class="new badge teal notf-reply_${acct.domain} hide" data-badge-caption="Reply">0</span>
-						<span class="new badge yellow black-text notf-fav_${acct.domain} hide" data-badge-caption="Fav">0</span>
-						<span class="new badge blue notf-bt_${acct.domain} hide" data-badge-caption="BT">0</span>
-						<span class="new badge orange notf-follow_${acct.domain} hide" data-badge-caption="Follow">0</span>
+						<span class="new badge teal notf-reply_${acct.domain} hide" data-badge-caption="Reply" aria-hidden="true">0</span>
+						<span class="new badge yellow black-text notf-fav_${acct.domain} hide" data-badge-caption="Fav" aria-hidden="true">0</span>
+						<span class="new badge blue notf-bt_${acct.domain} hide" data-badge-caption="BT" aria-hidden="true">0</span>
+						<span class="new badge orange notf-follow_${acct.domain} hide" data-badge-caption="Follow" aria-hidden="true">0</span>
 					</div>
 					<div class="area-a2">
 						<a onclick="removeColumn('${key}')" class="setting nex">
-							<i class="material-icons waves-effect nex" title="${lang.lang_layout_delthis}" ${icnsert}>cancel</i>
+							<i class="material-icons waves-effect nex" title="${lang.lang_layout_delthis}" ${icnsert} aria-hidden="true">cancel</i>
+							<span class="voice">${lang.lang_layout_delthis}</span>
 						</a>
 					</div>
 					<div class="area-a3">
 						<a onclick="setToggle('${key}')" class="setting nex" title="${lang.lang_layout_setthis}" ${icnsert}>
-							<i class="material-icons waves-effect nex">settings</i>
+							<i class="material-icons waves-effect nex" aria-hidden="true">settings</i>
+							<span class="voice">${lang.lang_layout_setthis}</span>
 						</a>
 					</div>
 				</div>
diff --git a/app/js/ui/menu.js b/app/js/ui/menu.js
index e907d5b0..bf8f8650 100644
--- a/app/js/ui/menu.js
+++ b/app/js/ui/menu.js
@@ -33,6 +33,7 @@ function menu() {
     $("#add-box").removeClass("hide");
     $("#left-menu div").removeClass("active");
     $("#addColumnMenu").addClass("active");
+    $("#addColumnMenu").click();
   } else {
     $('#menu').fadeOut()
     $("#menu").removeClass("appear")
@@ -69,7 +70,7 @@ $(function () {
   });
 });
 function help() {
-  $("#left-menu div").removeClass("active");
+  $("#left-menu a").removeClass("active");
 	$("#helpMenu").addClass("active");
 	$(".menu-content").addClass("hide");
 	$("#help-box").removeClass("hide");
diff --git a/app/js/ui/sort.js b/app/js/ui/sort.js
index 06c4b1f2..fc854209 100644
--- a/app/js/ui/sort.js
+++ b/app/js/ui/sort.js
@@ -111,7 +111,7 @@ function sort() {
 }
 //ソートボタントグル
 function sortMenu() {
-	$("#left-menu div").removeClass("active");
+	$("#left-menu a").removeClass("active");
 	$("#sortMenu").addClass("active");
 	$(".menu-content").addClass("hide");
 	$("#sort-box").removeClass("hide");
diff --git a/app/view/make/acct.sample.html b/app/view/make/acct.sample.html
index a6d2625d..d8a4828a 100644
--- a/app/view/make/acct.sample.html
+++ b/app/view/make/acct.sample.html
@@ -59,8 +59,10 @@
 			<div id="add">
 				<div class="row">
 					<div class="col s8">
+						@@addAcct@@<br />
 						<input type="text" id="url" style="width:70%" placeholder="ex)mstdn.jp" />
 						<div id="ins-suggest"></div>
+						<button class="btn waves-effect" onclick="instance()">Login</button><br />
 						@@codesetupwarn@@<br />
 						<label>
 							<input type="checkbox" class="filled-in" id="linux" />
@@ -71,9 +73,8 @@
 							<input type="checkbox" class="filled-in" id="misskey" />
 							<span>@@thisismisskey@@</span> </label
 						><br />
-						<button class="btn waves-effect" onclick="instance()">Login</button><br />
 					</div>
-					<div class="col s4">
+					<div class="col s4" aria-hidden="true">
 						<span style="font-family:Open Sans;">Supports</span>
 						<div id="support" class="collection transparent"></div>
 					</div>
diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html
index 62ae7f29..7a680f18 100644
--- a/app/view/make/index.sample.html
+++ b/app/view/make/index.sample.html
@@ -1264,30 +1264,30 @@
 			</span>
 			<div id="menu-wrapper">
 				<div id="left-menu">
-					<div class="waves-effect active" onclick="addColumnMenu()" id="addColumnMenu">
-						<i class="material-icons">add</i><span>@@addColumn@@</span>
-					</div>
-					<div class="waves-effect" onclick="sortMenu()" id="sortMenu">
-						<i class="material-icons">sort</i><span>@@sortColumns@@</span>
-					</div>
-					<div class="waves-effect" onclick="searchMenu()" id="searchMenu">
-						<i class="material-icons">search</i><span>@@search@@</span>
-					</div>
-					<div class="waves-effect" onclick="listMenu()" id="listMenu">
-						<i class="material-icons">view_headline</i><span>@@list@@</span>
-					</div>
-					<div class="waves-effect" onclick="dirMenu()" id="dirMenu">
-						<i class="material-icons">recent_actors</i><span>@@directory@@</span>
-					</div>
-					<div class="waves-effect" onclick="filterMenu()" id="filterMenu">
-						<i class="material-icons">filter_list</i><span>@@filter@@</span>
-					</div>
-					<div class="waves-effect" onclick="help()" id="helpMenu">
-						<i class="material-icons">help_outline</i><span>@@helpAndLogs@@</span>
-					</div>
-					<div class="waves-effect" onclick="location.href='index.html'">
-						<i class="material-icons">refresh</i><span>@@f5@@</span>
-					</div>
+					<a class="waves-effect active" onclick="addColumnMenu()" id="addColumnMenu">
+						<i class="material-icons" aria-hidden="true">add</i><span>@@addColumn@@</span>
+					</a>
+					<a class="waves-effect" onclick="sortMenu()" id="sortMenu">
+						<i class="material-icons" aria-hidden="true">sort</i><span>@@sortColumns@@</span>
+					</a>
+					<a class="waves-effect" onclick="searchMenu()" id="searchMenu">
+						<i class="material-icons" aria-hidden="true">search</i><span>@@search@@</span>
+					</a>
+					<a class="waves-effect" onclick="listMenu()" id="listMenu">
+						<i class="material-icons" aria-hidden="true">view_headline</i><span>@@list@@</span>
+					</a>
+					<a class="waves-effect" onclick="dirMenu()" id="dirMenu">
+						<i class="material-icons" aria-hidden="true">recent_actors</i><span>@@directory@@</span>
+					</a>
+					<a class="waves-effect" onclick="filterMenu()" id="filterMenu">
+						<i class="material-icons" aria-hidden="true">filter_list</i><span>@@filter@@</span>
+					</a>
+					<a class="waves-effect" onclick="help()" id="helpMenu">
+						<i class="material-icons" aria-hidden="true">help_outline</i><span>@@helpAndLogs@@</span>
+					</a>
+					<a class="waves-effect" onclick="location.href='index.html'">
+						<i class="material-icons" aria-hidden="true">refresh</i><span>@@f5@@</span>
+					</a>
 				</div>
 				<div id="right-menu">
 					<!--カラム追加-->
@@ -1308,46 +1308,46 @@
 								<input type="hidden" value="local" id="type-sel" />
 								@@showThisTL@@
 								<div id="tltype">
-									<div class="type waves-effect active" data-type="local">
-										<div><i class="material-icons">people_outline</i></div>
+									<a class="type waves-effect active" data-type="local">
+										<div><i class="material-icons" aria-hidden="true">people_outline</i></div>
 										<span>@@local@@</span>
-									</div>
-									<div class="type waves-effect" data-type="local-media">
-										<div><i class="material-icons">perm_media</i></div>
+									</a>
+									<a class="type waves-effect" data-type="local-media">
+										<div><i class="material-icons" aria-hidden="true">perm_media</i></div>
 										<span>@@localMedia@@</span>
-									</div>
-									<div class="type waves-effect" data-type="home">
-										<div><i class="material-icons">home</i></div>
+									</a>
+									<a class="type waves-effect" data-type="home">
+										<div><i class="material-icons" aria-hidden="true">home</i></div>
 										<span>@@home@@</span>
-									</div>
-									<div class="type waves-effect" data-type="pub">
-										<div><i class="material-icons">language</i></div>
+									</a>
+									<a class="type waves-effect" data-type="pub">
+										<div><i class="material-icons" aria-hidden="true">language</i></div>
 										<span>@@fed@@</span>
-									</div>
-									<div class="type waves-effect" data-type="pub-media">
-										<div><i class="material-icons">perm_media</i></div>
+									</a>
+									<a class="type waves-effect" data-type="pub-media">
+										<div><i class="material-icons" aria-hidden="true">perm_media</i></div>
 										<span>@@fedMedia@@</span>
-									</div>
-									<div class="type waves-effect" data-type="dm">
-										<div><i class="material-icons">mail_outline</i></div>
+									</a>
+									<a class="type waves-effect" data-type="dm">
+										<div><i class="material-icons" aria-hidden="true">mail_outline</i></div>
 										<span>@@dm@@</span>
-									</div>
-									<div class="type waves-effect" data-type="mix">
-										<div><i class="material-icons">merge_type</i></div>
+									</a>
+									<a class="type waves-effect" data-type="mix">
+										<div><i class="material-icons" aria-hidden="true">merge_type</i></div>
 										<span>@@integratedTLDes@@</span>
-									</div>
-									<div class="type waves-effect" data-type="plus">
-										<div><i class="material-icons">reply</i></div>
+									</a>
+									<a class="type waves-effect" data-type="plus">
+										<div><i class="material-icons" aria-hidden="true">reply</i></div>
 										<span>@@localPlusDes@@</span>
-									</div>
-									<div class="type waves-effect" data-type="notf">
-										<div><i class="material-icons">notifications</i></div>
+									</a>
+									<a class="type waves-effect" data-type="notf">
+										<div><i class="material-icons" aria-hidden="true">notifications</i></div>
 										<span>@@notf@@</span>
-									</div>
-									<div class="type waves-effect" data-type="bookmark">
-										<div><i class="material-icons">bookmark</i></div>
+									</a>
+									<a class="type waves-effect" data-type="bookmark">
+										<div><i class="material-icons" aria-hidden="true">bookmark</i></div>
 										<span>@@bookmark@@</span>
-									</div>
+									</a>
 								</div>
 							</div>
 							<div id="noauth" class="hide">
diff --git a/app/view/make/language/en/acct.json b/app/view/make/language/en/acct.json
index c0654208..e8ec8d8a 100644
--- a/app/view/make/language/en/acct.json
+++ b/app/view/make/language/en/acct.json
@@ -2,6 +2,7 @@
     "list":"List of accounts",
     "back":"Back",
     "add":"Add an account",
+    "addAcct": "Fill the instance domain (like mastodon.social)",
     "codesetupwarn":"Uncheck it to skip pasiting code.(login to Mastodon on Windows or macOS) (Recommended: pcheck)",
     "codesetup":"Code setup",
     "mainacct":"Main an account",
diff --git a/app/view/make/language/en/main.json b/app/view/make/language/en/main.json
index 50891683..6800f730 100644
--- a/app/view/make/language/en/main.json
+++ b/app/view/make/language/en/main.json
@@ -172,6 +172,7 @@
     "lang_parse_polled": "'s poll",
     "lang_parse_notftime": "Actioned at",
     "lang_parse_cwshow": "Show",
+    "lang_parse_cwshow_acc": "This is a post with content warning. click to show the whole content",
     "lang_parse_fulltext": "Full size text:",
     "lang_parse_autofold": "Auto folded",
     "lang_parse_more": "More",
diff --git a/app/view/make/language/ja/acct.json b/app/view/make/language/ja/acct.json
index ee49608c..72c4dddf 100644
--- a/app/view/make/language/ja/acct.json
+++ b/app/view/make/language/ja/acct.json
@@ -2,6 +2,7 @@
     "list":"アカウント一覧",
     "back":"戻る",
     "add":"アカウントを追加",
+    "addAcct": "次のボックスにログインしたいサーバのドメインを入力してください。",
     "codesetupwarn":"チェックを外すとコード貼り付けをスキップできます。(<u>Mastodon</u>にWindowsやmacOSからログインする場合)失敗する場合はチェックを入れてください。",
     "codesetup":"コードセットアップ",
     "mainacct":"メインアカウント",
diff --git a/app/view/make/language/ja/main.json b/app/view/make/language/ja/main.json
index 5138895d..0edbb526 100644
--- a/app/view/make/language/ja/main.json
+++ b/app/view/make/language/ja/main.json
@@ -173,6 +173,7 @@
     "lang_parse_polled": "のアンケート",
     "lang_parse_notftime": "通知された時間",
     "lang_parse_cwshow": "見る",
+    "lang_parse_cwshow_acc": "これはコンテントワーニングが付与されたトゥートです。全文を見るにはクリックしてください。",
     "lang_parse_fulltext": "以下全文",
     "lang_parse_autofold": "自動折り畳み",
     "lang_parse_more": "続き...",