{"id":243,"date":"2021-01-24T14:04:10","date_gmt":"2021-01-24T14:04:10","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=243"},"modified":"2023-02-23T17:07:13","modified_gmt":"2023-02-23T17:07:13","slug":"a-simple-custom","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2021\/01\/24\/a-simple-custom\/","title":{"rendered":"A simple custom"},"content":{"rendered":"

\"A<\/p>\n

For whatever reason some people don’t like the standard HTML checkbox<\/code> and radio button<\/code>, they seek to jazz ’em up and in the process the often jizz<\/em> up the usability\/accessibility of these controls.<\/p>\n

There are some good efforts out there to win over developers\/designers to using native controls, or minimally customized controls. Here I provide my simple variation:<\/p>\n

Key coding items<\/h2>\n
    \n
  • \n
      \n
    • Use of CSS adjacent sibling selector<\/a> to provide visible focus<\/li>\n
    • Use of CSS ::before<\/code><\/a> to provide visual UI\/state<\/li>\n
    • Tucked input<\/code> under label<\/code> ::before<\/code> content using negative margin<\/code> and hid\u00a0input<\/code> visually via opacity:0<\/code><\/a><\/li>\n
    • Added aria-label<\/code><\/a> to inputs<\/code> and aria-hidden=true<\/code><\/a> to label<\/code> elements to ensure ::before<\/code> content is not<\/strong>, but accessible name<\/a> is<\/em> announced by screen readers<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

      See the Pen
      \npoEmKXo<\/a> by steve faulkner (      @stevef<\/a>)
      \non       CodePen<\/a>.<\/p>\n