Joakim's public fiddles

  • Accessible dropdown menu meeting WCAG AA Version 1.0 - Two click functions

    This is an example of an responsive, accessible javascript menu, meeting requirements of WCAG AA. If you use a screen reader, this works very well. What is all about is to first of all use the right element for the right thing: semantics. Like the nav, buttons and links. Since we use javascript to collapse drop-downs, we need to use wai-aria to describe for the screen reader what is happening. For more logic, look at the comments in the script. In this version (1.0) athere is two click functions to handle menu click and outside click. See version 2.0 for one click function to rule them all.

  • Outline when tabbing, but not when using mouse

    This little nifty jQuery fix takes care of outline on focusable elements. If you tab the elements, you see a clear outline so you can see where you are. But if you use your mouse, there is no outline when you click/focus on a link, button or input. This is a solution to have a nice user experience for mouse users who do not need to see what element is focused, but also to have the visible outline for accessibility when you tab, so you can see exactly where you are.

  • Responsive images (Changing images)

    Responsive images, pull frame to see how the image change to fit its resolution better. Image change depending on resolution. This makes it possible to fit the images better both in visual size (height x width) and data size (kb) to its resolutions and connections/units. It also has fallback support (<img>) for older browsers, but the the images is not responsive then ofc. Older browsers without support for HTML5 is only used on PC anyway, so the responsivenes is not needed usually.

  • Remove tabindex on elements behind and set focus to login

    What this script does is a few things. When you click the "Open login" button, it removes tabindex from all tabbable elements outside the loginbox and sets focus to the username input. If you close the login box, it resets the tabindex again and sets focus on "Open login" button again. The script also looks for already manually set tab index (Like tabindex="-1"), so it does not mess up with those. This is great to use both for UX and accessibility. See comments in the Javascript for more logic.

  • Make image containers make space before the images are loaded by a simple CSS trix

    In this case the text will not jump when images is loading, since HTML and CSS are loaded first it usually does without this fix. The elements makes its space before images are loaded into it, which is great for heavy content sites or slow connections. The thing is to count the percentage of the image in height compared to the width and set it by CSS as padding bottom. The equation is height / width of the image to get the ratio value. The rule is to keep the same ratio on all images, or at least stay to a few ratios for simplicity both for developing and UX. The result is that content will not jump when the page is loading the images - all text stays in place all the time. Since padding bottom is in percentage, the width of the image container does not matter.

  • Accessible animated login form

    Wonder how to do a great looking form, animated which is accessible with both label and placeholder? I made a solution as clean as possible with mostly CSS. A small jQuery function is needed to check if there is a value typed in the inputs at blur.

  • Identify and trim social security number or card number (Username)

    I had a case where I needed to check if there is a Swedish social security number or a card number that was entered into a login input before sending. The reason is to delete all unwanted spaces and/or special characters, if I can identify it. If I found a Swedish social security number, I needed to trim it into YYMMDDXXXX, if I identified a card number I needed it to be trimmed to XXXXXXX0303 / XXXXXXX0330. What can identify a social security number is the length of it. If it only consists digits, it should be ten or twelve characters entered in total, not more or less. In this case the card number is always 11 digits, if you remove all other characters and they always ends with "0303" or "0330". This gives me some info to identify card numbers and social security numbers. I am returning false in this function when you submit, just to make sure we do not acually post any values - so you can see the effect. In the real case I return true in all cases, even if not trimmed. If I identify it, I trim the number before sending the data. Other usernames is also used in this form, as "support", etc, that is the reason all get through, even untrimmed usernames.