The 5 Layers of Web Accessibility

May 5, 2009Download as ZIP, PDF48 likes27,258 views

In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility. Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone. Get more information about the event here: http://skillsmatter.com/event/ajax-ria/web-accessibility

The document discusses making JavaScript accessible. It states that JavaScript content should be at least as accessible without JavaScript, nothing should be withheld from non-JavaScript users, and assistive technologies should be able to use the page. It emphasizes that websites must work without JavaScript first, and that CSS should not be used for interaction or hiding content. The document then introduces WAI-ARIA as a way to add semantics and meaning to elements for screen readers through roles, properties, and live regions. It encourages using WAI-ARIA but also not relying on it exclusively.

WebGL For Game Development Spring 2013Tony Parisi

Tony Parisi is a serial entrepreneur and consultant architect who has authored a book on WebGL. He provides an overview of using WebGL for game development, including what WebGL is, popular frameworks like Three.js, techniques for loading models, animating scenes, implementing interaction, creating particle systems, and integrating 2D and 3D. He also discusses considerations for making WebGL games robust and putting all the pieces together.

Jazz up your JavaScript: Unobtrusive scripting with JavaScript librariesSimon Willison

This document discusses using JavaScript libraries to write unobtrusive scripts. It begins with a brief history of JavaScript development and introduces concepts like unobtrusive scripting and progressive enhancement. It then provides examples of basic unobtrusive scripts and discusses challenges like cross-browser event handling. The bulk of the document focuses on JavaScript libraries and their benefits, listing common library features and some of the most popular libraries like jQuery. It concludes with a specific example using Yahoo's YUI library to add AJAX functionality to a login form.

lecture5tutorialsruby

This document is a lecture on JavaScript that discusses core concepts like statements, objects, arrays, functions, events, validation, frameworks, libraries, debugging tools, and compression tools. It provides an overview and references for further reading on topics like the JavaScript language, DOM manipulation, events, validation with regular expressions, and popular JavaScript frameworks and libraries.

Vue js for beginner Chandrasekar G

Vue JS is a progressive framework for building user interfaces. It uses a component-driven approach and features like reactivity and computed properties that make it possible to build desktop, mobile, and web applications. Some key features include reactive data binding, conditional rendering, mixins, slots for content distribution, and Vuex for global state management between components. Asynchronous and dynamic components add flexibility. Vue shares similarities with React in using virtual DOM and components but differs in file structure and size.

How I learned to stop worrying and love embedding JavaScriptKevin Read

Front-End 개발의 괜찮은 선택 ES6 & React지수 윤

The document discusses the history and challenges of front-end development. It notes that initially there were many different front-end tools that made selection difficult. Frameworks became popular but could be incompatible and difficult to decouple. It suggests that ES6 and React provide a good foundation for building front-ends, as React code can be written in ES6 and they avoid issues of other frameworks.

Real World Web componentsJarrod Overson

The document discusses web components, which include HTML templates, custom elements, shadow DOM, and HTML imports. Web components allow the creation of reusable custom elements with their own styles and DOM structure. They provide encapsulation and help avoid issues with global namespaces. While browser support is still emerging for some features, polyfills exist and frameworks like Polymer make web components accessible today. Web components represent an important evolution of the web that will improve how code is structured and shared.

HTML5DevConf 2013 (October): WebGL is a game changer!Iker Jamardo

WebGL is getting everywhere. The recent announcement from Microsoft that Internet Explorer is finally supporting WebGL is just another example of the importance that this technology is getting among web technologies. For the first time, web developers can access complex graphics features that were only available for native game development. But, what are the real advantages of WebGL over other web based games development technologies? What are the different game engines that support it? Is WebGL ready for cross-platform game development? Can only 3D games benefit from WebGL? All these questions and more will be answered in this talk full of code snippets and useful tips that will try to show that the web environment (and specially WebGL) can be great for developing successful games, and could become in a real game changer.

Getting Started with HTML 5 Web workersFlumes

This document introduces web workers, which allow JavaScript code to perform processor-intensive calculations without blocking the user interface (UI) thread. Web workers allow web pages to run multiple scripts simultaneously, improving performance for tasks like live syntax highlighting, crunching large amounts of data, and smooth animations. They work by executing scripts in background threads separate from the main script, so the UI thread is not blocked. Developers create and communicate with worker threads to offload processing work from the UI thread.

