Přístupný text na obrázcích:Vyhněte se kontrastnímu poměru

🤗 Dostupné obrázky

Vytváření přístupného textu na obrázcích na webové stránce není snadné. Nejprve jsou zde všechny obvyklé problémy s přístupností při přidávání obrázku na váš web. Musíte se například ujistit, že obrázek má alternativní text, který obrázek dobře popisuje pro slabozraké návštěvníky. Ale pak si musíte pamatovat, abyste nechali alternativní text prázdný, pokud je obrázek zahrnut pouze pro dekorativní účely. OK, zatím to není tak těžké. Dále jako u jakéhokoli jiného textu na vašem webu se musíte ujistit, že úroveň kontrastu mezi barvou textu a barvou pozadí je dostatečně vysoká.

Široce přijímaný standard je pro kontrastní poměr 4,5 mezi textem a pozadím. To je dost jednoduché pro text na prostém pozadí... moderní prohlížeče mají vestavěné nástroje, které vám zde pomohou. Co ale uděláte, když váš text překryje obrázek, který měl celou škálu barev? Zde může pomoci nástroj Rainbow. Zde je příklad toho, k čemu směřujeme. Ačkoli má text podobný odstín jako pozadí, přidáním překryvného pozadí pro text se správnou úrovní krytí si můžeme být jisti, že kontrastní poměr je v souladu se standardem.

Co dnes děláme?

V tomto příspěvku se podíváme na to, jak přidat přístupný text k obrázku a také na to, jak zajistit, že budete postupovat podle nejnovějších osvědčených postupů, abyste zajistili, že obrázek bude reagovat. Přestože používáme SvelteKit, můžete snadno přizpůsobit kód pro práci s frameworky založenými na Reactu nebo dokonce s prostým HTML. Pokud se chcete dozvědět vše o vytváření přístupného textu na obrázcích, zahřejte se tím, že se nejprve podíváme na nástroj Rainbow. Poté otevřeme Vim nebo VSCode.

🌈 Co je nástroj Rainbow?

Nástroj Rainbow není nic jiného než pomůcka pro usnadnění přístupu pro vývojáře a designéry UX. Chcete-li jej použít, stačí otevřít web Rainbow Tool na adrese rainbow.rodneylab.com, přidat obrázek, upravit barvy a text, stisknout tlačítko Získat alfa a použít hodnotu vrácenou v kódu webu. Nedělejte si starosti, pokud si nejste jisti, jak přidat překryvný text do SvelteKit. Během minuty si projdeme, jak přidat text s překryvnou vrstvou do responzivního obrázku. Nejprve se však pojďme rychle podívat pod pokličku.

Nástroj Rainbow byl vytvořen pomocí generátoru statických stránek. Jeho síla spočívá v bezserverové funkci Rust, která to spočítá. Funguje tak, že najde pixel (v obrázku) s nejnižším kontrastem k barvě textu. Potom použije trochu středoškolské matematiky (Newton-Raphsonova numerická technika) k určení průhlednosti překrytí, která vyhovuje dodanému kontrastnímu poměru (ve výchozím nastavení 4,5). Existuje několik vestavěných optimalizací, jako je změna velikosti obrázku před zahájením práce, aby se urychlily pozdější výpočty. Kód je open source a kód Rainbow Site si můžete prohlédnout na stránce Rodney Lab Git Hub. Nyní víte, co je nástroj Rainbow. Podíváme se, jak jej používat?

🔨 Přístupný text na obrázcích Jak dosáhnout kontrastního poměru

Jak přidat přístupný text k obrázku webu">

1. Otevřete nástroj Rainbow Accessibility a klikněte na Procházet přidat svou fotku.

2. Dále vyberte text a barvy překrytí. Běžnou volbou je bílý text na černém pozadí, i když můžete být kreativní, jak chcete. Pokud mezi vámi vybraným textem a překryvnými barvami není dostatečný kontrast, nástroj vám to dá vědět. Pokud chcete, můžete také upravit text.

3. Dále klikněte nebo klepněte na Získat alfa tlačítko pro spuštění funkce Rust bez serveru. Po chvíli se zobrazí vypočítaná alfa. Obrázek se aktualizuje pomocí této hodnoty.

4. Nakonec stačí přejít do vašeho oblíbeného textového editoru a kódovat obrázek. Zde je příklad kódu pro responzivní obrázek. Nezapomeňte aktualizovat hodnotu alfa pro svůj vlastní obrázek.
   

