Trainline logo
Logos, like any other images, are complicated and can have a variety of “correct” answers for being accessible.
Add aria-label to homepage logo
Adding an aria-label to your navigation elements allows people using screen readers to understand each landmark's purpose quickly.
To add an aria label to your homepage logo:
Select your navigation logo link and add the following attributes:
role="navigation" aria-label="Main"
Useful resources:ARIA - Navigation Role accessibility
Image/logos and link:
In order for a link to be readable by screen reader users links must all contain either plain text, or in the case of a linked image, alt text describing where the link goes. If the linked image contains text, a good general rule is to make the alt text the same, or similar to the text in the image.
Make sure touch controls like nav brand logo, hamburger menus, social icons, gallery viewers, etc. are usable by a wide range of hand and stylus sizes. This doesn’t include footnotes or icons in or at the end of a sentence.
WCAG reference:2.5.5 Target size
Company logos do not need to meet accessibility criterion per WCAG 1.4. 3 ("Text that is part of a logo or brand name has no contrast requirement").
However, if you have flexibility with the logo design and can make it pass contrast guidelines, that's a great thing to do.
Summary:
Use appropriate alt text
use appropriate focus state (if contained within a link)
don't worry about size
don't worry about color contrast
don't worry about scalability
don't worry about hover states
Include alt text for every important logo/image
Alt text describes images to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image.
Decorative images:
Images/logos that are not necessary for comprehending or engaging with the content are considered decorative. Decorative images/logos should be marked as decorative or screen readers will guess a description, usually speaking aloud a sometimes cumbersome filename like “hero-image_293_version_953”.
See W3’s alt text decision tree to help determine whether an image is decorative.
Refer to the icon component under accessibility tab for more: Icon
D-system’s aim is simple: to make train and coach travel easier. We care about encouraging people to make more environmentally sustainable travel choices. Simply put, we are a business with heart and we want our logo to reflect this.
Our logo is a simple green symbol combining a heart, interlinking journeys and a tick for positivity; more human and reflective of Trainline today.
Our logo should always appear in either Mint 100 or White.
Trainline Partner Solutions
Social Icons
All social media platforms require a square icon to be uploaded. However, there is a variation in how they are displayed - some use a square format, others use round. Due to this, we have two versions that have been optically adjusted for each format.
Clear space
Our clear space rule is simply calculated by dividing the height of the logo in half. This measurement indicated by (b) in the diagram becomes our unit for spacing.
Co-branding
Our co-branding system follows the same rules as our clear space method with the addition of a vertical bar to divide the two logos.
