Accessibility Hacks Wordcamp Manchester October 2018

The document discusses new features in HTML5 including semantic elements, form elements, and microdata. Some key points: 1. HTML5 introduces new semantic elements like <header>, <footer>, <nav>, <article>, and <section> to define different parts of a page and improve semantics and accessibility. 2. New form input types are added like email, url, tel, number, date to support validation and new UI widgets. Attributes like placeholder, autofocus, and autocomplete improve the form experience. 3. Microdata builds on microformats to embed structured data using attributes like itemscope, itemtype, and itemprop to identify items, properties and values for search engines and APIs

This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.

Scalable Vector Graphics (SVG) is an open standard, XML-based vector image format for two-dimensional graphics.

SVG is often used for content, linked icons, and buttons. Learn which coding methods perform best across a variety of screen reader and browser combinations. By @DennisL

Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.

HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5

WAI-ARIA provides semantics and accessibility information to web pages and applications developed with technologies like HTML, JavaScript, and CSS. It defines roles, states, and properties that can be applied to elements to define their purpose and relationships. This allows assistive technologies like screen readers to better understand the structure, functionality and relationships within complex JavaScript-driven applications and dynamic content.

This document introduces the Accessible Rich Internet Applications (ARIA) specification. It discusses: 1) The need for ARIA to make complex web applications accessible to assistive technologies like screen readers, as traditional HTML elements may not adequately convey semantics. 2) Common interactive widgets and how ARIA attributes like role, state, and properties help expose their purpose and functionality. 3) Best practices for applying ARIA, including using native HTML where possible, and ensuring custom interactive elements are keyboard navigable and have accessible names. The document provides examples of how to make common structures and widgets like buttons, menus, sliders accessible with ARIA. It emphasizes ARIA enhances, rather than replaces, traditional

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.

This presentation discusses using CSS to style HTML elements on a webpage. It focuses on positioning and styling an image. Specifically, it demonstrates how to add a border around an image, change the image size, position the image using static, relative, fixed and absolute positioning, float images left and right, and group images using the HTML <div> tag. It also mentions testing the CSS styling in Google Chrome and Internet Explorer browsers.

The document discusses HTML5 game development. It covers various topics like game concepts, HTML5 components for games, developing a game step-by-step and advanced topics. It focuses on HTML5 canvas for graphics, local storage for data, and describes functions for animations, interactions, controls and other elements needed for game development. The document provides examples for drawing, colors, images and text on the canvas.

The document discusses improvements and changes to the Sizzle selector engine in jQuery 1.8. Key points include: - Matching and filtering performance improved by around 10% on average. - ID selections rooted at an element improved by 300%. - Bugs were fixed in how different browsers handle certain selectors with querySelectorAll and matchesSelector. - Support for combining multiple combinators in selectors was improved. - More changes are planned prior to release, including implementing a compiler to avoid re-looping elements.

The document discusses building a static website in two and a half days using Nuxt and Tailwind CSS. Nuxt allows building static sites with Vue components, and Tailwind CSS is a utility-first CSS framework. The author had no experience with either but was able to create responsive pages for a podcast site that met requirements. Key features of Nuxt include pre-rendering, layouts, and assets handling. Tailwind CSS provides utilities for layout, typography, backgrounds and more. PurgeCSS was used to remove unused CSS and reduce file sizes.

The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.

Angular Js Advantages.Developed by Google - Most Popular, SPA (Single Page Applications), Data Binding,Code Reduction, Easy to Test.

This document discusses using jQuery with XPages. It begins with an introduction to jQuery, explaining that it is a popular JavaScript library that simplifies document manipulation, events, animation, and AJAX. It then compares jQuery to Dojo and provides guidance on when each should be used. The document demonstrates how jQuery works via its API and methods. It also explains how to add jQuery to an XPages application either directly in code or via a theme. Finally, it discusses jQuery plugins and how they can provide ready-made functionality to solve requirements.

The document discusses the history and evolution of HTML and web technologies from 1991 to present. It provides an overview of new semantic elements, multimedia capabilities, and client-side storage APIs introduced in HTML5. It also addresses techniques for detecting HTML5 support and workarounds for unknown elements in older browsers like Internet Explorer.

The final spec of html5 won't be ready until 2022, but you don't have to wait that long to start using it today and build really advanced web apps.

Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

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.

You know it's important for your web project to be accessible to people who use all kinds of assistive technology to access the internet. But all the guidelines for web accessibility you can find don't go much beyond "make sure all your images have alt text", and all the resources you can find treat "accessibility" as a synonym for "making your site work in a screen reader". You know there are other things you should be doing and other forms of assistive technology you should be accomodating, but all the best practices documents are a complicated morass of contradicting information (if you can find best practices documents at all.) Have no fear! This tutorial gives you a number of concrete steps to take to make things more accessible. This presentation has downloadable notes and exercises available at http://denise.dreamwidth.org/tag/a11y . Video of the talk should be available later.

The document is a presentation about D3 and SVG technologies. It includes sections on networking opportunities, an interactive presentation format, polls about experience levels with D3 and SVG, examples of force-directed graphs and animated SVGs using D3, and details on implementing drag and drop as well as mouseover highlighting in a D3 visualization. The presentation source code is provided on GitHub and other examples are referenced, including alternatives to SVG. It concludes with another poll and a question and answer period.

