Applications and Web Content Accessibility Accessible Web D

Applications and Web Content Accessibility Accessible Web D. 1 Techniques of Web Accessibility

Prerequisites • HTML • CSS • Javascript Brush up your skill https: //www. w 3 schools. com/

Section D: Introduction and Goals • Learn how to develop accessible HTML 5 web pages. • Details of accessible input elements and dynamic content • Different stakeholders will talk about their roles and challenges in the process of developing accessible web pages • Aspects towards inclusion, motivation to consider accessibility, implementation, benchmarking and monitoring accessibility of web sites • sectioning with HTML 5 elements, organization by headings and accessible navigation

Content • Part A: Introduction • Who benefits of accessible Web Pages

Introduction • https: //www. youtube. com/watch? v=20 SHv. U 2 PKs. M&t=3 s • Interview with Jutta Croll: illustrates How to monitor the inclusion of people with disability • Interview with Detlef Girke: illustrates how to make companies aware of web accessibility • interview with a software developer: illustrates how general accessibility principles affect the development of HTML, Javascript, CSS, etc • Interview with Mikael Snaprud: explains how web accessibility can be observed over

Who benefits of accessible web pages? • https: //www. youtube. com/watch? v=3 f 31 oufq. FSM • Users with special needs • All people , have equal rights with respect to participation and inclusion in work, education, and leisure.

Who is responsible for implementing accessibility? This involves all stakeholders of the system development life cycle: • Designers • Developers • Testers • Educators • Content editors

