Corporate website Lesson1

Habeeba Naaz asked 6 years ago

Why we used following: Attributes : aria-controls,aria-expanded,aria-label,aria-haspopup. Classes: sr-only, md-form,my-0,form-control,mr-sm-2 in the navbar code snippet.


Bartłomiej Malanowski staff pro premium answered 6 years ago

ARIA (Accessible Rich Internet Applications) is a set of attributes that help the developers to express the semantics of the individual parts of their websites/web applications. It's very important especially for utilities created for people with disabilities such as e.g. screen readers.

Speaking of screen readers, you've mentioned sr-only which mean "screen readers only". Here's an example from the Navbar:

<a class="nav-link" href="#">Home
  <span class="sr-only">(current)</span>
</a>

As you can see, there's a span with class sr-only. This text won't be visible on the screen, but this will be important information to screen reader because in this case, it could inform the user about what's the state of the site actually.

The rest of the mentioned classes are just small helpers. About .my-0 and .mr-sm-2 classes you can read more here.

.md-form and .form-control are used for styling of the text controls (inputs). We have detailed documentation which shows how do we use these classes. I recommend you to take a tour of our forms documentation to learn more about it.


Thank you for your response.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: laptop
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No