In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm

This document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server sides. It explains that isomorphic JavaScript is environment-agnostic and does not depend on browser- or server-specific properties. Popular libraries like Handlebars, Backbone, and React can be used isomorphically. Building isomorphic apps improves performance, enables search engine crawling of single-page apps, reduces code duplication, and increases flexibility. The document outlines how tools like Browserify and build systems like Grunt can be used to bundle code for both environments.

HTML5 Dev Conf 2013 PresentationIker Jamardo

This document discusses cross-platform game development using HTML5. It begins by introducing Ludei, a company that develops games for iOS and Android using HTML5. It then discusses the benefits of using HTML5 for a single codebase that can run across platforms. However, it notes the current status of HTML5 has limitations due to browser fragmentation and performance issues on mobile. It recommends using a game engine and optimizing resources. Ludei offers a solution that runs games outside the browser for a native-like experience across iOS and Android with tools for monetization, social integration and more.

Building Isomorphic JavaScript Apps - NDC 2015Eirik Vullum

This document discusses isomorphic JavaScript applications. Isomorphic apps allow developers to write code that runs both on the server and client using the same JavaScript. This avoids maintaining separate codebases and allows search engines to index content rendered on the server. The document outlines how isomorphic apps handle rendering, routing, data fetching and modules in a consistent way across server and client. It provides an example of building a simple isomorphic app and demonstrates core concepts like rendering, routing and data fetching.

Vue.jsJadson Santos

The document provides an overview of Vue.js, including: - Vue.js is a progressive framework for building user interfaces that focuses only on the view layer. - It is easy to integrate Vue.js into existing projects or with other libraries. - Vue.js allows developers to progressively adopt capabilities as needed rather than requiring adoption of the entire framework upfront like some other frameworks. - The document then covers various Vue.js concepts like directives, components, routing, communication between components, and connecting Vue.js to a backend.

General Assembly Workshop: Advanced JavaScriptSpike Brehm

The document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server. It provides examples using libraries like Underscore.js and Handlebars.js isomorphically. Frameworks like Meteor, Mojito, and Rendr are introduced that support building isomorphic apps. The benefits are around performance, SEO, and code maintainability. The presentation concludes with a demo of building features into an sample isomorphic blog application.

Building Isomorphic Apps (JSConf.Asia 2014)Spike Brehm

Over the past year or so, we’ve seen the emergence of a new way of building JavaScript web apps that share code between the web browser and the server, using Node.js — a technique that has come to be known as "isomorphic JavaScript.” There are a variety of use cases for isomorphic JavaScript; some apps render HTML on both the server and the client, some apps share just a few small bits of application logic, while others share the entire application runtime between client and server to provide advanced offline and realtime features. Why go isomorphic? The main benefits are performance, maintainability, reusability, and SEO. This talk shares examples of isomorphic JavaScript apps running in the wild, explore the exploding ecosystem of asset building tools, such as Browserify, Webpack, and Gulp, that allow developers to build their own isomorphic JavaScript apps with open-source libraries, demonstrate how to build an isomorphic JavaScript module from scratch, and explore how libraries like React and Flux can be used to build a single-page app that renders on the server.

Single Page Application (SPA) using AngularJSM R Rony

How to make Ajax work for youSimon Willison

The document discusses Asynchronous JavaScript and XML (Ajax) and how it can be used to retrieve data from a server without reloading the entire web page. It provides an overview of Ajax fundamentals including the XMLHttpRequest object, DOM manipulation, and different data transport options. It also recommends using a JavaScript library to simplify making Ajax requests instead of writing raw XMLHttpRequest code.

Harness jQuery Templates and Data LinkBorisMoore

This document discusses using jQuery Templates and Data Link to build dynamic data-driven browser applications. It describes how jQuery Templates can be used to render templates from data but offers limited interactivity. jQuery Data Link allows binding data to HTML but has no templating. The presentation previews a new approach called JsViews that integrates Templates and Data Link to provide both fast rendering of templates to static HTML strings as well as fully interactive and responsive views through two-way data binding between templates and JavaScript data objects.

WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08Tim Stephenson

Accessible Javascript using Frameworks - Barcamp London 5Dirk Ginader

