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