Open accessibility issues
We got an audit for our UI, we should open and fix the coresponding issues:
Report_NGI_Funkwhale_-_accessibility_audit.pdf
Markdown version
March 2, 2020, Utrecht, The Netherlands
The Accessibility Foundation
WCAG 2.1 - Level AA
Digital accessibility quick scan report
FunkWhale
- Introduction
- Suggestions on how to use this quick scan evaluation
- Web Content Accessibility Guidelines
- Result research
- 1.1.1 Non-text Content
- 1.3.1 Info and Relationships
- 1.4.3 Contrast
- 1.4.5 Images of Text
- 1.4.10 Reflow
- 1.4.11 Non-text Contrast
- 2.1.1 Keyboard
- 2.4.1 Bypass Blocks
- 2.4.2 Page Titled
- 2.4.3 Focus Order
- 2.4.4 Link Purpose
- 3.1.2 Language of Parts
- 3.2.1 On Focus
- 3.3.1 Error Identification
- 4.1.2 Name, Role, Value
- 4.1.3 Status Messages
- Evaluation information
- Scope
- Pages in the sample
Introduction
The Accessibility Foundation is the centre of expertise in the field of digital accessibility and based in the Netherlands. We research, test and develop digital accessibility solutions. We provide support, recommendations and audit services for websites, media, technology and apps. Through our work in W3C and the EU we are actively helping to set the standards that shape accessibility. We cooperate with (inter) national stakeholders and leading European partners. We participate in relevant working groups at national and international level. The Accessibility Foundation was founded in 2001 by Bartiméus, a large Dutch health and education organization for people with a visual disability. In Europe, Accessibility is an important provider of expertise in the digital accessibility domain and active in many European and local projects.
Read more about our foundation on our website: https://www.accessibility.nl/english.
Suggestions on how to use this quick scan evaluation
This quick scan evaluation describes how much of your widget is compliant to the requirements of the Web Content Accessibility Guidelines version 2.1 (WCAG). The result research also contains common failures. These can be used to recognize reoccurring problems. Websites that comply with these guidelines are accessible to people with disabilities as well as older individuals with changing abilities due to aging.
The result research below contains examples of problems that have been found in the evaluation. This is not a complete list of all the problems that were found. When upgrading the website or application based on this report it is important to remember to not only solve the problems given in the report but to also look at other pages. It is possible that despite targeted searches not all problems have been found. These problems might come up in a future evaluation. We would therefore advise that when improving the website the focus should not be limited to the problems described in this report.
Web Content Accessibility Guidelines
WCAG 2 guidelines are divided over four principles (perceivable, operable, understandable and robust). These make up the core of WCAG 2. Every guideline is then divided into one or more measurable success criteria. Because WCAG 2 is designed independent of any specific technology, all web content, including file formats such as PDF and Microsoft Office Word can be evaluated with WCAG 2.
Result research
This accessibility quick scan was completed on March 2, 2020. The standard for this
quick scan audit is WCAG 2.1, level AA (see https://www.w3.org/TR/WCAG21).
1.1.1 Non-text Content
The whale-logo on every page has a title=”Funkwhale”. Because not all screen readers tend to read title-attributes, we advise to either use link text (the text between the anchor tags) or to use the
element on the svg.On every page, next to the logo, there is an image of the text ‘Funkwhale’. Images of texts can lead to accessibility issues, we therefore highly recommend to use HTML and CSS instead (see also criterion 1.4.5). Another solution is to merge the whale logo and the ‘Funkwhale’ text and treat them together as one logo. Then only one text alternative is needed.
The image of the whales on page https://open.audio/ doesn’t have an alt-tag. Images always need to have an alt-tag. In this case the image is decorative, so the alt tag can be empty (alt=””). This way assistive technologies will ignore the image.
The same goes for all the images that are used as covers of Albums/Tracks/Artists and profile pictures. These should have an (empty) alt-tag. Because these pictures result from content created by users, the alt-tag must be created when a user uploads an image to ensure consistency. On page https://open.audio/settings the avatar image needs an alt-tag. As mentioned above, when pushing the avatar to public pages, it should have an (empty) alt-tag.
1.3.1 Info and Relationships
On some pages, some headers cannot programmatically be determined as being such.
They often have a class=’header’, but this is not the same as coding them as header
elements, for instance as <h2>
. As a consequence users of assistive technologies may
experience trouble understanding the structure of the page. See the title ‘Random’ and
the titles of the radios, such as ‘Sens Radio’ on page https://open.audio/library/radios.
On some pages the <strong>
element has been used for titles. The <strong>
element is
meant to emphasize one or a few words, not for layout purposes. See the titles of the
albums, artists, username, etc. See also the labels on some pages behind the login, such
as ‘Podcasts’ in the lightbox that opens when clicking on ‘Add new’ on
https://open.audio/@accessibilitytest/. These are just a few examples.
Some input fields don’t have a label, often because the label hasn’t been
programmatically connected to the input field. Connection can be made using <label for=>
and <input id=>
, where the for-value is equal to the id-value. See for instance the
input field ‘Username or email’ and ‘Change language’ on page https://open.audio/. The Search field on every page also misses a label; placeholder text is not sufficient as it disappears when the user starts typing. The issue with missing labels happens on multiple pages, also behind the log in.
When clicking on ‘Add new’ on page https://open.audio/@accessibilitytest/ a lightbox
‘Create channel’ appears in view. The radio buttons are not programmatically
connected to the question. Use a <fieldset>
and <legend>
(see
https://www.w3.org/WAI/WCAG21/Techniques/html/H71 for how to do this.)
On the page https://open.audio/ it would be better for the HTML structure if the
header ‘About this Funkwhale pod’ would be an <h2>
. Now it’s an <h3>
, just like its
subheaders ‘Statistics’ and ‘Contact’.
1.4.3 Contrast
Some texts have a low contrasting value. This is for instance the case for the blue links on all pages (4:1), the light grey texts below each track (2.9:1) and the placeholder texts (1.3:1). This can create problems for visually impaired users. The contrast of text should be at least 4.5:1 for normal-sized text. (Large text is defined as text that is at least 18pt (24px) or 14pt(18,66px) combined with a bold font. If the contrast switch to dark mode provides contrast ratios of at least 4.5:1, then it is not necessarily needed to change the contrast values for the light mode, but the dark mode doesn’t seem to work (yet).
On page https://open.audio/settings the yellow ‘Change password’ button has a low contrasting value (1.7:1).
1.4.5 Images of Text
As mentioned under criterion 1.1.1, the text ‘Funkwhale’ next to the logo is an image of text. Visually impaired users can encounter issues perceiving the letters as they cannot customize them. Please use HTML text instead and use CSS for markup.
1.4.10 Reflow
When the page https://open.audio/library/tags/Disco is displayed in a viewport of 320px wide the three dot-buttons under ‘Tracks’ disappear from view.
When a track is being played, a bar appears on the bottom of the page, with options such as pause, next, replay, etc. When the page is viewed in a smaller viewport and/or zoomed in, some of the buttons are no longer visible.
1.4.11 Non-text Contrast
Some non-text elements have a low contrasting value. Some examples are: the orange Play-buttons (2.9:1; this colour combination also appears on page https://open.audio/library/playlists/186 ), the green buttons (f.i. ‘Login’, 2.6:1), the search icon (2.4:1) and the borders of the input fields (1.3:1; 2.1:1 when the input field receives focus). This should be at least 3:1. If the contrast switch in dark mode provides contrast ratios of at least 4.5:1, then it is not necessarily needed to change the contrast values for the light mode, but the dark mode doesn’t seem to work (yet).
2.1.1 Keyboard
On multiple pages there are elements that aren’t operable by using a keyboard alone. This creates issues for users who cannot use a mouse. Below are some examples.
On page https://open.audio/ the three dots below every Album aren’t operable. This problem with the three dots appears on multiple pages.
On page https://open.audio/login the links ‘Create an account’ and ‘Reset your password’ aren’t operable. The same goes for the button next to the Password field that hides or shows the password. This button appears on multiple pages.
When a track is being played, a media player appears on the bottom of the page. The buttons in this player (pause/play/replay/etc.) aren’t operable.
On https://open.audio/@accessibilitytest/ the ‘Edit’ link, the ‘Cancel’ button (when clicking on ‘Edit’) and the ‘Add new’ link aren’t operable.
On page https://open.audio/settings the buttons ‘Upload new picture’ and ‘Remove’ aren’t operable.
On page https://open.audio/library/playlists when creating or managing a playlist the ‘Cancel’ and close buttons in the lightbox aren’t operable. The same goes for the buttons ‘Insert from queue’ and ‘Clear’. It also is the case for the red trash can buttons and the dropdown button next to the orange ‘Play all’ button, once tracks have been added.
On https://open.audio/content/libraries/ the link ‘Create a new library’ is not operable.
2.4.1 Bypass Blocks
A mechanism should be available to skip content that is repeated throughout the website. This can be done by means of a skiplink. The skiplink can be hidden with CSS and displayed only when it receives the focus, and it should be the first link on the page that receives the focus.
2.4.2 Page Titled
The page https://open.audio/about has a page title ‘Funkwhale’. This doesn’t describe the purpose of the page well enough. Consider using a page title consistent with the other page titles, such as ‘About – Funkwhale’.
The page https://open.audio/ is titled ‘Welcome – Funkwhale’, whereas the page https://open.audio/library is titled ‘Home – Funkwhale’. This creates some confusion as it seems that https://open.audio/ is the Homepage. Consider using page titles that describe the purpose of the page clearer, such as ‘Home – Funkwhale’ for the open.audio and ‘Library – Funkwhale’ for the library page.
2.4.3 Focus Order
On page https://open.audio/ the fields ‘Username’ and ‘Password’ and the ‘Log in’ button have a tabindex value greater than 0. As a consequence, these two fields receive keyboard focus before anything else. This results in a focus order that is not logical. The fields on page https://open.audio/login also have a tabindex greater than 0.
On page https://open.audio/library/radios the focus order is not logical when going through the User radios. This happens because the DOM order does not correspond with the displayed order.
When playing a track a media player appears. When clicking on the button displaying something like ‘1 of 4’, a lightbox appears. It is possible to tab through the page (behind the lightbox) while the lightbox remains in view. The focus should remain within the lightbox until it has been closed. Another example of this issue is page https://open.audio/library/playlists when creating a new playlist. It should not be possible to tab behind this lightbox. This issue happens on all pages with lightboxes.
2.4.4 Link Purpose
On page https://open.audio/library/artists the arrows next to the page numbers, indicating previous/next, do not have a link purpose, because link text (the text between the anchor tags) is missing.
We noticed that some links have both link text as well as a title-attribute. This is redundant, as the link text is already being read by screen readers. We advise removing the title-attribute to avoid that some screen readers will read this text twice. See for instance the links on page https://open.audio/library/tags/Disco.
3.1.2 Language of Parts
The language attribute of the pages is set to English (lang=”en”) regardless of what language has been selected. Because not everything on the page is translated (yet) this is fine, but as in the future the aim might be to provide a whole page in the selected language, it would be good to already start using the selected language in the lang- attribute.
In case it would stay this way, with some texts in English and some in the selected language, a language change (by means of a different language attribute for those texts) must be indicated for the texts that are different from the language indicated by the language attribute.
3.2.1 On Focus
When one of the filter options receives the focus on page https://open.audio/library/artists the page immediately refreshes. A page shouldn’t initiate a change of context when an element receives the focus. See for instance the options ‘Ordering’ and ‘Order direction’ on page https://open.audio/library/artists.
3.3.1 Error Identification
When the form on page https://open.audio/login has been sent empty, a message pops up: ‘Fill out this field’. This is an instruction, not an error message. Also, the message is not fixed; when you scroll it is unclear to which field the message belonged. A better message would be something along the lines of ‘The field Username has not been filled out’. Also, when you’ve filled in an incorrect email address, you see the message ‘Fill in an email address’. This also doesn’t describe what went wrong, namely that it has not been filled in correctly. See also the form on page https://open.audio/signup.
4.1.2 Name, Role, Value
On the page https://open.audio/ the Play-buttons have a title=”Play now”. The three dots have title=”More...”. Because not all screen readers read titles, we advise creating button names by using the space between the button tags. The same goes for the button to hide/show password on page https://open.audio/login and https://open.audio/signup. This issue appears on multiple pages.
When a track is being played, a media player appears on the bottom of the page. Inside the player there’s a button displaying something like ‘1 of 4’. The purpose of the button is not clear enough. Also, the button can have two values: expanded or not. These values should be provided in the code (for instance by using the aria-expanded attribute). The delete buttons after each track miss a name.
On the page https://open.audio/@accessibilitytest/ the button with the three dots misses a name. On the same page there are two tabs (Overview/Activity) with a black line indicating the active tab. Which tab is active should also be indicated in the HTML code. The same goes for the tabs on page https://open.audio/settings.
On page https://open.audio/settings the ‘Upload picture’ button and the ‘Remove’ button miss a role (input/button). As a consequence the role cannot be conveyed to users of assistive technologies.
On page https://open.audio/content/libraries/ the link ‘Create a new library’ needs a value (expanded or not).
4.1.3 Status Messages
When error messages appear they should receive the focus. Users of assistive technologies will then hear this message as soon as it appears and understand what happened. This can be accomplished by using role=’alert’. See the login and sign up forms.
When clicking on a track, and then on the button displaying something like ‘1 of 4’, a text appears: ‘4 tracks were added to your queue’. This status message should receive the focus.
Evaluation information
Organisation FunkWhale
Evaluation type Quick scan
Evaluation level WCAG 2.1, level AA
Evaluation date March 2, 2020
User Agents
The following user agents have been used in this evaluation: ● Firefox, version 72 ● Chrome, version 79
Scope
All the pages on https://open.audio
Pages in the sample
● https://open.audio/ - Home
● https://open.audio/library/tags/Disco - Search
● https://open.audio/library - Browse
● https://open.audio/library/artists - Artists
● https://open.audio/library/radios - Radios
● https://open.audio/about - About
● https://open.audio/login - Login
● https://open.audio/signup - Sign up
● https://open.audio/@accessibilitytest/ - Profile
● https://open.audio/settings - Settings
● https://open.audio/library/me/playlists - Create playlist
● https://open.audio/content/libraries/ - Upload library