COMP 135 Web Site Design Intermediate

1. COMP 135Web Site Design Intermediate Week 8

2. Forms Form controls Accessibility with ARIA

3. <form> element Parent containing element for other form control elements Requires method and action attributes to process the information collected by the form Actions are usually scripts processed by the web server; can also be used to create an electronic mail message

4. Form Input Control Elements • Multiple ways to collect data • <input> element • <select>element • <textarea>element • type attribute for <input>element determines both its behaviour and presentation

5. <input> element type determines type of element text password checkbox radio file submit reset button

6. <select> element • Use when checkboxes and radio buttons become too inefficient • Choices defined by the <option> element • The label attribute can be used to present a shortened version of an option when appearing in an optgroup • Can be grouped using the <optgroup> element • The label attribute can be used to identify the options of an option group • Multiple selections allowed by setting multiple attribute to value of “multiple”

7. <textarea> element Function identical to the <input type=“text”> element but allows for multiple lines of text to be entered

8. name Attribute Data collected from form controls are associated to a value specified by the name attribute of the form control element that collected the information The name value is like a variable that contains the form input value

9. Accessibility for Forms Label element ARIA

10. <label> element • Used for marking up a form control’s descriptive text • Has no presentation value unless styled with CSS • Provides two features: • Usability • Improvement for mouse users – clickable area • Accessibility • Make a form control’s purpose clearer for users of assistive technologies

11. for attribute The glue that binds the text inside the label element with the form control it is related (explicit association) If you wrap a form control inside a <label> </label> you could skip the for attribute (implicit association) Best practice: do both

12. accesskey attribute • Allows control to be activated using a keyboard shortcut • Key combinations depend on operating system/browser combination • Alt + accesskey (IE/Windows) • Alt + Shift + accesskey (Firefox/Windows) • Ctrl + accesskey (Mac browsers) • Shift + Esc (Opera displays a list of links to controls with accesskey attributes defined)

13. Problems with accesskey • Invisible to user • Use title attribute to help user discovery via tooltip • Can clash with keystrokes in the operating system or other assistive technologies

14. WAI-ARIA A proposed W3C standard developed by the Web Accessibility Initiative group for creating an Accessible Rich Internet ApplicationSuite Goal is to create a set of attributes for improving accessibility of HTML elements to assistive technologies Make web applications accessible

15. A stop-gap solution until assistive technologies have better HTML5 support • WAI-ARIA provides: • Roles for widgets (navigation menus, sliders, progress meters) • Properties for identifying dynamically updated regions in web page • Ways to enable keyboard navigation • Roles to describe structure of page (headings, regions, tables)

16. WAI-ARIA Roles • Using role attribute we can replace the use of non-semantic class and id values • Example roles include: • banner, complementary, contentinfo, main, navigation and search

17. More on ARIA www.w3.org/WAI/intro/aria.php www.alistapart.com/articles/the-accessibility-of-wai-aria/