The internet


Oh hai!

#46 Accessibility issues 2 years ago

Comment by ~h3artbl33d on ~cadence/tube

Thank you for your kind reply :) Really appreciated. And I think you ask some good questions.

I believe the lang attribute applies to the whole page. The page may contain video titles and descriptions that are written in another language.

You are correct, the language definition for the HTML document describes the entire page. Since CloudTube has an English interface, html(lang="en") makes sense here.

That the titles and descriptions of videos are in another language is not THAT big of an issue (though it is still an accesssibility violation), since screen reader users are (sadly) used to that. Is the information on the video language included 'upstream'? Eg, would it be possible to grab the language from the YT response and to define the language of the video title field and description field seperately as well?

Do you think it would be more appropriate for the placeholder to read "I'd like to watch" or more simply "Search"?

To make things more clear: a placeholder is not the same as a label. A <label> element is needed here, and it needs to be visual as well (we understand accessibility a bit better now).

Regarding the content of the label: "Search a video" would be best, as it would be short and sweet. Just "search" would be more appropriate for a submit button next to the input field.

#46 Accessibility issues 2 years ago

Ticket created by ~h3artbl33d on ~cadence/tube


I installed CloudTube (and Second) today to replace a former Invidious instance. A heartfelt thank you for creating this! It has been a bliss, both the installation and the initial few hours. Me and a friend (whom has more experience with accessibility) went over CloudTube and gave the default installation a small audit. I'd like to share the majority of the findings and the fixes:


  1. The language of the HTML document is not defined, both in /pug/includes/layout.pug and /pug/includes/head.pug. This prevents screen readers of reading the document in the correct language, proper pronounciation and appropriate accent.

    Fix : add a new line under doctype html with:

  2. The search bar in nav and on the home page don't have a label (and a placeholder isn't a viable alternative). A label creates a programmatic association with the field, which is important for assistive technology.

    Fix: There are a few possible fixes. Creata a label with the label element or add an aria-label to the input elements. For example on the home page:

    input(type="text" name="q" placeholder="I'd like to watch..." aria-label="I'd like to watch..." autocomplete="off").search.base-border-look

    Read more: WebAIM: creating accessible forms, MDN web docs: label

  3. On the video page, there is an aside element (the Related videos) within a main element. This is incorrect mark up, since an aside can't be a child element of main.

    Fix: place the aside outside main or change it to a div (a section is not allowed here either, since it can't be used as a general container element) in /pug/video.pug:


    Read more: MDN web docs: the aside element, MDN web docs: the main element, MDN Web docs: the section element

  4. an H1 is missing on the channel page. Visually, the name of the channel is styled as a heading. The rule of thumb is that if it looks like a heading and behaves like a heading, it should really be a heading. This also helps with indicating structure and hierarchy for user agents and assistive technology.


tip: use a contrast tool as WebAiM contrast checker to check the contrast value of old colour combinations and new combinations.

  1. The contrast for placeholder in the search bar in the nav and on the home page isn't sufficient enough. For text, a contrast value of 4.51:1 is advised, to prevent problems with low vision and colour blindness.

    Fix: in /sass/includes/base.sass:

    select, button
      font-family: inherit
      font-size: 16px
      min-width: 0px
      font-family: inherit
      font-size: 16px
      min-width: 0px
        color: white
        color: #c4c4c4
        color: #c4c4c4
        color: #c4c4c4
  2. Link color doesn't have sufficient contrast. For text, a contrast value of 4.51:1 is advised, to prevent problems with low vision and colour blindness.

    Fix: in /sass/includes/colors.sass:

    $link: #8AC2F9
  3. On the settings-page, the arrows on both dropdrown elements have insufficient contrast which makes the arrows hard to see for people with low vision.

    Fix: the arrows are an image, change the colour of the image to colour closer to white than to grey.

  4. Ensure form elements (dropdown b0xes, input fields,...) have a more apparant border. The colour of the current border has insufficient contrast, which makes it hard to see for people with low vision how big the fields are and that there in fact fields present for user input.