Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Resistance is futile: Start writing accessible websites now!
Ähnlich wie Resistance is futile: Start writing accessible websites now! (20)
Mehr von Vegard Haugstvedt
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Resistance is futile: Start writing accessible websites now!
- 1. VEGARD HAUGSTVEDT RESISTANCE IS FUTILE: START WRITING ACCESSIBLE WEBSITES NOW!
- 2. • What is accessibility? • Common mistakes • Semantical HTML5 • WAI-ARIA and JS-apps • Code verification
- 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/
- 8. ACCESSIBILITY API – ROLE • Button • Slider • Tab/tabpanel • Etc.
- 10. HTML5 DOCUMENT
- 11. LANGUAGE Useful for: • Screen readers • Search engines Can set language for: • Full document • Any other tag
- 12. SEMANTIC REGIONS • Page header • Page footer • Navigation • Main content • Complementary content (aside)
- 13. SEMANTIC REGIONS • Page header • Page footer • Navigation • Main content • Complementary content (aside)
- 14. HEADINGS • Heading levels • Used for navigation • H1 does not need to be the first heading
- 15. CONTENT STRUCTURE • Article • Section • Paragraph • Unordered / Ordered List • Blockquote • Description List • Figure/figcaption • Images • Tables
- 16. LINKS VS BUTTONS
- 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
- 19. IMAGES
- 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
- 23. IMAGES Image is purely decorative or not intended for the user Use empty lt-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.
- 26. MENUS
- 27. MENU STRUCTURE • List of links • Nav-element • Label • Indicate current page
- 28. FORM ELEMENTS
- 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
- 34. CHROME ACCESSIBILITY DEVELOPER TOOLS • Validate mobile and desktop view simultaneously • Inspect the elements that failed • Find accessibility information for elements
- 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
Hinweis der Redaktion
- [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.
- [25:00]
- [24:30] https://www.w3.org/WAI/tutorials/images/decision-tree/ https://www.w3.org/WAI/tutorials/images/tips/
- [23:30] https://www.w3.org/WAI/tutorials/images/decision-tree/ https://www.w3.org/WAI/tutorials/images/tips/
- [22:30] https://www.w3.org/WAI/tutorials/images/decision-tree/ https://www.w3.org/WAI/tutorials/images/tips/
- [21:30] https://www.w3.org/WAI/tutorials/images/decision-tree/ https://www.w3.org/WAI/tutorials/images/tips/
- [21:00] https://www.w3.org/WAI/tutorials/images/decision-tree/ https://www.w3.org/WAI/tutorials/images/tips/
- [20:00] https://www.w3.org/WAI/tutorials/images/decision-tree/ https://www.w3.org/WAI/tutorials/images/tips/
- [19:00]
- [19:30] List of links Nav-element Label Indicate current page – either aria-current or visually hidden text
- [18:00]
- [17:30]
- [16:30]
- [15:30]
- [14:30]
- [05:00]
- [04:00]
- [03:00]
- [01:00]
- [00:00]