Focusing on Focus

•

0 likes•111 views

Chris DeMars

Accessibility talk that talks about focus styles and accessibility for the web and software.

Internet

I the
#DeveloperCommunity
Chris DeMars ! @saltnburnem
💚

Focusing On Focus
Twitter: @saltnburnem | Site: chrisdemars.com
Chris DeMars ! @saltnburnem

Chris DeMars
UI Developer
Chris DeMars ! @saltnburnem

9
Twitter: @TaleFTScript | Site: tftscript.com

Question Time
Chris DeMars ! @saltnburnem

20% of people have a disability
Chris DeMars ! @saltnburnem

Numeronym
A c c e s s i b i l i t y
A 1 2 3 4 5 6 7 8 9 10 11 y
A11y
Chris DeMars ! @saltnburnem

What is accessibility?
Chris DeMars ! @saltnburnem

What is accessibility?
web
⌄
Chris DeMars ! @saltnburnem

“Web accessibility means that people
with disabilities can use the Web.”
https://www.w3.org/WAI/intro/accessibility.php
Chris DeMars ! @saltnburnem

Open Web
=
Inclusive Web
=
Web for all!
Chris DeMars ! @saltnburnem

“Web accessibility means that
EVERYONE can use the Web.”- Me (Chris DeMars)
Chris DeMars ! @saltnburnem

“The web is not a barrier to people
with disabilities, it is the solution..”
http://webaim.org/articles/pour/
Chris DeMars ! @saltnburnem

Chris DeMars | @saltnburnem
Federal Website Accessibility Lawsuits by State in 2017
0
100
200
300
400
AZ CA FL GA IL MA NH MI NJ NY OH PA PR TX VA
2471588
335
41215109
325
96
Total Number of Suits Nationwide: At least 814
NumberofLawsuits
http://bit.ly/2Ds4EPd

Focus?
:focus
Chris DeMars ! @saltnburnem

Why do we need
focus?
Chris DeMars ! @saltnburnem

DesignerDeveloper
Chris DeMars ! @saltnburnem

Don’t Do It!
Chris DeMars ! @saltnburnem

Eric Meyer’s Reset
Chris DeMars ! @saltnburnem

What about
Normalize?
Chris DeMars ! @saltnburnem

:focus-ring
=
:-moz-focusring
Chris DeMars ! @saltnburnem

:focus-visible
Chris DeMars ! @saltnburnem

Importance of Focus
Chris DeMars ! @saltnburnem

Any keyboard operable user interface has a
mode of operation where the keyboard focus
indicator is visible.
https://https://www.w3.org/TR/WCAG21/#focus-visible
Chris DeMars ! @saltnburnem

Browsers&Focus
Chris DeMars ! @saltnburnem

Chrome Mouse Focus
Chris DeMars ! @saltnburnem

Chrome Keyboard Focus
Chris DeMars ! @saltnburnem

Firefox Mouse Focus
Chris DeMars ! @saltnburnem

Firefox Keyboard Focus
Chris DeMars ! @saltnburnem

Safari Mouse Focus
Chris DeMars ! @saltnburnem

Safari Keyboard Focus
Chris DeMars ! @saltnburnem

Edge 16 Mouse Focus
Chris DeMars ! @saltnburnem

Edge 16 Keyboard Focus
Chris DeMars ! @saltnburnem

Tabindex
tabindex=-1 tabindex=0 tabindex=1
Chris DeMars ! @saltnburnem

Focus Styles
Borders Background Font
Chris DeMars ! @saltnburnem

Focus Visible
Polyfill
https://github.com/WICG/focus-visible
Chris DeMars ! @saltnburnem

Focus Within
Chris DeMars ! @saltnburnem

Awesome People!
Marcy Sutton
Alice Boxhall
Rob Dodson
Chris DeMars ! @saltnburnem

Awesome Companies!
Deque
The Paciello Group
IBM
Chris DeMars ! @saltnburnem

Resources
https://bit.ly/2KxP4VO
Chris DeMars ! @saltnburnem

Thank You!Chris DeMars | @saltnburnem
Slides CodePen
https://bit.ly/2AOJGO6 https://bit.ly/2rebkfn

Recently uploaded

The Rise of Subscription-Based Digital Services.pdf

e-Market Hub

TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.

Tortogel

audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk

lolsDocherty

Statistical Analysis of DNS Latencies.pdf

OndejSur

In today's interconnected digital landscape, safeguarding your online assets has become paramount. With cyber threats evolving rapidly, businesses and individuals alike must adopt robust security measures to protect sensitive information and maintain trust with their stakeholders. This article delves into the realm of cyber security services, unveiling effective strategies to fortify your digital presence and mitigate risks effectively.

Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence

PC Doctors NET

AI Generated 3D Models | AI 3D Model Generator

3DailyAI1

Production 2024 sunderland culture final - Copy.pptx

ChloeMeadows1

I’ll See Y’All Motherfuckers In Game 7 Shirt

rahman018755

GOOGLE Io 2024 At takes center stage.pdf

Arihant Webtech Pvt. Ltd

Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...

APNIC

Premier Mobile App Development Agency in USA.pdf

appinfoedgeca

iThome_CYBERSEC2024_Drive_Into_the_DarkWeb

Jie Liau

Thank You Luv I’ll Never Walk Alone Again T shirts

rahman018755

Reggie miller choke t shirtsReggie miller choke t shirts

rahman018755

Free scottie t shirts Free scottie t shirts

rahman018755

Bug Bounty Blueprint : A Beginner's Guide

Varun Mithran

Development Lifecycle.pptx for the secure development of apps

cristianmanaila2

Recently uploaded (17)

The Rise of Subscription-Based Digital Services.pdf

TORTOGEL TELAH MENJADI SALAH SATU PLATFORM PERMAINAN PALING FAVORIT.

audience research (emma) 1.pptxkkkkkkkkkkkkkkkkk

Statistical Analysis of DNS Latencies.pdf

Cyber Security Services Unveiled: Strategies to Secure Your Digital Presence

AI Generated 3D Models | AI 3D Model Generator

Production 2024 sunderland culture final - Copy.pptx

I’ll See Y’All Motherfuckers In Game 7 Shirt

GOOGLE Io 2024 At takes center stage.pdf

Registry Data Accuracy Improvements, presented by Chimi Dorji at SANOG 41 / I...

Premier Mobile App Development Agency in USA.pdf

iThome_CYBERSEC2024_Drive_Into_the_DarkWeb

Thank You Luv I’ll Never Walk Alone Again T shirts

Reggie miller choke t shirtsReggie miller choke t shirts

Free scottie t shirts Free scottie t shirts

Bug Bounty Blueprint : A Beginner's Guide

Development Lifecycle.pptx for the secure development of apps

Featured

PEPSICO Presentation to CAGNY Conference Feb 2024

Neil Kimberley

Content Methodology: A Best Practices Report (Webinar)

contently

How to Prepare For a Successful Job Search for 2024

Albert Qian

A report by thenetworkone and Kurio. The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).

Social Media Marketing Trends 2024 // The Global Indie Insights

Kurio // The Social Media Age(ncy)

The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands. It’s important that you’re ready to implement new strategies in 2024. Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024. You’ll learn: - The latest trends in AI and automation, and what this means for an evolving paid search ecosystem. - New developments in privacy and data regulation. - Emerging ad formats that are expected to make an impact next year. Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape. If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.

Trends In Paid Search: Navigating The Digital Landscape In 2024

Search Engine Journal

From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world. With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively. The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage. Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience. See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers See the original article on Forbes here: http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b

5 Public speaking tips from TED - Visualized summary

SpeakerHub

Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world. Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance. For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age. Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.

ChatGPT and the Future of Work - Clark Boyd

Clark Boyd

Getting into the tech field. what next

Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search Intent

Lily Ray

How to have difficult conversations

Rajiv Jayarajah, MAppComm, ACC

Introduction to Data Science

Christy Abraham Joy

Time Management & Productivity - Best Practices

Vit Horky

The six step guide to practical project management If you think managing projects is too difficult, think again. We’ve stripped back project management processes to the basics – to make it quicker and easier, without sacrificing the vital ingredients for success. “If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.” Dr Andrew Makar, Tactical Project Management

The six step guide to practical project management

MindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

RachelPearson36

During this webinar, Anand Bagmar demonstrates how AI tools such as ChatGPT can be applied to various stages of the software development life cycle (SDLC) using an eCommerce application case study. Find the on-demand recording and more info at https://applitools.info/b59 Key takeaways: • Learn how to use ChatGPT to add AI power to your testing and test automation • Understand the limitations of the technology and where human expertise is crucial • Gain insight into different AI-based tools • Adopt AI-based tools to stay relevant and optimize work for developers and testers * ChatGPT and OpenAI belong to OpenAI, L.L.C.

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

Applitools

12 Ways to Increase Your Influence at Work

GetSmarter

ChatGPT webinar slides

Alireza Esmikhani

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Project for Public Spaces & National Center for Biking and Walking

