Update index.md (#36284)
This commit is contained in:
committed by
Randell Dawson
parent
2b54d70006
commit
d85371fd6c
@ -67,7 +67,7 @@ The Web Content Accessibility Guidelines or <a href='https://www.wuhcag.com/web-
|
||||
|
||||
### Talk like the natives
|
||||
|
||||
The HTML specification is a document that describes how the language should be used to build websites. Assistive technologies, like screen-readers, speech recognition programs, etc. are aware of this document. Web developers, however, often are not, or at least not enough, and think something like this is ok:
|
||||
The HTML specification is a document that describes how language should be used to build websites. Assistive technologies, like screen readers, speech recognition programs, etc. are aware of this document. Web developers, however, often are not, or at least not enough, and think something like this is ok:
|
||||
```html
|
||||
<div class="epic-button"></div>
|
||||
|
||||
@ -81,7 +81,7 @@ The first element breaks the ‘name, role, value’-criterium, which states tha
|
||||
|
||||
Visually, the second element looks like a heading after styling it with CSS, but semantically it is a `span`. Thus, assistive technologies won’t know it's a heading. A screen-reader will read this element as regular text instead of a heading. Screen-readers that use a hotkey to jump between headings would skip this element.
|
||||
|
||||
The third element could be something used to change the language of the website. Perhaps a fancy animated menu of languages will expand on click. However, because it is a `span` and does not define its role as link or button, assistive technologies will think this is simple text with some styling.
|
||||
The third element could be something used to change the language of the website. Perhaps a fancy animated menu of languages will expand on click. However, because it is a `span` and does not define its role as a link or button, assistive technologies will think this is simple text with some styling.
|
||||
|
||||
Spans and divs are not semantic elements; they do not provide the contextual meaning of a particular element to web browsers, search engines, or assistive technology. You can fix these in two ways:
|
||||
* You can manually add ARIA-attributes to the elements above. This is an advanced topic and outside the scope of this article.
|
||||
@ -105,12 +105,12 @@ We copy it from some template and mostly don't even know it is there. These word
|
||||
|
||||
As mentioned earlier, screen-readers have hotkeys to jump from heading to heading. There are also hotkeys to jump to the next table, form field, link, etc. Thus, it is good practice to make sure these headings are actually in logical places. It also decreases users’ stress levels, which encourages them to keep coming back to your website.
|
||||
|
||||
Also remember that headings are hierarchical. If you use an `h2`, make sure the `h3`s that follow it actually have something to do with that `h2`. Don't put an `h3` for contact details under your `h2` for recent blog posts. A good analogy here is a book with chapters, that have subsections. You wouldn't put a section on baking cookies in the middle of a chapter on preparing vegetables, right?
|
||||
Also, remember that headings are hierarchical. If you use an `h2`, make sure the `h3`s that follow it actually has something to do with that `h2`. Don't put an `h3` for contact details under your `h2` for recent blog posts. A good analogy here is a book with chapters, that have subsections. You wouldn't put a section on baking cookies in the middle of a chapter on preparing vegetables, right?
|
||||
|
||||
### What's the alternative?
|
||||
Images on a website are great. They add a new layer to your content, make experiences more immersive, and generally look good among all the text. A picture can say more than a thousand words, right?
|
||||
|
||||
Certainly. That is, if you can see them. In the HTML5-specification, an img-attribute must always have an alt-attribute. This attribute is meant as an alternative to the image in case it is not visible. This would be true for blind visitors to your website, but also when your image doesn't load for some reason. Not adding an alt-tag to an img-attribute not only breaks accessibility, it goes against the HTML5-spec.
|
||||
Certainly. That is if you can see them. In the HTML5-specification, an img-attribute must always have an alt attribute. This attribute is meant as an alternative to the image in case it is not visible. This would be true for blind visitors to your website, but also when your image doesn't load for some reason. Not adding an alt-tag to an img-attribute not only breaks accessibility, but it also goes against the HTML5-spec.
|
||||
|
||||
Now, there is one caveat here. Alt-attributes are mandatory according to the HTML5-spec, but it is not mandatory to fill them in. `<img src="awesome-image.jpg", alt="">` is therefore legal HTML5 code.
|
||||
|
||||
@ -150,7 +150,7 @@ This will make a screen-reader say “username, text edit field”, instead of j
|
||||
|
||||
Let’s take a small break. Go look at a really well-designed web page. It can be any page. Go on.
|
||||
|
||||
Back? Ok, great. Now, look at the page again but disable all CSS. Does it still look good? Is the content on the page still in a logical order? If so, great. You found a page with decent HTML structure. (One way to easily view a page without CSS is to load the site in WebAIM's <a href='http://wave.webaim.org' target='_blank' rel='nofollow'>WAVE Web Accessibility Evaluation Tool</a>. Then click on the "No Styles" tab to see it without styles.)
|
||||
Back? Ok, great. Now, look at the page again but disable all CSS. Does it still look good? Is the content on the page still in a logical order? If so, great. You found a page with a decent HTML structure. (One way to easily view a page without CSS is to load the site in WebAIM's <a href='http://wave.webaim.org' target='_blank' rel='nofollow'>WAVE Web Accessibility Evaluation Tool</a>. Then click on the "No Styles" tab to see it without styles.)
|
||||
|
||||
If not, great. Now you get an impression of what people using assistive technologies have to deal with on a daily basis.
|
||||
|
||||
|
Reference in New Issue
Block a user