{"id":377565,"date":"2024-03-22T11:52:31","date_gmt":"2024-03-22T18:52:31","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377565"},"modified":"2024-03-29T19:12:36","modified_gmt":"2024-03-30T02:12:36","slug":"accessible-forms-with-pseudo-classes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/accessible-forms-with-pseudo-classes\/","title":{"rendered":"Accessible Forms with Pseudo Classes"},"content":{"rendered":"\n

Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within<\/code>. The :focus-within<\/code> class allows for great control over focus and letting your user know this is exactly where they are in the experience. Before we jump in, let\u2019s get to the core of what web accessibility is.<\/p>\n\n\n


Form Accessibility?<\/h2>\n\n\n


You have most likely heard the term \u201caccessibility\u201d everywhere or the numeronym, a11y. What does it mean? That is a great question with so many answers. When we look at the physical world, accessibility means things like having sharps containers in your bathrooms at your business, making sure there are ramps for wheel assisted people, and having peripherals like large print keyboards on hand for anyone that needs it.<\/p>\n\n\n\n

The gamut of accessibility doesn\u2019t stop there, we have digital accessibility that we need to be cognizant of as well, not just for external users, but internal colleagues as well. Color contrast is a low hanging fruit<\/a> that we should be able to nip in the bud. At our workplaces, making sure that if any employee needs assistive tech like a screen reader, we have that installed and available. There are a lot of things that need to be kept into consideration. This article will focus on web accessibility by keeping the WCAG (web content accessibility guidelines)<\/a> in mind.<\/p>\n\n\n\n

MDN (Mozilla Developer Network)<\/a><\/p>The :focus-within<\/code> CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)<\/cite><\/blockquote><\/figure>\n\n\n\n

This pseudo class is really great when you want to emphasize that the user is in fact interacting with the element. You can change the background color of the whole form, for example. Or, if focus is moved into an input, you can make the label bold and larger of an input element when focus is moved into that input. What is happening below in the code snippets and examples is what is making the form accessible. :focus-within<\/code> is just one way we can use CSS to our advantage.<\/p>\n\n\n

How To Focus<\/h3>\n\n\n


Focus, in regards to accessibility and the web experience, is the visual indicator that something is being interacted with on the page, in the UI, or within a component. CSS can tell when an interactive element is focused. <\/p>\n\n\n\n

\u201cThe :focus<\/code> CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.\u201d<\/p>MDN (Mozilla Developer Network)<\/a><\/cite><\/blockquote><\/figure>\n\n\n\n

Always make sure that the focus indicator or the ring around focusable elements maintains the proper color contrast through the experience.<\/p>\n\n\n\n

Focus is written like this and can be styled to match your branding if you choose to style it.<\/p>\n\n\n\n

