WA
Web Accessibility - odnośniki
W tej chwili tylko odnośniki. Właściwą, merytoryczną kolejnością byłoby UX / UI / Web Accessibility / RWD / optymalizacja, ale dla mnie najważniejsza jest dostępność treści, dlatego UX/UI wylądowały na końcu.
W pierwszym rzędzie postaram się je uporządkować, potem dodam tłumaczenia WCAG 1.0, które trzeba tylko oszlifować.
Web Accessibility
WA strony
- Web Accessibility Guide | 075: Web Content Accessibility Guidelines (WCAG) 2.1 | MDN / Accessibility | Wuhcag | Web accessibility for developers | The A11Y Project - A community-driven effort to make web accessibility easier. | CMS Design System | The A11Y Project | HTML5 Accessibility - current accessibility support status of HTML5 | Accessibility Developer Guide | Ben Robertson Blog | Web Accessibility: WAI, WCAG, and Going Beyond ADA Compliance | "Deque’s Accessibility Library – aXe-core hits 1,000,000 Downloads" | AccessibilityOz | What you need to know about WCAG 2.1 | Spectrum | 24 Accessibility | WAVE Web Accessibility Tool - WebAIM: Web Accessibility In Mind | Inclusive Design 24 - Previous events | Web Axe blog and podcast on web accessibility | tota11y an accessibility visualization toolkit | Marcy Sutton: Web Accessibility Resources | Technica11y - challenges in technical accessibility | Tenon-UI Documentation | Knowbility | Resources - Level Access | Google Ułatwienia dostępu | Microsoft accessibility | IBM Accessibility Research | Scott O'Hara | Stark | "Top 5 Cross-Browser Testing Tools" | Web Accessibility: Designing Web Pages for All Users | A11y Rocks! | chromium / chromium / src / master / . / docs | Marco's Aaccessibility Blog | Adrian Roselli | Inclusive Design 24 | edx Introduction to Web Accessibility | Adrian Roselli: All Posts Tagged: accessibility | The Accessibility Internet Rally (AIR) | Polska Akademia Dostępności | Our Blog | Filament Group, Inc.
WA narzędzia
- Who can use this color combination? | AMADEO Accessibility Ready WordPress Theme | Screen Reader WCAG Accessibility Tools – Wtyczka WordPress
- Carnegie Museums of Pittsburgh - Statement About Accessibility For All
- checklist Accessibility checklist
WA artykuły
- A List Apart: "Semantics to Screen Readers" | Medium: Medium: Tagged in Accessibility | Tagged In Accessibility - "Demystifying Accessibility: Do only highly disabled people benefit from it?" | "Accessibility: Skip to main content" Web Accessibility: What a Playground Can Teach Us | Telerik: "Accessibility a Developer's User Story"; "Web Accessibility for Developers": "What It Is and Why It’s Important (Part I)", "Part II: Disability Types and Tips to Make Your Website More Accessible" | "Fix 85% of your Web Accessibility issues in 5 easy steps" | Writing CSS with Accessibility in Mind | "Microsoft open sources Accessibility Insights" (Introduction to Accessibility Insights for Web [YT 2:53]) | SFHTML5 "Accessibility Fundamentals with Rob Dodson" [YT 28:15] | DesignCourse "ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!" [YT 13:53] | "Please stop building inaccessible forms (and how to fix them)" | "CDC: 1 in 4 US adults live with a disability" | "Guidelines for Building Accessible Web Applications" | "Beyond automatic accessibility testing: 6 things I check on every website I build" | "Dark UI themes are new and cool — but are they accessible?" | "All about Web Accessibility" | "Accessibility: Skip to main content" | Jonathan Speek "How To Build Accessible HTML Tables" | "Beyoncé Was Sued Over Her Website Violating the Americans With Disabilities Act. And You Could Be Too" | Miranda Limonczenko "What is Web Accessibility and Why Does It Matter?" | Matt Stobbs "The 6 Most Common Accessibility Problems (and How to Fix Them)" | Aleksandr Hovhannisyan "Semantic HTML: Building a More Accessible Web" | Aleksandr Hovhannisyan "An Accessible Jekyll Table of Contents" | Thibaud Colas "Making Wagtail accessible" | "5 most annoying website features I face as a blind person every single day" | Chris Coyier "Inline SVG vs Icon Fonts [CAGEMATCH]" | Pankaj "WCAG Compliance: accessiBe Guide to Web Accessibility" | Oren Rofman "A complete guide on making a website accessible" | Uri Paz "Weaving Web Accessibility With Usability"
WA YT
- Front-Trends "ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson / Front-Trends 2015" [32:17] | You Gotta Love Frontend "Leonie Watson - Developer's Guide to Accessibility Mechanics" [27:44] | Front-end London "Léonie Watson: A quick & dirty introduction to ARIA - Front-end London August 2014" [19:59] | Google Chrome Developers "A11ycasts with Rob Dodson" [YT playlista 30 filmów]
- Karol Stefański "Dostępność w UX! Kilka słów o accessibility" [YT 9:29]
WA-PL
WA kolory
- WebAIM: Contrast Checker | Accessible Brand Colors | Color Safe - accessible web color combinations | Contrast Grid | Brandtools / colors | "CSS Variables + calc() + rgb() = Enforcing High Contrast Colors" | getflourish/Sketch-Color-Contrast-Analyser | "How to design an accessible color scheme" | WCAG colour contrast checker | Colblindor - Color Name & Hue | r/coolguides "I wanted to make a chart that made it easier for me to understand how different types of colour blindness affected specific colours - Here you are :)"
- Accessible Colour Contrast | A11y Color Palette | Accessible Color Spaces - Color Contrast Tool | Kevin Gutowski | Accessible Colors | WCAG 2.0 AA and AAA color contrast checker | "5 Tools for Establishing an Accessible Web Color Palette" | Color Safe - accessible web color combinations
- Stephanie Walter "Color accessibility: tools and resources to help you design inclusive products" | "A Designer’s Guide to Documenting Accessibility & User Interactions"
Optymalizacja
RWD
- Responsive Images: Use Cases and Documented Code Snippets to Get You Started | "Rozmiar Stron WWW i Responsive Web Design" | "Jak zrobić dobrą stronę: Strona responsywna - tutorial" | MDN: "Responsive images" | "Media Query & Asset Downloading Results" [2012] | "Responsive Responsive Design" [2012] | Topic: Web Usability Breadcrumbs: 11 Design Guidelines for Desktop and Mobile | Archive for the 'accessibility web standards' Category - The practical value of semantic HTML | "Responsive design And the role of development in design" | "Common CSS Issues For Front-End Projects" | Responsive Tables – How To Scale Your Site Beautifully | Automated responsive font sizes | "Responsive spacing with viewport and ch units" | "Planning for Responsive Images" | "Designing An Aspect Ratio Unit For CSS" | "19 really useful responsive web design tutorials" | cloudFour Topic: Responsive Web Design | Anna Arteeva "Principles of responsive design" | Nihar Raote "An instructive how to on writing CSS media queries" | Glint Pixel "2020 CSS Tricks | How to create responsive table using pure css and html" [YT 12:10] | Chrissie "How to build a responsive website" | The Net Ninja "Responsive Web Design Tutorials" [YT playlist 12 filmów] | Harish Rajora "Responsive Web Design: All You Need To Know" | "Przyszłość responsywnych obrazków z HTML i CSS"
RWD narzędzia
- Browser Stack | Lambda Test Free Cross Browser Testing - "A Detailed Guide On How To Use Firefox To Debug Web Issues In Android" | Screenfly / Test Your Website at Different Screen Resolutions | Am I Responsive? | Responsinator | Cross Browser Testing Tool: 1500+ | Responsive Web Design Testing Tool | Responsive Web Design Checker | Responsive Design Testing Tool | "25 Unique Designs for Mobile Profile User Interfaces" | Image-set Test | "Responsive design ground rules" | Screen Resolution Stats Worldwide | StatCounter Global Stats | Nimritee "10 Responsive Web Design Challenges And Their Solution"
RWD YT
- RWD YT The Net Ninja "Responsive Web Design Tutorials" [YT playlist 12 filmów] | The Net Ninja "Mobile-First Responsive Build (with CSS Grid)" [YT playlist 14 filmów]
Optymalizacja
- PageSpeed Insights | Google: Test optymalizacji mobilnej GTmetrix | Website Speed and Performance Optimization | WebPagetest - Website Performance and Optimization Test | mydevice.io : web devices capabilities | Website Dimensions | Responsive Image Breakpoints Generator | Minify - JavaScript and CSS minifier | Unminify | CSS Minifier | svg / svgo Node.js tool for optimizing SVG files | TinyPNG – Compress PNG images while preserving transparency | REST test test - HTTP request | "Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]" | "Is your HTML bloated? A flamegraph can tell you why" | "Chrome Dev Tools – More Advanced Tips For Better Debugging" | Learn Mobile Design - A curated list of mobile design resources | WhatCSS.info: CSS StyleSheet Pageload Analyser/Optimizer | Top Mobile App Design Tools | The Complete Guide to Lazy Loading Images | "Lazy Loading Images – The Complete Guide" | "Site Speed Tips for Performance Nerds" | Web Analytics Tools to Help You Know Your Users | LambdaTest | UX Screenshots | instant.page | Google Webmaster Central Blog | Silvestar Bistrović "How I built my first Progressive Web App (PWA). Getting the perfect Lighthouse score" | George Adamson "Boost page speed with “mindful loading” of third party scripts" | varvy.com "Enable gzip compression"
Optymalizacja narzędzia
- WebPageTest | headjs / headjs The only script in your HEAD. | DATAURL.NET | Detect Mobile Browsers | WP plugin: Resize Image After Upload
Narzędzia
- Web | Google Developers | web.dev Tools to measure Core Web Vitals | Dan Englishby "33 Best Online Web Tools For Web Developers And Programmers" | CodePen - Front End Developer Playground & Code Editor in the Browser | Brackets - A modern, open source code editor that understands web design | Codeshare.io | Repl.it - ImpressionableBewitchedEquipment | html5snippet.net/ | Share JavaScript, HTML5 and CSS | Pastebin.com | Plunker - creating, collaborating on and sharing webdevelopment ideas | Beautiful web app screenshots | Webframe Zurb: HTML Templates | Google Hosted Libraries | BuiltWith Technology Lookup | StatCounter Global Stats | gremiusRanking | Dan's Tools | MailChimp | TinyLetter Simple Collaborative Mind Maps - Coggle | Netlify: platform for automating web projects | surge.sh | ngrok - secure introspectable tunnels to localhost | Webflow | Publii | The Front-End Checklist | DebuCSSer | ProseMirror A toolkit for building rich-text editors | Slate - framework for building rich text editors | Quill Rich Text Editor | Online Banner Generator | Notable - the markdown-based note-taking app | CodyHouse | Web Design Nuggets | Grapedrop - Responsive, Free, Website Page Builder | Poet interactive environmentto mock ideas | Online Scientific and Engineering Resource | "125+ Free Web Development Tools & Resources in 2018" | Online tools | freemium.cc: Free tools for makers "7 Tools for Building Your Design System in 2020"
UX
UX
- UX: UX Magazine | Defining and Informing the Complex Field of User Experience (UX) | UXmatters :: Insights and inspiration for the user experience community | Nielsen Norman Group: UX Training, Consulting, & Research | UXBeginner.com | UX Booth | "Are breadcrumbs still fresh for UX?" | UX Collective | UX Movement - "Flow Patterns: Make Site Flows in Fine Visual Detail" | Baymard Institute: UX Research Articles UX Booth | UX Mastery | UXMatters | UXPin | Interaction Design Foundation: UX Design Articles and Books | Interaction Design Foundation Literature - "The Seven Simple Principles of Conversion Centred Design (CCD) and How to Use Them" | Prototypr: The Latest UX Design News | uxforfreelancers | UX Articles by UIE | Nick Finck | CareerFoundry | @AJSmart | Ux Bites | @AJSmart | Freelance with Janda | Laws of UX | Userfppcus - 247 web usability guidelines | LukeW Ideation + Design | Digital Product Strategy & Design
UX YT
UX artykuły
- "UX Design Process Best Practices: Documentation for Driving Design Forward — Part 6" | "UX fundamentals that I adore" | "The Most Important Rule in UX Design that Everyone Breaks" | Beth Dunn "The Five Senses of UX" | Elizabeth Chesters "UX Truth Bombs: How to prepare for hard lessons during user research" | Yuyan Duan "The ultimate guide to search UX" | Jordan Bowman "UX Design for Navigation Menus"
UI
- GoodUI | Good User Interfaces for higher conversion rates and ease of use | Pixel Perfect Precision [PDF] | User Interface Engineering - Usability Research, Training, and Events - UIE | TheTeamW - Deep Insights Into Human Behavior - The Team W Blog – Behavioral Science, Brain Science, And Design, By Susan Weinschenk, Ph.D. | Science of Great UI | devIQ | DevExpress | LukeW Ideation + Design | Digital Product Strategy & Design | Don Norman's jnd.org website / human-centered design | Little Big Details - The details are not the details | Webusability.pl | Adrian Zumbrunnen - UX / UI / Web Design | User Interfacing | "Let Users Browse Your Website with Simple, Data-Driven Lists" | Usabilla Blog | "Footers 101: Design Patterns and When to Use Each" | "Design Guide: Breadcrumbs" | Button - Press for knowledge | Learn UI Design Fundamentals, course by Gary Simon | Boxes and Arrows | Adrian Twarog "What is a Wireframe? This UX Design Tutorial Will Show You."
- Form Andrew Coyle "Design Better Forms. Common mistakes designers make and how to fix them"