Richtige ARIA - Accessibility Auszeichnungen?

Heute geht es mir um eine korrekte ARIA - Accessibility Auszeichnung:

A) Die (TAB) Skip- Links

<!-- Skip links -->
<nav role="navigation" aria-label="skiplinks" id="skiplinks">
	<a href="#main-content" class="skip-link">Zum Haupt&shy;inhalt springen</a>
	<a href="#totop" class="skip-link">Zum Skip&shy;button springen</a>
	<a href="#foot-global"class="skip-link">Zum Footer springen</a>
</nav>

B) Meine Haupt - Navigation

<!-- HAUPT - Navigation -->
<nav id="main-nav" aria-label="MainNav">
  <details id="site-nav-heading">
	<summary aria-labelledby="site-nav-heading">Haupt-&shy;Navigation</summary>
	  <ul aria-labelledby="site-nav-heading">
		<li><a href="">Website Erika Mustermann</a></li>
		<li><a href="">Blog Max Mustermann</a></li>
	  </ul>
  </details>
</nav>

C) Ein INTERNES SKIPPEN zu einzelnen BLOG-ARTIKELN (geordnet nach Datum & Uhrzeit

<nav id="navigations" class="" aria-labelledby="skiptosection-label">
<h3 id="skiptosection-label" class="visually-hidden">Intern-Site-Navigation</h3>
<div class="skipsection-links">
<details>
	<summary class="site-navigation-header">Inhalt</summary>					
		<ul class="site-nav-skiplinks">
			<li><a href="#blogartikel05">20-02-2024<span>13:00 Uhr</span></a></li>
			<li><a href="#blogartikel04">12-02-2024<span>14:30 Uhr</span></a></li>
		</ul>
</details>
</div>
</nav>

D) Zum Schluss noch der Nach-OBEN (SKIP - to - Top) Button

<!-- SKIP - to TOP LINK -->	
<nav id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper">
<h2 class="visually-hidden">Skip-to-TOP</h2>
	<div id="skiptop-label" class="scroll-top_link">
		<a href="#skip-to-top"><span>skip to top</span></a>
	</div>
</nav>

Bitte das mal zu korregieren.

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

MasterFAQ

21.06.2024, 10:45

<!-- Skip links -->
<nav role="navigation" aria-label="Skip links" id="skiplinks">
    <a href="#main-content" class="skip-link">Zum Haupt&shy;inhalt springen</a>
    <a href="#totop" class="skip-link">Zum Skip&shy;button springen</a>
    <a href="#foot-global" class="skip-link">Zum Footer springen</a>
  </nav>

<!-- HAUPT - Navigation -->
<nav id="main-nav" aria-label="Hauptnavigation">
    <details>
        <summary id="site-nav-heading">Haupt&shy;Navigation</summary>
        <ul aria-labelledby="site-nav-heading">
            <li><a href="">Website Erika Mustermann</a></li>
            <li><a href="">Blog Max Mustermann</a></li>
        </ul>
    </details>
</nav>

<nav id="navigations" aria-labelledby="skiptosection-label">
    <h3 id="skiptosection-label" class="visually-hidden">Intern-Site-Navigation</h3>
    <div class="skipsection-links">
        <details>
            <summary class="site-navigation-header">Inhalt</summary>
            <ul class="site-nav-skiplinks">
                <li><a href="#blogartikel05">20-02-2024<span>13:00 Uhr</span></a></li>
                <li><a href="#blogartikel04">12-02-2024<span>14:30 Uhr</span></a></li>
            </ul>
        </details>
    </div>
</nav>

<nav id="navigations" aria-labelledby="skiptosection-label">
    <h3 id="skiptosection-label" class="visually-hidden">Intern-Site-Navigation</h3>
    <div class="skipsection-links">
        <details>
            <summary class="site-navigation-header">Inhalt</summary>
            <ul class="site-nav-skiplinks">
                <li><a href="#blogartikel05">20-02-2024<span>13:00 Uhr</span></a></li>
                <li><a href="#blogartikel04">12-02-2024<span>14:30 Uhr</span></a></li>
            </ul>
        </details>
    </div>
</nav>

Woher ich das weiß:Berufserfahrung – Web-Development , C++ , Python , Java

Moni98799

Beitragsersteller

21.06.2024, 22:02

Ähm sorry... ich bin ein pedantischer Meeseeks...

bei D) hast Du lediglich C) hineinkopiert:

Muss es aber heissen bei D) Der Nach-OBEN (SKIP - to - Top) Button

