Creating accessible forms You are here: Home > Articles > Forms Introduction Forms are used for many types of interactions on the web. Ensure Forms are Logical and Easy to Use Forms should be clear and intuitive. Ensure Forms are Keyboard Accessible Many users can only use a keyboard to navigate and use the web. Associate Form Labels with Controls Text labels should generally describe the function of each form control. The <label> element is used to associate a text label to a form control. Important Screen reader users generally navigate through a form using the Tab key to jump from form control to form control. Groupings of form controls, typically groups of related checkboxes and radio buttons, sometimes require a higher level description (such as "Shipping Method" for a group of shipping option radio buttons).
Tutorial: The Art of UX Sketching | Toptal If you’ve done any sort of serious creative work, you are all too familiar with creative block. It feels like hitting a brick wall: None of the ideas you’re able to visualize are good enough, or can’t work in real life. For designers, the feeling is all too familiar. However, like any complicated problem with no clear solution, a smart process can make all the differences. This is where UX sketching comes in. UX sketching is a crucial, yet often overlooked, aspect of user-experience design. In this post, I intend to cover everything you need to know about UX sketching, including the following points: Introduction to UX sketches and wireframes UX sketching basics, tools and techniques Clarifying sketches with notes, annotations, numbers UX sketching tips and tricks Mini-methods designed to boost quality and productivity All you need to know about Wireflows A quick guide to UX flow sketching UX Sketching is a Two-step Process Idea Generation Detailization and Refinement Sketch: Idea Generation
Astuces d'accessibilité Handi-cv.com Nous nous efforçons de rendre Handi-cv.com suffisamment accessible aux personnes déficientes, dans le respect des standards. Ainsi, son développement est en constante évolution et poursuit de nouveaux tests pour se conformer aux règles d'accessibilité. Pour preuve, les récentes versions ambitionnent à gravir de nouvelles marches vers l'accessibilité. Certaines différences peuvent être observé selon le navigateur utilisé. Si, pour une raison ou une autre, vous rencontrez des difficultés d'accès, Contactez-nous. Les liens En survolant chaque lien, des informations complémentaires s'affichent dans une info-bulle, pour que leur intitulé puisse être interprété également par les navigateurs non visuels. Des « liens d'évitement », visibles uniquement dans la source, permettent à Lynx et JAWS d'éviter la barre de navigation et d'accéder directement au contenu principal et à différentes ancres. Les présentations graphiques des liens Les images Les tableaux Un commentaire est fourni pour chaque tableau.
Sketch Studios for Better Interface Design I’m a collaborator. I like to get multiple heads on a project to see what insight and perspectives they bring that can build on mine. So naturally, one of my go-to activities to get a project off the ground is running a sketch studio. Sketch studios are a collaborative exercise where the project team designs and iterates an interface together in a structured format. They can be as simple as a three-person one-hour sketch fest, or as extensive as a series of workshops with a larger group. However you decide to approach them, sketch studios are an incredible way to get team members invested and excited about a project. Sounds good, right? Define Your Objectives A good sketch studio needs clear objectives, and starting with research helps establish those objectives. Here is an example of a Feature Report we created for a recent intranet redesign project. The Feature Report helps define the problems you’re trying to solve. Keep It Focused Include a Broad Team Start Small Identify Priorities
Accessibilité du Web - Centre de ressources et de recherche sur Applying human-centered design to emerging technologies When you dream of the future, what do you see? Do you dream about concurrent odometry or horizontal plane detection? Do you fantasize about hot words and utterance capture? Probably not. Most likely, when you dream of the future, you imagine the places you can go, the things you can do, and the people you can be… just like you did when you were a kid. Earlier this year, Google Play approached IDEO to find out what emerging technologies like Virtual Reality, Augmented Reality, digital assistant, and ephemeral apps (apps that you don’t have to download and install) may actually be good for. Since humans are at the center of IDEO’s design work, we started by talking to people and asking questions about their hopes for the future of these technologies. We spoke to creators and stakeholders of these four technologies (experts, artists, and developers), as well as people ranging from elementary school kids to early adopters and technophobes. Here are highlights of what we heard:
Une popup accessible Lien (ouvre pop1)Lien ( ouvre pop2 ) (sous forme d'infobulles ici.) En survolant les liens, vous ouvrez une boîte de contenu au-dessus du document, sans ouvrir de nouvelle fenêtre. Elle est donc affichée même avec les navigateurs qui interdisent les popups. Cette boite peut contenir n'importe quel contenu (images, textes, tableaux, etc.) et peut adopter n'importe quelles dimension, couleurs ou position. Attention, ce contenu doit rester léger, car contrairement aux vraies popups, il est chargé en même temps que la page. Les boîtes sont affichées/masquées grâce à un script JavaScript placé hors du document. Visionner ou téléchager les fichiers : popup2.js | popup.css | popup.zip Lien (ouvre pop3)Lien ( ouvre pop4 ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. venenatis et, elementum et, sapien. sit amet consectetuer dolor magna ac ante. Autre popup sur la page
Our Symbols guidelines in Sketch: Move fast and don't break things Okay, maybe this is a bit dramatic. A meeting with the previous designer usually sorts most things out, but let’s be honest: it’s not a bullet-proof system. Especially when your team designs multiple design systems a year, it’s important to have every designer on the same page on how to organise things, regardless of the project they’re working on. “What are the components used in this design? The goal Our goal was to define an approach on how to set up and organise symbols. With the guidelines we eventually defined, any of our designers is able to hit the ground running when they’re assigned to, for example, design the UI of a new feature for an existing product. So, today we’ll have a closer look! When to create a symbol Only create a symbol if we really benefit from it. But not every component should be a symbol. Keep things simple When ‘Nested Symbols’ were first introduced to Sketch, we immediately explored every possibility. Let’s give an example. Lock nested symbols Group by Component
Les tableaux Un peu d'Histoire A l'origine et en simplifiant, le langage HTML a été créé pour s'affranchir des différences de matériel et pour pouvoir échanger facilement de l'information quelque soit le système d'exploitation ou le navigateur utilisé par le visiteur. Au départ le langage HTML était très simple et les possibilités d'enrichissement graphique assez faibles. Les deux sociétés les plus importantes (Netscape et Microsoft) ont développé chacun de leur côté un navigateur graphique (Netscape Navigator et Internet Explorer) en ajoutant des fonctionnalités pas forcement compatibles entre elles. Un des principe de bas du langage HTML est que celui-ci ignore simplement les balises qu'il ne connaît pas et cela sans générer de message d'erreur. Un web accessible ! L'immense majorité des internautes utilise aujourd'hui un navigateur graphique (Netscape, Internet Explorer, Mozilla, Opera...) mais pour certaines personnes, l'usage de ces navigateurs est impossible.
Framer - The Complete Guide to Wireframing Though wireframes and prototypes are often used interchangeably, they actually perform two distinct functions at opposite ends of the design cycle. In this guide, we’ll share everything you need to know about: Wireframing vs. Prototyping Wireframing Tools and Tips 4 Steps to Create Your First Wireframe Wireframing Resources Wireframing vs. Prototyping Wireframes are the backbone of any project and generally created during the early stage ideation phase. Conversely, prototyping refers to the process of designing an interactive experience, which can range from low to high-fidelity. Wireframing Tools and Tips Wireframes can be both pencil and paper or low-fidelity (digitally made in programs such as Framer). Here are a few tools to consider for your wireframing needs: Wireframe CC — A minimalist interface for sketching wireframes that don’t distract from the product experience. 4 Steps to Create Your First Wireframe 1. 2. 3. 4. More Wireframing Resources
Une infobulle accessible Lien (ouvre pop1)Lien ( ouvre pop2 ) Basé sur l'exemple du tutoriel d'alsacréation : des "popups" accessibles. Comme le contenu de ces "popups" se trouve dans la page, pourquoi ne pas les transformer pour remplacer les infobulles title controversées. En survolant les liens, vous ouvrez une boîte de contenu au-dessus du document, sans ouvrir de nouvelle fenêtre. Cette boite peut contenir n'importe quel contenu (images, textes, tableaux, etc.) et peut adopter n'importe quelles dimension, couleurs. Les boîtes sont affichées/masquées grâce à un script JavaScript placé hors du document. Le Javascript est placé dans un fichier externe bull.js Celui-ci a besoin du fichier bull.css L'infobulle est positionnée automatiquement. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. venenatis et, elementum et, sapien. sit amet consectetuer dolor magna ac ante. Autre infobulle sur la page De l'anglais, to pop up : apparaître, surgir.
Why You Should Never Center or Right Align Your Logo Many designers assume that center or right aligning their website logo will make their brand more memorable. Research has shown this assumption is not true at all. In fact, straying from a left aligned logo can make your brand less memorable and even your site harder to navigate. Right Aligned Logos Weaken Brand Recall A study conducted by the Nielson Norman group concluded that more users remember brands when their logos are placed on the left rather than on the right. They found the “average lift in brand recall was 89%” when the logo is on the left. When users scan sites, their visual gaze leans toward the left. Centered Logos Impede Navigation to Homepage The Nielson Norman group also did a study on center aligned logos. Not only that, but they also impede the user’s ability to navigate to the homepage. Users have a conditioned habit of clicking the leftmost element to get to the homepage. Left Aligned Logos Work Best Cultural Differences Following Conventions Design Products Affiliates
Groupe de travail sur l'interopérabilité « Quiconque appose sur une page du web un logo du type : Cette page est optimisée pour le navigateur X est quelqu'un qui semble souhaiter revenir à l'époque préhistorique d'avant le web, lorsque l'on avait très peu de chances de pouvoir lire un document écrit sur un autre ordinateur, un autre traitement de texte, ou un autre réseau. »- Tim Berners-Lee dans Technology Review, Juillet 1996 Définitions L’interopérabilité est la capacité que possède un produit ou un système, dont les interfaces sont intégralement connues, à fonctionner avec d'autres produits ou systèmes existants ou futurs et ce sans restriction d'accès ou de mise en œuvre - Définition issue des travaux du groupe de travail Interop de l'AFUL. Degrés d'opérabilité Compatibilité La compatibilité est la possibilité pour deux systèmes de types différents de communiquer ensemble. Standard de fait Lorsqu'un acteur devient dominant dans un domaine, les autres acteurs font en sorte d'être compatibles avec lui. Interopérabilité Présentation
CA Technologies France Webcast Channel Les entreprises adoptent les dernières technologies et méthodologies en matière de développement afin de livrer des applications et fonctionnalités innovantes qui répondent aux attentes de leurs clients et exigences du marché. Les enjeux majeurs pour les entreprises aujourd’hui sont de plusieurs ordres: - Déployer des versions d’application plus rapidement et plus souvent - Réduire les erreurs manuelles pour fournir des livraisons de qualité et de stabilité supérieures - Réduire les coûts liés aux déploiements d’applications - Améliorer la visibilité sur les opérations de déploiement sur l’ensemble du cycle de livraison - Promouvoir la collaboration et l’alignement entre les équipes de développement, de tests et de production