Essential html tweaks for accessible themes

1. Essential HTML tweaks for accessible themes By Martin Stehle For the WordPress Accessibility Day October 2nd & 3rd, 2020

2. For whom?  Frontend developers  Theme authors  Plugin authors

3. Topics in this presentation  WCAG conformance levels A & AA („must fullfill & shall fulfill“)  WCAG techniques categorized as „sufficient“  HTML  Relevant WordPress functions

4. Topics not in this presentation  WCAG conformance level AAA („may fulfill“)  WCAG techniques categorized as „advisory“  ARIA  CSS  JavaScript, jQuery etc.  Frames (FRAMESET and IFRAME)

5. About me  Hard of hearing, body impaired, wheelchair user  First bookmark set in a web browser in 1994  Graduated computer scientist for digital media since 1996  Got in touch with Web Accessibility in 1998, started www.webaccessibility.de  Contributor for WCAG 2.0 and german BITV 2.0  Web Accessibility consultant and examiner for companies and authorities, e.g. audible.de, the german Federal Ministry of Labour and Social Affairs  Trainer for examiners checking the conformity on the guidelines for accessible websites  Developer of plugins and themes for WordPress since 2010 (@hinjiriyo)  WordPress Core Contributor  WordPress Translation Editor

6. What you will get  A soft warm-up  The Big Journey  User's benefits

7. A soft warm-up

8. Define Page Language  Tell other software which human language the web page has  E.g. for screen readers, text-to-speech applications, captions in media  Success criterion 3.1.1, conformation level A

9. Define Page Language: Failures  Not to tell the language of the web page

10. Define Page Language: How to  In HTML element: lang attribute <html lang="pt-BR">

11. Define Page Language: How to  Automatized generation of the language definition  In header.php just a single function call: <html <?php language_attributes(); ?>>  since WP 4.3.0

12. Define Language Changes  Tell other software which human language the text part has  E.g. for quotes, abbreviations, names etc.  Success criterion 3.1.2, conformation level A

13. Define Language Changes: How to  In HTML elements: lang attribute  <p>The frenchman yelled: <span lang="fr">Liberté!</span></p>  <p>The brazilian writer states:</p> <blockquote lang="pt-BR">...text in brazilian portuguese...</blockquote>

14. Reading directions: How to  In HTML elements: dir attribute:  <html lang="en"> ... <p>The doctors says: <span lang="ar" dir="rtl">‫/<أحسنت‬span></p>

15. Language Standards: How to  ISO 1766: http://www.ietf.org/rfc/rfc1766.txt language-code = primary-code ( "-" subcode )*  Primary-code => Language Codes ISO 639 https://en.wikipedia.org/wiki/ISO_639  Subcode, e.g. Country Codes ISO 3166 https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes  Examples: „en-UK“, „ja“, „fa-IR“

16. Page Titled  Help the user to identify the web page  Good page titles improves the orientation within a website  Success criterion 2.4.2, conformation level A

17. Page Titled: Failures  No title element  Empty title element  Default text only („Untitled“, a company name, etc.)  File name as the page title  No unique page titles within the web site

18. Page Titled: How to  (Source: WCAG 2.1 Techniques)  Use the title element  Ensure the title element describes the current page  Ensure the page title makes sense when out of context of the web page, e.g. on search result pages and in screen readers  Include the name of the site (subsite in WordPress multisite) to ensure where the web page belongs to  Use unique titles (each web page has its own page title)  Use short titles (ideally under 60 characters)

19. Page Titled: How to Easy way  Automatized generation and sanitation of the page title  1. During theme setup: add_theme_support( 'title-tag' );  2. In header.php: <?php wp_head(); ?>  since WP 4.4.0

20. Page Titled: How to  wp_head() calls (among other functions) _wp_render_title_tag() calls wp_get_document_title()  Available filter hooks in wp_get_document_title() to alter the page title:  'pre_get_document_title'  'document_title_separator'  'document_title_parts'

21. That was just a warm-up. Now the journey begins...

22. Think about that „A web page is a purely visual mouse-controlled interface.“

26. In reality: „A web page is a sequence of content and interactive elements controlled by different technologies for different ways of presentation.“

27. Developer’s Mindset for accessible web pages

28. Think of... Text is king! (The rest is entourage.)

29. Always give structure! (Separate content and design! Mark up content!) Think of...

30. Think of... Keyboard first! (Mouse, speaker etc. second...)