This document discusses making JavaScript accessible. It emphasizes that accessibility starts with accessible markup and ensuring the page works without JavaScript. JavaScript should enhance usability and accessibility, not reduce it. Frameworks can help by unifying APIs, providing ready components, and extensive testing for stability, usability and accessibility including with screen readers. The document provides examples of accessible JavaScript implementations and frameworks.

What is HTML 5?Susan Winters

Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details. "What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5. You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.

JsViews - Next Generation jQuery TemplatesBorisMoore

Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data. jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.

Chrome enchanted 2015Chang W. Doh

This document contains slides from a presentation on Polymer and modern web APIs. The slides discuss how Polymer uses web components to build reusable custom elements, and how this allows for component-based development. They provide examples of popular elements like <paper-tabs> and <core-toolbar> that are used as building blocks. The slides also showcase several production uses of Polymer at Google scale, including the Google Santa Tracker application. They emphasize how Polymer leverages modern web platform APIs to build fast, modular, and powerful applications.

Learning from the Best jQuery PluginsMarc Grabanski

The document discusses lessons learned from examining popular jQuery plugins. It summarizes 30 top plugins, describing why each was created and how it grew. Key takeaways are that authors build plugins to make something better, for fun/exploration, or client needs. Managing features and user feedback is challenging. The best plugins have great demos, documentation, browser support testing, and are fun. The author is available for questions.

SxSW 2015Mike McNeil

How did a small, completely self-funded team build a web framework that became more popular than comparable tools with million-dollar budgets? By welcoming the outsiders. Mike will recount how Sails.js grew from an internal tool to one of the most popular frameworks for Node.js, without forgetting its roots. In this talk, Mike will reflect on the experiences he and his team have had building and managing an open-source Node.js framework, Sails.js. He'll discuss the success they've had attracting interlingual developers to Sails, and share some lessons and difficulties they've encountered migrating a new generation of developers from PHP, Java, .NET and Rails to Node.js. There will be discussion of examples from both sides of the spectrum addressing community-related and technical issues with a highlight about overcoming the "maintaining interest" challenge.

An Introduction to VuejsPaddy Lock

ActiveDOMFelix Geisendörfer

The document discusses using jQuery to map database columns to DOM elements to allow easy manipulation of data in the DOM. It recommends making the DOM represent data semantics, abstracting DOM interaction, and using JSON for data transfer. Key aspects are mapping database columns to getter and setter functions for corresponding DOM elements, and using this mapping to build plugins for common operations like getting, setting, adding and deleting data in the DOM.

Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader

Web Accessibility Gone Wild (Now Even MORE Wilder!)Jared Smith

More Related Content

What's hot (20)

HTML5DevConf 2013 (October): WebGL is a game changer!Iker Jamardo

Getting Started with HTML 5 Web workersFlumes

In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm

HTML5 Dev Conf 2013 PresentationIker Jamardo

Building Isomorphic JavaScript Apps - NDC 2015Eirik Vullum

Vue.jsJadson Santos

General Assembly Workshop: Advanced JavaScriptSpike Brehm

Building Isomorphic Apps (JSConf.Asia 2014)Spike Brehm

Single Page Application (SPA) using AngularJSM R Rony

How to make Ajax work for youSimon Willison

Harness jQuery Templates and Data LinkBorisMoore

WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08Tim Stephenson

Accessible Javascript using Frameworks - Barcamp London 5Dirk Ginader

What is HTML 5?Susan Winters

JsViews - Next Generation jQuery TemplatesBorisMoore

Chrome enchanted 2015Chang W. Doh

Learning from the Best jQuery PluginsMarc Grabanski

SxSW 2015Mike McNeil

An Introduction to VuejsPaddy Lock

ActiveDOMFelix Geisendörfer

HTML5DevConf 2013 (October): WebGL is a game changer!Iker Jamardo

Getting Started with HTML 5 Web workersFlumes

In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm

HTML5 Dev Conf 2013 PresentationIker Jamardo

Building Isomorphic JavaScript Apps - NDC 2015Eirik Vullum

Vue.jsJadson Santos

General Assembly Workshop: Advanced JavaScriptSpike Brehm

Building Isomorphic Apps (JSConf.Asia 2014)Spike Brehm

Single Page Application (SPA) using AngularJSM R Rony

How to make Ajax work for youSimon Willison

Harness jQuery Templates and Data LinkBorisMoore

WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08Tim Stephenson

Accessible Javascript using Frameworks - Barcamp London 5Dirk Ginader

What is HTML 5?Susan Winters

JsViews - Next Generation jQuery TemplatesBorisMoore

Chrome enchanted 2015Chang W. Doh

Learning from the Best jQuery PluginsMarc Grabanski

SxSW 2015Mike McNeil

An Introduction to VuejsPaddy Lock

ActiveDOMFelix Geisendörfer

Viewers also liked (20)

Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader

Web Accessibility Gone Wild (Now Even MORE Wilder!)Jared Smith

Javascript done rightDirk Ginader

CMS 210: Introduction to Web AccessibilityMontana State University

This document provides an introduction to web accessibility. It discusses what web accessibility is and how universal design makes things easier for everyone by reducing fatigue, increasing speed, decreasing errors and learning time. It notes that 8.5% of the population has a disability affecting computer use and how lack of internet access can negatively impact lives. It then covers various categories of disabilities and assistive technologies. The rest of the document discusses specific accessibility guidelines for images, color, contrast, video and audio, headings, links, tables and PDFs. It emphasizes the importance of alternative text, high contrast, captions, transcripts, proper HTML structure and making sure content is understandable without its visual design.

Can Steven Hawking Use your Dojo App?bgibson

Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesAltoros

Five Tools to Know About When Developing Software for Social NetworksAltoros

Five Ways To Measure Your Programmers PerformanceAltoros

The document discusses developing an effective performance management system. It notes that the stages of development include: 1. Diagnosis of the organization's culture, management style, processes, and strategic plans. 2. Designing the system to include processes for setting goals, measuring competencies, linking performance to rewards, and documentation. 3. Pilot implementation and introduction of the full system with an education plan and defined responsibilities.

Soergel oa week-2014-lightningDavid Soergel

This document presents a computational method for estimating the population structure of viruses using pyrosequencing reads. The method involves four steps: 1) aligning reads to a reference genome, 2) correcting sequencing errors in the reads, 3) reconstructing haplotypes consistent with the reads, and 4) estimating the frequency of each haplotype in the population. The method is validated on pyrosequencing data from four HIV populations, with over 5000 reads each, by comparing the estimated populations to those obtained from clonal sequencing.

Introduction to ARIAVinod Tiwari

WAI-ARIA defines additional attributes that can be added to HTML elements to convey custom semantics and make web content and applications more accessible to people with disabilities. It provides landmark roles to identify major sections, widget roles for advanced controls, and properties for dynamic content and interactions. ARIA should be used to progressively enhance the accessibility of interfaces while maintaining valid semantic HTML as a baseline.

Introduction to accessibilityJoseph McLarty

This document provides an introduction to accessibility. It discusses different types of disabilities, understanding accessibility barriers, and the Accessibility for Ontarians with Disabilities Act (AODA). It covers the Web Content Accessibility Guidelines (WCAG) 2.0 and places to start improving accessibility, such as adding text alternatives, using semantic HTML, providing captions, and ensuring sufficient color contrast. Resources for further information on accessibility are also listed.

Anatomy of an accessible carousel: everyone's responsible!Access iQ

Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Dylan Wilbanks

The moment we start creating a website, we’re setting ourselves up for failure later. Bad code creates middle of the night fire drills. Lack of thinking about accessibility gets our employer sued. Not thinking ahead on mobile generates rework. We accept this as the normal course of business — but is there any way we could prevent (or lower) this cost? Is there anything we can learn from the building codes that dictate how our built environment is constructed? A quick tour of how we got where we are with the web, and perhaps some valuable takeaway points.

HTML5's ARIA and a Web-Accessible Dropdown WidgetDennis Lembree

The document discusses making dropdown menus accessible. It begins with an introduction of the speaker and an overview of accessibility and why it's important. It then discusses ARIA and its role in improving accessibility of modern web technologies. The document provides a simple example of using landmark roles and a more complex example of building an accessible dropdown menu with HTML, CSS, JavaScript, and ARIA attributes. It concludes with a demonstration of the dropdown menu working with a screen reader and contact information.

[Access U 2010] HTML5 & AccessibilityChristopher Schmitt

