ARIA design patterns When UX meets a11y Funka Accessibility Day 2016.

Slides:

Advertisements

Similar presentations

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.

Advertisements

JQuery UI A11Y Tips, Tricks and Pitfalls jQUery UI ARIA Hackathon 2011 Hans Hillen, TPG.

User Interface 4 Fundamentals

1 After completing this lesson, you will be able to: Create a database. Create a table using the Table Wizard. Create and modify a table in Design view.

Creating dynamic and accessible content in Drupal 7 using WAI-ARIA Sarah Pulis Web Accessibility Evangelist DruaplCon | Content Authoring |

What is a Dialog box? A Dialog box is a window or “form” that contains other child windows or “controls” that have a specific appearances and pre-defined.

Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Building Great Looking.

Web Content Management System Website Maintenance Demonstration Introduction to Macromedia Contribute Jamie Uprichard.

Dreamweaver Basics In this section you will learn how to:

FIS 318/618: Financial Systems & Databases Forms and Reports Oakland University School of Business Administration Accounting and Finance Joe Callaghan.

Spring /6.831 User Interface Design and Implementation1 Lecture 8: Generating Designs.

ICS 665 Jesse Abdul. jQuery UI Overview  jQuery UI javascript library Includes all UI component functionality  jQuery UI CSS framework Includes standard.

ARIA Support on Mobile Browsers

Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.

Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.

Scripted, Tab Accessible Tree Control Hierarchical view of data via tree control. Keyboard Navigation from initially closed tree to view above with focus.

© 2008 IBM Corporation Emerging Internet Technologies Real World Accessibility with ARIA Becky Gibson Web Accessibility Architect.

Lesson 10: Working with Tables and Forms. Learning Objectives After studying this lesson, you will be able to:  Insert a table in a document  Modify,

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Microsoft Word 2000 GEH MIT! How to create a web page/web site.

XP Chapter 4 Succeeding in Business with Microsoft Office Access 2003: A Problem-Solving Approach 1 Collecting Data for Well-Designed Forms Chapter 4 “Making.

Real World Accessibility Becky Gibson Dojo Accessibility Lead IBM Web Accessibility Architect.

Copyright Ó Oracle Corporation, All rights reserved. 55 Working with Data Blocks and Frames.

2005 Adobe Systems Incorporated. All Rights Reserved. 1 Accessibility for Rich Internet Applications Andrew Kirkpatrick Corporate Accessibility Engineering.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

Web Technologies Website Development Trade & Industrial Education

TERMINALFOUR SiteManager Introduction January, 2014.

Print Screen Photos. Button Button 2 Button 3.

Guidelines and Prototypes CS774 Human Computer Interaction Spring 2004.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

®® Microsoft Windows 7 Windows Tutorial 5 Protecting Your Computer.

DataFlex Web Framework Symposium – Part 2 Web Framework Overview John Tuohy Development Team

Micro sites Basic training guide. Welcome to your Micro site. Here you can create your own personal page within the Countrywide website. When you first.

Microsoft Word 2000 Presentation 5. Major Word Topics Columns Tables Lists.

Microsoft Access Lesson 1 Lexington Technology Center February 11, 2003 Bob Herring On the Web at

JavaScript Framework for Rich Apps in Every Browser Maura Wilder Joan Wortman

Review of last session Add text to your website Add text to your website Title Title Paragraph Paragraph Title and paragraph Title and paragraph Add photographs.

Mrs. Knopp Library Media Specialist.  The term wiki comes from the phrase Wiki- Wiki which is the Hawaiian word for quick.  A wiki is a website that.

Access Forms and Queries. Entering Data in Your Table  You can add data to your table in Datasheet view, by typing in the columns and rows.  This.

William H. Bowers – Using Controls Cooper 26.

User Interface Components Lecture # 5 From: interface-elements.html.

RIA and Web2.0 Development with no Coding Juan Camilo Ruiz Senior Product Manager Development Tools.

GRITS 2011: Benny Chan. Browsers as Application GUI  Modern Browsers are basically an HTML and a power JavaScript rendering engine.  As the internet.

MS-Access XP Lesson 4. Modifying Queries 1.Select query in queries 2.Click design button or Right click on query and click design view 3.Change query.

XP Tutorial 8 New Perspectives on Microsoft Windows XP 1 Microsoft Windows XP Object Linking and Embedding Tutorial 8.

ARIA Support on Mobile Browsers Jonathan Avila Chief Accessibility Officer, SSB BART Group.

Fall UI Design and Implementation1 Lecture 17: Toolkits.

Web Page-Chapter 6 Forms. Inserting a Form  Display the Insert bar  Click the arrow to the right of the display category on the Insert bar and then.

Week 8.  Form controls  Accessibility with ARIA.

Web Site Development - Process of planning and creating a website.

Microsoft PowerPoint 2010 for Microsoft Windows Basically it’s a computerised slide show!

Learning Aim C.  In this section we will look at how text, tables, forms and frames can be used in web pages.

1 Word Processing Intermediate Using Microsoft Office 2000.

S15-1 ADM , Section 15, August 2005 Copyright  2005 MSC.Software Corporation SECTION 15 DIALOG BOX BUILDER.

Software Operating System Applications BIOS.

Presented by: Bryan Garaventa, Accessibility Fellow

2 At the top of the zone in which you want to add the Web Part, click Add a Web Part. In the Add Web Parts to [zone] dialog box, select the check box of.

User Interface Components

2 At the top of the zone in which you want to add the Web Part, click Add a Web Part. In the Add Web Parts to [zone] dialog box, select the check box of.

Getting Started with Dreamweaver

COMMON CONTROLS A control is a child window that an application uses in conjunction with another window to enable user interaction. Controls are most often.

Development The Foundation Window.

Microsoft PowerPoint 2016 for Microsoft Windows

Working Knowledge Training

IBM SCPM Basic Navigation

For use on your feedback page

Adjust The Document Style in MS word

Microsoft Windows 7 Basics

CMPE 280 Web UI Design and Development April 16 Class Meeting

Presentation transcript:

ARIA design patterns When UX meets a11y Funka Accessibility Day 2016

I speak anglais very bien 2

Back in the past : DHTML 3

Software world 4

5

Section 508 6

ARIA to the rescue 7

Understanding : Role, state and property 8

RTFM 9

Design patterns Accordion Alert Alert Dialog or Message Dialog Auto Complete Button Checkbox Combo Box Date Picker Dialog (Modal) Dialog (Non-Modal) Dialog (Tooltip) Grid (Simple Data Tables) Actionable, Sortable Column Header in a Grid Landmark Navigation Link Listbox Media Player Menu or Menu bar Menu Button Popup Help (aka Bubble Help) Radio Group Rich Text Editor Site Navigator – General Site Navigator – Tree Site Navigator - Tabbed Style Slider Slider (Multi-Thumb) Spinbutton Tab Panel Toolbar Tooltip Widget Tree Grid Tree View Window Splitter Wizard 10

Dialog (modal) 11

Advantages for your project 12

Advantages for users 13

Your web site in

Design patterns in

Design patterns for users ?? 16

Let’s have a look VS 17

Time to make a choice 18

Questions 19

Credits P2 : Paris 16 (cc-by-sa)Paris 16 P4 : Moriline (cc-by-sa)Moriline P5 : GNOME icon artists (cc-by-sa)GNOME icon artists P6 : FEMA Photo LibraryFEMA Photo Library P7 : Fritz Saalfeld (cc-by-sa) / McDonald’sFritz Saalfeld P8 : James Lee (cc-by) / IKEAJames Lee P11 : Lisa Yarost (cc-by)Lisa Yarost P12 : Princess and Princes (cc-by) / DisneyPrincess and Princes P13 : Stéphanie Walter (cc-by-sa)Stéphanie Walter P14 : OverlordQOverlordQ P15 : Kotivalo (cc-by)Kotivalo P16 : Paul L Dineen (cc-by) / MatrixPaul L Dineen 20