Beyond compliance - Testing for a more Accessible Web.pdf

•

0 gefällt mir•9 views

You want to go beyond roughly meeting guidelines but actually create products that cater a large audience and their needs? To not only fulfill requirements but actually create mindful content & empathic code? Anybody working in tech has the responsibility to provide an inclusive, accessible experience. Let's dive into web accessibility best practices, testing & auditing strategies, and well-guarded WCAG secrets to take your project to the next level.

Technologie

Beyond
compliance
Josefine Schaefer | @JsfnSchfr 2024
Testing for a more Accessible Web

Guten Tag ✌
@JsfnSchfr
󰴛
Josefine Schaefer | @JsfnSchfr 2024

Outline
󰢦 What is Web Accessibility?
🤗 Why should you care?
🔧 What can you do?
🎬 How to get started?
♻ How to keep going…
⬇ Link to Slides
@Josefine Schaefer | @JsfnSchfr 2024

What is Web
Accessibility?
Josefine Schaefer | @JsfnSchfr 2024

WHAT IS WEB ACCESSIBILITY
WCAG
Web Content Accessibility Guidelines
➡ Internationally shared standard for web
accessibility
Different levels of Accessibility
A AA AAA
Josefine Schaefer | @JsfnSchfr 2024

POUR Principles
🔍 Perceivable
WHAT IS WEB ACCESSIBILITY
Josefine Schaefer | @JsfnSchfr
🕹 Operable
🗯 Understandable
⚔ Robust
2024

Why should
you care?
Josefine Schaefer | @JsfnSchfr 2024

👥 Accessibility = Human Right
Josefine Schaefer | @JsfnSchfr
WHY SHOULD YOU CARE
👯 Wider Audience
🤝 Accessibility benefits all of us
📝 (New) Laws for Accessibility Compliance
📈 Accessible Code = “Good” Code
ONE BILLION 😮
2024

Josefine Schaefer | @JsfnSchfr
WHY SHOULD YOU CARE
2024

Diverse User Personas
cardsforhumanity.frog.co
Josefine Schaefer | @JsfnSchfr 2024

Let’s dive in
󰝡
Josefine Schaefer | @JsfnSchfr 2024

WebAIM One Million
Josefine Schaefer | @JsfnSchfr 2024

Color
Contrast
Josefine Schaefer | @JsfnSchfr 2024

CONTRAST
RATIO
14 . 6 : 1
CONTRAST
RATIO
1 . 4 : 1
CONTRAST
RATIO
21 : 1
Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
CONTRAST
RATIO
6 . 3 : 1
WCAG AA requires 4.5 : 1 contrast ratio
2024

Josefine Schaefer | @JsfnSchfr
Larger &
Bold
Text
Requires
less
Contrast
Ratio
Large-scale text (>18pt) and
bold text (>14pt) require 3:1
contrast ratio
WCAG 2.1, SC 1.4.3.
3 : 1 3 : 1
2024

Let’s try it 󰚔
Josefine Schaefer | @JsfnSchfr 2024

COLOR CONTRAST
You can’t trust color.
Josefine Schaefer | @JsfnSchfr 2024

What can
you do?
Josefine Schaefer | @JsfnSchfr 2024

Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
https://venngage.com/to
ols/accessible-color-pale
tte-generator
2024

Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
https://toolness.github.io/
accessible-color-matrix/
2024

Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
Don’t use color as your only
indicator of change.
2024

Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
2024

Josefine Schaefer | @JsfnSchfr
LIGHT & DARK MODE
2024

Josefine Schaefer | @JsfnSchfr
LIGHT & DARK MODE
prefers-color-scheme
2024

● Don’t forget about hover & focus styles
○ Non-text elements (i.e. interface controls) require 3:1 contrast
ratio
Josefine Schaefer | @JsfnSchfr
COLOR CONTRAST
● Diverse user needs:
○ What about neurodivergent folks?
2024

Keyboard
Accessibility
Josefine Schaefer | @JsfnSchfr 2024

