WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: What are the semantics in html?

for

From: glen walker
Date: Jul 8, 2020 4:38PM

Semantics can be pretty simple. If you use the right HTML element to
define your element then you are using the proper semantics.

If you have a list, use a <ul> or <ol>.
If you have a table, use a <table>
If you have a heading, use an <h1>

Semantic elements have a predefined default role, such as list, table, or
heading. The role is surfaced to the accessibility tree, which allows
assistive technology such as a screen reader to announce the role and other
metadata associated with that role (such as the list level or table
dimensions or heading level) to the user. It also allows screen reader
shortcut keys to work, such as navigating to a list with L or to a table
with T or to a heading with H.

Non-semantic html elements such as <div> or <span> have no default role and
have no intrinsic meaning in the accessibility tree. When a screen reader
user encounters a <div> or <span>, nothing special is announced. You can
use ARIA attributes to define a role and other properties for non-semantic
elements but it's always best to use a semantic HTML element as your first
choice.



On Wed, Jul 8, 2020 at 4:26 PM Всеволод Попов < <EMAIL REMOVED> > wrote:

> Hello everyone,
>
> Before actual diving into aria and wcag2.1 I understood that it is
> important for me to betterunderstand html.
>
> I found the course from mozilla web developer (mdn) about it, it is
> really clear to read it and I learned really a lot of important
> information that i haven't known about html before but , however, i have
> some questions.
>
> What are the semantics in html?
>
> I tried to understand the description from here:
>
>
> https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
>
> but it is still not clear, maybe because of the language barrier :).
>
> I couldn't understand what the semantics are, what they are needed for
> and how they are applied to a screen reader and be used for
> accessibility tasks.
>
> I thought that they are the same things as elements such as a heading
> from level 1 to 6, but it seems like it is not like that.
>
> So, can somebody explain that please?
>
> Thank you in advance!
>
> --
>
> Best wishes,
>
> Vsevolod
>
> > > > >