Highlights from the DVS #Accessibility Fireside Chat
▻https://nightingaledvs.com/highlights-from-the-dvs-accessibility-fireside-chat
On July 28, 2021, the #Data_Visualization Society hosted a Fireside Chat to discuss accessibility in data visualization. I moderated a panel of #Community members..
#Loud_Numbers and The Natural Lottery
▻https://nightingaledvs.com/loud-numbers-and-the-natural-lottery
The residents of the town of Nenana in Alaska have an unusual annual tradition. Every March, as the days begin to grow longer and the..
#Accessibility #climate_change #Community #Data_Journalism #Data_Visualization #Nenana_Ice_Classic #podcast #sonification #spotlight
Dozens of scientific journals have vanished from the internet, and ...
▻https://diasp.eu/p/11625316
Dozens of scientific journals have vanished from the internet, and no one preserved them | #accessibility #archive #articles #research #science
« Recreating The Arduino Pushbutton Using SVG And ‹lit-element› » by Uri Shaked, 20.01.2020
▻https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg
#webComponents #svg #html #usability #accessibility #aria #article
Cet article est truffé d’astuces et il adresse richement l’utilisation de lit-html et lit-element pour créer un composant SVG, bien fichu et accessible qui plus est.
Pardonnez-moi, oui, je m’intéresse parfois à ces extremum de technicalité (si vous me passez encore ce néo-anglicisme de mon cru) et arcanes du web. J’adore les technologies du web en fait, suis accro.
#testing #react with #jest, jest-axe, and react-testing-library
▻https://hackernoon.com/testing-react-with-jest-axe-and-react-testing-library-accessibility-34b9
Testing React applications with jest, jest-axe, and react-testing-libraryjest and react-testing-library logosjest and react-testing-library are an increasingly used tooling pairing to test React components. We will briefly look at the differences between the two before looking at some high level examples, and how straightforward it is to add jest-axe to integrate aXe automated #accessibility testing.JestJest is a JavaScript unit testing framework, developed by Facebook to test services and React applications.jest acts as a test runner, assertion library, and mocking library.jest also provides Snapshot testing, the ability to create a rendered ‘snapshot’ of a component and compare it to a previously saved ‘snapshot’. The test will fail if the two do not match. We will talk about the pros and (...)
5 Resources to Measure Website #accessibility
▻https://hackernoon.com/5-resources-to-measure-website-accessibility-614ae14c736d?source=rss----
Some of the quickest accessibility wins can be simple fixes. But if you don’t know what to look for, they can be hard to spot.Maybe a key image on your site is missing an alt description. Maybe the headings on a page look right, but actually are in the incorrect order. Or maybe your newsletter sign up form is missing a label. Any of these issues could prevent someone from understanding your web page or completing the actions you want them to take on your site.Identifying these issues is important, which is why there are a whole slew of web accessibility checkers available to help catch these problems. I want to introduce you to five tools that you might find helpful in identifying accessibility issues. Just remember though, that automated tests can only catch 20–30% of all issues.1. WAVE: (...)
#software-development #website-accessibility #accessibility-tools #web-development
Web #accessibility : Buzzword or Reality ?
https://hackernoon.com/web-accessibility-buzzword-or-reality-c265ec82aa03?source=rss----3a8144e
Everyone wants the benefits of accessibility, but nobody wants to do the workWeb Accessibility. The unexpected lovechild of Sir Tim Berners Lee, a shoddy 12" monochrome screen that went black (and never came back) and a cat that ran away with the mouse. The cat came back, but by the time we found the mouse again, Steve Jobs decided we should all be poking at our screens instead.Rewind to August 6, 1991 — which to the snowflake generation may seem like ages ago, except it wasn’t — a mere 27 years ago, when the first web page went live, that web page was accessible. Its syntax was semantically correct, all of its content was in the DOM, it was readable by colour-blind people, dyslexics, 20–20 vision, poor vision or no vision individuals alike. It was keyboard navigable and its logical flow (...)
One line of code to remove :focus blue outline and keep #accessibility
▻https://hackernoon.com/one-line-of-code-to-remove-focus-blue-outline-and-keep-accessibility-bca
One line of code to remove :focus blue outline and maintain accessibilityEveryone encounters this problem every time they make a web page with a button… The odd and out of place blue outline around a button after it is clicked [see below]After clicking a button, the blue outline appears to indicate that it is in focus.One approach is to remove the outline with css:▻https://medium.com/media/69122725b2413cca675d3af9f32bcf18/hrefThe purpose of the outline is to improve website accessibility to those with disabilities or those who are navigating with only a keyboard, so we cannot just get rid of it altogether. We want to remove the outline only after the button is pressed.If you look around online, there are many overly complicated solutions that detect if the button is highlighted from a click (...)
Quand tu visites le #site #web d’un confrère qui a décidé d’ignorer les règles élémentaires d’ #accessibilité #accessibility #Webdesign
#ContrastFinder finds correct #color contrasts for web #accessibility (WCAG) ▻https://app.contrast-finder.org #a11y
Color Accessibility Workflows
►https://alistapart.com/article/color-accessibility-workflows
The Web Content #Accessibility Guidelines (WCAG) 2.0 contain recommendations from the World Wide Web Consortium (W3C) for making the web more accessible to users with disabilities, including #color blindness and other vision deficiencies.
One of my favorite tools is Lea Verou’s Contrast Ratio. It gives you the option of entering a color code for a background and a color code for text, and it calculates the ratio for you.
▻http://leaverou.github.io/contrast-ratio
Another great tool that has the benefit of simultaneously showing whether a color combination passes both AA and AAA compliance levels is Jonathan Snook’s Colour Contrast Check
▻https://snook.ca/technical/colour_contrast/colour.html
If you don’t care about user interface #accessibility because social #inclusiveness isn’t your cup of tea, consider that it might one day be your problem too.
capybara-accessible: Automated #accessibility testing in #RSpec and #Rails
▻https://github.com/Casecommons/capybara-accessible
colorable
▻http://jxnblk.com/colorable
Color combination contrast tester
Takes a set #color palette and shows contrast values for every possible combination. This is useful for finding safe color combinations with predefined colors and includes pass/fail scores for the #WCAG #accessibility guidelines.
Using the tabindex attribute | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
▻http://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute
The HTML tabindex attribute is used to manage keyboard focus. Used wisely, it can effectively handle focus within web widgets. Used unwisely however, the tabindex attribute can destroy the usability of web content for keyboard users.
The tabindex attribute indicates that an element can be focused on, and determines how that focus is handled. It takes an integer (whole number) as a value, and the resulting keyboard interaction varies depending on whether the integer is positive, negative or 0.
Everything Old is New « Unrepentant
►http://john.foliot.ca/everything-old-is-new
I commented that using #justified_text has some fairly serious #accessibility issues for #Dyslexics and some #screen_magnifier users, who will often see the enlarged white-spaces between words in the justified text, rather than the words themselves. The phenomenon is well known, and is referred to as “ #Rivers_of_White ”.
When I pointed out this problem, my colleague replied “I am using (CSS3) hyphenation — for browsers that support it.” followed by “Graceful degradation is that the text is still fully readable in older browsers. Dyslexics can always upgrade.“
Putting aside the fact that it may very well not be “fully readable” to the user-groups I just pointed out, the comment about “Dyslexics can always upgrade” floored me. WTF? I had originally seen the justified text in question via my smart-phone (Galaxy S III, so not some low-level feature phone), and I checked it in no less than 5 different browsers I have installed on my phone (Samsung’s native web-kit build, Dolphin, Firefox, Opera Mobile and Opera Mini), and the problem remained. (Perspicacious readers will notice one specific browser missing from that list…)
"Les dyslexiques peuvent toujours mettre à jour". Saloperie de légende urbaine, ça, que les gens peuvent mettre à jour leurs navigateurs.
Accessibility – what is it good for? | Marco’s accessibility blog
►http://www.marcozehe.de/2012/10/22/accessibility-what-is-it-good-for
This blog post is by no means about diminishing the accomplishments the #accessibility community has made. But we need to go beyond that! We need to leave our comfortable niche and turn the accessibility extra way into the #standards way. Make people use headings, correct form element labeling, and other stuff just because it is the right thing to do that benefits everyone, not because “it’s an accessibility requirement”. Accessibility needs to finally shake off the smell of being an unloved burden to meet some government criteria. Every book any web dev buys must simply state as a #best_practice, without mentioning accessibility at all, that for labeling an input one uses the label element, and that the for attribute of that label element needs to point to the id of the input to be labeled. As a test case, state that this way, a user can also click on the label to get the cursor right. Don’t bother people with screen readers at all. They don’t need to know for these things.
We must get to a point where teachers give their students lesser grade if they deliver semantically incorrect work. An excuse like “but it works” should not be enough to get a good grade.
Cent fois oui, on en est déjà bien là quand je participe à des formations.
Voir aussi, un commentaire de Kevin Potts :
The main problem, having been invested in the accessibility community since 2003, is that accessibility is seen as a checklist. Legislature such as Section 508 promotes this way of thinking — “make sure you check 0ff this, this, this and this and boom your site is accessible”. Checklists are easy to reference. Developers love them because lints and validators can be written against them.
The reality is that accessibility is a philosophy. It is a mindset. A strategy. A tenant. This is the brilliance of WCAG2.0 that most from the sidelines fail to grasp. It uses words like “perceivable” and “understandable” — abstractions that try to convey that accessibility is foundational, not something that cannot be tacked onto the end of a project.
The Only Thing Constant is Change « Unrepentant
►http://john.foliot.ca/change
I arrived, a web-accessibility specialist, to set up a program that had a title and a blank sheet of paper attached to the title. The job? Figure it out and get it done. Learn the art of herding cats, and establish web accessibility as a thing on campus. Be an evangelist, a technologist, a salesman, a politician. Make it happen. I was surrounded by a group of supportive if sometimes skeptical technology people, who were always gracious in their generosity of time to me, and for the most part openly receptive to what I was trying to do. They remain so even today, and I look back on the many successes we’ve accomplished together, and the path forward we have charted together too, and I wish you all continued success.
#Icon #font #accessibility
►http://fvsch.com/code/icon-font-a11y
When we use common image replacement techniques, including the smart ones, the user agent doesn’t know what’s the relation between the text content and a #CSS #pseudo-element or background. This is not even a “CSS is for decoration” issue. It’s a “your code lacks semantic information” issue
Review : The all-new Yahoo ! Mail web application « Marco’s accessibility blog
►http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application
What Yahoo! are delivering here is a really outstanding example of putting the #WAI-ARIA and other #HTML #accessibility techniques to very good use. WAI-ARIA has previously been deployed mainly in some enterprise/intranet or specialized public sections and gained limited exposure. Yahoo! mail is the first mainstream web application to put this technology to use and deploy it to a wide range of users worldwide.
[...]
Yahoo! Mail, along with the very accessible rich search interface, is a very good example of an all-inclusive, accessible, web application approach that puts others to shame that suggest to turn off their standard interface and use a basic one if one uses a screen reader. Needless to say, that basic interface is then severely limited in functionality. Or the same company that suggests to turn off their instant feature if one uses a screen reader, or search results might no longer be really accessible. Yahoo! are taking an inclusive design approach here that to my knowledge is unparalleled among big stock holder web app companies.
Marco Zehe est... aveugle. Le service Yahoo Mail doit être très bon, alors (parce que les experts transigent, pas les utilisateurs).
WebAIM: WebAIM: Web Accessibility for Designers
►http://webaim.org/resources/designers
The focus of #web #accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript after a site has been designed visually. Optimal accessibility should start much earlier, as part of the visual #design process. We have created an infographic that highlights a few important #principles of accessible design.
Yes, yes, and yes.
Handling duplicated links using HTML5 and WAI ARIA » iheni :: making the web worldwide
►http://www.iheni.com/handling-duplicated-links-using-html5-and-wai-aria
This month’s article over at Spotless Interactive looks at ways of handling repeated adjacent links. Typically these are image and text links linking to one page and are often found on news websites.
I look at how HTML5 block level linking can link entire areas of a page and WAI ARIA negative tabindex (tabindex=”-1″) can remove links from keyboard focus.
@notabene J’ai pas compris ce qu’il dit. S’il fait un lien autour de tout le bloc, il n’y a plus de doublon, non ?
@nhoizey tiens je ne t’avais pas répondu : on ne peut pas toujours ne faire qu’un seul lien avec un alt vide malheureusement. Dans le cas où les liens sont dupliqués, l’astuce est bonne à connaître.
@notabene j’ai failli attendre ! :-p
OK, compris que ça peut être utile...
WAVE - Web Accessibility Evaluation Tool
►http://wave.webaim.org
à tester....
#accessibility #accessibilité #web #webdev #validation #testing #tool #development #html #standards #test #reference
Inaccessibility of CAPTCHA
►http://www.w3.org/TR/turingtest
L’inaccessibilité des « CAPTCHA », Solutions de rechange aux tests de Turing sur le Web, Note de groupe de travail du W3C du 23 novembre 2005, ici traduite en français : ▻http://www.yoyodesign.org/doc/w3c/turingtest-20051123
Et mon avis en passant : ►http://romy.tetue.net/stop-captcha
#CAPTCHA #a11y #accessibilité #W3C
Access-Oriented Web Design: Building highly-interactive web apps that work for everyone | Filament Group, Inc., Boston, MA
►http://www.filamentgroup.com/lab/access_oriented_web_design_building_highly_interactive_web_apps_that_
#javascript #webdesign #design #webdev #usability #web #accessibility