● POUR Principles: Operable
● Interactive elements have to be reachable via keyboard
● Tab order
● Visible focus
Josefine Schaefer | @JsfnSchfr
KEYBOARD ACCESSIBILITY
2024

Josefine Schaefer | @JsfnSchfr
SKIP LINK
2024

● Add a Skip Link
● Visualize Tab Order
○ Don’t mess with the tabindex
● Ensure Visible Focus
○ Avoid outline:0 or outline:none
● Use Semantic HTML
Josefine Schaefer | @JsfnSchfr
SEMANTIC HTML
2024

Semantic
HTML
Josefine Schaefer | @JsfnSchfr 2024

● Alternative text
Josefine Schaefer | @JsfnSchfr
SEMANTIC HTML
● Discernable labels for links & buttons
● Use elements for their given purpose
● Suitable input type & input labels
● Headline hierarchies
● Adding document language
2024

● Make alt-text a requirement
○ Set alt=”” for decorative images
● Double check your <div>’s
● Validate HTML
● Stick to meaningful headline hierarchies
Josefine Schaefer | @JsfnSchfr
SEMANTIC HTML
2024

This was
a lot …
Josefine Schaefer | @JsfnSchfr 2024

… but of course, there is always more…
● Test for (different) screen
readers
Josefine Schaefer | @JsfnSchfr
WHAT ELSE CAN YOU DO?
2024

Josefine Schaefer | @JsfnSchfr
SCREEN READERS
Narrator Jaws NVDA Orca
VoiceOver
2024

… but of course, there is always more…
● Test for different screen readers
Josefine Schaefer | @JsfnSchfr
WHAT ELSE CAN YOU DO?
● Test on mobile
● Accessible Fonts
● Audio and Video Transcripts
● Language Accessibility
2024

How to
get started?
Josefine Schaefer | @JsfnSchfr 2024

How to get started
● Integrate accessibility from the start
● Accessibility audit
○ Requirements & resources
● Identify “quick” wins
○ Most common user journeys?
Josefine Schaefer | @JsfnSchfr
APPROACHING ACCESSIBILITY
2024

Automation is your friend
● Accessibility linters & GitHub Actions
● Educate your team
● Remove barriers
● Hire specialists, if you can
Josefine Schaefer | @JsfnSchfr
AUTOMATED TESTING
2024

Questions?
Josefine Schaefer | @JsfnSchfr UtahJS | 2023

Dankeschön! 🤗
Thank you so much!
https://linktr.ee/josefinesch
Josefine Schaefer | @JsfnSchfr
CONTACT
@JsfnSchfr
@j-schaefer
@Josefine Schfr
🔗
UtahJS | 2023

Weitere ähnliche Inhalte

Kürzlich hochgeladen

IESVE for Early Stage Design and Planning

IES VE

Ruby has a lot of standard libraries from Ruby 1.8. I promote them democratically with GitHub today via default and bundled gems. So, I'm working to extract them for Ruby 3.4 continuously and future versions. It's long journey for me. After that, some versions may suddenly happen LoadError at require when running bundle exec or bin/rails, for example matrix or net-smtp. We need to learn what's difference default/bundled gems with standard libraries. In this presentation, I will introduce what's the difficult to extract bundled gems from default gems and the details of the functionality that Ruby's require and bundle exec with default/bundled gems. You can learn how handle your issue about standard libraries.

Long journey of Ruby Standard library at RubyKaigi 2024

Hiroshi SHIBATA

This talk focuses on the practical aspects of integrating various telephony systems with Salesforce, drawing on examples from implementations in the Czech scene. It aims to inform attendees about the spectrum of telephony solutions available, from small to large scale, and their compatibility with Salesforce. The presentation will highlight key considerations for selecting a telephony provider that integrates smoothly with Salesforce, including important questions to support the decision-making process. It will also discuss methods for integrating existing telephony systems with Salesforce, aimed at companies contemplating or in the process of adopting this CRM platform. The discussion is designed to provide a straightforward overview of the steps and considerations involved in telephony and Salesforce integration, with an emphasis on functionality, compatibility, and the practical experiences of Czech companies.

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...

CzechDreamin

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf

FIDO Alliance

Working together SRE & Platform Engineering

Marcus Vechiato

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...

FIDO Alliance

ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...

FIDO Alliance

Microsoft CSP Briefing Pre-Engagement - Questionnaire

Exakis Nelite

Intro in Product Management - Коротко про професію продакт менеджера

Mark Opanasiuk

Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots

Leah Henrickson

The Metaverse: Are We There Yet?

Mark Billinghurst

Webinar Recording: https://www.panagenda.com/webinars/alles-neu-macht-der-mai-wir-durchleuchten-den-verbesserten-notes-eigenschaftendialog/ Haben Sie sich schon einmal über den zu kleinen Eigenschaftendialog in Notes geärgert? Mussten Sie einen Agenten oder eine Aktion erstellen, um schnell mal ein Feld zu ändern? Haben Sie jedes mal endlos nach dem zu vergleichenden Feld gesucht, nachdem Sie ein neues Dokument ausgewählt haben? Wollten Sie das verdammte Ding einfach nur größer machen? Zum Glück gibt es dafür eine Lösung – und sie ist wahrscheinlich bereits installiert! Mit dem kostenlosen panagenda Document Properties (Pro) erhalten Sie den Eigenschaftendialog, den Sie schon immer haben wollten. Größer, anpassbar, und im Volltext durchsuchbar. Sehen Sie mehrere Dokumente gleichzeitig oder vergleichen Sie mit einem Diff-Viewer. Ändern Sie beliebige Felder und haben Sie endlich eine einfache Möglichkeit, Profildokumente für alle Benutzer zu verwalten. Entdecken Sie mit HCL Ambassador Marc Thomas, wie Document Properties Ihre Arbeit vereinfachen und Sie bei der täglichen Verwendung von Domino-Anwendungen unterstützen kann – im Client oder im Designer. Sie werden es nicht bereuen! Für Sie in diesem Webinar - Was Document Properties ist, welche Editionen es gibt und wo es in Notes und Domino Designer zu finden ist - Wie Sie nach einem beliebigen Feld suchen und es bearbeiten, Dokumente vergleichen oder alle Daten per CSV exportieren können - Suchen, Bearbeiten und auch Löschen von Profildokumenten - Welche Konfigurationseinstellungen verfügbar sind, um Funktionen anzupassen - Wie Ihre Endbenutzer davon profitieren - Sehen Sie alles in einer Live-Demo

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...

panagenda

Delivered by Michael Down at Gartner Data & Analytics Summit London 2024 - Your enemies use GenAI too: Staying ahead of fraud with Neo4j. Fraudsters exploit the latest technologies like generative AI to stay undetected. Static applications can’t adapt quickly enough. Learn why you should build flexible fraud detection apps on Neo4j’s native graph database combined with advanced data science algorithms. Uncover complex fraud patterns in real-time and shut down schemes before they cause damage.

Your enemies use GenAI too - staying ahead of fraud with Neo4j

Neo4j

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf

FIDO Alliance

State of the Smart Building Startup Landscape 2024!

Memoori

PLAI - Acceleration Program for Generative A.I. Startups

Stefano

Webinar Recording: https://www.panagenda.com/webinars/easier-faster-and-more-powerful-notes-document-properties-reimagined/ Have you ever felt frustrated by the small properties dialog in Notes? Had to create an agent or button to quickly change a field? Searched endlessly for the field you wanted to compare each time you selected a new document? Wished you could just make the damned thing bigger? Luckily, there is a solution – and you probably already have it installed! With the free panagenda Document Properties (Pro) you get the properties dialog you always needed. Big, resizable, full-text searchable. View multiple documents at once or compare them with a diff viewer. Modify any field, and finally have an easy way to handle profile documents for all users. Join HCL Lifetime Ambassador Julian Robichaux to discover how Document Properties can simplify your work and assist you daily when using Domino applications – in the client or the designer. You will never look back! Key takeaways from this session - What Document Properties is, which editions there are, and how you can find it in Notes and Domino Designer - How you can search for and edit any field, compare documents, or CSV export all data - How to find, edit, and even delete profile documents - Which configuration settings are available to customize feature