Has your project been caught in a storm of deadlines, clashing requirements, and the need to change course halfway through? If yes, then check out how the administration team navigated through all of this, relocating 160 people from 3 countries and opening 2 offices during the most turbulent time in the last 20 years. Belka Games’ Chief Administrative Officer, Katerina Rudko, will share universal approaches and life hacks that can help your project survive unstable periods when there seem to be too many tasks and a lack of time and people.

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

DevGAMM Conference

Barbie - Brand Strategy Presentation

Erica Santiago

Featured (20)

PEPSICO Presentation to CAGNY Conference Feb 2024

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

12 Ways to Increase Your Influence at Work

ChatGPT webinar slides

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

Barbie - Brand Strategy Presentation

Focusing on Focus

1. I the #DeveloperCommunity Chris DeMars ! @saltnburnem 💚

4. Michael Supa

5. Why? Chris DeMars ! @saltnburnem

6. Focusing On Focus Twitter: @saltnburnem | Site: chrisdemars.com Chris DeMars ! @saltnburnem

7. Chris DeMars UI Developer Chris DeMars ! @saltnburnem

8. 😢Chris DeMars ! @saltnburnem

9. Chris DeMars ! @saltnburnem

10. 9 Twitter: @TaleFTScript | Site: tftscript.com

11. Question Time Chris DeMars ! @saltnburnem

12. 20% of people have a disability Chris DeMars ! @saltnburnem

13. A11y? Chris DeMars ! @saltnburnem

14. Numeronym A c c e s s i b i l i t y A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ! @saltnburnem

15. What is accessibility? Chris DeMars ! @saltnburnem

16. What is accessibility? web ⌄ Chris DeMars ! @saltnburnem

17. “Web accessibility means that people with disabilities can use the Web.” https://www.w3.org/WAI/intro/accessibility.php Chris DeMars ! @saltnburnem

18. Open Web = Inclusive Web = Web for all! Chris DeMars ! @saltnburnem

19. “Web accessibility means that EVERYONE can use the Web.”- Me (Chris DeMars) Chris DeMars ! @saltnburnem

20. “The web is not a barrier to people with disabilities, it is the solution..” http://webaim.org/articles/pour/ Chris DeMars ! @saltnburnem

21. Soooooo? Chris DeMars ! @saltnburnem

22. Chris DeMars ! @saltnburnem

23. Chris DeMars ! @saltnburnem

24. Chris DeMars ! @saltnburnem

25. Chris DeMars | @saltnburnem Federal Website Accessibility Lawsuits by State in 2017 0 100 200 300 400 AZ CA FL GA IL MA NH MI NJ NY OH PA PR TX VA 2471588 335 41215109 325 96 Total Number of Suits Nationwide: At least 814 NumberofLawsuits http://bit.ly/2Ds4EPd

26. Focus? Chris DeMars ! @saltnburnem

27. Focus? :focus Chris DeMars ! @saltnburnem

28. Why do we need focus? Chris DeMars ! @saltnburnem

29. 23

30. 23

31. DesignerDeveloper Chris DeMars ! @saltnburnem

32. Don’t Do It! Chris DeMars ! @saltnburnem

33. Eric Meyer’s Reset Chris DeMars ! @saltnburnem

34. What about Normalize? Chris DeMars ! @saltnburnem

35. :focus-ring = :-moz-focusring Chris DeMars ! @saltnburnem

36. :focus-visible Chris DeMars ! @saltnburnem

37. Importance of Focus Chris DeMars ! @saltnburnem

38. Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. https://https://www.w3.org/TR/WCAG21/#focus-visible Chris DeMars ! @saltnburnem

39. Browsers&Focus Chris DeMars ! @saltnburnem

40. Chrome Mouse Focus Chris DeMars ! @saltnburnem

41. Chrome Mouse Focus Chris DeMars ! @saltnburnem

42. Chrome Keyboard Focus Chris DeMars ! @saltnburnem

43. Chrome Keyboard Focus Chris DeMars ! @saltnburnem

44. Firefox Mouse Focus Chris DeMars ! @saltnburnem

45. Firefox Mouse Focus Chris DeMars ! @saltnburnem

46. Firefox Keyboard Focus Chris DeMars ! @saltnburnem

47. Firefox Keyboard Focus Chris DeMars ! @saltnburnem

48. Safari Mouse Focus Chris DeMars ! @saltnburnem

49. Safari Mouse Focus Chris DeMars ! @saltnburnem

50. Safari Keyboard Focus Chris DeMars ! @saltnburnem