A new project of the W3C to validate HTML5 pages
Great explanation of the rel attributes that provide:
- information to the resource linked
- behaviors while navigating
Create an accessible <marquee>
tag
Use
<button>
if you can count on JavaScript being available, and flipping the switch has an immediate effect.
Use<input type="checkbox"
if you want to progressively enhance the control, and flipping the switch will only take effect when the user submits it.
The post explains how.
Ja klar, bei manchen Sachen sollte man das mit ARIA Elementen anreichern, aber bei vielem könnte man es verbessern indem man einfach die richtigen HTML Tags/Attribute verwendet.
Use Cases anzeigen und sie durchsuchen können.
Beispielen:
- Accordion:
<details>
/<summary>
<dialog>
- Definitionsliste:
<dl>
/<dt>
/<dd>
- Definition steht im Paragraph
<dfn>
- Listen:
<ol>
/<ul>
- Mehr Kontekt
<time>
,<kbd>
,<abbr>
- Separator zwischen Paragraphen:
<hr>
- Abkürzung:
<address>
<quote>
/<blockquote>
/<cite>
- semantische Struktur der Seite:
<article>
/<section>
mit o. ohne Heading /<footer>
/<header>
/<main>
/<aside>
/<nav>
A section tag start to be a generic région only when it is labelled. It provides semantics, but nothing else out of the box.
As developer it increase readability and allow to quickly set a specific landmark when needed.
Nice to get it right the first time with a minimal example
box-sizing does not work well with details and summary: it is implemented as shadow DOM in Chrome.
How many HTML tags do you know?
Dedicated to HTML :)
- use
lang
for the language of the page, then the other parts of the page with a different language - support different writing direction. Logical CSS properties help.
- handle text expansion with adaptive layouts. Avoid to truncate the text.
- apply a minimum width to avoid text shrinking in other languages. Also think about the height.
- readable typography is important
- make sure every user-facing string is translated such as alt-text, title or desc nodes in SVG.
- different languages have different word order, so avoid string templates
- ensure consistency of microcopy
Microcopy is all the little bits of text that appear throughout the site: the nav links, the sidebar headings, the form field labels, stuff like that. When microcopy is written and used consistently, the site layout becomes much more predictable, and users won't have to guess
It means the atoms and some molecules in atomic design.
Starting with the right HTML tags and using semantic HTML is a first easy step compared to retrofitting accessibility.
It related to landmarks, menus, checkboxes, buttons, headings, bold and italic texts,