Easier, Faster, and More Powerful – Notes Document Properties Reimagined

panagenda

AI mind or machine power point presentation

yogeshlabana357357

New customer? New industry? New cloud? New team? A lot to handle! How to ensure the success of the project? Start it well! I've created the 3 areas of focus at the beginning of the project that helped me in multiple roles (BA, PO, and Consultant). Learn from real-world experiences and discover how these insights can empower you to deliver unparalleled value to your customers right from the project's start.

Powerful Start- the Key to Project Success, Barbara Laskowska

CzechDreamin

Overview of Hyperledger Foundation

Hyperleger Tokyo Meetup

Kürzlich hochgeladen (20)

IESVE for Early Stage Design and Planning

Long journey of Ruby Standard library at RubyKaigi 2024

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf

Working together SRE & Platform Engineering

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...

ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...

Microsoft CSP Briefing Pre-Engagement - Questionnaire

Intro in Product Management - Коротко про професію продакт менеджера

Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots

The Metaverse: Are We There Yet?

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...

Your enemies use GenAI too - staying ahead of fraud with Neo4j

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf

State of the Smart Building Startup Landscape 2024!

PLAI - Acceleration Program for Generative A.I. Startups

Easier, Faster, and More Powerful – Notes Document Properties Reimagined

AI mind or machine power point presentation

Powerful Start- the Key to Project Success, Barbara Laskowska

Overview of Hyperledger Foundation

Empfohlen

https://www.hubspot.com/state-of-marketing · Scaling relationships and proving ROI · Social media is the place for search, sales, and service · Authentic influencer partnerships fuel brand growth · The strongest connections happen via call, click, chat, and camera. · Time saved with AI leads to more creative work · Seeking: A single source of truth · TLDR; Get on social, try AI, and align your systems. · More human marketing, powered by robots

2024 State of Marketing Report – by Hubspot

Marius Sescu

ChatGPT is a revolutionary addition to the world since its introduction in 2022. A big shift in the sector of information gathering and processing happened because of this chatbot. What is the story of ChatGPT? How is the bot responding to prompts and generating contents? Swipe through these slides prepared by Expeed Software, a web development company regarding the development and technical intricacies of ChatGPT!

Everything You Need To Know About ChatGPT

Expeed Software

Product Design Trends in 2024 | Teenage Engineerings

Pixeldarts

Mental health has been in the news quite a bit lately. Dozens of U.S. states are currently suing Meta for contributing to the youth mental health crisis by inserting addictive features into their products, while the U.S. Surgeon General is touring the nation to bring awareness to the growing epidemic of loneliness and isolation. The country has endured periods of low national morale, such as in the 1970s when high inflation and the energy crisis worsened public sentiment following the Vietnam War. The current mood, however, feels different. Gallup recently reported that national mental health is at an all-time low, with few bright spots to lift spirits. To better understand how Americans are feeling and their attitudes towards mental health in general, ThinkNow conducted a nationally representative quantitative survey of 1,500 respondents and found some interesting differences among ethnic, age and gender groups. Technology For example, 52% agree that technology and social media have a negative impact on mental health, but when broken out by race, 61% of Whites felt technology had a negative effect, and only 48% of Hispanics thought it did. While technology has helped us keep in touch with friends and family in faraway places, it appears to have degraded our ability to connect in person. Staying connected online is a double-edged sword since the same news feed that brings us pictures of the grandkids and fluffy kittens also feeds us news about the wars in Israel and Ukraine, the dysfunction in Washington, the latest mass shooting and the climate crisis. Hispanics may have a built-in defense against the isolation technology breeds, owing to their large, multigenerational households, strong social support systems, and tendency to use social media to stay connected with relatives abroad. Age and Gender When asked how individuals rate their mental health, men rate it higher than women by 11 percentage points, and Baby Boomers rank it highest at 83%, saying it’s good or excellent vs. 57% of Gen Z saying the same. Gen Z spends the most amount of time on social media, so the notion that social media negatively affects mental health appears to be correlated. Unfortunately, Gen Z is also the generation that’s least comfortable discussing mental health concerns with healthcare professionals. Only 40% of them state they’re comfortable discussing their issues with a professional compared to 60% of Millennials and 65% of Boomers. Race Affects Attitudes As seen in previous research conducted by ThinkNow, Asian Americans lag other groups when it comes to awareness of mental health issues. Twenty-four percent of Asian Americans believe that having a mental health issue is a sign of weakness compared to the 16% average for all groups. Asians are also considerably less likely to be aware of mental health services in their communities (42% vs. 55%) and most likely to seek out information on social media (51% vs. 35%).

