Webseite – die besten Beiträge

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.

HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung

Bashskript Problem?

Ich habe hier ein Bashskript, welches Dateien überwacht (noch nicht vollständig und absolut unoptimiert). Ich weiß, dass es Tools gibt, aber es ist ein Projekt für die Uni und deshalb ist Optimierung und Effizienz nicht wirklich wichtig. Ich möchte damit die Grundlagen des Shellscriptings einfach etwas lernen.

Das ist bisher das Script:

#!/bin/bash


echo "Das Skript wurde gestartet. Der Typ Ihres Betriebssystem ist "\"$OSTYPE\""."


# If-Abfrage, die das Betriebssystem erkennt und den Pfad zum überwachten Ordner oder Datei festlegt # HIER BITTE DIE PFADE ZUM ZU ÜBERWACHENDEN ORDNER EINTRAGEN   
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
    BASE_DIRECTORY=" " # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = Linux
elif [[ "$OSTYPE" == "darwin"* ]]; then
    BASE_DIRECTORY="/Users/name/Library/CloudStorage/GoogleDrive-email@gmail.com/Meine Ablage/Uni/TestOrdner" # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = MacOs
elif [[ "$OSTYPE" == "win32" || "$OSTYPE" == "msys" || "$OSTYPE" == "cygwin" ]]; then
    BASE_DIRECTORY="/g/Meine Ablage/Uni/TestOrdner" # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = Windows
else    
    echo "Das Betriebssystem ist unbekannt." # Wenn das Betriebssystem unbekannt ist, wird eine Fehlermeldung ausgegeben
    exit 1
fi


DIRECTORY="$BASE_DIRECTORY" # Pfad zum Ordner
FILE="$BASE_DIRECTORY/Datei.txt" # Pfad zur Datei   
FILE2="$BASE_DIRECTORY/Datei2.txt" # Pfad zur Datei2 


cd "$BASE_DIRECTORY" || {
    echo "Wechsel zu $BASE_DIRECTORY fehlgeschlagen!" # Wechselt in den TestOrdner oder gibt eine Fehlermeldung aus
    exit 1;
}



# Funktion, um zu überprüfen, ob Dateien gelöscht wurden
checkIfDeleted() {
    if [ ! -f "$FILE" ]; then 
        echo "Die Datei \"$(basename "$FILE")\" wurde gelöscht, umbenannt oder verschoben."
    elif [ ! -f "$FILE2" ]; then
        echo "Die Datei \"$(basename "$FILE2")\" wurde gelöscht, umbenannt oder verschoben."
    elif [ ! -d "$DIRECTORY" ]; then
        echo "Der Ordner \"$(basename "$DIRECTORY")\" wurde gelöscht, umbenannt oder verschoben."
    fi
}


# Speichert den "ursprünglichen" Hash-Wert der Dateien
ORIGINAL_HASH=$(md5 -q "$FILE")
ORIGINAL_HASH2=$(md5 -q "$FILE2")


checkIfEdited() {
    if [ ! -f "$FILE" ]; then # Wenn $FILE nicht existiert, dann wird das Skript hier beendet
    return
    fi


    if [ ! -f "$FILE2" ]; then # Wenn $FILE2 nicht existiert, dann wird das Skript hier beendet
    return
    fi


    if [ ! -d "$DIRECTORY" ]; then # Wenn $DIRECTORY nicht existiert, dann wird das Skript hier beendet
    return
    fi


    # Berechnet den aktuellen Hash-Wert der Dateien
    CURRENT_HASH=$(md5 -q "$FILE")
    CURRENT_HASH2=$(md5 -q "$FILE2")


    # Hash-Werte werden verglichen
    if [ "$CURRENT_HASH" != "$ORIGINAL_HASH" ]; then
        echo "Die Datei \"$(basename "$FILE")\" wurde bearbeitet."
        # Ursprünglicher Hash-Wert wird für zukünftige Überprüfungen aktualisiert
        ORIGINAL_HASH="$CURRENT_HASH"
    elif [ "$CURRENT_HASH2" != "$ORIGINAL_HASH2" ]; then
        echo "Die Datei \"$(basename "$FILE2")\" wurde bearbeitet."
        # Ursprünglicher Hash-Wert wird für zukünftige Überprüfungen aktualisiert
        ORIGINAL_HASH2="$CURRENT_HASH2"
    fi
}


while true; do # Endlosschleife, die die Funktionen "checkIfDeleted" und "checkIfEdited" alle 10 Sekunden ausführt
    checkIfDeleted
    checkIfEdited
    sleep 10
done

Ja, ich weiß, welche Probleme das Skript mit sich bringt, aber ich habe ein anderes Problem:

Wenn jemand das Skript nutzen möchte, muss er die Pfade seiner Dateien einfügen und sogar neue Variablen definieren.

Man könnte das doch so machen, dass das Skript die Liste des Ordners einliest und dann auf alle Dateien direkt zugreifen muss, ohne dass man sie in das Skript einfügen muss.

Also irgendwie mit dem Befehl "ls". Ich weiß aber nicht, wie ich das implementieren soll.

Kann mir wer helfen bitte?

Visual Basic, Linux, HTML, Webseite, VBA, Bash, Batch, cmd, Code, lua, MySQL, PHP, Programmiersprache, Python, Script, Python 3

Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?

Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema Webseite