background preloader

Accessibility tools, web developer tools, wizards and markup generators

Accessibility tools, web developer tools, wizards and markup generators
Accessibility Tools Updated Accessible Table Builder - Create an accessible table using scope, header and id attributes using a wizard to guide you through the process. Updated Quick Form Builder. A complete re-write/re-think of the old Accessible Form Builder tool. Give it a try! Easy YouTube caption creator. Show additional archived content (which may no longer be up-to-date). Accessible Form Builder - Quickly create a form with CSS or table layout, including all label elements simply by typing a list of fields that you need. General Developer Tools Markup Maker - Takes a simple list of page ids that you enter and converts it to a valid XHTML document.

Related:  ux, ui

Finding Your Tone Of Voice Advertisement When creating content for the Web, considering tone of voice is important. Your tone can help you stand out from competitors, communicate efficiently and effectively with your audience and share your personality. What Is Tone Of Voice, And Why Is It Important? Box Lessons This is a Problem & Workaround Set for a series of CSS Boxes going from a simple single box, through 3 columns with a full width top box, all with variations. What this isn't, is a how-to for CSS layout. This is a how-to for dealing with the misinterpretations of our current browsers. If you're new to CSS, this is a better place to start. Enjoy. Ten useful open source tools for web developers The rapidly changing nature of the Web makes it necessary for web developers to constantly be on the lookout for new, shiny tools. This post will hopefully show you some cool tools you didn’t already know about. Providing you with a list of the ten BEST open source tools for web developers would have been great, but it would be negligent to call this a top ten list because there are so many different tools out there that fall under the Free/Libre/Open Source category. Developers can be notoriously choosy when it comes to the tools they use and it’s close to impossible to create an objective top ten list.

Colour Contrast Check - Date created: January 11, 2005 Date last modified: March 30, 2009 The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen"[W3C]. The tool will indicate that the colours pass the test if both the colour difference and the brightness difference exceed their threshold. It will indicate that it sort of passes if only one of the two values exceed their threshold.

13 Internet Slangs with Unexpected Alternate Meanings We've all grown accustomed to the online jargon, shorthands and acronyms that have developed over decades of Internet use. Silly as they might be, most of us are guilty of truncating, abbreviating or misspelling words to save a few seconds here and there. The jury is still out on whether the seconds have added up to much or not, but linguists have had a field day studying online lingual behaviors and their effects on offline writing and speech. Nevertheless, it's interesting to look at how pre-Internet acronyms and abbreviations like "LOL" have taken on new meanings ("laughing out loud") with the introduction of widely popular Internet idioms.

Breaking down Amazon’s mega dropdown The hover effects on Amazon’s big ‘ole “Shop by Department” mega dropdown are super fast. Look’it how quick each submenu fills in as your mouse moves down the list: It’s instant. I got nerd sniped by this. Accessible Header Images With CSS And XHTML [CS... Before CSS, images were always put into Web pages with image tags. We gave them alternate (alt) text so they still made sense when images were turned off – it was the only way. Today, we have Cascading Style Sheets. Using CSS to add images to Web pages has been called a “vital cornerstone of all future Web design”. The CSS Ninja - All things CSS, Javascript & xhtml Recently I have been playing around with CSS transitions and animations as implemented in webkit based browsers such as Safari and Chrome. They have been submitted to the W3C for consideration in the CSS3 spec so hopefully we should see more browsers support this soon, Firefox 3.5 supports CSS transforms which was developed by the webkit people to work alongside CSS animations & transitions. To continue my effort to accomplish tasks in CSS that are usually reserved for JavaScript, such as my Futurebox and CSS based iPhone orientation detection. I have developed a CSS based version of the popular “accordion effect” that utilises the webkit CSS transitions.

Web Design References: Accessibility (Skip Page Index) Page Index: Abbreviations & Acronyms Accessibility Statements Why Pinterest isn’t just another social network “I’m still trying to understand the whole thing but there must be something to it. It’s really popular!” That’s my sister-in-law writing on Facebook in late January about Pinterest – one of the real up-and-comers in the world of social media. In case you haven’t succumbed, Pinterest is a virtual pinboard or scrapbook to which users ‘pin’ images, video, or snippets of text from other websites, or content they’ve uploaded themselves. CSS Tip: Get Any Font You Want CSS Tip: Get Any Font You Want by Larisa Thomason, Senior Web Analyst, NetMechanic, Inc. Have your heart set on using a particular font on your site? You may think your online video sales Web site won't be complete without the "Showtime" font.

l Everything You Need To Know About CSS Selector Specificity There's an obscure topic of CSS that I think many people aren't aware of. It's called 'specificity'. I suppose it's not as glamorous as rounded corners, drop shadows or animations but it's still just as important in your day to day work as any other part of CSS. So what is CSS specificity? It's a weighted value system for all of your selectors. Essentially, each piece of your selector has a value applied to it. Contrast Analyser for Windows and Mac About the Colour Contrast Analyser This native application (available for both Windows and Mac) allows you to evaluate the color visibility and contrast of foreground/background color combinations. It provides an initial pass/fail assessment against WCAG 2.0 color contrast success criteria.

The Future Of UX Design: Tiny, Humanizing Details Dan Saffer, like many designers, likes to quote Charles Eames. But unlike many designers, Saffer—Director of Interaction Design at Smart Design—wrote a whole book inspired by one of his favorite Eames quotes: "The details are not the details. They make the design." Saffer’s book, titled Microinteractions, takes Eames’s maxim to heart and then some. "For the last decade or so, designers have been encouraged to tackle 'wicked problems’ and to address systems," he tells Co.Design. "But when you’re working on such a macro scale, the details sometimes get lost, and it’s the details that make systems feel more human, and more humane.