Giter Club home page Giter Club logo

espoo.kobujutsu.fi's People

Contributors

aviertio avatar paazmaya avatar

Watchers

avatar avatar avatar

Forkers

aviertio aviertio-upm

espoo.kobujutsu.fi's Issues

Load instructor images lazylly

https://yellowlab.tools/result/fziiod1uuh
99/100, get that last one point "Below the fold images", since the "ohjaaja" images are not needed in the initial load.

yellowlabs tools-espoo kobujutsu fi-result-2021-06-13 at 16 04 35

Also seen here https://waterfaller.dev/?url=https://espoo.kobujutsu.fi, the header background image is the last image which is loaded, but visually should appear first.
The Yuishinkai and RKHSK logos are also possibilities to load later.

This analysis of your page shows that LCP failed and CLS passes. It is not possible to measure FID in the lab, but your TBT is fast

WCAG2AAA test passes without errors, but has 4 warnings and 39 notices

Running (https://github.com/pa11y/pa11y):

$ pa11y --include-warnings --include-notices  -s WCAG2AAA https://espoo.kobujutsu.fi

Provides the following report:

Welcome to Pa11y

 > Running Pa11y on URL https://espoo.kobujutsu.fi

Results for URL: https://espoo.kobujutsu.fi/

 • Notice: Check that the title element describes the document.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_2.H25.2
   ├── html > head > title
   └── <title>Kobujutsua ja Karatea Espoossa ...</title>

 • Warning: This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.
   ├── WCAG2AAA.Principle1.Guideline1_4.1_4_6.G18.BgImage
   ├── html > body > header > h1
   └── <h1>Ryukyu kobujutsua ja Yuishinkai...</h1>

 • Warning: This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 7:1.
   ├── WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.BgImage
   ├── html > body > header > p
   └── <p>Espoon Yuishinkai ry on vuonna ...</p>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── #tapahtumat
   └── <a href="#tapahtumat" id="tapahtumat">Tulevat tapahtumat</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(2) > ul > li:nth-child(1) > a
   └── <a href="https://www.facebook.com/events/231171054211865/" title="Ryukyu kobujutsun alkeiskurssin tapahtuma Facebookissa">Ryukyu kobujutsun alkeiskurssi ...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(2) > ul > li:nth-child(2) > a
   └── <a href="https://www.facebook.com/events/1915494115173541/" title="Shuji no kon sogo embu kumite-päivä tapahtuma Facebookissa">"Shuji no kon sogo embu kumite"...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(2) > ul > li:nth-child(3) > a
   └── <a href="https://www.facebook.com/events/323106608429651/" title="Nagegatame-harjoitus tapahtuma Facebookissa">Nagegatame-harjoitus, kello 12:...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── #kobujutsu
   └── <a href="#kobujutsu" id="kobujutsu">Ryukyu kobujutsu</a>

 • Notice: Ensure that the img element's alt text serves the same purpose and presents the same information as the image.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G94.Image
   ├── html > body > section:nth-child(3) > img
   └── <img class="logo" src="/assets/rkhsk-logo.png" alt="Ryukyu Kobujutsu Hozon Shinkokai organisaation logo">

 • Notice: If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G73,G74
   ├── html > body > section:nth-child(3) > img
   └── <img class="logo" src="/assets/rkhsk-logo.png" alt="Ryukyu Kobujutsu Hozon Shinkokai organisaation logo">

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(3) > p:nth-child(6) > a
   └── <a href="https://www.kobujutsu.fi" title="Ryukyu Kobujutsu Hozonshinkokai Suomessa">Lisätietoja lajista osoitteessa...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── #karate
   └── <a href="#karate" id="karate">Yuishinkai karate</a>

 • Notice: Ensure that the img element's alt text serves the same purpose and presents the same information as the image.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G94.Image
   ├── html > body > section:nth-child(4) > img
   └── <img class="logo" src="/assets/yuishinkai-logo.png" alt="Yuishinkai tyylisuunnan logo">

 • Notice: If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G73,G74
   ├── html > body > section:nth-child(4) > img
   └── <img class="logo" src="/assets/yuishinkai-logo.png" alt="Yuishinkai tyylisuunnan logo">

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(4) > p:nth-child(4) > a
   └── <a href="https://www.kobujutsu.fi/yuishinkai/" title="Yuishinkai karate Suomessa">Lisätietoja karaten tyylisuunna...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── #liittyminen
   └── <a href="#liittyminen" id="liittyminen">Liity mukaan!</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(5) > p:nth-child(2) > a
   └── <a href="https://goo.gl/forms/ABCfyODfz3JMRgn72" class="link-registration" title="Espoon Yuishinkai ry:n liittymislomake Google Forms-palvelussa">täytä vain liittymislomake</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(5) > p:nth-child(3) > a
   └── <a href="https://en.wikipedia.org/wiki/Data_Protection_Directive" title="Data Protection Directive 95/46/EC">hyväksyt antamiesi henkilötieto...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(5) > p:nth-child(4) > a
   └── <a href="/assets/espoon-yuishinkai-ry-yhdistyksen-saannot-2016-12-21.pdf" class="link-rules" title="Yhdistyksen säännöt PDF tiedostona">Espoon Yuishinkai ry:n yhdistyk...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── #harjoitukset
   └── <a href="#harjoitukset" id="harjoitukset">Harjoituspaikat ja -ajat</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(6) > ul:nth-child(5) > li:nth-child(1) > a
   └── <a href="http://www.espoo.fi/fi-FI/Kulttuuri_ja_liikunta/Liikunta/Liikunta_ja_ulkoilupaikat/Urheiluhallit#Tapiola" title="Tapiolan urheiluhalli, Espoo">Tapiolan urheiluhallin judosali...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(6) > ul:nth-child(5) > li:nth-child(2) > a
   └── <a href="http://www.espoo.fi/fi-FI/Kulttuuri_ja_liikunta/Liikunta/Liikunta_ja_ulkoilupaikat/Urheiluhallit#Tapiola" title="Tapiolan urheiluhalli, Espoo">Tapiolan urheiluhallin judosali...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(6) > ul:nth-child(5) > li:nth-child(3) > a
   └── <a href="http://www.espoo.fi/fi-FI/Kulttuuri_ja_liikunta/Liikunta/Liikunta_ja_ulkoilupaikat/Urheiluhallit#Tapiola" title="Tapiolan urheiluhalli, Espoo">Tapiolan urheiluhallin judosali...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(6) > ul:nth-child(7) > li:nth-child(1) > a
   └── <a href="http://www.espoo.fi/fi-FI/Kulttuuri_ja_liikunta/Liikunta/Liikunta_ja_ulkoilupaikat/Urheiluhallit#Tapiola" title="Tapiolan urheiluhalli, Espoo">Tapiolan urheiluhallin judosali...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(6) > ul:nth-child(7) > li:nth-child(2) > a
   └── <a href="http://www.espoonrekry.fi/fi-FI/Paivahoito_ja_koulutus/Perusopetus/Peruskoulut/Alakoulut/Friisilan_koulu" title="Friisilän koulu, Espoo">Friisilän koulun liikuntasaliss...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(6) > ul:nth-child(7) > li:nth-child(3) > a
   └── <a href="http://www.espoo.fi/komeetankoulu#contactInfo" title="Komeetan koulun yhteystiedot">Komeetan koulun liikuntasalissa...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(6) > ul:nth-child(7) > li:nth-child(4) > a
   └── <a href="http://www.espoo.fi/fi-FI/Kulttuuri_ja_liikunta/Liikunta/Liikunta_ja_ulkoilupaikat/Urheiluhallit#Tapiola" title="Tapiolan urheiluhalli, Espoo">Tapiolan urheiluhallin judosali...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── #maksut
   └── <a href="#maksut" id="maksut">Harjoitteluun liittyvät maksut</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(7) > p:nth-child(6) > a
   └── <a href="https://www.kobujutsu.fi/suomen-yuishinkai-ry/" title="Suomen Yuishinkai ry - kobujutsu.fi">Suomen Yuishinkai ry:n vuositta...</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── #yhteystiedot
   └── <a href="#yhteystiedot" id="yhteystiedot">Ohjaajat ja yhteystiedot</a>

 • Notice: Ensure that the img element's alt text serves the same purpose and presents the same information as the image.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G94.Image
   ├── html > body > section:nth-child(8) > p:nth-child(2) > img
   └── <img src="/assets/ohjaaja-jukka.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Jukka Paasonen">

 • Notice: If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G73,G74
   ├── html > body > section:nth-child(8) > p:nth-child(2) > img
   └── <img src="/assets/ohjaaja-jukka.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Jukka Paasonen">

 • Notice: Ensure that the img element's alt text serves the same purpose and presents the same information as the image.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G94.Image
   ├── html > body > section:nth-child(8) > p:nth-child(3) > img
   └── <img src="/assets/ohjaaja-kari.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Kari Sysimiilu">

 • Notice: If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G73,G74
   ├── html > body > section:nth-child(8) > p:nth-child(3) > img
   └── <img src="/assets/ohjaaja-kari.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Kari Sysimiilu">

 • Notice: Ensure that the img element's alt text serves the same purpose and presents the same information as the image.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G94.Image
   ├── html > body > section:nth-child(8) > p:nth-child(4) > img
   └── <img src="/assets/ohjaaja-kimmo.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Kimmo Kara">

 • Notice: If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G73,G74
   ├── html > body > section:nth-child(8) > p:nth-child(4) > img
   └── <img src="/assets/ohjaaja-kimmo.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Kimmo Kara">

 • Notice: Ensure that the img element's alt text serves the same purpose and presents the same information as the image.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G94.Image
   ├── html > body > section:nth-child(8) > p:nth-child(5) > img
   └── <img src="/assets/ohjaaja-aaro.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Aaro Viertiö">

 • Notice: If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.
   ├── WCAG2AAA.Principle1.Guideline1_1.1_1_1.G73,G74
   ├── html > body > section:nth-child(8) > p:nth-child(5) > img
   └── <img src="/assets/ohjaaja-aaro.jpg" class="face-image" alt="Espoon Yuishinkai ry:n ohjaaja Aaro Viertiö">

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > section:nth-child(8) > p:nth-child(7) > a
   └── <a href="https://docs.google.com/forms/d/e/1FAIpQLSfSBBaNqzvjPV4EceXT3OsZNQhebM0QimuvOTdxfzxkiFLfQg/viewform" class="link-feedback" title="Espoon Yuishinkai - Palautelomake">voi antaa palautetta tämän loma...</a>

 • Warning: This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 7:1.
   ├── WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.BgImage
   ├── html > body > footer > p
   └── <p><a href="https://github.com/paa...</p>

 • Warning: This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 7:1.
   ├── WCAG2AAA.Principle1.Guideline1_4.1_4_6.G17.BgImage
   ├── html > body > footer > p > a
   └── <a href="https://github.com/paazmaya/espoo.kobujutsu.fi" class="link-github" title="Muokkaa sivuja GitHub-palvelun kautta">© Espoon Yuishinkai ry</a>

 • Notice: Check that text of the link describes the purpose of the link.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_9.H30
   ├── html > body > footer > p > a
   └── <a href="https://github.com/paazmaya/espoo.kobujutsu.fi" class="link-github" title="Muokkaa sivuja GitHub-palvelun kautta">© Espoon Yuishinkai ry</a>

 • Notice: Check that the title attribute of this element contains text that identifies the frame.
   ├── WCAG2AAA.Principle2.Guideline2_4.2_4_1.H64.2
   ├── #_hjRemoteVarsFrame
   └── <iframe name="_hjRemoteVarsFrame" title="_hjRemoteVarsFrame" id="_hjRemoteVarsFrame" style="display: none !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important;" src="https://vars.hotjar.com...

4 Warnings
39 Notices

Element not highlighted on focus H2

With keyboard navigation it is important that the focused component can be visually identified. If the focused component is not somehow highlighted, the user cannot be sure which component has focus.

Link identified only by color - Link in footer pointing to source code repository

It appears that color is the only distinguishing feature about links in blocks of text.

If links in blocks of text are identified only by color, the color contrast ratio between the link text and the surrounding text needs to be at least 3:1. This is not the case here.

Furthermore, color should not be the only visual cue. An additional visual cue could be underlining the link or making it bold.

This applies to links that are visually part of a block of text. Menu items etc. should not be considered here.

Choose one of the following:

Make sure there are other visual indicators of links besides the color, such as underline or bold.

Or ensure that links have a contrast ratio of at least 3:1 with surrounding text, and provide additional visual cues when pointing with a mouse or moving keyboard focus to the link.

Please notice that the 3:1 color contrast ratio for links identified only by color should be measured text to text and not text to background.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.