This document discusses making HTML5 and canvas more accessible. It provides examples of using the HTML5 <canvas> element to draw shapes and charts, but notes that canvas poses accessibility challenges as it does not inherently expose content to assistive technologies like screen readers. The document suggests progressive enhancement approaches like using HTML tables with CSS/JavaScript to render visualizations, while keeping the data accessible in the table structure. It also links to resources that discuss making canvas more accessible through alternative text, labels, and programmatic access to drawn content.

Making JavaScript AccessibleDennis Lembree

Getting Things Done for Technical Communicators at TCUK14Karen Mardahl

How To Build An Accessible Web Application - a11yBosDennis Lembree

Dennis Lembrée gave a presentation on building accessible web applications. He covered topics like HTML semantics and structure, CSS design principles, JavaScript accessibility, ARIA roles and properties, and writing for accessibility. He used his own web application Easy Chirp as an example of an accessible site and discussed how it works across different browsers, devices, and assistive technologies.

Strategic Approach to IT AccessibilityInnoTech

Accessible Video in The Enterprise John Foliot

Increasingly video content is becoming part of the enterprise web environment. The promise of HTML5's video element was supposed to solve a lot of the issues around serving videos to the web. But has it succeeded? And what of Accessibility? This seminar will cover the state of video delivery on the web today, the issues, the promises, and, importantly, how to ensure that it all meets accessibility requirements.

Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader

Web Accessibility Gone Wild (Now Even MORE Wilder!)Jared Smith

Javascript done rightDirk Ginader

CMS 210: Introduction to Web AccessibilityMontana State University

Can Steven Hawking Use your Dojo App?bgibson

Five Mistakes to Avoid in Creating User Interfaces for Mobile DevicesAltoros

Five Tools to Know About When Developing Software for Social NetworksAltoros

Five Ways To Measure Your Programmers PerformanceAltoros

Soergel oa week-2014-lightningDavid Soergel

Introduction to ARIAVinod Tiwari

Introduction to accessibilityJoseph McLarty

Anatomy of an accessible carousel: everyone's responsible!Access iQ

Open Web Camp 2014: On Fireproof, Future-Proof, Failure-Proof Things.Dylan Wilbanks

HTML5's ARIA and a Web-Accessible Dropdown WidgetDennis Lembree

[Access U 2010] HTML5 & AccessibilityChristopher Schmitt

Making JavaScript AccessibleDennis Lembree

Getting Things Done for Technical Communicators at TCUK14Karen Mardahl

How To Build An Accessible Web Application - a11yBosDennis Lembree

Strategic Approach to IT AccessibilityInnoTech

Accessible Video in The Enterprise John Foliot

Similar to The 5 Layers of Web Accessibility (20)

the 5 layers of web accessibility - Open Web Camp IIDirk Ginader

Dirk Ginader, part of the Yahoo! Accessibility Taskforce, will talk about the “5 Layers of Web Accessibility”. He extents the commonly known 3 layers model consisting of HTML, CSS and JavaScript with 2 new layers for more accessibility. He shows how easy it can be to make a website or web application more accessible by following simple rules. see: http://openwebcamp.org/agenda/#5_layers_of_accessibility

Building a game engine with jQueryPaul Bakaus

Advanced Web Graphics with CanvasJason Harwig

Yahoo! On Microsoft .NET 3.0 and Microsoft Expressiongoodfriday

Skill Session - Web Multi Devicefilirom1

Responsive web design & mobile web development - a technical and business app...Atos_Worldline

The document discusses responsive web design and mobile web development. It recommends creating a single page web application that is optimized for all devices as a long term goal. It also discusses challenges like different screen sizes, browsers, and touch vs mouse interactions across diverse devices. The document advocates adapting the web experience according to the device using responsive design principles.

Usability in the GeoWebDave Bouwman

This document discusses how web design firms can compete with internal GIS teams by providing web-based GIS (WebGIS) applications. It notes that WebGIS requires learning new tools like JavaScript, AJAX, and RESTful services. To protect their work, internal GIS teams need to learn these new web technologies and prioritize usability over features to create responsive applications. The document advocates for an iterative development process with a focus on performance and usability testing.

Develop an app for Windows 8 using HTML5Soumow Dollon