31. The Big Journey  Structure: Informations and relationships  Meaningful sequence of the content  Alternatives for non-text contents

32.  The Big Journey: Structure  Continuous texts  Forms  Tables  Success criterion 1.3.1, conformation level A  Success criterion 3.2.2, conformation level A  Success criterion 4.1.2, conformation level A

33. Structure: Continuous texts  Ensure that the structure of a web page’s content („informations“) and the associations between distinct pieces of content („relationships“) are available in HTML  Visual formatting is not sufficient; it has to be programmatically determined first (you can design it with CSS later)

34. Continous texts: Failures  No use of structural elements <div class="header">..</div> ...<br> <br> <img src="bullet.gif"> ...<br> <img src="bullet.gif"> ...

35. Continuous texts: Fails & How to Element Visuallly determined (insufficient) Programmatically determined (minimum) Heading Larger, bold font Separated by a blank line Heading element H1-H6 Visually designed via CSS List item Bullet symbol intended List item element LI Visually designed via CSS Form field Form field, followed by a description Form field, associated with a description via LABEL Special words Font variants: italic, bold, CAPITALIZED etc. Tagged with the approbiate HTML element like ABBR, EM etc. + CSS Other output device Lost structure informations Preserved structure informations

36. Continuous texts: How to  Mark up for different presentations  E.g. headings both in a browser and in a screen reader’s list of headings

37. Continuous texts: How to  Use H1-H6 to identify headings  Use OL, UL and DL for lists  Use HTML elements to mark emphasized or special text:  Phrases: EM, STRONG, ABBR, ACRONYM etc.  Quotations: BLOCKQUOTE and Q  Subscripts and superscripts: SUB and SUP

38. Structure: Forms  Can be a challenge for users with  vision impairment  mobility impairment  cognitive or learning disabilities  assistive technology such as a screen reader with audio and/or Braille output

39. Forms: Failures  Available descriptions of the form controls, but no LABEL elements  LABEL elements without association to the form controls  Example 1 Correct HTML, but inaccessible, because assistive technologies can not detect any connection between the form control and its text: <label>Full name: <input type="text" name="fullname"></label>  Example 2 dito: <input type="radio" name="subscribe" value="Weekly"> <label>Weekly subscription</label>

40. Forms: Failures  Inaccessible indication of required fields, e.g.  Form field Form field Form field * Form field Form field * required  Required fields are marked by color only

41. Forms: How to  Use LABEL elements to associate text labels with form controls  Use the title attribute to identify form controls when the LABEL element cannot be used, e.g. in a single text field for the search  Provide a description for groups of form controls using FIELDSET and LEGEND elements  Use OPTGROUP to group OPTION elements inside a SELECT  Provide submit buttons, especially with a SELECT element  Indicate required form controls using LABEL or LEGEND

42. Forms: How to Label  Use LABEL elements to associate text labels with form controls  Example 1: <label for="fullname">Full name:</label> <input type="text" name="fullname" id="fullname">  Example 2: <input type="radio" name="subscribe" value="Weekly" id="weekly"> <label for="weekly">Weekly subscription</label>

43. Forms: How to Required fields  Provide a clear indication that a specific form control is required for successful data submission  Form control: <label for="fullname">Full name (required)</label>  Fieldset: <legend>Shoe size (required):</legend>  If a symbol is used to indicate required fields, explain its meaning at the start of the form, e.g * (asterix)  Use indicating colors only as an addition, not as the base

44. Forms: How to WordPress Forms  To get consistent forms in the backend use: <?php settings_fields( ... );  do_settings_sections( ... );  submit_button(); ?>

45. Forms: How to WordPress Forms  Prepare the form with  add_settings_field( ... )  register_setting( ... )  Since WP 4.7.0

46. Forms: How to Widgets  Unique Ids and names on the Widgets page in widgets forms automatically: get_field_id() & get_field_name() inherited from WP_Widget() class My_Widget extends WP_Widget { ... function form( $instance ) { ...?> <label for="<?php echo $this->get_field_id( 'my_field' ); ?>"> ...</label> <input ... id="<?php echo $this->get_field_id( 'my_field' ); ?>" name="<?php echo $this->get_field_name( 'my_field' ); ?>" ... /><?php ... } }  Since WP 4.4.0

47. Structure: Tables  Present tabular information in a way that preserves relationships within the information even when users cannot see the table  Tabular information: relationships between data represented in columns and rows

48. Tables: Failures  Not using the TABLE element and its child elements  Using white space characters, DIV elements etc. to achieve a visual representation of columns and rows  Missing associations between the cell headers and their cell data  Missing description about the table content  Using tables for layout purposes

49. Tables: How to  Using table markup to present tabular information  Using the summary attribute of the TABLE element to give an overview of data tables  Using CAPTION elements to associate data table captions with data tables  Using id and headers attributes to associate data cells with header cells in data tables  Using the scope attribute to associate header cells and data cells in data tables  HTML 4.01 Tables Specifications https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html

50. Tables: Example „summary“ „scope“  <table ... summary="This table contains all form options."> <caption>Page Settings</caption> <tbody> <tr> <th scope="row">...</th> <td>...</td> </tr> ... </tbody> </table>

51. Tables: Example „headers“ & „id“  <table summary="This table displays the scores reached by each team."> <caption>Score per team</caption> <tr> <th rowspan="2" id="h">Points</th> <th colspan="3" id="t1">Team A</th> <th colspan="3" id="t2">Team B</th> </tr> <tr> <th id="e1" headers="t1">1</th> <th id="e2" headers="t1">2</th> ... </tr> <tr> <td headers="h">85</td> <td headers="t1 e1">15</td> <td headers="t1 e2">15</td> ... </tr> </table>>

52. Big Journey: Meaningful Sequence  „Meaningful order of contents“ means: re-ordering does not change the meaning  There can be several meaningful orders, but one is sufficient.  Why? To provide a comprehensive representation of the content in all devices, especially if there is no visual representation  Success criterion 1.3.2, conformation level A

53. Meaningful Sequence: Failures  Not to provide a content structure via HTML elements  No order in HTML and specifying an order via CSS (in CSS: position: absolute;)

54. Meaningful Sequence: How to  To test: Linearize the content  Either turn off CSS in the browser  or use  a text-only browser Lynx https://lynx.browser.org/  or Textise https://www.textise.net/

55.  Big Journey: Non-text contents  Videos and Audios  Applets and other objects  Images  Success criterion 1.1.1, conformation level A

56.  Videos, Audios: How to  Provide a text transscript of the multimedia content  Example: Speech of the german president on the International Day of Sign Languages 2020 https://www.bundespraesident.de/SharedDocs/Reden/DE/Frank-Walter- Steinmeier/Reden/2020/09/200923-Tag-der-Gebaerdensprachen.html  Use the TRACK element to provide captions in videos

57.  Applets,Objects: How to  Where to put text alternatives?  Use the alt attribute of APPLET elements  Use the body of the OBJECT element

58.  Images: How to  Use alt attributes of IMG elements  Use alt attributes of images used as submit buttons  Use alt attributes of AREA elements of image maps  Use null alt text and no title attribute on IMG elements for images that assistive technologies should ignore  How to write alt texts: An alt Decision Tree https://www.w3.org/WAI/tutorials/images/decision-tree/

59.  Images: How to Quick alt  Imagine: You explain during a phone call the other person an image in not more than 10 words. How would you do this? You’ll get the alt text of that image.

60. User's benefits  Keyboard support  Bypass blocks  Focus  Links

61. User's benefits: Keyboard Support  Ensure keyboard control for all the functionality of the page; test with only the keyboard  Think of „Keyboard first!“ - then add optional input devices  Success criterion 2.1.1, conformation level A

62. Keyboard: Failures  Using Javascript to emulate interactivity  Example 1: <span onclick="location.href='/another-page'">Click here</span>  Example 2: <select onchange="do_something()">  <option value="value-1">Text 1</option> … </select>

63. Keyboard: How to  Avoid the use of Javascript for interactivity  Instead use HTML for all controls and links and let the user control them  Test with only the keyboard  Example 1: <a href="/another-page">Another page</a>  Example 2: <select name="my-selection"> <option value="value-1">Text 1</option> … </select> <input type="submit" value="Select">

64. User's benefits: Bypass blocks  Blocks are sections of content repeated on multiple pages, e.g. navigation links, main content, sidebars, advertising frames  For users of screen readers, screen magnifiers, keyboards only, and with cognitive disabilites  Success criterion 2.4.1, conformation level A

65. Bypass blocks: How to  Provide links to the blocks at the start of the page, visible if focused by tab: <body ...><div> <a class="skip-link screen-reader-text" href="#content">Skip to content</a> </div>...<main id="content">

