Open33
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
koyama shigehitoReka UI
koyama shigehitoReact Aria