The document provides 9 steps to migrate an existing HTML5 web page to a Windows 8 app: 1. Package the code and assets into a ZIP file for distribution. 2. The app will run sandboxed without full privileges inside the WWAHost process. 3. HTML5, CSS3, and JavaScript features have similar support to IE10, plus Windows Runtime APIs. 4. Windows Runtime provides object-oriented APIs for building apps directly on the kernel. 5. WinJS is a JavaScript library for helpers, controls, animations and more. 6. Use built-in Windows controls for a native Metro style interface. 7. Support multiple resolutions and orientations with responsive design and media

Echo HTML5Nathan Smith

Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev

This document provides an overview and comparison of WinJS and PhoneGap for developing Windows Store apps. It discusses the key components of WinJS like controls, layouts, animations and styling. It also explains how PhoneGap allows developing Windows Store apps using web technologies by providing access to native device APIs via a native web view. While WinJS and PhoneGap differ in their APIs, the document emphasizes they can both be used to create valid Windows Store apps and developers should choose based on preference and code portability needs. It encourages mixing frameworks freely as long as platform guidelines are followed.

Powerful tools for building web solutionsAndrea Tino

Responsive designJohn Doxaras

This document discusses responsive web design techniques including: - Using viewports and media queries to adapt layouts for different screen sizes. - Sizing images fluidly using max-width: 100% so they are responsive. - Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns. - Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals. - Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.

Html 5 mobile - nitty grittyMario Noble

This document provides an overview of HTML5 best practices for mobile design. It begins with introductions and outlines the session agenda. The presenter then discusses high-level principles like universal design and progressive enhancement. Specific techniques covered include viewport meta tags, media queries, scalable images, HTML5 tags, and touch-friendly guidelines. CSS topics include grids, backgrounds, gradients, and transitions. JavaScript behaviors like navigation, forms, and geolocation are also reviewed. Useful frameworks, polyfills, and testing tools are presented. The overall message is that mobile design requires an adaptive, user-centered approach through careful content structuring, responsive presentation, and unobtrusive behavior.

Responsive & Responsible: Implementing Responsive Design at Scalescottjehl

Scott Jehl of Filament Group discussed building responsive and responsible websites. He advocated for a layered approach using progressive enhancement. This involves a basic mobile-first experience enhanced for newer browsers. Images and layout adapt to different screensizes using responsive design principles. Accessibility, performance, and usability were highlighted as key areas of responsibility.

Real solutions, no tricksJens Grochtdreis

WebGL: GPU acceleration for the open webpjcozzi

Responsive design and retina displaysEli McMakin

CSS3: the new style councilChris Mills

This document discusses CSS3 and its new features. CSS3 is made up of modules that add functionality on top of CSS2.1. Some key features covered include drop shadows, opacity, RGBA/HSLA colors, border-radius, transitions, transforms, media queries, web fonts, and animations. The presenter encourages using CSS3 now as most browsers support many of its features and provides ways to work around any issues. Modernizr is recommended to help with feature detection.

Windows 8 for Web DevelopersGustaf Nilsson Kotte

Windows 8 for Web Developers discusses using JavaScript and HTML5 to build Metro style apps for Windows 8. Key points include: - HTML5, CSS, JavaScript, and client frameworks like WinJS can be used to build the app experience. WinJS provides Metro styled controls and utilities. - Apps are packaged and distributed using the .appx package format. This contains the app code and manifest. - WinJS provides a library of controls, utilities for navigation, and an application model to manage the app lifecycle. Controls are touch enabled and styled for Metro. - CSS3 Grid Layout can be used for page layout, replacing floats. Media queries allow styling for different device states.

Academy PRO: HTML5 API graphicsBinary Studio

the 5 layers of web accessibility - Open Web Camp IIDirk Ginader

Building a game engine with jQueryPaul Bakaus

Advanced Web Graphics with CanvasJason Harwig

Yahoo! On Microsoft .NET 3.0 and Microsoft Expressiongoodfriday

Skill Session - Web Multi Devicefilirom1

Responsive web design & mobile web development - a technical and business app...Atos_Worldline

Usability in the GeoWebDave Bouwman

Develop an app for Windows 8 using HTML5Soumow Dollon

Echo HTML5Nathan Smith

Win j svsphonegap-damyan-petev-mihail-mateevMihail Mateev

