Open33
Visually Hidden スタイル比較
yamanoku / やまのくVisually Hidden は視覚的には確認できないがスクリーンリーダーといった支援技術により確認できる方法。
各デザインシステムやライブラリではどういうスタイルを使っているのかを比較してみる。
yamanoku / やまのくWebAim
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 スタイルを参考
yamanoku / やまのくReach 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
yamanoku / やまのくMUI
.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