How Race, Age and Gender Shape Attitudes Towards Mental Health

ThinkNow

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

marketingartwork

Skeleton Culture Code

Skeleton Technologies

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

Empfohlen (20)

2024 State of Marketing Report – by Hubspot

Everything You Need To Know About ChatGPT

Product Design Trends in 2024 | Teenage Engineerings

How Race, Age and Gender Shape Attitudes Towards Mental Health

AI Trends in Creative Operations 2024 by Artwork Flow.pdf

Skeleton Culture Code

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...

Beyond compliance - Testing for a more Accessible Web.pdf

1. Beyond compliance Josefine Schaefer | @JsfnSchfr 2024 Testing for a more Accessible Web

2. Guten Tag ✌ @JsfnSchfr 󰴛 Josefine Schaefer | @JsfnSchfr 2024

3. Outline 󰢦 What is Web Accessibility? 🤗 Why should you care? 🔧 What can you do? 🎬 How to get started? ♻ How to keep going… ⬇ Link to Slides @Josefine Schaefer | @JsfnSchfr 2024

4. What is Web Accessibility? Josefine Schaefer | @JsfnSchfr 2024

5. WHAT IS WEB ACCESSIBILITY WCAG Web Content Accessibility Guidelines ➡ Internationally shared standard for web accessibility Different levels of Accessibility A AA AAA Josefine Schaefer | @JsfnSchfr 2024

6. POUR Principles 🔍 Perceivable WHAT IS WEB ACCESSIBILITY Josefine Schaefer | @JsfnSchfr 🕹 Operable 🗯 Understandable ⚔ Robust 2024

7. Why should you care? Josefine Schaefer | @JsfnSchfr 2024

8. 👥 Accessibility = Human Right Josefine Schaefer | @JsfnSchfr WHY SHOULD YOU CARE 👯 Wider Audience 🤝 Accessibility benefits all of us 📝 (New) Laws for Accessibility Compliance 📈 Accessible Code = “Good” Code ONE BILLION 😮 2024

9. Josefine Schaefer | @JsfnSchfr WHY SHOULD YOU CARE 2024

10. Diverse User Personas cardsforhumanity.frog.co Josefine Schaefer | @JsfnSchfr 2024

11. Let’s dive in 󰝡 Josefine Schaefer | @JsfnSchfr 2024

12. WebAIM One Million Josefine Schaefer | @JsfnSchfr 2024

13. Color Contrast Josefine Schaefer | @JsfnSchfr 2024

14. CONTRAST RATIO 14 . 6 : 1 CONTRAST RATIO 1 . 4 : 1 CONTRAST RATIO 21 : 1 Josefine Schaefer | @JsfnSchfr COLOR CONTRAST CONTRAST RATIO 6 . 3 : 1 WCAG AA requires 4.5 : 1 contrast ratio 2024

15. Josefine Schaefer | @JsfnSchfr Larger & Bold Text Requires less Contrast Ratio Large-scale text (>18pt) and bold text (>14pt) require 3:1 contrast ratio WCAG 2.1, SC 1.4.3. 3 : 1 3 : 1 2024

16. Let’s try it 󰚔 Josefine Schaefer | @JsfnSchfr 2024

17. COLOR CONTRAST You can’t trust color. Josefine Schaefer | @JsfnSchfr 2024

18. What can you do? Josefine Schaefer | @JsfnSchfr 2024