<!-- SKIP - to TOP LINK -->    
<nav aria-labelledby="skip-top-label" id="skiptop" class="scroll-top-wrapper">
<h3 id="skip-top-label" class="visually-hidden">Skip-to-TOP</h3>
    <div class="scroll-top_link">
        <a href="#skip-to-top"><span>skip to top</span></a>
    </div>
</nav>

DANKE Dir...

MasterFAQ

23.06.2024, 00:34

@Moni98799

c) <nav id="navigations" aria-labelledby="skiptosection-label">
    <h3 id="skiptosection-label" class="visually-hidden">Intern-Site-Navigation</h3>
    <div class="skipsection-links">
        <details>
            <summary class="site-navigation-header">Inhalt</summary>
            <ul class="site-nav-skiplinks">
                <li><a href="#blogartikel05">20-02-2024<span>13:00 Uhr</span></a></li>
                <li><a href="#blogartikel04">12-02-2024<span>14:30 Uhr</span></a></li>
            </ul>
        </details>
    </div>
</nav>

d) <!-- SKIP - to TOP LINK -->   
<nav aria-labelledby="skip-top-label" id="skiptop" class="scroll-top-wrapper">
  <h3 id="skip-top-label" class="visually-hidden">Skip-to-TOP</h3>
  <div class="scroll-top_link">
    <a href="#skip-to-top"><span>skip to top</span></a>
  </div>
</nav>

Sorry ^.^

Moni98799

Beitragsersteller

23.06.2024, 00:51

@MasterFAQ

Alles gut, ich Danke Dir...

MasterFAQ

23.06.2024, 00:51

@Moni98799

easy

Ähnliche Beiträge

HTML Code für Weiterleitung nachdem schauen eines Videos?

Also ich möchte in meine Website ein Video einbauen das dich erst nachdem man es ganz zu Ende geguckt hat ohne zu Skippen automatisch auf eine andere Website weitergeleitet wird kennt jemand den HTML Code dafür?

...zum Beitrag

Programmierung herkömmlich HTML versus CMS?

Früher habe ich Websites mit Dreamweaver gemacht, sprich mit HTML und ensprechender Datenbank-Anbindung. Heute kann man ja auf verschiedene Frameworks und Content Management Systeme zurückgreifen.

Welche Gründe sprechend heute dagegen es wie früher händisch zu machen?

...zum Beitrag

JavaScript vs. Flutter und Dart?

Was findet ihr besser?

HTML, CSS und Javascript

Oder

Dart und Flutter

...zum Beitrag

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zum Beitrag

Microsoft Edge zeigt HTML Code nur in html an und nicht so wie´s eig. sein soll?

Wie kann ich das ändern?

Habe das auf Visual Studio Code gemacht.

...zum Beitrag

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zum Beitrag

HTML in Webseite ändern und beibehalten?

Wie bleibt die Veränderte HTML auf einer Webseite gibt's da Möglichkeiten

...zum Beitrag

Input required?

Wie kann ich mit Javascript ein Input required machen, denn bei Html kann man es ja ändern bei untersuchen

...zum Beitrag

Timer auf Webseite (HTML)?

Wie kann ich in JTML einen Versteckten Tiger stellen, so dass einige Texte erst nach Ablauf des Timers (z.B. 10 sek.) Auftauchen. Der endbenutzer soll davon nichts sehen!

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Stichpunkte mit Html bearbeiten?

Hii ich versuch gerade html zu lernen und will listen machen.

So sieht die Website gerade aus:

Ich möchte das der text von den verschiedenen Stichpunkten verschiedene farben hat also, dass Katze: Lila Hund:Pink Otter:blau. Außerdem möchte ich das die herzen for den Stichpunkten Pfoten sind.

Das ist mein Code:

Wie muss ich den abändern damit das funktioniert?

(Außerdem funktioniert meine Css Datei nicht wäre nett wenn mir da auch wer weiterhelfen könnte)

...zum Beitrag

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

...zum Beitrag

CSS-Table zentrieren?

Hallo!

Ich möchte dieses Diagramm und diese Tabelle zentrieren? Doch wie geht das?



<div id="curve_chart" style="width: 900px; height: 500px"></div>

<table class="center">
    <thead>
        <tr>
            <th>ID</th>
            <th>Temperatur</th>
            <th>Zeitpunkt</th>
        </tr>
    </thead>
    <tbody>
        {% for temp in temps %}
        <tr>
            <td>{{temp.id }}</td>
            <td>{{temp.temperatur }}</td>
            <td>{{temp.zeitpunkt }}</td>
        </tr>
        
        {% endfor %}
        
    </tbody>
</table>


{% endblock %}

...zum Beitrag

Gibt es einen Unterschied zwischen dem <img> und dem <picture> Tag in HTML?

Unterschied <img> & <picture> tag bei HTML

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen