Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://front-end.social/users/stephaniewalter/statuses/112411019932517381">Stef Walter (stephaniewalter@front-end.social)'s status on Thursday, 09-May-2024 23:04:49 JST</a><a href="https://front-end.social/@stephaniewalter" title="stephaniewalter@front-end.social"><img src="https://gnusocial.jp/avatar/148801-48-20240813024013.webp" width="48" height="48" alt="Stef Walter" style="position: absolute; left: 0; top: 0;">Stef Walter</a></section><article><p>How to design accessible forms in 10 steps?<br>- break long form into smaller ones<br>- provide a label for each field<br>- use text hint instead of placeholders for format and help<br>- use HTML5 native form controls when possible<br>- highlight elements on focus (and make sure the color of the focus follows WCAG standards too)<br>- help users recover from error with good styling and error messages<br><a href="https://uxdesign.cc/how-to-design-accessible-forms-in-10-steps-22232d65de18" rel="nofollow noreferrer">https://uxdesign.cc/how-to-design-accessible-forms-in-10-steps-22232d65de18</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/3064505#notice-6075121">In conversation</a><time datetime="2024-05-09T23:04:49+09:00" title="Thursday, 09-May-2024 23:04:49 JST">about a year ago</time> <span>from <span><a href="https://front-end.social/@stephaniewalter/112411019932517381" rel="external" title="Sent from front-end.social via ActivityPub">front-end.social</a></span></span><a href="https://front-end.social/@stephaniewalter/112411019932517381">permalink</a><h4>Attachments</h4><ol><li><article><header><div>Domain not in remote thumbnail source whitelist: miro.medium.com</div><h5><a href="https://uxdesign.cc/how-to-design-accessible-forms-in-10-steps-22232d65de18">How to design accessible forms in 10 steps</a></h5><div> from <span>https://medium.com/@bethanphillimore</span></div></header><div>While completing a form isn’t usually a particularly fun task for a user, it is often a necessary step of a process. For example, a user…</div><footer></footer></article></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
Stef Walter (stephaniewalter@front-end.social)'s status on Thursday, 09-May-2024 23:04:49 JST Stef Walter
How to design accessible forms in 10 steps?
- break long form into smaller ones
- provide a label for each field
- use text hint instead of placeholders for format and help
- use HTML5 native form controls when possible
- highlight elements on focus (and make sure the color of the focus follows WCAG standards too)
- help users recover from error with good styling and error messages
https://uxdesign.cc/how-to-design-accessible-forms-in-10-steps-22232d65de18
In conversationabout a year ago from front-end.socialpermalink
Attachments
1. Domain not in remote thumbnail source whitelist: miro.medium.com
  How to design accessible forms in 10 steps
  from https://medium.com/@bethanphillimore
  While completing a form isn’t usually a particularly fun task for a user, it is often a necessary step of a process. For example, a user…

Public

Embed Notice

HTML Code

Corresponding Notice