Here are the steps to build a basic horizontal navigation menu bar: 1. Create an unordered list <ul> with class="menu" 2. Add list items <li> for each menu item 3. Style the <ul> with display:inline-block and border-bottom 4. Style the <li> with display:inline-block, padding and hover effect 5. Add a class="current" to highlight the active page 6. Use a border-left on .current to create a left arrow Let me know if any part needs more explanation! Building menus is a common task and these techniques will serve you well.

The document summarizes an upcoming presentation on HTML5 and PHP. It lists the group members and covers the following topics in the presentation agenda: HTML5 elements like Canvas, SVG, drag/drop, geo-location, video, audio; PHP syntax, variables, and strings; and differences between SVG and Canvas. It provides code examples and explanations for several HTML5 elements and features including Canvas, SVG, drag/drop, geo-location, video, audio, and form handling.

presportal.ru is the biggest Russian knowledge bank about presentations. We publish best presentations.

This document summarizes Vitaly Friedman's talk on responsive design techniques and tricks. The talk covered resolution independence using SVG/icon fonts, content choreography with Flexbox, compressive images that maintain quality at different sizes, conditional loading of assets based on breakpoints, and lazy loading of JavaScript and social buttons. It also discussed maintaining aspect ratios for images and videos across screens, and serving different video files for different devices. The overall message was that responsive design requires a new mindset and pragmatic solutions rather than rigid rules.

The document provides an overview of new features in HTML5, including several new semantic elements (e.g., <header>, <nav>, <article>), multimedia elements (<video>, <audio>), form controls, and APIs (e.g., geolocation, local storage). It also compares the <canvas> and <svg> elements, and discusses features like offline application caching, drag and drop, and web workers.

Mario Heiderich gave a presentation on active content injection using SVG files. He discussed how SVG files are XML-based and support scripting, allowing execution of JavaScript. This enables security issues like XSS. Browser implementations of SVG are inconsistent, with different levels of script support depending on how SVG files are deployed (inline, via <img>, etc). Exploits discussed SVG vulnerabilities in Firefox, Opera, and Chromium. Defense is difficult due to lack of documentation and filters, and new vectors are found weekly. Future work proposed a SVG purifier and raising awareness of issues.

Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..

This document provides an introduction to HTML5 and its new features. It discusses HTML5 as the successor to HTML 4.01 and XHTML 1.1, bringing new tags, features, and APIs. These include new structural elements, forms and validation, native audio and video, canvas, web storage, offline applications, geolocation, and drag and drop. It also outlines some of the new and updated HTML5 elements and semantic elements such as article, aside, footer, nav, progress, and meter. Finally, it provides examples of applications that can utilize various HTML5 features.

This document provides an introduction to HTML5 and its new features. It discusses HTML5 as the successor to HTML 4.01 and XHTML 1.1, bringing new tags, features, and APIs. These include new structural elements, forms and validation, native audio and video, Canvas API, web storage, offline applications, geolocation, and drag and drop. It also outlines some of the new and updated HTML5 elements and semantic elements such as article, aside, footer, nav, progress, and meter. Examples are given of how to implement these new features in HTML5.

CSS3 provides new features for layout, typography, visual effects and graphics. Some key features include multiple column layout, rounded corners, box shadows, opacity, gradients, reflections, transforms and animations. Browser support for CSS3 is evolving with many properties requiring vendor prefixes. CSS3 brings more powerful and flexible options for designing user interfaces beyond what is possible with CSS2.

HTML5 and CSS3 offer some great features that everyone is clamoring to use. However, not everyone can simply rip apart their site and redo all of their markup and styling across the board. There are some quick wins, especially with CSS3, to be had that you can integrate into your site without rewriting your whole entire site.

End-users are shallow and vein when it comes to applications. Whether you are selling apps in the marketplace, or trying to engage business users, without a sexy user experience, it can be hard to get people interested. HTML5, although very practical and functional as a platform, can do wonders when it comes to making sexy software. In this session, we will take a deeper dive into the HTML5 tools that can make your application a looker and really look good. We will learn how to take a regular HTML5 application and turn it into a rich user experience that stands out in the crown in HTML5 application using features like SVG, Canvas, and Audio/Video.

I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers

The document provides information about the CSE3150 module which covers HTML5 and CSS3. It includes the following topics: - Module I syllabus covers HTML5 syntax, attributes, events, forms, storage, canvas, and web sockets as well as CSS3 colors, gradients, and transforms. - An assignment to develop an HR policy website is given. - Comparisons between HTML4 and HTML5 are provided focusing on new elements, multimedia, forms, storage and responsive design in HTML5. - Information about code editors such as VS Code, Sublime Text, Atom, Brackets, and WebStorm is listed.

A collection of tools used to check websites for accessibility, and it some cases improve the accessibility of a website. All the tools are free, so have a go.

Testing websites for accessibility can be a daunting undertaking if it's not something you're familiar with. The WCAG 2.1 accessibility guidelines can be hard to follow. But actually, many aspects of digital accessibility are not that complicated. In this talk I move away from the impenetrable guidelines, and introduce a simpler series of yes/no questions that anyone can answer about their own website. In the time available it can't cover every single potential accessibility problem, but instead I focus on some of the most common, and most serious accessibility issues that I've found when reviewing websites. Where possible, I'll also talk about how you can fix any issues founds.