Open31
Visually Hidden スタイル比較
yamanokuVisually Hidden は視覚的には確認できないがスクリーンリーダーといった支援技術により確認できる方法。
各デザインシステムやライブラリではどういうスタイルを使っているのかを比較してみる。
yamanokuWebAim
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
Bootstrap
position: absolute!important;
width: 1px!important;
height: 1px!important;
padding: 0!important;
margin: -1px!important;
overflow: hidden!important;
clip: rect(0,0,0,0)!important;
white-space: nowrap!important;
border: 0!important;
Vuetify は Bootstrap スタイルを参考
yamanokuReach UI
border: 0;
clip: rect(0 0 0 0);
width: "1px",
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
/* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
white-space: nowrap;
word-wrap: normal;
Shopify
position: relative;
position: absolute;
z-index: var(--pc-text-field-backdrop);
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--p-surface);
border: var(--p-border-width-1) solid var(--p-border-subdued);
border-top-color: var(--p-border-shadow);
border-radius: var(--p-border-radius-1);
pointer-events: none;
GOV.UK
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0px !important;
overflow: hidden !important;
clip: rect(0px, 0px, 0px, 0px) !important;
clip-path: inset(50%) !important;
border: 0px !important;
white-space: nowrap !important;
Psammead
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0px;
Coral
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0px;
position: absolute;
white-space: nowrap;
width: 1px;
Duet Design System
position: absolute!important;
top: 0;
width: 1px!important;
height: 1px!important;
padding: 0!important;
overflow: hidden!important;
clip: rect(1px,1px,1px,1px)!important;
border: 0!important;
generic-components
position: fixed;
top: 0px;
left: 0px;
width: 4px;
height: 4px;
opacity: 0;
overflow: hidden;
border: none;
margin: 0;
padding: 0;
display: block;
visibility: visible;
pointer-events: none;
Instructure-UI
width: 0.0625rem;
height: 0.0625rem;
margin: -0.0625rem;
padding: 0px;
position: absolute;
top: 0px;
inset-inline-start: 0px;
overflow: hidden;
clip: rect(0px, 0px, 0px, 0px);
border: 0px;
Nord Design System
all: initial;
inset-block-start: 0px;
clip: rect(1px, 1px, 1px, 1px) !important;
block-size: 1px !important;
position: absolute !important;
inline-size: 1px !important;
border-width: 0px !important;
border-style: initial !important;
border-color: initial !important;
border-image: initial !important;
overflow: hidden !important;
padding: 0px !important;
Paste
box-sizing: border-box;
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -0.125rem;
overflow: hidden;
padding: 0;
position: absolute;
text-transform: none;
white-space: nowrap;
width: 1px;
Reakit
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0px;
position: absolute;
white-space: nowrap;
width: 1px;
seek style guide
position: absolute !important;
clip: rect(1px,1px,1px,1px);
pointer-events: none;
Solar Design System
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
Culture Amp
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
Codecademy
display: inline-block;
font-size: 0px;
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
Monday.com
clip: rect(0, 0, 0, 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
Talend
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0px;
position: absolute;
white-space: nowrap;
width: 1px;
WordPress
border: 0px;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0px;
position: absolute;
width: 1px;
overflow-wrap: normal;
grainger
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
position: absolute;
Terminus
border: 0;
-webkit-clip-path: rect(0, 0, 0, 0);
clip-path: rect(0, 0, 0, 0);
display: block;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
visibility: hidden;
width: 1px;
f_subalTailwind CSS
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
AMP
yamanokuMUI
.MuiRating-visuallyHidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
Chakra UI
border: 0px;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
width: 1px;
margin: -1px;
padding: 0px;
overflow: hidden;
white-space: nowrap;
position: absolute;
web.dev
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
RadixUI