Digital Inclusion and Web Accessibility Jutta Croll is project manager and chair woman of the board of the Digital Opportunities Foundation (https: //www. digitale-chancen. de/index. cfm/lang. 2) She holds a university degree in political science, media science and German literature. She has done research in national and European projects concerning the use of digital media, youth protection and digital literacy, accessibility and usability. She is a member of several steering groups and advisory boards of European and national projects and works also in close co-operation with UNESCO, the European Commission and the Council of Europe.

Interview with Jutta Croll Questions to Jutta Croll: • What is Digital Inclusion? • How relevant is accessibility in this regard? • What can we do to encourage more people to think inclusively and build accessible web pages?

Motivation to make a Web Page more Accessible • Sonja Weckenmann checks web sites with the BITV test regarding to their accessibility and gives advice to agencies and providers. Furthermore, she works in the project BIK - barrierefrei kommunizieren und informieren (Informing and communicationg barrierfree) which is graint-aided by the german Federal Ministry of Labour and Social Affairs where she is responsable for the test development.

Interview with Sonja Weckenmann Questions to Sonja: 1. What are encouraging/convincing factors for enterprises to make their products - in particular web page - (more) accessible? 2. What are the challenges for enterprises concerning the embodiment of accessibility in the development of their new web pages (or new IT products more generally)? 3. At which point do the enterprises usually decide to consider and test the accessibility of a web page? What is the recommended implementation process?

Challenges to Implement Accessibility • Jan Blüher studied Computer Sciences at the TU Dresden. After finishing his diploma in 2002, he stayed at the university and worked as Ph. D and Postdoc on several problems in computational materials sciences. Since 2011, Blüher runs the start-up software company visor. Apps that has a strong focus on developing accessible mobile apps for the i. OS and Android platform.

Interview with Jan Blüher Questions to Jan Blüher: 1. You are a professional IOS developer and your expertise is one accessible apps. Can you explain the process and challenges to make mobile apps accessible? 2. Can you recommend guidelines or toolkits that facilitate developers in making their products more accessible? 3. From your perspective, what are the challenges to implement accessibility standards successfully into software products?

Benchmarking Web Accessibility Mikael Snaprud is associate Professor of Computer Science at the University of Agder in Norway (www. uia. no), and the CEO of Tingtun AS (www. tingtun. no). In both capacities he is active in ICT research, with a particular focus on evaluations of e-government and eaccessibility.

Interview with Mikael Snaprud Questions to Jan Mikael: 1. Can you explain mechanism to benchmark web accessibility? 2. What is the (positive) effect of benchmarking web accessibility? 3. Web pages are not static. They are developed further and content is frequently edited. Is there a monitoring process for web accessibility? (What can be done to ensure developers or editors do not produce new barriers after web page have been released and tested?

Accessible HTML 5 Templates Visually well desiged web pages become overly complex and may be inaccessible, if users access it by speech only, by braille displays showing 40 characters at a time, or at a magnification factor of 6 when only three lines of text and 8 characters become visible on a 24 inch screen.

Create a basic logical HTML structure • More users deal with the visual presentation of web content. • Although, AT(Assistive Technology) deals with the semantics of its elements on order to present the web page to users of the AT.

A Basic Structure Basic parts of an HTML file are: <!DOCTYPE HTML> <html lang="en"> <head> <title>Accessible HTML 5 Template </title> </head> <body></body> </html>

Semantic Structure of the Content An example of HTML sectioning elements: <body> <header>. . </header> <nav>. . . </nav> <main>. . . </main> <aside>. . . </aside> <footer>. . . </footer> </body>

ARIA roles as compared to HTML 5 sectioning elements <body> <div role="banner">. . . </div> <div role="navigation">. . . </div> <div role="main">. . </div> <div role="complementary">. . . </div> <div role="contentinfo">. . . </div> </body>

Combine HTML 5 and ARIA • <body> <header role="banner">. . . </header> <nav role="navigation">. . . </nav> <main role="main">. . </main> <aside role="complementary">. . . </aside> <footer role="contentinfo">. . . </footer> </body

Organize Contents with Sections, Articles and Headings • An example of grouping articles within section elements: <main role="main"> <section> <h 2>About us</h 2> <article> <h 3>Philosophy</h 3> <p>lorem ipsum. . . </p> </article> <h 3>Team</h 3> <p>lorem ipsum. . . </p> </article> </section> <h 2>Projects</h 2> <article> <h 3>Project 1</h 3> <p>lorem ipsum. . . </p> </article> <h 3>Project 2</h 3> <p>lorem ipsum. . . </p> </article> </section> </main>

Using article without section: An example of using article without section: <main role="main"> <article> <header> <h 2> My first article </h 2> <address> by Jane Doe </address> </header> <p> lorem ipsum. . . </p> </article> <div> <h 2> Comments </h 2> <ul> <! -- comments --> </ul> <form> <!-- comment form --> </form> </div> </main>

An example using sections without article: <main role="main"> <article> <header> <h 2> History of HTML </h 2> <address> by Jane Doe </address> </header> <section> <h 3> Tim Berners-Lee </h 3> <p> Lorem ipsum. . . </p> </section> <h 3> Versions </h 3> <p> Lorem ipsum. . . </p> </section> </article> </main>

Accessible Navigation You can use the special HTML 5 element <nav></nav>, the WAI-ARIA role attribute (role=“navigation”) , or you can combine both variants as shown below: <body> <nav role="navigation">. . . </nav> </body>

Accessible Navigation Continues WAI ARIA defines a label attribute (aria-label=“function of the menu”) describing the core purpose of the navigation element. <body> <nav role="navigation" aria-label="main menu" > <h 2 class="invisiblelabel">Main Menu</h 2> </nav> </body>

CSS to make the heading invisible: • . visuallyhidden { margin: -1000 px; position: absolute; }

Navigation items itself should be represented as list <body> <nav role="navigation" aria-label="main menu" > <h 2 class="invisiblelabel">Main Menu</h 2> <ul> <li><a href=". . . ">Link 1</a></li> <li><a href=". . . ">Link 2</a></li> <li><a href=". . . ">Link 3</a></li> </ul> </nav> </body>

Excercise Content Structuring <!DOCTYPE HTML> <html lang="en"> <head> <title> Exercise – Structuring Content </title> </head> <body></body> </html>

Make your Web Page Pretty Listing 1 - Bad practice of presenting a heading: <head> <style>. heading { font-size : x-large; font-weight : bold; colour : green; } </style> </head> <body> <p class="heading">Listing 1</p> <p>Lorem ipsum. . . </p> </article>

Make your Web Page Pretty (continue) Listing 2 - Good practice of presenting a heading: <head> <style> h 2 { color : green; } </style> </head> <body> <article> <h 2>Listing 2</h 2> <p>Lorem ipsum. . . </p> </article> <body>

Basic Accessible CSS Styles For instance: - text sizes must be adjustable up to 200 percentage - meaningful information must not be presented colourful, - or colours must meet a minimum contrast ratio

Colour Contrast Ration • Contrast ratio between the foreground and background colour of 4. 5: 1 • There are several tools available to check if the colour contrast of your web page comply with the required ratio. For Example: WAVE (http: //wave. webaim. org/)

Relative Text Sizes Relative font sizes in CSS: body { font-size: 100%; } h 1 { font-size: 0. 875 em; } h 2 { font-size: 0. 750 em; } p{ font-size: 0. 688 em; }

Relative Images Size Relative image size: img { height: auto; max-width: 100%; }

Accessible Multi-Column Layout With regard to accessibility you must consider two things: 1. CSS-based layouts are recommended in order to make your web site accessible to the broadest range of assistive technologies users. 2. you must ensure that contents does not become incoherent when visual layout is turned off.

Accessible Multi-Column Layout: Example Html source of the two elements main and aside that shall be arranged next to each other: <body> <main role="main"> <section> <h 2>Main Content</h 2> <article>. . . </article> </section> </main><aside role="complementary"> <section> <h 2>Additional Content</h 2>. . . </section> <section>. . . </section> </aside> <body>

CSS definition of two elements that are presented next to each other: * Multi Column Style*/ main { display: inline-block; width: 50%; margin: 5%; text-align: justify; vertical-align: top; } aside { display: inline-block; width: 30%; margin: 5%; vertical-align: top; }

Exercise: Style a Web Page In this exercise we want to apply the imparted knowledge on styling your web page with CSS. Therefore you shall consider appropriate colors which meet the contrast ration of 4. 5: 1. The main content shall be emphasized and supplementary information shall not be distract from the main content. Choose and implement colors for the areas header, main, aside and footer. Arrange the navigation items next to each other. Heading 1 (h 1) shall be 18 pt, h 2 shall be 16 pt and plain text shall be 12 pt. Use relative font sizes. The example html code to which the styles shall be applied is presented in Listing 1

Accessible Forms You will learn: • Basics of creating accessible HTML forms that can be operated by everybody • how to use different input elements to gather the desired data • And how to structure them into a logical order

Getting started A typical mock-up for a user registration form could look like this:

Create new form The main goal of this week is to create the specified form step by step. To start with, create a new HTML file with the following content: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>New user registration form</title> <script type="application/javascript"> </script> </head> <body> <h 1>Create New User</h 1> <form action="your_location_here. php" method="post"> <input type="submit" value="Submit"> </form> </body> </html> If you load this file with a browser, the result will look like this:

Form elements for input Before HTML 5 the following attributes were available: Button, checkbox, file, hidden, image, password, radio, reset, submit, text HTML 5 extended the input tag with the following types: Color, datetime, datetime-local, email, month, number, range, search, tel, time, url, week

Labelling Form Controls To start with we are going to look into the most common used input-type, the textfield: Code: Name: <input type="text" > Rendered in Browser:

Advantages of Labelling controls: Important for: • • People with Cognitive Disabilities People using speech input can use labels People with limited dexterity benefit from large clickable areas People using screen readers can identify and understand form controls more easily

Hiding the label In most use case scenarios it is necessary to visible display the label to the user. But there are exceptions where hiding the label can make sense. An example for that would be a search field: Code <input type="text"><input type="submit" value="Search"> Rendered in a browser:

Buttons in form can either be declared using an input-element with the type-attribute set to button or submit or with the button tag. For the button element the label is set inside the mark-up: <button>Search</button>

Other form elements In this session we will continue to go through some of the input elements we have not discussed so far. We discuss: • • • Radio Buttons Select Passwords Placeholders Self-defined user elements

Select Example: <label for="favorite_color">Favorite color: </label> <select name="favorite_color" id="favorite_color"> <option>Red</option> <option>Blue</option> <option>Green</option> <option>Other</option> </select>

Passwords Example: if you use the appropriate control and a proper label, it is accessible by default: <label for="user_password">Password: </label><input type="password" id="user_password">

Placeholders • It represents short hint intended to help user in data entry • A hint could be a sample value or a brief description of the expected format: <input type="text" placeholder="email@example. com" >

Assignment: Create your Own Form We specified in one of the first steps our form with the use of a mockup: In this assignment it is your task to realize an accessible form that implements this mock-up. .

The accessible widget problem In that problem, If you open with Google Chrome and use screen reader like NVDA, you will notice that HTML 5 date-field is not accessible: Trying the form in another browser, e. g. Firefox will result in a date-type input element that is rendered like a text-type input element:

Structuring your form Right now our form should look like this:

Use of Fieldset element

Form validation If the required input has to be in a certain format, for example the birthday of the user, an explanation of the excepted format has to be given. <label for="birthday">Birthday(Format: DD/MM/YYYY)</label><input type="text" id="birthday"> Required fields also have to be marked as required. This can be done within the label using the * symbol or directly with the word “required”. Here is an example for that:

Server side form validation If the user enter data in wrong format then server should display the form once more after submit: Example

Client Side Form Validation Example: With pattern attribute programmers can form a regular expression of the desired input format:

Finish your form In this final assignment it is your task to further enhance the form you created: Structure the form with the use of fieldsets Mark the following input fields as required: • Username • Password • First Name • Surname • Email Create a client side form validation for the ZIP-Code, accepting 5 digits only.

Credits • This content taken from MOOCAP course.