jensgro

Übersicht über fehlende Features in den unterschiedlichen Browsern

• Safari: https://developer-signals.dev/?browser=safari&openOnly=false&sort=name_asc&view=list
• FF: https://developer-signals.dev/?browser=firefox&openOnly=false&sort=name_asc&view=list
• Edge: https://developer-signals.dev/?browser=edge&openOnly=false&sort=name_asc&view=list
• Chrome: https://developer-signals.dev/?browser=chrome&openOnly=false&sort=name_asc&view=list

In Chrome fehlen 146 und in Safari 315 Features!!! FF ist knapp hinter Safari und am Besten steht Edge da!

jensgro

• Web accessibility quick intro
  • The key principles
    • Semantic markup
    • Keyboard accessibility
    • Visual assistance
• A11y design patterns
• Accessibility basc validation checklist
  • Semantic markup
  • Keyboard accessibility

• Visual assistance

jensgro

*,
::after,
::before {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

jensgro

/* version from https://kittygiraudel.com/snippets/sr-only-class/ */

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;

jensgro

Beispiele mit Intersection Observer und position:sticky

• Durch das Scrollen kann der Hintergrund geändert werden. Natürlich lassen sich dadurch auch andere Designänderungen erledigen.
• Wenn es sein muss, kann man auch sowas machen :-)
• Für Hervorhebungen in längeren Texten?
• Eine seiteninterne Navigation wird beim Scrollen markiert. v1
• Eine seiteninterne Navigation wird beim Scrollen markiert. v2

jensgro

/* https://mastodon.social/@codepo8@toot.cafe/116103152228850093 */
.ducks {
    display: flex;
    flex-direction: row;
}

.ducks.duckandcover > * {
    position: relative;
}

jensgro

Fullscreen API

A Pen by Jens Grochtdreis on CodePen.

License.

jensgro

CSS Sticker

A reusable .sticker with CSS variables to adjust the gradient colors and the shine angle.

A Pen by Jens Grochtdreis on CodePen.

License.

jensgro

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Basic Setup</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style type="text/css">
		body {
			margin: 1em auto;

jensgro

Empfehlenswerte Links zu Screenreadern

• How A Screen Reader User Surfs The Web - Video
• Setting up a screen reader testing environment on your computer
• Screen reader quick guide
• Which VoiceOver?
• Screen Reader HTML Support – Lookup - welcher SR unterstützt was und wie?
• Browsing with a desktop screen reader
• Browsing with a mobile screen reader
• Day 8: Testing using a screen reader