Jeanine Meyer [Jeanine Meyer] - HTML5 and JavaScript Projects: Build on your Basic Knowledge of HTML5 and JavaScript to Create Substantial HTML5 Applications

Screenshot successful completion of quiz

Screen readers are complex and provide options for customizing use. One screen reader I used spoke the names of the countries and capitals by themselves but another added the term group, which was tiresome. It is possible to use the Tab key with the Shift key to go back and forth hearing the country and capital names. However, screen readers do read the whole screen, including everything on my browser toolbar and this was repeated when clicking on the Tab key past the end of the document. My example shows how to include Tab information in dynamically generated HTML markup. I strongly recommend that when you continue your exploration of the use of screen readers and keyboard operation, study static HTML pages first and then move on to programs with dynamically generated HTML elements.

Before going into specific technical features, it is important for developers to consider the most important target audience of a planned application and the feasibility of the application in different situations. There is a notion called mobile first that recommends that the best approach if something is to be available on a mobile device is to design and plan the mobile implementation first as opposed to designing and implementing for a desktop and then making adjustments. Starting with the problem specification, including the most common device and user, and formulating a solution is a good strategy. Teachers and book authors often do something quite different: start with concepts and features we want to explain and design what we believe are interesting programs that use the features.

When youre designing a web application , it is important to consider that certain programs, such as ones featuring geolocation, are best for mobile. In contrast, a program requiring considerable text entry is best suited for desktops and laptops. A jigsaw puzzle is not for the visually impaired. However, the country/capital quiz , which I originally made for mouse or touch, can be adapted for keyboard operation. Thinking about different screens and different audiences can be a valuable way to determine what is critical for your application and the process of working toward responsive design and improving accessibility can benefit all audiences.

In this chapter, I focus on adapting to screen dimensions, ensuring that touch works in addition to or in place of a mouse, and supporting screen reader and keyboard-only operation for at least some applications. I also wanted to allow the user to resize and resize again the window to arbitrary width and height.

I will mention briefly features that can be useful for a variety of websites, generally having a static design.

You may expect to see code that checks for specific devices or device types by name, but that is not the recommended approach for many situations. Instead, if the critical properties to examine include screen width and screen height, then these measurements are checked directly. There are various ways to do that in HTML element properties, CSS rules and directives, and JavaScript code. You can learn, or at least be introduced to, many of the details in the HTML, CSS, and JavaScript features section.

Mobile devices typically do not have a mouse but instead depend on touch . The interpretation of a touch as a mouse click comes for free, that is, no additional coding is required and will be demonstrated in the Quiz example. The Reveal application, which is based on a mouse down, mouse move, and mouse up sequence of operations requires JavaScript code to support touch. The technique is to set up the touch events to simulate the appropriate mouse events.