66. Bypass blocks: How to  Recommendation: Re-use the CSS statements for .skip-link and .screen-reader-text of TwentyTwenty’s style.css for your own theme

67. User's benefits: Links  Provide link text that identifies the purpose of the link without needing additional context  Assistive technology has the ability to provide users with a list of links that are on the web page  Success criterion 2.4.4, conformation level A  Success criterion 3.2.4, conformation level AA

68. Links: Failures  Using the same link text for different targets e.g. „Read more“ on archive pages (lack of unambiguity, lack of specifity)  Using different link texts for the same target (lack of consistency, source of disorientation)  Opening new windows/tabs without a notice (source of disorientation)

69. Links: How to  Use link text that describes the purpose of a link  Use the same link text for the same targets  Use different link texts for different targets  Extend link texts with the title attribute (ok, but not reliable)  Better: Extend link texts with visually hidden unique texts

70. Links: How to  On archive pages (as seen in theme TwentyNineteen): <?php the_content( sprintf( wp_kses( /* translators: %s: Post title. Only visible to screen readers. */ __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ), array( 'span' => array( 'class' => array(), ), ) ), get_the_title() ) );

71. Links: How to  On the webpage:  In a screen reader’s list of links

72. Links: How to Open new tabs  Notice perceptible for all: <a href="..." target="_blank">... (opens in a new tab)</a>  Notice perceptible for only blind users: <a href="..." target="_blank">...<span class="screen-reader-text"> (opens in a new tab)</span></a>

73. Links: How to  Use OL, UL and DL for groups of links  Group related links using the NAV element

74. User's benefits: NAV Elements  For lists of links to give orientation  Success criterion 1.3.1, conformation level A  Since WordPress 5.5: automated arial-label for navigation widgets: Accessibility improvements to widgets outputting lists of links in 5.5 https://make.wordpress.org/core/2020/07/09/accessibility-improvements-to- widgets-outputting-lists-of-links-in-5-5/

75. User's benefits: Focus Order  Make tabbing through a website as comprehensible as possible, i.e. logical and usable  Ensure that the order of content in the source code is the same as the visual presentation of the content  Success criterion 2.4.3, conformation level A

76. Focus Order: Failures  The tabindex attribute does not follow logical sequences  No use of CSS pseudo class :focus

77. Focus Order: How to  Avoid the use of the attribute tabindex  Create a meaningful sequence of the content in the source code  In CSS: if hover, then also focus: ...:hover, ...:focus { ... } or ...:hover { ... } ...:focus { ... }

78. Big helper: Resizing  To ensure that visually rendered text, including form fields, can be scaled successfully  For people with mild visual disabilities  For mobile device users  Does not require any assistive technology such as a screen magnifier  Success criterion 1.4.4, conformation level AA

79. Resizing: Failure  Use of the META viewport element with scaling lower than 200%  Disallow resizing via HTML: <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

80. Resizing: How to  Avoid the META viewport element  Or allow resizing via HTML with at least 200% scaling: <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=0.1, maximum-scale=10.0">

81. Check a11y: Validators  Not all aspects of accessiility can be checked by machines, but at least HTML code  W3C „Nu Html Checker“: validator.w3.org/nu  Accessibility Checker: WAVE wave.webaim.org  Text only Converter: Textise textise.net

82. Questions?

83. Thank you!

84. Thank you, dear artists! Photo by Artem Sapegin on Unsplash Photo by Max Duzij on Unsplash Photo by Jess Baley on Unsplash Photo by Mimi Thiam on Unsplash Photo by Marcos Luiz on Unsplash Photo by Tikkho Maciel on Unsplash

85. Thank you, dear artists! Photo by takahiro taguchi on Unsplash Photo by Jimmy Conover on Unsplash Photo by Kelly Sikkerna on Unsplash Photo by Sincerly Media on Unsplash Photo by Jon Tyson on Unsplash Photo by Vlad Bagacian on Unsplash

86. Thank you, dear artists! Photo by bruce mars on Unsplash Photo by Ashwini Chaudhary on Unsplash Photo by Ashton Mullins on Unsplash Photo by Florian Klauer on Unsplash Photo by Olena Sergienko on Unsplash Photo by Falaq Lazuardi on Unsplash

Essential html tweaks for accessible themes

You are reading a preview.

Check these out next

Essential html tweaks for accessible themes

More Related Content

Slideshows for you (20)

Similar to Essential html tweaks for accessible themes (20)

Recently uploaded (20)

Essential html tweaks for accessible themes