[FEATURE] Add alt-text to login logo

The login logo for the default logo is set to "TYPO3 logo".
For custom logos an alt-attribute for the image tag can
be configured.

In v12 it will be required to configure the alt-text to
ensure accessibility.

Resolves: #92628
Releases: master
Change-Id: Ib35b8fbdbff08e7c9a1e778fc62d8135214d1af0
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/66222Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Richard Haeser <richard@richardhaeser.com>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Richard Haeser <richard@richardhaeser.com>

typo3/sysext/backend/Classes/Controller/LoginController.php

@@ -399,27 +399,37 @@ class LoginController implements LoggerAwareInterface
         }
 
         // Logo
+        $logo = '';
+        $logoAlt = '';
         if (!empty($extConf['loginLogo'])) {
             if ($this->getUriForFileName($extConf['loginLogo']) === '') {
                 $this->logger->warning(
                     'The configured TYPO3 backend login logo "' . htmlspecialchars($extConf['loginLogo']) .
                     '" can\'t be resolved. Please check if the file exists and the extension is activated.'
                 );
+            } else {
+                $logo = $extConf['loginLogo'];
+                $logoAlt = trim($extConf['loginLogoAlt']);
+                if (empty($logoAlt)) {
+                    trigger_error('Login logo without alt-text is not accessible and will fall back to "TYPO3 CMS logo" in v12. Configure alt-text in the backend extension.', E_USER_DEPRECATED);
+                }
             }
-            $logo = $extConf['loginLogo'];
-        } else {
+        }
+        if (!$logo) {
             // Use TYPO3 logo depending on highlight color
             if (!empty($extConf['loginHighlightColor'])) {
                 $logo = 'EXT:backend/Resources/Public/Images/typo3_black.svg';
             } else {
                 $logo = 'EXT:backend/Resources/Public/Images/typo3_orange.svg';
             }
+            $logoAlt = $this->getLanguageService()->getLL('typo3.altText');
             $this->pageRenderer->addCssInlineBlock('loginLogo', '
 				.typo3-login-logo .typo3-login-image { max-width: 150px; height:100%;}
 			');
         }
         $this->view->assignMultiple([
             'logo' => $this->getUriForFileName($logo),
+            'logoAlt' => $logoAlt,
             'images' => [
                 'capslock' => $this->getUriForFileName('EXT:backend/Resources/Public/Images/icon_capslock.svg'),
                 'typo3' => $this->getUriForFileName('EXT:backend/Resources/Public/Images/typo3_orange.svg'),

typo3/sysext/backend/Resources/Private/Language/locallang.xlf

@@ -26,22 +26,25 @@ Have a nice day.</source>
 				<source>Switch to user %s</source>
 			</trans-unit>
 			<trans-unit id="config.loginLogo" resname="config.loginLogo">
-				<source>Logo: If set, this logo will be used instead of the TYPO3 logo above the login credential fields (e.g. fileadmin/images/login-logo.png or EXT:my_theme/Resources/Public/Images/login-logo.png or //domain.tld/login-logo.png)</source>
+				<source>Logo: If set, this logo will be used instead of the TYPO3 logo above the login credential fields (e.g. fileadmin/images/login-logo.png or EXT:my_theme/Resources/Public/Images/login-logo.png or //domain.tld/login-logo.png).</source>
+			</trans-unit>
+			<trans-unit id="config.loginLogoAlt" resname="config.loginLogoAlt">
+				<source>Logo Alt-Text: If a custom logo is set, this text will be used as the alt attribute of the img tag.</source>
 			</trans-unit>
 			<trans-unit id="config.loginHighlightColor" resname="config.loginHighlightColor">
 				<source>Highlight Color: If set, this color will be used as highlight color in the login screen.</source>
 			</trans-unit>
 			<trans-unit id="config.loginBackgroundImage" resname="config.loginBackgroundImage">
-				<source>Background Image: If set, this image will be used as background image for the login screen (e.g. fileadmin/images/my-background.jpg or EXT:my_theme/Resources/Public/Images/my-background.jpg or //domain.tld/my-background.png)</source>
+				<source>Background Image: If set, this image will be used as background image for the login screen (e.g. fileadmin/images/my-background.jpg or EXT:my_theme/Resources/Public/Images/my-background.jpg or //domain.tld/my-background.png).</source>
 			</trans-unit>
 			<trans-unit id="config.loginFootnote" resname="config.loginFootnote">
-				<source>Footnote: If set, this text will be displayed on the login screen to provide copyright information for the background image (e.g. © 2017 by Foo Bar) or a descriptive text</source>
+				<source>Footnote: If set, this text will be displayed on the login screen to provide copyright information for the background image (e.g. background image © 2017 by John Doe) or a descriptive text.</source>
 			</trans-unit>
 			<trans-unit id="config.backendLogo" resname="config.backendLogo">
-				<source>Logo: If set, this logo will be used instead of the TYPO3 logo in the TYPO3 Backend in the left top corner (e.g. fileadmin/images/backend-logo.png or EXT:my_theme/Resources/Public/Images/backend-logo.png)</source>
+				<source>Logo: If set, this logo will be used instead of the TYPO3 logo in the TYPO3 backend in the left top corner (e.g. fileadmin/images/backend-logo.png or EXT:my_theme/Resources/Public/Images/backend-logo.png).</source>
 			</trans-unit>
 			<trans-unit id="config.backendFavicon" resname="config.backendFavicon">
-				<source>Favicon: If set, this favicon will be used instead of the TYPO3 logo (e.g. EXT:my_theme/Resources/Public/Images/favicon.ico)</source>
+				<source>Favicon: If set, this favicon will be used instead of the TYPO3 logo (e.g. EXT:my_theme/Resources/Public/Images/favicon.ico).</source>
 			</trans-unit>
 			<trans-unit id="foldertreeview.noFolders.title" resname="foldertreeview.noFolders.title">
 				<source>No folders available</source>

typo3/sysext/backend/Resources/Private/Language/locallang_login.xlf

@@ -66,6 +66,9 @@
 			<trans-unit id="typo3.cms" resname="typo3.cms">
 				<source>TYPO3 CMS</source>
 			</trans-unit>
+			<trans-unit id="typo3.altText" resname="typo3.altText">
+				<source>TYPO3 CMS logo</source>
+			</trans-unit>
 			<trans-unit id="version.short" resname="version.short">
 				<source>ver.</source>
 			</trans-unit>

typo3/sysext/backend/Resources/Private/Layouts/Login.html

@@ -7,7 +7,7 @@
                     <header class="card-heading">
                         <h1 class="sr-only"><f:translate key="login.header" /></h1>
                         <div class="typo3-login-logo">
-                            <img src="{logo}" class="typo3-login-image" alt="" />
+                            <img src="{logo}" class="typo3-login-image" alt="{logoAlt}" />
                         </div>
                     </header>
                     <main class="card-body">

typo3/sysext/backend/ext_conf_template.txt

@@ -5,6 +5,9 @@
 # cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginLogo
 loginLogo =
 
+# cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginLogoAlt
+loginLogoAlt =
+
 # cat=Login; type=color; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginHighlightColor
 loginHighlightColor =
 

typo3/sysext/core/Documentation/Changelog/master/Deprecation-92628-LoginLogoWithoutAltText.rst

+.. include:: ../../Includes.txt
+
+=================================================
+Deprecation: #92628 - Login Logo without Alt-Text
+=================================================
+
+See :issue:`92628`
+
+Description
+===========
+
+The configuration of the extension "backend" has now the possibility to
+provide an alt-text for a custom login logo.
+
+As an alt-text is needed for accessibility reasons, not setting an alt-text is
+deprecated.
+
+
+Impact
+======
+
+Not configuring an alt-text will trigger a PHP :php:`E_USER_DEPRECATED` error.
+
+
+Affected Installations
+======================
+
+All instances that have defined a custom login logo are affected.
+
+
+Migration
+=========
+
+Configure an alt-text for your custom login logo.
+
+.. index:: Backend, NotScanned, ext:backend

typo3/sysext/core/Documentation/Changelog/master/Feature-92628-AddAltTextToLoginLogo.rst

+.. include:: ../../Includes.txt
+
+============================================
+Feature: #92628 - Add Alt-Text To Login Logo
+============================================
+
+See :issue:`92628`
+
+Description
+===========
+
+The configuration of the extension "backend" has now the possibility to
+provide an alt-text for a custom login logo.
+
+In the module "Admin tools > Settings" go to card "Extension Configuration"
+and open the dialog. Select extension "backend" and fill out the field
+"Logo Alt-Text" on the "Login" tab. You can also set :php:`$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginLogoAlt']`.
+
+
+Impact
+======
+
+Setting the alt-text enhances the accessibility of the login page.
+
+.. index:: Backend, ext:backend