Certainly! Let's create a semantic and accessible HTML/CSS UI component for a simple navigation bar, which will consist of a logo on the left and a list of navigation links on the right. We'll use a responsive layout for this component.

HTML Structure:

<header class="navbar">
  <div class="container">
    <div class="logo">
      <a href="#home">Your Logo</a>
    </div>
    <nav class="nav-links">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

CSS (Using CSS Flexbox for Layout):

/* Reset styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Navbar styles */
.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo a {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links ul {
  list-style: none;
  display: flex;
}

.nav-links li {
  margin-right: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ffd700; /* Change to your preferred hover color */
}

This HTML/CSS component creates a navigation bar with a logo on the left and navigation links on the right. It uses flexbox for layout, making it responsive and accessible. You can further customize the styles according to your design requirements. Additionally, don't forget to add accessibility features such as appropriate ARIA roles and labels for screen readers to make the component fully accessible.