<script>
  const alt = 'flower in rainbow colours';
  const src = '/assets/rainbow-flower.jpg';
  const sizes = '(max-width: 672px) calc(100vw - 32px), 672px';
  const srcsetAvif = \`
/assets/rainbow-flower-1344.avif 1344w,
/assets/rainbow-flower-672.avif 672w,
/assets/rainbow-flower-336.avif 336w
\`;
  const srcsetWebP = \`
/assets/rainbow-flower-1344.webp 1344w,
/assets/rainbow-flower-672.webp 672w,
/assets/rainbow-flower-336.webp 336w
\`;
  const srcset = \`
/assets/rainbow-flower-1344.jpg 1344w,
/assets/rainbow-flower-672.jpg 672w,
/assets/rainbow-flower-336.jpg 336w
\`;
</script>

<section class="image-container">
  <picture>
    <source {sizes} srcset={srcsetAvif} type="image/avif" />
    <source {sizes} srcset={srcsetWebP} type="image/webp" />
    <source {sizes} {srcset} type="image/jpeg" />
    <img loading="lazy" decoding="async" {src} {alt} width="672" height="672" />
  </picture>
  <div class="overlay-text">Love is love ♥︎</div>
</section>

<style lang="scss">
  .image-container {
    position: relative;
  }
  img {
    border-radius: $spacing-3;
    background-size: cover;
    background-color: $color-theme-4;
    max-width: 100%;
    height: auto;
  }
  .overlay-text {
    position: absolute;
    top: $spacing-16;
    left: $spacing-16;
    background: rgba($color: #262322, $alpha: 0.78);
    color: #f2e3bc;
    padding: $spacing-0 $spacing-4;
    border-radius: $spacing-2;
    font-size: $font-size-7;
    font-family: 'Asap';
  }

Kód ukazuje, jak překrýt text na obrázku s poloprůhledným pozadím. Krytí (nebo alfa) je uvedeno v řádku 47 . Všimněte si, jak vkládáme formáty obrázků Next-Gen, ale zahrnujeme záložní možnosti pro prohlížeče, které je nepodporují. Obrázek také reagujeme tím, že obsahuje různé šířky a specifikujeme, kdy se má každá použít.

🙌🏽 Jaké jsou vaše myšlenky?

V tomto příspěvku jsme se podívali na:

• jak používat poloprůhlednou překryvnou vrstvu ke zpřístupnění textu přidaného do obrázku,
• pomocí nástroje Rainbow k získání úrovně krytí nebo alfa,
• jak vložit responzivní obrázek pomocí formátů Next-Gen se záložním řešením.

Doufám, že pro vás byl tento příspěvek užitečný a můžete něco z tohoto příspěvku použít v některém ze svých projektů. Rád bych slyšel, jak máte ve své práci nástroj Rainbow. Také je stále ve vývoji, takže jsem zvědavý na vaše návrhy, jak by se to dalo vylepšit. Můžete zanechat komentář níže, @me na twitteru nebo zkusit jednu z dalších metod kontaktování uvedených níže.

🙏🏽 Přístupný text na obrázcích:Zpětná vazba

Jak říkám, doufám, že se vám příspěvek líbil a dozvěděli jste se něco nového. Také doufám, že tento kód použijete ve svých vlastních projektech. Nezapomeňte se podělit o svou práci na Twitteru a zmínit se o tom, abych viděl, co jste udělali. Nakonec mi dejte vědět nápady na další příspěvky, které byste chtěli vidět. Čtěte dále a najděte způsoby, jak se spojit, dále níže. Pokud pro vás byl tento příspěvek užitečný, i když si můžete dovolit byť jen nepatrný příspěvek, zvažte prosím, zda mě nepodpoříte prostřednictvím Kup mi kávu.

Nakonec můžete příspěvek sdílet na svých účtech na sociálních sítích pro všechny své sledující, pro které bude užitečný. Kromě zanechání komentáře níže se můžete spojit prostřednictvím @askRodney na Twitteru a také se zeptatRodneyho na Telegramu. Podívejte se také na další způsoby, jak se dostat do kontaktu s Rodney Lab. Pravidelně publikuji mimo jiné na SvelteKit a také na Gatsby JS. Přihlaste se také k odběru newsletteru, abyste byli informováni o našich nejnovějších projektech.