Web Accessibility Initiative (WAI) - home page Current Work (updated monthly) See What We're Working On – Accessibility Activities and Publications WCAG2ICT Note Published (2024-Oct-08) Guidance on Applying WCAG 2 to Non-Web Information and Communications Technologies (WCAG2ICT) is a completed W3C Group Note. For Wide Review: Collaboration Tools Accessibility User Requirements (2024-Jul-10) Collaboration Tools Accessibility User Requirements is ready for review. For Wide Review: Guidance on Applying WCAG 2 to Non-Web ICT (WCAG2ICT) (2024-Jul-02) WCAG2ICT is Guidance on Applying WCAG 2 to Non-Web Information and Communications Technologies (WCAG2ICT), including documents and software. Updated Resource: How People with Disabilities Use the Web (2024-Jun-24) How People with Disabilities Use the Web is updated with new user stories (personas) and new videos highlighting “Accessibility: It’s about people”. For Review: ACT Rules Format 1.1 - First Public Working Draft (2024-Jun-18) WCAG 2.2 in Dutch: Authorized Translation Published (2024-Jun-13)
Creating accessible forms You are here: Home > Articles > Forms Introduction Forms are used for many types of interactions on the web. When we talk about the accessibility of forms, we are usually referring to their accessibility to people who use screen readers or keyboards. People with other types of disabilities are generally less affected by faulty forms. It should be noted, however, that everyone benefits from a well-organized, highly usable form, especially those with cognitive disabilities. 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.
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. 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 UX Sketches and Wireframes: Introduction and Classification
Openweb.eu.org 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é. Son contenu est plus que jamais privilégié avant sa présentation graphique : un petit pas pour Handi-cv.com, un grand pas pour l'Accessibilité ! Cette action a été rendue possible grâce à l'utilisation des feuilles de style externes. Toutefois, pour mieux apprécier tous les avantages d'une bonne présentation visuelle, nous vous conseillons de tirer profit d'un navigateur moderne respectueux des standards du Web. 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 Les présentations graphiques des liens Les images Les tableaux
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. 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 Based on your Feature Report, team size and timeline, decide how many sketch studio sessions to conduct. Include a Broad Team Start Small Identify Priorities Sketch, Erase, Sketch, Erase
Accessibilité du Web - Centre de ressources et de recherche sur l'accessibilité du Web 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
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. 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. We intentionally didn’t discuss specific brands, platforms, or features. Here are highlights of what we heard: What our research taught us about people’s hopes, wants, and dreams Virtual Reality (VR)
Introduction à l'accessibilité du Web Qu'est-ce que l'accessibilité du Web ? L'accessibilité du Web signifie que les personnes handicapées peuvent utiliser le Web. Plus précisément, l'accessibilité signifie que le Web est conçu pour que ces personnes puissent percevoir, comprendre, naviguer et interagir de manière efficace avec le Web, mais aussi créer du contenu et apporter leur contribution au Web. Des limitations fonctionnelles empêchent des millions de personnes d'utiliser le Web. Actuellement, la plupart des sites Web comporte des barrières qui rendent difficile voire impossible leur utilisation par un nombre important de personnes handicapées. Pourtant, si les sites et les applications Web étaient accessibles, ces personnes pourraient pleinement les utiliser. L'accessibilité du Web vise toutes les déficiences, qu'elles soient visuelles, auditives, motrices, cognitives, neurologiques ou liées à la parole. Pourquoi l'accessibilité du Web est-elle importante ? Dans certains cas, l'accessibilité Web est exigée par la loi.
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.
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
Accueil | AccessibilitéWeb 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.