-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #32 from MubeenFayyaz-Arbisoft/sami-accessibility
Worked on 1.3/Programmatic Label
- Loading branch information
Showing
4 changed files
with
144 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Programmatic Label | Web Accessibility</title> | ||
| <link | ||
| rel="shortcut icon" | ||
| href="../../assets/images/favicon.png" | ||
| type="image/x-icon" | ||
| /> | ||
| <link rel="stylesheet" href="../../styles/global.css" /> | ||
| </head> | ||
| <body> | ||
| <header class="internal-main-nav"> | ||
| <a href="#main-content" class="skip-content">Skip to main content</a> | ||
| <div class="nav-container internal-page-header"> | ||
| <a href="../../home.html" class="logo"> | ||
| <img | ||
| class="logo__image" | ||
| src="../../assets/images/accessibility-logo.svg" | ||
| alt="logo" | ||
| /> | ||
| </a> | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a href="../../about-us.html"> About Us</a> | ||
| </li> | ||
| <li> | ||
| <a href="../../all-tools.html">All Tools</a> | ||
| </li> | ||
| <li> | ||
| <a href="../../our-certfications.html">Our Certifications</a> | ||
| </li> | ||
| <li> | ||
| <a href="../../support.html">Our Support</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| <main class="main-content"> | ||
| <div class="text-center contianer-div position-relative"> | ||
| <div | ||
| class="text-start position-absolute" | ||
| style="top: -10px; left: 40px" | ||
| > | ||
| <a class="back-link" href="../../home.html#programmatic-label"> Back Home</a> | ||
| </div> | ||
| <h1 class="text-center white-color large-heading">Programmatic Label</h1> | ||
| </div> | ||
| <div class="container-body"> | ||
| <div> | ||
| <figure class="demo-figure"> | ||
| <img | ||
| class="demo-img" | ||
| src="../../assets/images/programmatic-label.png" | ||
| alt="Image showing an input field with label programmatically associated with it using label for attribute" | ||
| /> | ||
| <figcaption> | ||
| <span class="material-symbols-outlined" aria-hidden="true"> photo_camera </span> Fig: Input field programmatically labeled using <label> and "for" attribute. | ||
| </figcaption> | ||
| </figure> | ||
| </div> | ||
| <div> | ||
| <h3>Usage of <label> and "for" attribute in HTML:</h3> | ||
| <p class="plain-text"> | ||
| The <strong><label></strong> element in HTML is used to associate descriptive text with form controls, improving usability and accessibility. By using the <strong>for</strong> attribute, the label is explicitly linked to a specific form element via its <strong>id</strong>. This connection allows users to interact with the form control by clicking on the label and ensures screen readers convey the label's purpose effectively, enhancing the form's overall accessibility. | ||
| </p> | ||
|
|
||
| <!-- code structure start --> | ||
|
|
||
| <div class="code-toolbar"> | ||
| <pre class="code-text" id="programmatic-label-demo-code"> | ||
| <code class="language-css"> | ||
| <label for="fname">First name:</label> | ||
| <input id="fname" type="text" placeholder="First name"> | ||
| </code> | ||
| </pre> | ||
| <div class="toolbar"> | ||
| <button class="copy-text-btn" type="button" data-target="programmatic-label-demo-code"> | ||
| Copy | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <hr class="hr" aria-hidden="true"> | ||
|
|
||
| <div> | ||
| <figure class="demo-figure"> | ||
| <img | ||
| class="demo-img" | ||
| src="../../assets/images/programmatic-label2.png" | ||
| alt="Image showing an input field with label programmatically associated with it using aria-label attribute" | ||
| /> | ||
| <figcaption> | ||
| <span class="material-symbols-outlined" aria-hidden="true"> photo_camera </span> Fig: Input field programmatically labeled using "aria-label" attribute. | ||
| </figcaption> | ||
| </figure> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h3>Usage of aria-label attribute in HTML:</h3> | ||
| <p class="plain-text"> | ||
| The <strong>aria-label</strong> attribute in HTML is used to provide an accessible name for an input field. It offers a way to describe the purpose of the input directly to assistive technologies like screen readers, ensuring users with disabilities can understand and interact with the field effectively. | ||
| </p> | ||
|
|
||
| <!-- code structure start --> | ||
|
|
||
| <div class="code-toolbar"> | ||
| <pre class="code-text" id="programmatic-label-demo-code2"> | ||
| <code class="language-css"> | ||
| <input aria-label="First name" type="text" placeholder="First name"> | ||
| </code> | ||
| </pre> | ||
| <div class="toolbar"> | ||
| <button class="copy-text-btn" type="button" data-target="programmatic-label-demo-code2"> | ||
| Copy | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </main> | ||
|
|
||
| <script | ||
| src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | ||
| <script src="../../assets/js/script.js"></script> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters