Why do semantics matter? --

  Рет қаралды 71,558

Chrome for Developers

Chrome for Developers

Күн бұрын

Watch all A11ycasts episodes: goo.gl/06qEUW
Subscribe to the Chrome Developers KZfaq channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf
It's easy to overlook the importance of semantics in web development. After all, a div and a section tag all render the same, right? But in the world of accessibility semantics are extremely important. Today on the show we'll cover how proper semantics let you express the affordances for your UIs, and I'll explain how those affordances get transformed into the accessibility tree. If you've ever wondered HOW a screen reader turns a bunch of HTML into a spoken UI then you'll definitely enjoy today's episode :)

Пікірлер: 25
@karlitowhoelse
@karlitowhoelse 7 жыл бұрын
Great work on the functionality, by bringing it to the forefront of the Inspector it will make it much harder for developers to be as dismissive about accessibility concerns as we have generally tended to be.
@YageSpirit
@YageSpirit 7 жыл бұрын
I noticed that Angular 1.6.x seems to interfere with some of the aria attributes work in Bootstrap 4.0 Alpha. I am guessing that I will need to work on things like UI Bootstrap did since the CSS framework changed hooks.
@ayeshab5699
@ayeshab5699 2 жыл бұрын
Thank you! Very helpful and easy to understand for beginners.
@zeinabkamel9439
@zeinabkamel9439 6 жыл бұрын
Great Video, Thanks a lot. I just have a question, is there a way I could possibly override some of the things that get to be said anyway regardless of what I wrote. i.e "You are Currently inside the html element ......." ?
@rasingangi4875
@rasingangi4875 7 жыл бұрын
I wonder...What is the latest version for Chrome for Android?(lollipop 5.02)
@fredbcarneiro
@fredbcarneiro 7 жыл бұрын
What a amazing thing to do with websites! Thank you for the insight.
@michongoma7598
@michongoma7598 7 жыл бұрын
Good Video Rob
@LaloHao
@LaloHao 4 жыл бұрын
Thanks for the teapot reference, reminded me of FP
@neilosman4440
@neilosman4440 7 жыл бұрын
Also use chrome://accessibility/ to inspect the a11y tree
@HoaPham-wc4kq
@HoaPham-wc4kq 3 жыл бұрын
Thanks for this useful content
@sneto_dev_br
@sneto_dev_br 7 жыл бұрын
cool, it's a very important subject. thx
@thiruppathimuthukumar7171
@thiruppathimuthukumar7171 7 жыл бұрын
Dint know any the a11y section in dev tools.. it's cool.. thanks
@dmitriysmirnov457
@dmitriysmirnov457 4 жыл бұрын
Watching this in 2020 and it's strange to see G+, haha
@chandlerzhu9735
@chandlerzhu9735 2 жыл бұрын
I hope chrome has a built-in screen reader someday
@puphuc9415
@puphuc9415 2 жыл бұрын
The unicorn head is reallly distracting :))))
@waledhajaz3022
@waledhajaz3022 7 жыл бұрын
woow
@TheAlkhemiaStudio
@TheAlkhemiaStudio 7 жыл бұрын
he looks kinda tired tho
@letswatchrob
@letswatchrob 7 жыл бұрын
Alkhemia Studio lol thanks...
@Gettomix222
@Gettomix222 7 жыл бұрын
what is the point in taking care of accessability? is there really a need? i mean.. great that there is the opportunity to support such.. but why?
@letswatchrob
@letswatchrob 7 жыл бұрын
A few important reasons: 1. There are about 1 billion people across the world with some form of disability. So building an inaccessible experience means you'll miss out on those users. Blind people want to order pizza and go on vacation too! 2. In some countries, like the United States, it's against the law to build inaccessible applications. You will get sued and many large companies have been. 3. Adding in good accessibility usually translates into components that are easier for everyone to use. For instance, the trackpad on my laptop literally broke this morning so I'm doing a bunch of stuff using the keyboard today. I'm *very* thankful that apps like gmail and tweetdeck have good built-in keyboard support 4. It's a fun engineering problem to work on. I find that most folks who don't care about accessibility don't understand how it works. Once you have the basics down, it's quite fun adding in good semantics and verifying your components work well with a screen reader. I get a lot of personal satisfaction out of knowing I built a component that looks great, AND is highly usable.
@AnthonyShuker
@AnthonyShuker 7 жыл бұрын
god forbid anyone with a disability wants to use the internet
@Anan6CMS
@Anan6CMS 7 жыл бұрын
Exactly! It also also allows us to answer the WHY question. Just imagine that the labels in your example where not visible. We would just see a bunch of input fields without knowing WHY they're there ... A simple script could alert us the contents of the label associated with the input ...
Screen Reader Basics: NVDA -- A11ycasts #09
9:01
Chrome for Developers
Рет қаралды 157 М.
How to build a toggle button - A11ycasts #25
17:53
Chrome for Developers
Рет қаралды 27 М.
WHAT’S THAT?
00:27
Natan por Aí
Рет қаралды 14 МЛН
Задержи дыхание дольше всех!
00:42
Аришнев
Рет қаралды 3,6 МЛН
Just use button -- A11ycasts #05
7:34
Chrome for Developers
Рет қаралды 89 М.
How I do an accessibility check -- A11ycasts #11
12:17
Chrome for Developers
Рет қаралды 132 М.
The 6 most important CSS concepts for beginners
28:58
Kevin Powell
Рет қаралды 153 М.
Why headings and landmarks are so important -- A11ycasts #18
7:18
Chrome for Developers
Рет қаралды 40 М.
The art of labeling -- A11ycasts #12
14:07
Chrome for Developers
Рет қаралды 57 М.
htmx in 100 seconds
2:27
Fireship
Рет қаралды 1,1 МЛН
Accessibility Fundamentals with Rob Dodson
28:16
SFHTML5
Рет қаралды 101 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 930 М.
Accessible Modal Dialogs -- A11ycasts #19
12:46
Chrome for Developers
Рет қаралды 50 М.
Samsung laughing on iPhone #techbyakram
0:12
Tech by Akram
Рет қаралды 5 МЛН
АЙФОН 20 С ФУНКЦИЕЙ ВИДЕНИЯ ОГНЯ
0:59
КиноХост
Рет қаралды 1,2 МЛН
Новые iPhone 16 и 16 Pro Max
0:42
Romancev768
Рет қаралды 2,1 МЛН