:focus {\n  * \/ INSERT STYLES HERE \/*\n}<\/code><\/pre>\n\n\n\n
Whatever you do, never set your outline to 0 <\/strong><\/em><\/code>or<\/strong><\/em> none<\/strong><\/em><\/code>. Doing so will remove a visible focus indicator for everyone across the whole experience. If you need to remove focus, you can, but make sure to add that back in later. When you remove focus from your CSS or set the outline to 0 <\/strong><\/em><\/code>or<\/strong><\/em> none<\/strong><\/em><\/code>, it removes the focus ring for all your users. This is seen a lot when using a CSS reset. A CSS reset will reset the styles to a blank canvas. This way you are in charge of the empty canvas to style as you wish. If you wish to use a CSS reset, check out Josh Comeau\u2019s reset<\/a>.<\/p>\n\n\n\n
*DO NOT DO what is below!<\/mark><\/strong><\/p>\n\n\n\n
:focus {\n  outline: 0;\n}\n\n:focus {\n  outline: none;\n}<\/code><\/pre>\n\n\n

Look Within!<\/h3>\n\n\n

One of the coolest ways to style focus using CSS is what this article is all about. If you haven\u2019t checked out the :focus-within<\/code> pseudo class, definitely give that a look! There are a lot of hidden gems when it comes to using semantic markup and CSS, and this is one of them. A lot of things that are overlooked are accessible by default, for instance, semantic markup is by default accessible and should be used over div\u2019s at all times.<\/p>\n\n\n\n
\n
<header>\n  <h1>Semantic Markup<\/h1>\n  <nav>\n    <ul>\n      <li><a href=\"\/\">Home<\/a><\/li>\n      <li><a href=\"\/about\">About<\/a><\/li>\n    <\/ul>\n  <\/nav>\n<\/header>\n\n<section><!-- Code goes here --><\/section>\n\n<section><!-- Code goes here --><\/section>\n\n<aside><!-- Code goes here --><\/aside>\n\n<footer><!-- Code goes here --><\/footer><\/code><\/pre>\n<\/div><\/div>\n\n\n\n
The header<\/code>, nav<\/code>, main<\/code>, section<\/code>, aside<\/code>, and footer<\/code> are all semantic elements. The h1<\/code> and ul<\/code> are also semantic and accessible.<\/p>\n\n\n\n
Unless there is a custom component that needs to be created, then a div<\/code> is fine to use, paired with ARIA (Accessible Rich Internet Applications)<\/a>. We can do a deep dive into ARIA in a later post. For now let\u2019s focus\u2026see what I did there\u2026on this CSS pseudo class.<\/p>\n\n\n\n
The :focus-within<\/code> pseudo class allows you to select an element when any descendent element it contains has focus.<\/p>\n\n\n

:focus-within<\/code> in Action!
<\/h2>\n\n
HTML<\/h3>\n\n\n
<form>\n  <div>\n    <label for=\"firstName\">First Name<\/label><input id=\"firstName\" type=\"text\">\n  <\/div>\n  <div>\n    <label for=\"lastName\">Last Name<\/label><input id=\"lastName\" type=\"text\">\n  <\/div>\n  <div>\n    <label for=\"phone\">Phone Number<\/label><input id=\"phone\" type=\"text\">\n  <\/div>\n  <div>\n    <label for=\"message\">Message<\/label><textarea id=\"message\"><\/textarea>\n  <\/div>\n<\/form><\/code><\/pre>\n\n\n
CSS<\/h3>\n\n\n
form:focus-within {\n  background: #ff7300;\n  color: black;\n  padding: 10px;\n}<\/code><\/pre>\n\n\n\n
The example code above will add a background color of orange, add some padding, and change the color of the labels to black.<\/p>\n\n\n\n
The final product looks something like below. Of course the possibilities are endless to change up the styling, but this should get you on a good track to make the web more accessible for everyone!<\/p>\n\n\n
\n
\"First<\/a><\/figure><\/div>\n\n\n
Another use case for using :focus-within<\/code> would be turning the labels bold, a different color, or enlarging them for users with low vision. The example code for that would look something like below.<\/p>\n\n\n
HTML<\/h3>\n\n\n
<form>\n  <h1>:focus-within part 2!<\/h1>\n  <label for=\"firstName\">First Name: <input name=\"firstName\" type=\"text\" \/><\/label>\n  <label for=\"lastName\">Last Name: <input name=\"lastName\" type=\"text\" \/><\/label>\n  <label for=\"phone\">Phone number: <input type=\"tel\" id=\"phone\" \/><\/label>\n  <label for=\"message\">Message: <textarea name=\"message\" id=\"message\"\/><\/textarea><\/label>\n<\/form>\n<\/code><\/pre>\n\n\n
CSS<\/h3>\n\n\n
label {\n  display: block;\n  margin-right: 10px;\n  padding-bottom: 15px;\n}\n\nlabel:focus-within {\n  font-weight: bold;\n  color: red;\n  font-size: 1.6em;\n}\n<\/code><\/pre>\n\n\n
\n
\"Showing<\/a><\/figure><\/div>\n\n\n
:focus-within<\/code> also has great browser support across the board according to Can I use<\/a>.<\/p>\n\n\n\n
\"Focus<\/figure>\n\n\n
Conclusion<\/strong><\/h3>\n\n\n
Creating amazing, accessible user experience should always be a top priority when shipping software, not just externally but internally as well. We as developers, all the way up to senior leadership need to be cognizant of the challenges others face and how we can be ambassadors for the web platform to make it a better place.<\/p>\n\n\n\n
Using technology like semantic markup and CSS to create inclusive spaces is a crucial part in making the web a better place, let\u2019s continue moving forward and changing lives.<\/p>\n\n\n\n
Check out another great resource here on CSS-Tricks on using :focus-within<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for great control over focus and letting your user know this is exactly where they are in […]<\/p>\n","protected":false},"author":288735,"featured_media":377614,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":false,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[466,478,1262,595,479,731],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/03\/focus-within-form-accessibility.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":360939,"url":"https:\/\/css-tricks.com\/8-accessibility-links-january-2022\/","url_meta":{"origin":377565,"position":0},"title":"8 Helpful Accessibility Links for January 2022","date":"January 13, 2022","format":false,"excerpt":"Every now and then, I find that I\u2019ve accumulated a bunch of links about various things I find interesting. Accessibility is one of those things! Here\u2019s a list of related links to other articles that I\u2019ve been saving up and think are worth sharing. Myths about Web Accessibility \u2014 Alvaro\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-13-at-12.48.26-PM.png?fit=1200%2C781&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":377702,"url":"https:\/\/css-tricks.com\/managing-user-focus-with-focus-visible\/","url_meta":{"origin":377565,"position":1},"title":"Managing User Focus with :focus-visible","date":"April 5, 2024","format":false,"excerpt":"This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo Classes. In this post we are going to look at :focus-visible and how to use it in your web sites!\u2026","rel":"","context":"In "Article"","img":{"alt_text":"focus-visible css","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/04\/focus-visible.png?fit=1200%2C469&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305810,"url":"https:\/\/css-tricks.com\/accessibility-links\/","url_meta":{"origin":377565,"position":2},"title":"Accessibility Links","date":"April 2, 2020","format":false,"excerpt":"Austin Gil has kicked off the first in a five-part series about \"HTML Forms Right\" and to starts with semantics. It's talking to the \"we build our front-ends with JavaScript\" crowd. The first block of code is an example of an Ajax form submission where the data submitted is gathered\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338429,"url":"https:\/\/css-tricks.com\/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders\/","url_meta":{"origin":377565,"position":3},"title":"Platform News: Using :focus-visible, BBC’s New Typeface, Declarative Shadow DOMs, A11Y and Placeholders","date":"April 16, 2021","format":false,"excerpt":"There's a whole lot of accessibility in this week's news, from the nuances of using :focus-visible and input placeholders, to accessible typefaces and a Safari bug with :display: contents. Plus, a snippet for a bare-bones web component that supports style encapsulation. Now may be a good time to start using\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/wpn-20210416.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334376,"url":"https:\/\/css-tricks.com\/beautiful-accessibility-with-floating-focus\/","url_meta":{"origin":377565,"position":4},"title":"Beautiful accessibility with Floating Focus","date":"February 15, 2021","format":false,"excerpt":"Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element. The spirit of it is similar to smooth scrolling: it's easier to understand what is happening when movement accompanies the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/focus-visible-trick.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":274993,"url":"https:\/\/css-tricks.com\/short-note-on-the-accessibility-of-styled-form-controls\/","url_meta":{"origin":377565,"position":5},"title":"Short note on the accessibility of styled form controls","date":"August 6, 2018","format":false,"excerpt":"Styling and accessibility are often at odds with each other. Scott O'Hara has this repo that shows how the two can work really well together in the context of form controls. The trade-offs between native and styled controls remind me of Eric Bailey's case study on focus styles: A common\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/accessible-star-rating.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2024\/03\/focus-within-form-accessibility.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377565"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288735"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=377565"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377565\/revisions"}],"predecessor-version":[{"id":377604,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377565\/revisions\/377604"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377614"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=377565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=377565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=377565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}