Accessible websites are crucial for those unlucky enough to have some form of disability or limited sight, hearing or movement. Unfortunately it is extremely "easy" to accidentally preventing websites from working with accessibility tools. It is our responsibility as developers to make sure the systems we develop can be used by anyone, and to achieve that we need the right "tools".
In this talk I not only explain how to write proper, accessible HTML, but I also show you what happens if you do not. We look at how HTML5 and WAI-ARIA can improve navigation, understanding and perception, and how to make screen readers react to changes made by JavaScript code.
By watching this talk you will learn the most common pitfalls and the best techniques when it comes to accessibility.
6. ACCESSIBILITY
API
Accessible name
• Label, combined text children, alt
attributes, etc.
Value and properties
• The value of a form element is
handled by the browser.
• Other properties include min and max
values, etc.
State
• Normally set by the browser, but will
need to be handled by custom
components.
Role
• Handled by native HTML element, but
can be overriden with «role» attribute.
7. Bad example Good example
ACCESSIBILITY API – ACCESSIBLE NAME
Examples from https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/
17. LINKS VS
BUTTONS
• Links Navigation
• Buttons Action
• Do not create custom
buttons or links unless
you know what you are
doing!
18. LINKS AND
BUTTONS
– TIPS
• Never remove underline for
links!
• Default tabindex=‘’0’’
• Images in link - Does it have a
purpose? Add alt-text.
• Links and buttons should react
to mouse click, enter and space
20. IMAGES
With text in image
• If the image contains text
that is meaningful and not
otherwise present
Use alt-attribute
• If the text is only for visual
effects or the text is present
elsewhere on the site
Use empty alt-attribute
21. IMAGES
Image in link or button
• If it would be difficult to
understand what the link
or buttons does without
the image there
Use alt-attribute
22. IMAGES
Image gives meaning to the
page or context
• If it is a simple graphic or
photograph
Use alt-attribute
• If it is a graph or complex piece
of information
Use alt-attribute
• If it shows content that is
redundant to text nearby
Use empty alt-attribute
24. IMAGES
Tips for choosing alt-texts
• Image you are reading a
website aloud over the phone.
• Put the most important
information first
• The text should be as concise
as possible.
• Do not start with «image of»,
«icon», etc.
• Logos are exempt from the
rules
25. SVG-
IMAGES
Referenced with src-attribute
• Use the methods described for
images in general
Inline SVG
• Provide a title within the svg-tag
• Reference the title with aria-
labelled-by on the svg-tag.
29. FORMS -
LABELS
• Associate label with input
element.
• Visually hide the label or
use aria-labelledby if
purpose is clear.
30. FORMS –
INSTRUCTIONS
• Within labels
• Outside of label
• aria-labelledby
• aria-describedby
• Beware of relying on
placeholders!
• Remember to mark required
items both programmatically
and visually!
31. FORMS –
GROUPING
CONTROLS
• Fieldset
• Legend
• For radio buttons,
checkboxes or related fields
• Role=«group»
• Use aria-labelledby to
provide label for the group
32. FORMS –
FEEDBACK
• Provide feedback next to
the input with an error
• Alert users with assistive
technology (aria-live)
• Don’t lose data
36. “A big part of accessibility is […] an
easily met responsibility of web
developers:
Know your job, use your tools well, and
many pieces will fall into place as if by
magic.”
- Léonie Watson & Chaals McCathie Nevile
Editor's Notes
[45:00]
– Who am I? (Lead consultant at Itera, husband, father, paternity leave)
– Brief summary of topic? A practical introduction to creating accessible websites.
– Why am I interested in a11y? Color blind, interested in user-centered design, likes to work at the front of frontend. Worked on Storebrand.ny
[44:00]
[43:30]
[43:00]
Perceivable – Providing text alternatives, presenting content so it can be perceived (color contrasts), controls for time-based media
Operable – Keyboard accessible, help users understand where on the page they are, don’t let users time out and finally preventing seizures.
Understandable – Make text readable, give assitance to prevent user errors and make the website be predictable in both presentation and operation.
Robust – Make the webpage work with any user agent, like browsers, plugins, «article» readers, etc.
[41:00]
So, how does the assistive technologies know what to present to the user?
The image on the right shows an example of an Accessibility Tree, which is a modified DOM tree.
This removes everything that is only relevant for visual presentation.
https://creativecommons.org/licenses/by/3.0/
[40:00]
[38:30]
[37:00]
[35:30]
[35:00] Let’s start by looking at the bigger picture: The HTML document, regions and content structure.
[34:30]
[33:30] Page regions enable assistive technology to indentify regions of the document, sometimes enabling users to jump to that content, or notifying the user of its precence.
The header element is used for the region at the top of the page with logo, search, navigation, etc. It can also be used inside articles or sections, and in that case is associated only with that region.
Similarly, the footer element is used for the area at the bottom of the page, where you typically can find copyright information, privacy statements and disclaimers. The footer element can also be used inside articles and sections.
The nav element is used for navigation menus. Several of these can be used on the same page, but they should be named to make it clear what navigation menu they contain. Screen readers typically has shortcuts to jump to the menu, so marking it as such is essential to speed up navigation.
https://www.w3.org/WAI/tutorials/page-structure/
The main content should also be marked up using the main tag. This is both useful for screen readers that has shortcuts for jumping to the main content, but also for other user agents, like article readers/rss feeds that only show the relevant parts of a page, or read-mode in browsers like Edge, where only the main content is shown.
Complementary or related content, which support the main content, but can exist on its own, should be marked up using the aside tag.
In addition, you can use the article and section tags to mark up individual parts of the content.
These tags as well as the main and aside tags should ideally begin with a heading to provide an accessible name for the region, which will be read aloud to users of screen readers, making it easier to identify regions. These headings should have an ID, that the region tag references using aria-labelledby. Another option, where the label should not visibly appear at the page, use aria-label, like I have done with the navigation element in the example here.
[32:30]
The main content should also be marked up using the main tag. This is both useful for screen readers that has shortcuts for jumping to the main content, but also for other user agents, like article readers/rss feeds that only show the relevant parts of a page, or read-mode in browsers like Edge, where only the main content is shown.
Complementary or related content, which support the main content, but can exist on its own, should be marked up using the aside tag.
In addition, you can use the article and section tags to mark up individual parts of the content.
These tags as well as the main and aside tags should contain a heading to provide an accessible name for the region, which will be read aloud to users of screen readers, making it easier to identify regions. These headings should have an ID, that the region tag references using aria-labelledby. Another option, where the label should not visibly appear at the page, use aria-label, like I have done with the navigation element in the example here.
https://www.w3.org/WAI/tutorials/page-structure/
[31:00]
Essential to organize the content of a page.
Should be nested logically by rank or level. Headings on equal or higher ranks start a new section, while lower ranks start a subsection as part of the current section.
Assistive technology provides means to jump up and down in the hierarchy
[30:00]
As mentioned, HTML5 introduced several new tags for semantically organizing content, like the article and section tags.
Articles are complete or independent compositions in a web page, like items in a shopping site or a news article on a news site.
Sections are used for general regions of a page, and can be used both outside and inside of articles.
In addition to these new tags, we have the old tags, like paragraph, lists, and so on. I am amazed at how quickly someone will resort to writing lists with dashes and newline tags instead of using actual list tags.
These tags are important, because they inform assistive technology what type of content it is and how to interact with it, as well as providing default styling (which you may override as long as you follow the rules).
[28:00]
[27:30]
Links lead the user to a new page or somewhere else on the same page (navigation)
Buttons perform an action on the same page – toggle, submit form, etc.
Do not create custom buttons or links unless you know what you are doing!
[26:30]
Removing underline is almost never a good idea for normal links. Exceptions are for menu items and similar, where you indicate in another fashon that it is a link.
Do not remove the href attribute. Doing so will remove the link from the taborder. At least add tabindex if you HAVE TO skip href, but is so you are probably not using the right element anyhow.