Powerful tools for building web solutionsAndrea Tino

Responsive designJohn Doxaras

Html 5 mobile - nitty grittyMario Noble

Responsive & Responsible: Implementing Responsive Design at Scalescottjehl

Real solutions, no tricksJens Grochtdreis

WebGL: GPU acceleration for the open webpjcozzi

Responsive design and retina displaysEli McMakin

CSS3: the new style councilChris Mills

Windows 8 for Web DevelopersGustaf Nilsson Kotte

Academy PRO: HTML5 API graphicsBinary Studio

More from Dirk Ginader (13)

Making your Angular.js Application accessibleDirk Ginader

1. Angular.js has a reputation for being inaccessible, but with the right techniques it can be made accessible. 2. Key techniques include using plain semantic HTML, ARIA roles and properties, keyboard support, and the ngAria module. 3. Angular Material and accessibility testing tools like the Chrome Accessibility Developer Tools and accessibility testing in Protractor can help make Angular applications more accessible.

Teach your Browser new tricksDirk Ginader

Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Dirk Ginader

Google’s Dirk Ginader thinks great developers are lazy, and there’s nothing wrong with that. After all, would you rather spend your time working on the mundane stuff — like minification, linting, compilation, unit testing, etc — or actually developing your code? In this presentation, Dirk will show you how to set up the Grunt JavaScript Task Runner so that you and your team can focus on the fun!

Let Grunt do the work, focus on the fun!Dirk Ginader

The document discusses how Grunt can be used as a JavaScript task runner to automate repetitive tasks like minification. It provides examples of configuring Grunt tasks like Uglify to minify files and integrating it with package.json for an easy setup. Developers are encouraged to use Grunt as it allows configuring tasks in JavaScript instead of XML, is fast to set up, and helps focus on important work instead of repetitive tasks.

HTML5 Dev Conf - Sass, Compass & the new Webdev toolsDirk Ginader

The document discusses the author's experience with CSS preprocessors and tools like Sass, Compass, Livereload and Codekit. It highlights some key features of Sass like mixins, variables and nested rules that make writing CSS more enjoyable. Sass allows defining reusable styles and parameterizing values like colors, reducing repetitive code. LiveReload monitors files for changes and instantly refreshes browsers without reloading pages. These tools have made front-end development more productive.

Sass, Compass and the new tools - Open Web Camp IVDirk Ginader

This document discusses the author's experience with CSS preprocessors like Sass and tools like LiveReload. It begins by showing the author's initial skepticism of preprocessors but realization that writing browser prefixes manually is tedious. The author is then introduced to features of Sass like mixins, variables, and parameterization that allow writing CSS more efficiently and maintainably. Sass and tools like LiveReload are shown to automate tasks like prefixing and live reloading of pages on file changes.

Javascript done right - Open Web Camp IIIDirk Ginader

The document discusses what makes for "good" JavaScript from a developer perspective. It argues that good JavaScript should be understandable, reusable, extensible, optimized, secure, internationalized, optional, and accessible. It provides examples and recommendations for each of these qualities, such as using clear naming and documentation to improve understandability, writing code in a modular and structured way to improve reusability, and using frameworks to avoid reinventing patterns. It also discusses performance optimizations like reducing DOM reflows and different techniques for modifying the DOM efficiently.

The accessibility features of Yahoo! FinanceDirk Ginader

Das Web Als Datenbank Mit Yql Und PipesDirk Ginader

In der Zeit von Mashups und Hacks ist nichts wichtiger als Daten. Mithilfe der richtigen Werkzeuge kann einfach das ganze Internet als standardisierte Datenquelle genutzt werden. Dirk Ginader zeigt uns, wie man mit Yahoo! Pipes und YQL einfach und komfortabel alles vom RSS Feed bis zur HTML-Seite als API nutzen, vermischen und damit Neues erzeugen kann. Nie war es einfacher, umfangreiche datengetriebene Applikationen zu erstellen als heute. http://it-republik.de/konferenzen/webtech09/speaker/#4386

Die 5 Ebenen Barriererfreier Web EntwicklungDirk Ginader

