Accessible HTML-Elements
On this page are most html elements listed together with their respective apspects that need to be taken into account when creating accessible websites.
Articles about Forms
Form Structure
- section
- fieldset
- legend
Complex forms that may have have multiple parts should get structured semantically.
Forms
- form
The form tag in HTML signifies a portion of a document that comprises dynamic components for transmitting data.
Inputs
- input
- select
- datalist
- option
- optgroup
- ul
Use inputs within a form to allow the user to input information.
Articles about General Structure
Article
- article
A segment of a document, webpage, or website that constitutes a self-contained composition and forms a distinct part is referred to as a article.
Head & Body
- head
- body
The head contains machine-readable information or metadata about the document. The body element contains all the content.
Headings
- h1-h6
- hgroup
Well-structured headings are crucial for both screen reader users and search engines, as heading levels carry significance.
Landmarks
- header
- main
- footer
- aside
- form
- nav
- section
Landmarks help identify a webpage‘s structure and organization.
Meta
- meta
The meta element is used to provide meta data for the website that gets used by for example search engines and web crawlers.
Noscript
- noscript
Use the noscript element to represent its children if JavaScript is disabled in the user agent.
Title
- title
Each page on a website should have one descriptive title that is set using the title element.
Articles about Interactive Elements
Disclosure Widget
- details
- summary
To design a widget that provides the option to either conceal (collapse) or reveal (expand) content.
External Resources
- iframe
- embed
- object
Use iframe elements to embed other HTML pages on the webpage. Use embed and object elments to embed external content like PDFs on the webpage.
Articles about Media
Image
- img
- figure
- figcaption
Use img elements to add images to your website. Use figure elements to create a group of content like an image, diagram or code snippet with an optional caption via a figcaption element.
Image Map
- map
- area
To generate an image map consisting of clickable regions of any shape, which can then be associated with an image.
Video & Audio
- video
- audio
- track
- source
To embed video or audio content in documents.
Articles about Navigation
Articles about Non Interactive-elements
Data
- data
To make the content visible to the user and also provide a version of the data that can be interpreted by scripts.
Lists
- ul
- ol
- dl
- li
- dt
- dd
- menu
Use ul elements to create unordered lists. Use ol elements to create ordered lists. Use dl elements to create description lists.
Meter
- meter
A meter serves as a graphical depiction that showcases a numeric value, which remains within a defined range.
Progress
- progress
Use the progress element to indicate the progress of a task.
Articles about Notifications
Dialog and Alertdialog
- dialog
For information that is separated content or UI from the rest of the web application or page and that optionally requires the user to respond to it.
Articles about Tables
Tables
- table
- caption
- col
- colgroup
- thead
- tbody
- tfoot
- tr
- th
- td
Use tables to present tabular information.
Articles about Text
Abbreviation
- abbr
Use the abbr element at least on the first use of an abbreviation or acronym.
Bidirectional Isolate
- bdi
- bdo
Use the bdi and bdo elements when some part of the page content possibly has different directionality (LTR = left-to-right, RTL = right-to-left) than the rest of the page.
Definition
- dfn
Used to identify a word or phrase as a term, that has a corresponding definition when its first used.
Deleted, Inserted, Irrelevant
- del
- ins
- s
To denote text as deleted from or added to a document or to denote a text as no longer relevant.
Emphasized Text
- strong
- em
- b
- i
- mark
Use these elements to highlight text within a document.
Input & Output
- kbd
- samp
- output
Use these elements to denote user inputs like keyboard buttons, sample or quoted output text or to denote text as an output of a calculation by the website.
Paragraphs & Line Breaks
- br
To introduce a line break in text that requires a particular format, such as a poem or an address, as a means of ensuring the desired layout.
Preformatted Text
Use the <pre> element for preformatted text that should be displayed exactly as formatted.
Quote
- blockquote
- q
Use blockquote elements for longer quotes. Use q elements for shorter quotes.
Thematic Break
- hr
Denotes a thematic break at the paragraph level, such as a shift in the setting of a narrative or a shift to a different subject within a section of a scholarly work.