19. Josefine Schaefer | @JsfnSchfr COLOR CONTRAST https://venngage.com/to ols/accessible-color-pale tte-generator 2024

20. Josefine Schaefer | @JsfnSchfr COLOR CONTRAST https://toolness.github.io/ accessible-color-matrix/ 2024

21. Josefine Schaefer | @JsfnSchfr COLOR CONTRAST Don’t use color as your only indicator of change. 2024

22. Josefine Schaefer | @JsfnSchfr COLOR CONTRAST 2024

23. Josefine Schaefer | @JsfnSchfr LIGHT & DARK MODE 2024

24. Josefine Schaefer | @JsfnSchfr LIGHT & DARK MODE prefers-color-scheme 2024

25. ● Don’t forget about hover & focus styles ○ Non-text elements (i.e. interface controls) require 3:1 contrast ratio Josefine Schaefer | @JsfnSchfr COLOR CONTRAST ● Diverse user needs: ○ What about neurodivergent folks? 2024

26. Keyboard Accessibility Josefine Schaefer | @JsfnSchfr 2024

27. ● POUR Principles: Operable ● Interactive elements have to be reachable via keyboard ● Tab order ● Visible focus Josefine Schaefer | @JsfnSchfr KEYBOARD ACCESSIBILITY 2024

28. Let’s try it 󰚔 Josefine Schaefer | @JsfnSchfr 2024

29. What can you do? Josefine Schaefer | @JsfnSchfr 2024

30. Josefine Schaefer | @JsfnSchfr SKIP LINK 2024

31. ● Add a Skip Link ● Visualize Tab Order ○ Don’t mess with the tabindex ● Ensure Visible Focus ○ Avoid outline:0 or outline:none ● Use Semantic HTML Josefine Schaefer | @JsfnSchfr SEMANTIC HTML 2024

32. Semantic HTML Josefine Schaefer | @JsfnSchfr 2024

33. ● Alternative text Josefine Schaefer | @JsfnSchfr SEMANTIC HTML ● Discernable labels for links & buttons ● Use elements for their given purpose ● Suitable input type & input labels ● Headline hierarchies ● Adding document language 2024

34. Let’s try it 󰚗 Josefine Schaefer | @JsfnSchfr 2024

35. What can you do? Josefine Schaefer | @JsfnSchfr 2024

36. ● Make alt-text a requirement ○ Set alt=”” for decorative images ● Double check your <div>’s ● Validate HTML ● Stick to meaningful headline hierarchies Josefine Schaefer | @JsfnSchfr SEMANTIC HTML 2024

37. This was a lot … Josefine Schaefer | @JsfnSchfr 2024

38. … but of course, there is always more… ● Test for (different) screen readers Josefine Schaefer | @JsfnSchfr WHAT ELSE CAN YOU DO? 2024

39. Josefine Schaefer | @JsfnSchfr SCREEN READERS Narrator Jaws NVDA Orca VoiceOver 2024

40. … but of course, there is always more… ● Test for different screen readers Josefine Schaefer | @JsfnSchfr WHAT ELSE CAN YOU DO? ● Test on mobile ● Accessible Fonts ● Audio and Video Transcripts ● Language Accessibility 2024

41. How to get started? Josefine Schaefer | @JsfnSchfr 2024

42. How to get started ● Integrate accessibility from the start ● Accessibility audit ○ Requirements & resources ● Identify “quick” wins ○ Most common user journeys? Josefine Schaefer | @JsfnSchfr APPROACHING ACCESSIBILITY 2024

43. Automation is your friend ● Accessibility linters & GitHub Actions ● Educate your team ● Remove barriers ● Hire specialists, if you can Josefine Schaefer | @JsfnSchfr AUTOMATED TESTING 2024

44. Questions? Josefine Schaefer | @JsfnSchfr UtahJS | 2023

45. Dankeschön! 🤗 Thank you so much! https://linktr.ee/josefinesch Josefine Schaefer | @JsfnSchfr CONTACT @JsfnSchfr @j-schaefer @Josefine Schfr 🔗 UtahJS | 2023