Es ist ein weit verbreiteter Irrglaube, dass JavaScript und Barrierefreiheit sich ausschließen würden. Assistive Technologien können sehr wohl mit JavaScript umgehen. Richtig angewandt, kann JavaScript nicht nur zugänglich sein, sondern sogar helfen, Barrieren weiter zu reduzieren. Man muss aber einige Regeln dabei beachten. Dirk Ginader sagt uns, welche das sind und zeigt uns, wie man JavaScript dazu nutzen kann, um eine Webseite für alle interessanter und nutzbarer zu machen. http://it-republik.de/konferenzen/webtech09/speaker/#4386

Avoiding common Accessibility mistakesDirk Ginader

Accessible Javascript mit Frameworks - Best of Accessibility 2008Dirk Ginader

Accessible Javascript - Barcamp Brighton 2Dirk Ginader

This document provides guidelines for making JavaScript accessible, including: 1) Semantically marking up content so it works without scripts and can be understood by assistive technologies. 2) Considering what functionality can be achieved with page reloads before using JavaScript. 3) Ensuring a baseline experience works for all before progressively enhancing with JavaScript. 4) Updating screen readers when content is changed with JavaScript to keep assistive technologies aware.

Making your Angular.js Application accessibleDirk Ginader

Teach your Browser new tricksDirk Ginader

Let Grunt do the work, focus on the fun! [Open Web Camp 2013]Dirk Ginader

Let Grunt do the work, focus on the fun!Dirk Ginader

HTML5 Dev Conf - Sass, Compass & the new Webdev toolsDirk Ginader

Sass, Compass and the new tools - Open Web Camp IVDirk Ginader

Javascript done right - Open Web Camp IIIDirk Ginader

The accessibility features of Yahoo! FinanceDirk Ginader

Das Web Als Datenbank Mit Yql Und PipesDirk Ginader

Die 5 Ebenen Barriererfreier Web EntwicklungDirk Ginader

Avoiding common Accessibility mistakesDirk Ginader

Accessible Javascript mit Frameworks - Best of Accessibility 2008Dirk Ginader

Accessible Javascript - Barcamp Brighton 2Dirk Ginader

Recently uploaded (20)

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

Build Your Own Copilot & Agents For DevsBrian McKeiver

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

Mobile App Development Company in Saudi ArabiaSteve Jonas

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

AI and Data Privacy in 2025: Global TrendsInData Labs

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Build Your Own Copilot & Agents For DevsBrian McKeiver

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Editor's Notes

#56: over 90 different roles to map existing OS concepts onto your Markup
#58: article Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on. banner Site-orientated content, such as the title of the page and the logo. complementary Supporting content for the main content, but meaningful in its own right when separated from the main content. For example, the weather listed on a portal. contentinfo Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. main Content that is directly related to or expands on the central content of the document. navigation Content that contains the links to navigate this document and/or related documents. search This section contains a search form to search the site.
#60: aria-valuemin Stores the lowest value a range may have. aria-valuemax Stores the highest value a range may have. aria-valuenow Stores the current value in a range. aria-valuetext Stores readable text to help the user understand the context. For example, \"30 dollars\" . aria-labelledby Stores the id attribute of a text label containing an appropriate prompt for this widget.
#62: off This is the default value, and indicates that the region is not live. <ul aria-live=\"off\"> polite This is normal operation and the expected behaviour for live regions. A value of polite indicates that it is not necessary to respond until user completes their current activity. <ul aria-live=\"polite\"> assertive This value is a higher priority than normal but does not necessarily interrupt the user immediately. <ul aria-live=\"assertive\">
#64: off This is the default value, and indicates that the region is not live. <ul aria-live=\"off\"> polite This is normal operation and the expected behaviour for live regions. A value of polite indicates that it is not necessary to respond until user completes their current activity. <ul aria-live=\"polite\"> assertive This value is a higher priority than normal but does not necessarily interrupt the user immediately. <ul aria-live=\"assertive\">
#65: off This is the default value, and indicates that the region is not live. <ul aria-live=\"off\"> polite This is normal operation and the expected behaviour for live regions. A value of polite indicates that it is not necessary to respond until user completes their current activity. <ul aria-live=\"polite\"> assertive This value is a higher priority than normal but does not necessarily interrupt the user immediately. <ul aria-live=\"assertive\">

The 5 Layers of Web Accessibility

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to The 5 Layers of Web Accessibility (20)

More from Dirk Ginader (13)

Recently uploaded (20)

Editor's Notes