Best UI display of a company's product name with logo containing words for accessibility



  • I am working on company's product where the name of the product will show in many views in the UI. The product's name has a logo with words only.
    The logo is small 20 -20px and and contains part of the product name. With the name in text on the same line as the logo - the name essentially repeats.

    I'd like to know the best practice for both ux and accessibility.

    For privacy here is an example of the heading that will display on many ui views:

    Mock example 1.

    [logo that says richards creditplus] Richard's CreditPlus financing

    In the above the logo says the same thing as the text line beside it.

    Mock example 2 ( just has the logo to be read and the text leaving out the words in the logo. )

    [logo that says richards creditplus] Financing

    In the above , if the user reads the logo and the word left to right , the name does not repeat. However, a logo is a visual symbol representing the object, so the user is not necessarily reading what it says but recognizing what it is symbolizing. Does it matter if the first example essentially is repeating?

    I hope this makes sense, and I'm happy to clarify any questions.



  • https://a11y.com has an interesting way of handling this.

    Here's what their navigation and logo look like to sighted users:

    a11y screenshot of logo and nav

    And here's the code behind that:

    
    

    The logo does not use an alt attribute because it is telling the screen reader to treat it like a link via the "Visit Homepage" title in the tag.

    The graphic portion of your logo could be handled the same way (as a "Visit Homepage" link), while the name of the product/company can still read out.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2