Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better Accessibility (adjusted colors and HTML elements) #250

Merged
merged 2 commits into from
May 10, 2023

Conversation

Wandmalfarbe
Copy link
Contributor

@Wandmalfarbe Wandmalfarbe commented May 1, 2023

Better Accessibility (Adjusted Colors and HTML Elements)

  • Links are underlined.
  • Proper landmark HTML elements are used (nav, main, ...).
  • Buttons and the logo link have better contrast ratio (WCAG AAA 4.5:1).
  • Readonly inputs have better contrast ratio (WCAG AAA 4.5:1).
  • Removed fieldset Elements when there was no legend

Better Accessibility for the Menu

  • The menu items are marked as such (role="menuitem").
  • The currently active page in the menu is marked as such (aria-current="page").
  • The menu state is available to screen readers (aria-expanded).
  • SVG icons are hidden from screen readers, because they are purely visual (aria-hidden="true")
  • The hamburger button is marked as a control for the menu (aria-controls="menu").
  • The hamburger button has a localized label (Show Menu or Hide Menu).

- Links are underlined.
- Proper landmark HTMl elements are used (nav, main, ...).
- Buttons and the logo link have better contrast ratio (WCAG AAA 4.5:1).
- Readonly inputs have better contrast ratio (WCAG AAA 4.5:1).
- Removed `fieldset` Elements when there was no legend
- The menu items are marked as such (`role="menuitem"`).
- The currently active page in the menu is marked as such (`aria-current="page"`).
- The menu state is available to screen readers (`aria-expanded`).
- SVG icons are hidden from screen readers, because they are purely visual (`aria-hidden="true"`)
- The hamburger button is marked as a control for the menu (`aria-controls="menu"`).
- The hamburger button has a localized label (*Show Menu* or *Hide Menu*).
@dbambus dbambus merged commit b557339 into ESPWortuhr:main May 10, 2023
@dbambus
Copy link
Collaborator

dbambus commented May 10, 2023

Hey @Wandmalfarbe,

vielen lieben Dank für die Implementierung und den Pull Request :-)

Ich habe eine kleine Bitte falls du mal Zeit findest, könntest du das Auswahlmenü für die automatische Helligkeitsregelung auf Schieberegler umstellen, vielleicht nur einen Schieberegler mit zwei Punkten, da nur ein Bereich ausgewählt werden muss, in dem geregelt wird.

Mit freundlichen Grüßen
David

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants