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.

#Audit

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:

#Technical

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:

   html(lang="en")
   

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:

   section.related-videos
   

   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.

#Contrast

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
   input
     font-family: inherit
     font-size: 16px
     min-width: 0px
     &::-webkit-input-placeholder
       color: white
     &:-moz-placeholder
       color: #c4c4c4
     &::-moz-placeholder
       color: #c4c4c4
     &:-ms-input-placeholder
       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.