Accessibilité web : Comment rendre votre site web utilisable par tout le monde ? Améliorer l’accessibilité de votre site web vous permettra de toucher un public plus large, d’augmenter le trafic et les conversions sur votre site. Il faut toujours être conscient qu’entre 15% et 20% de la population souffrent d’un handicap, d’une forme ou d’une autre : handicap visuel, auditif, moteur… Ne pas travailler sur l’accessibilité web de son site, c’est se priver de millions de visiteurs potentiels. Dans ce guide complet, nous abordons en détail toutes les problématiques relatives à l’accessibilité web : pourquoi est-elle importante ? Quelles sont les principales recommandations et les principaux standards en matière d’accessibilité web ? Pourquoi vous devez optimiser l’accessibilité de votre site web ? Rendre son site facile d’accès a deux principaux avantages. De garantir un accès égal pour tout le monde à votre site Internet. Découvrez notre guide complet sur l’art d’optimiser les images pour le web : choix du format, compression et bonnes pratiques. #1 Le handicap visuel
slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:
Web of Strings | Inclusive Design Guides This exercise is intended to be fun and highly collaborative. To complete the required task, participants must work together and be mindful of each other's needs. How This activity can be done in an open space or on a table top depending on how large your group is and how they prefer to work. Tip: try to include participants with a broad range of needs and preferences. Tip: to calculate how many strings you need, divide the number of participants in your group by two. Tip: you need to match the size and weight of the object you are moving with the density of the web. Preparation Place the empty containers at least 1 ft from each other. Tip: the strings do not necessarily need to be held by hand. Challenge Work together as a team to transfer the object from one container to the other one without dropping it, by collaboratively lifting and moving the web of strings. Tip: feel free to explore creative ways of working together with your group to complete this challenge. Why
Introduction à WAI ARIA (traduction) Grégoire Dierendonck Cet article est destiné à des personnes ne connaissant pas ARIA. Vous devriez avoir une bonne connaissance du langage HTML et des problèmes que peuvent rencontrer les personnes handicapées sur le web. Connaître quelques application web « riches » (RIA) d’un point de vue utilisateur serait un plus. Après avoir lu cet article, vous comprendrez à quoi sert ARIA, comment l’intégrer à vos sites, et comment l’utiliser dès immédiatement et même sur le plus simple des sites pour le rendre plus accessible. Introduction Le langage HTML (HyperText Markup Language) n’a pas été conçu pour créer des applications web. Malheureusement, les techniques utilisées pour outrepasser ces limitations ne sont absolument pas accessibles. Les mises à jour sont souvent mal perçues par les personnes utilisant une technologie d’assistance. Petit historique du langage HTML Applications web Reproduction d’applications bureau Requêtes serveur en arrière plan Reproduire des composants riches (widgets) main
Color Oracle Make a Simple JavaScript Slideshow without jQuery This article was peer reviewed by Dan Prince and Chris Perry. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! “I just want to make a simple JavaScript slideshow without jQuery.” The slideshow — also known as the image carousel, the slider, or the rotating banner — is a commonly requested tutorial among people who are learning JavaScript. In this tutorial, we’ll cover the following topics: make a basic slideshow without any external libraries like jQueryunderstand UX and accessibility issues, including whether you should use a slideshow at alladd controls to your slideshow. The main benefits of not using a library for your slideshow are that your page performs better — due to less code — and you can use the slideshow anywhere without worrying about loading any extra files. This tutorial assumes you know some JavaScript, including functions, click events, and style changes. Make a Basic Slideshow The HTML The CSS Here’s how the core CSS will look:
Web Content Accessibility Guidelines (WCAG) 2.1 This section is non-normative. Additional information about participation in the Accessibility Guidelines Working Group (AG WG) can be found on the Working Group home page. How we all see colors differently—Color theory in design | Koos Looijesteijn There’s the old question: “Do you see that color the same way I see it in my mind?” To some extend this will remain a philosophical question involving the swapping of hypothetical consciousnesses between hypothetical brains. But here’s what we do know. Three reasons why people looking at one thing can see something differently 1) Cone sensitivity differs between people Cones are the cells on your retina sensing light in one of three color ranges. Sensitivity can also differ greatly from person to person. 2) Vision changes constantly Even an individual can perceive one color differently depending on the context. Time doesn’t even have to be involved. In lab experiments on researchers got people to classify colors as blue that they called purple just minutes earlier. 3) Culture defines how we see color There’s a whole cultural processing layer defining what colors we’re able to see. Depending on where children grow up, they learn different words to label colors. There's no blue in Russian.
הגדרת תפריטים בעזרת חוקי aria - טוביה שיינפלד תפריטים הם בין הדברים הראשונים שמגיעים אליהם באתר שלנו. רמת החשיבות שלהם מאוד גבוה משום שהם נקודת ההתחלה של הגולש. קיימים לא מעט סוגי תפריטים ורובם עם ממשק נוח לניווט כמעט עבור כולם. תפריטים ועיוורון. ישנם 3 רמות חשיבות בקישורים: לוגו ותפריטים. למה ההקדמה הזאת חשובה ? <nav ><ul > <li ><a href="/">Home</a></li> <li ><a href="/">tutorla's</a> <ul > <li ><a href="/">photoshop</a></li> <li ><a href="/">illustrator</a></li> <li ><a href="/">web design</a> <ul > <li ><a href="/">html</a></li> <li ><a href="/">css</a></li> </ul> </li> </ul> </li> <li ><a href="/">articals</a></li> <li ><a href="/">inspration</a></li></ul></nav> למעשה כך תוכנה קוראת מסך תקריא התפריט: list with 4 items visited link Home tutorla's list with 3 items photoshop illustrator web design list with 2 items html css out of list articals inspration תוכנה קוראת מסך אינה מבחינה בין לינק רגיל ללינק שנמצא בתפריט. כדי שעיוורים יוכלו להבין שמדובר התפריט אנחנו צריכים "להודיע" להם שמדובר התפריט. כיצד אני מבצע זאת ? או navigation landmark menu bar menu
Edit drawings with a screen reader - Docs Editors Help Note: If there are no buttons and menus at the top, press Ctrl + Shift + f (Windows, Chrome OS, or Mac). To browse the menus: Open the File menu using the shortcut key for your browser: Windows with Chrome browser: Alt + f Windows with other browsers: Alt + Shift + f Chrome OS: Alt + f Mac: First press the pass-through keys Ctrl + Option + Tab, then Ctrl + Option + f Press the right arrow to explore other menus, including Edit, View, Insert, Format, Arrange, Tools, Table, Help, and Accessibility. Tip: To get help, open the Help menu and select Get help with. From the menus, you can move to two other sets of controls: Top-level buttons: These buttons are for drawing-level actions, such as renaming, starring, sharing, or moving the drawing to a different folder.